お問い合わせblogHOMEblogデザインサイトをレスポンシブデザインに変更しました2014.07.02(デザイン)サイトをレスポンシブデザインに変更しましたこのブログを始めて2年半くらいそのままのデザインでしたので、さすがに飽きてきました。そこで仕事の合間をみてリニューアルすることに。リニューアルに重要視したのは3点1.レスポンシブデザインにする※1つのソース(HTML言語)でPCやタブレット、スマートフォンなど、どのデバイスから閲覧してもその端末のサイズに合わせて自動的に最適化されていること2.インブラウザデザインで構築する※ブラウザ上でデザインすること3.iPhoneでもAndroidでもサクサク動くスライドメニューを設置する※Facebookアプリなどで使用されているメニューレスポンシブデザインフレームワークでBootstrapを使用。Bootstrapあらかじめ様々な要素のCSSがあるため、時間短縮したいときなどに最適です。Bootstrapの使い方など勉強したい方はドットインストールがおすすめです。プログラミングならドットインストールインブラウザデザイン通常はPhotoshop等のアプリを使用してワイヤーフレーム→デザイン→画像等のスライス→コーディングという流れですが、「アプリでデザインの工程」をすっ飛ばし、ブラウザ上でデザインしました。モバイルファーストの概念のもと、今回はさらにワイヤーフレーム(レイアウトの下書きみたいなもの)も作成せず、自分の頭のなかにあるものを直接ブラウザ上で具体化して調整しました。Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。最初は慣れない分、手こずりましたが2時間くらい経つころには感覚も慣れていき、かなりスムーズに。紙にでもある程度のイメージを書いていたほうがもっとスムーズになっていたかな。今回、これが一番時間かかりました。iPhoneだけなら問題なかったのですが、Androidが少しやっかいで。transition、transform系のCSS3アニメーションはまだ使用しないほうがいいのかもしれないです。当初は横からニュルッと出てくるメニューにしていましたが、アニメーションを全てオフにしました。下記のライブラリを少しカスタマイズして使用させていただきました。ありがとうございます。Codrops他に気をつけたこと極力画像を使用せずにWebフォントを使用しました。TwitterやFacebookのアイコンは画像ではなくWebフォントを使用しています。toolkitあとは、これまで使用していたWordPressのプラグインを減らしていき、、各デバイスに最適な画像を表示するように調整していきました。ブログなのであまり派手にならないよう可読性を重視しています。古いブラウザなど、対応しきれていない箇所もありますが、アクセス解析をもとにアクセスがあまりというか全然ないので、InternetExplorer6,7は完全対応はしていません。_)mレスポンシブデザインってどうなんだ?Googleが推奨している手法ですが、個人的にはまだまだ疑問がある手法なので、実験的に自らのサイトを対応させていろいろ試してみたいと思います。ぱいぱに石垣島」Firefoxで下に隙間や空白ができる場合の対処法(clearfix対策以外)[CSS]CSSのリンク要素a:hoverにopacityを設定している場合、スマホでは2タップ必要になる?から注意。PostsLINE連動のゲームアプリを削除した後にやっておいたほうがいいこと。[Windows]文字が打てない(入力できない)や固定キー機能が解除できない場合[windows]プリントスクリーンボタンを押したらなぜか印刷される場合LINE連動のアプリ(LINEPOPやLINEバブル)の通知をオフにする方法。