レスポンシブデザインで右側に謎の空白ができる訳
スマホからのネットアクセスが増えたことで、Webデザインをしている人はレスポンシブ対応にしているかと思います。最近ではPCからのアクセスより多いサイトもあるようで、レスポンシブデザインの重要性はより高まっていくのでしょう。 …[続きを読む]
よくわかってないけどsectionとarticleとasideについてまとめてみた
WebサイトをHTML5に対応させようとすると、section・article・asideの使い方に結構悩まされます。これらはドキュメントを構造化するためにHTML5から導入されたものですが、「よくわからないからdivのままでいいや」となりがちです。 …[続きを読む]
自分のブログをレスポンシブWebデザインに対応させるには
スマホを所有する人が増えたことで、モバイルからのアクセスが増えてきました。このため、PCではPC用のデザインを、スマホにはスマホ用のデザインを用意しなければならなくなりました。 …[続きを読む]
レスポンシブWebデザインで画像をどのように扱ったらよいのか
2015年に Google がスマホに対応しているサイトを検索結果で優遇するアルゴリズムを導入したことで、多くのウェブサイトにおいてモバイルフレンドリー化が進んできました。ジャンルによってはアクセスの6割がモバイルであるという調査も出ており、これからもこの傾向は進んでいくものと考えられます。 …[続きを読む]
なぜsizesで表示サイズを指定できるという間違いがまかりとおるのか
「sizes はグリッドデザインで使うと便利だよ～」というコメントを見かけたのですが、グリッドデザインについて不勉強な私にはなにが便利なのかよくわかりませんでした。ただ、sizes で表示サイズを指定できるという説明だけはちょっと違うんじゃないかなと思ったので、sizes についてまとめてみました。 …[続きを読む]
なぜフルードイメージではmax-widthを100％にしているのか？
スマホでのネット利用者の増加により、ウェブサイトのレスポンシブ対応が必要になってきました。画像に対してはフルードイメージを導入しますが、ネットで調べると次のようなソースコードが出てくるはずです。 …[続きを読む]
画像のレスポンシブ対応でsizes属性を使う際に注意すること
ごく稀になんですが、画像を常にビューポートの幅80％で表示するには sizes 属性を使って次のように記述すればよいという説明を見かけることがあります。 …[続きを読む]
レスポンシブWebデザインがうまく動作しないときにチェックしてみること
スマホによるネット利用の増加と Google 検索アルゴリズムの修正により、多くのサイトがレスポンシブ Web デザインに対応するようになりました。出来合いの HTML テンプレートや WordPress テーマはともかく、自分でレスポンシブルにしようとしたときにはテストをしなければなりません。 …[続きを読む]
CSSでblockquoteを引用符付きでお洒落にカスタマイズする方法
ニュースや論文系のブログであれば、ほかのウェブサイトなどの文章を引用する機会が多いと思います。他所からのコピーですよ、ということを検索エンジンにきちんと知らせるために blockquote で囲みますが、枠線を付けたり背景色を変えるだけの単純なデザインではイマイチ味気ないものです。 …[続きを読む]
1ページ内にH1はいくつ使っても大丈夫なのか？
かつては SEO にとって重要であった H1 タグですが、Google から「いくつ使っても検索順位には影響しない」との公式アナウンスがあったことから、以前ほど神経質になる必要はなくなったように思います。とはいったものの、訪問してくれるユーザーに伝えたい情報を知らせるのに便利なものであることに変わりはないので、どのように使ったらよいのかを考えてみたいと思います。 …[続きを読む]
レスポンシブ対応に必須！シンプルな折りたたみ式メニューを作ってみた
スマホからインターネットを利用する人が増えてきたことで、Google もモバイル向けページの評価に基づいて検索順位を決定する「モバイルファースト」に重点を置くようになってきました。画面サイズによってブレイクポイントを設定して CSS の設定を切り替えるわけですが、ブログやウェブサイトで定番のグローバルナビゲーションのレスポンシブ対応はちょっと難しかったりします。 …[続きを読む]
display:inline-blockの隙間の理由と消す方法
グローバルナビゲーションや SNS ボタン、ページネーションを実現する場合、div や li といった要素を横に並べることになります。このとき、float や inline-block を使うことになるのですが、inline-block を使って横並べにする場合には、ひとつ注意しなければならないことがあります。 …[続きを読む]
floatの解除は忘れずに
最近のブログではお馴染みのグローバルナビゲーションやページネーション、SNS ボタンなどは要素を横に並べるで実現されますが、要素を横並べにする方法として float はよく使われてきました。最近では inline-block や table-cell などが主流になりつつあるようですが、まだまだ float を使っているホームページはたくさんあります。 …[続きを読む]
floatで横並べにしたものを中央に配置したい
リストなどのブロック要素を横並びにするには float や inline-block を使うと思いますが、これら横並びにしたものをまとめて中央に配置したいことがあると思います。幅が決まっている場合にはそれほど難しくないのですが、ページネーションのような記事数によって横幅が変化するものの場合、結構難易度が上がります。 …[続きを読む]
inline-blockで要素を横並びにする
HTML において、ブロック要素は縦に並ぶという性質を持っています。これはブロック要素が文書構造においてひとつの塊や段落として扱われるため、前後に改行が挿入されるためです。これを横並べにしたければ、本来であればインライン要素に分類されるタグに変更するのが筋だと思うのですが、WordPress や各種ブログサービスでは出力されるタグが固定されているため、ブロック要素を横並べにしなければならない場面もあるかもしれません。 …[続きを読む]
