自分のブログをレスポンシブWebデザインに対応させるには

 スマホを所有する人が増えたことで、モバイルからのアクセスが増えてきました。このため、PCではPC用のデザインを、スマホにはスマホ用のデザインを用意しなければならなくなりました。 …[続きを読む]

WordPressでのレスポンシブ画像ってどうなってるの?

モバイルからのネットアクセスが増加したことにより、WordPress 4.4からデフォルトでレスポンシブ画像に対応するようになりました。画面サイズに適した画像のみをダウンロードすることで通信量の低減を行い、ユーザーの離脱を防ぐ効果があります。思った以上に簡単に導入できるのでおすすめです。 …[続きを読む]

レスポンシブWebデザインで画像をどのように扱ったらよいのか

 2015年に Google がスマホに対応しているサイトを検索結果で優遇するアルゴリズムを導入したことで、多くのウェブサイトにおいてモバイルフレンドリー化が進んできました。ジャンルによってはアクセスの6割がモバイルであるという調査も出ており、これからもこの傾向は進んでいくものと考えられます。 …[続きを読む]

なぜsizesで表示サイズを指定できるという間違いがまかりとおるのか

「sizes はグリッドデザインで使うと便利だよ~」というコメントを見かけたのですが、グリッドデザインについて不勉強な私にはなにが便利なのかよくわかりませんでした。ただ、sizes で表示サイズを指定できるという説明だけはちょっと違うんじゃないかなと思ったので、sizes についてまとめてみました。 …[続きを読む]

なぜフルードイメージではmax-widthを100%にしているのか?

スマホでのネット利用者の増加により、ウェブサイトのレスポンシブ対応が必要になってきました。画像に対してはフルードイメージを導入しますが、ネットで調べると次のようなソースコードが出てくるはずです。 …[続きを読む]

画像のレスポンシブ対応でsizes属性を使う際に注意すること

ごく稀になんですが、画像を常にビューポートの幅80%で表示するには sizes 属性を使って次のように記述すればよいという説明を見かけることがあります。 …[続きを読む]

レスポンシブWebデザインがうまく動作しないときにチェックしてみること

 スマホによるネット利用の増加と Google 検索アルゴリズムの修正により、多くのサイトがレスポンシブ Web デザインに対応するようになりました。出来合いの HTML テンプレートや WordPress テーマはともかく、自分でレスポンシブルにしようとしたときにはテストをしなければなりません。 …[続きを読む]

レスポンシブ対応に必須!シンプルな折りたたみ式メニューを作ってみた

 スマホからインターネットを利用する人が増えてきたことで、Google もモバイル向けページの評価に基づいて検索順位を決定する「モバイルファースト」に重点を置くようになってきました。画面サイズによってブレイクポイントを設定して CSS の設定を切り替えるわけですが、ブログやウェブサイトで定番のグローバルナビゲーションのレスポンシブ対応はちょっと難しかったりします。 …[続きを読む]

Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP