CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ - Yukihy Life
最近よく見る、スマホのときに横スクロールをするメニュー。 作り方をメモしたいと思います！ 実装図・メリット カスタマイズ レスポンシブ（PC+スマホ） スマホ その他のカスタマイズ 色の変更 メニューの横幅・縦幅の変更 最後に 実装図・メリット イメージとしては、PCでは一般的なメニューになり、 画面の横幅が狭くなると、こんな感じで横スクロールをするようになるメニューです。 ちなみに、同じコードをはてなブログのスマホの方に入れると、こんな感じになります（動きは上と同じです）。 このメニューのメリットとしては、 トグルメニューのようにタップしなくても、はじめから数個のカテゴリが見えている Javascriptを使っていないので、回線が不安定なところでも比較的表示が崩れにくい はてなブログ以外でも使える 逆にデメリットは、 スクロールできるのか気付かれないかもしれない 狭い範囲での操作となるの
PHP・MySQL初心者がWordPressで開発を行うために読んできた本やサイトの紹介！ - Yukihy Life
ブログとWebサービスの間のようなものを作るために、WordPressを使ってWeb開発を行っています。 その際に参考になった本当サイトを紹介したいと思います！対象はHTMLとCSSが分かる程度の人間です。 ローカル環境をつくる WordPressの理解 【記事】はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました 基礎からのWordPress PHPとMySQLの理解 【本】よく分かるPHPの教科書 さらに本を読んでWordPressについて理解を深める WordPressプラグイン開発のバイブル WordPressによるWebアプリケーション開発 まとめ ローカル環境をつくる WordPressはサーバーとドメインが必要になりますが、レンタルサーバーを使うなどすることで費用がかかっていまします。 そこでローカルにWordPressの環境をつくるため、M
CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、 現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると
Evernoteでブログを書く利点とEvernoteを使ったブログの書き方 - Yukihy Life
ちょっと内容が飛びましたが、Evernote連載の３つ目です。僕がブログ執筆をEvernoteで行っている理由と、その方法を書いていきたいと思います。 連載目次 Evernote整理術&活用法 整理しやすい環境づくりでマメじゃなくてもでもできる活用方法 - Yukihy Life Evernoteでタグを使ったおすすめの整理術&活用法 - Yukihy Life Evernoteでブログを書く利点とEvernoteを使ったブログの書き方（今ここ！） Evernote小技集・他とのサービス連携などちょっとした工夫で圧倒的に使いやすくする - Yukihy Life Evernoteでブログ執筆をする理由 はてなブログのエディターはオンラインでしかできない はてなブログはEvernote連携ができる Evernoteコンテキスト機能で、記事を深められる Evernoteを使ってのブログ執筆の仕
Facebookで新規アカウントをとらなくても個人アカウントと繋げずにブログ用のページを作る方法 - Yukihy Life
今日はクリスマスですね！まあそれは置いといて、どうしようか迷っていたのですが、今後もしばらく続けることを考えてFacebookのページをつくってみました！ 本当はもっと前から作ってみたかったのですが、ブログとリアルな世界を繋げたくなかったので、実名でしか使えないフェイスブックは諦めていたんですよね。本名以外でフェイスブックのアカウントをつくるのはアウトですし。 Facebookのページ機能 Facebookページの作り方 ページをブログに埋め込む 自分の投稿をシェアする まとめ Facebookのページ機能 そう思っていたら、フェイスブックには昔から「ページ」機能というものがあることを知って、どうやらこの機能を使えば、アカウントは自分のままで自分のアカウントと繋げないものんを作れるみたいです。 個人アカウントとは繋げずに、こういったページをつくることが可能。記念すべき0いいね！ もともとこ
CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
12/07：その他のカスタマイズを充実させました。 以前、グローバルメニューとトグルメニューを両立してレスポンシブスタイルにするメニューバーを作りました。 以前の記事 www.yukihy.com このメニューバー、CSSを勉強したてに作ったものなので、若干の不満な点などが残ったりしていました。例えば「タイトル下」の部分に広告を入れるとトグルメニューのときにデザインが崩れたりすることです。 また、メニューバーにドロップダウンメニューにできないかとのご質問もいただいたので、合わせて修正版のやり方を記事にしたいと思います。 はてなブログ向けですが、全く同じコードで他のブログサービスでも使えるのではないかと思います。 カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLの中にリン
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
Feedlyで購読したい!ブログ初心者が継続的に学べるWebマーケティングやSEO関係のブログ６つ - Yukihy Life
ブログを始めて半年経過して、その間、自分なりにいろいろと勉強させていただいてきました。 特にWeb集客系のブログなどは、見つけるたびにFeedlyに登録し、今ではWeb集客系だけで40以上の登録になっています。もちろん全記事見ている訳ではないのですが、こういった生活を継続的に行っていると、ド素人でもある程度学べてくるんです。 人間、ある分野のスペシャリストになるなら一万時間費やせとよく言われますが、どこかのライフハック系の記事で見たように、ある程度知っているぐらいになるのならば、20時間程度でも達成できます。 今回紹介するのは、主にスペシャリスト志望ではないブログ運営する人が、WebマーケティングやSEOに関して継続的に学んでいけるようなものを紹介したいと思います。企業のWeb担当者さんには物足りないかもしれません。 ぜひFeedlyに入れて活用してみてください。 もはや購読必須のブログ２
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
