CSSグリッドレイアウトには専用のCSSプロパティがあります。
似たような字面のプロパティががいくつもあるので、紛らわしくてわかりにくいと感じませんか？
そこで、CSSグリッドレイアウトで利用する各プロパティを一つずつていねいに解説していきます。
イチから覚えるのに、ブックマークして忘れた時の辞書代わりに、ご活用ください。
[詳説] CSSグリッドレイアウトで使うプロパティ一覧
今度こそわかった! CSSグリッドレイアウトの作り方と基本知識
CSSグリッドレイアウトを採用するWebサイトが増えてきています。
しかし、floatプロパティを中心とした従来型のレイアウト手法とは大きく異なるため、なかなか理解しづらい部分があるかもしれません。
この新しいWeb制作手法を理解するには、基本的な考え方から理解することが習得のポイントです。
今回は、グリッドレイアウトの基礎知識から基本的な実装方法までを確認していきます。
続きを読むWeb高速化に必須！ ブラウザキャッシュの仕組みと設定方法
Webサイトの高速化技術の古参にして強力な手段がキャッシュの設定です。
基本中の基本ではあるものの、その仕組みについては実はよくわかっていないことも多かったり。
そこでキャッシュの仕組みや設定について基本的なことをまとめてみました。
実は奥が深いな、キャッシュの世界。
gzip圧縮でファイルサイズを削減してWebサイトを高速化する方法
サーバーにあるWebサイトのデータを圧縮してクライアント（ブラウザ）に送信する仕組みは、サイト運用における基本的な施策の1つです。
しかし、何でもかんでもファイルを圧縮して送信すれば良いというわけでもありません。
サーバーでgzip圧縮を設定する方法と気をつけておくべきポイントなどについて紹介します。
これが新常識！ レスポンシブな画像切り替え方法まとめ
レスポンシブサイトでブラウザ環境に応じて画像を切り替えるには、サイトによって様々な方法で対処されていました。
これまでの方法が抱えていたデメリットと現在（これから）の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。
[最新版] CSSでできる画像レスポンシブの対応方法と実装範囲
レスポンシブ対応における問題の1つに画像最適化の問題がありますが、HTMLやCSSのバージョンアップに伴い新たな策定も生まれ、レスポンシブデザインに便利な機能が整備されてきています。
基本的な画像レスポンシブ表示、古くなりつつあるCSS画像切り替え、高解像度ディスプレイに対応するためのメディアクエリなどの話を中心に、現在のCSSにおけるレスポンシブ対応について改めてまとめました。
pictureタグを使ったレスポンシブイメージの実装方法
画像のレスポンシブ対応には、これまでずっとベストな解決策と言えるものはありませんでした。
しかし、ようやくレスポンシブサイトにおける画像最適化の問題に決着がつきそうです。
それが、picture要素によるレスポンシブイメージの実装です。
複雑なスクリプトを使うことなく、HTMLだけで画像を切り替えられる picture 要素の書き方と実践的な使い方を紹介します。
srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法
レスポンシブデザインを採用しているWebサイトでは、デバイスごとに適正なサイズ（解像度）の画像を読み込ませる、という課題があります。
特に、高解像度のスマートフォンが登場したことで、画像がぼやけてキレイに表示されないと言う新たな問題も出てくるようになりました。
表示サイズの調整に加え、高解像度ディスプレイへの対応という2つの点から画像を最適化するのが常識になってきています。
以前なら、こういった問題に対応するには JavaScript を用いた面倒な実装が必要でしたが、現在はHTMLだけで解決することができます。
それが srcset や sizes 属性の利用です。
この記事では srcset とsizes 属性の書き方・使い方について詳しく解説していきます。
少し慣れが必要かもしれませんが、非常に便利な機能です。
続きを読むレンダリングブロックを解決するCSS配信の最適化と手順
Google Page Speed Insights がアドバイスしてくれる改善案に『スクロールせずに見えるコンテンツのレンダリングをブロックする JavaScript/CSS を排除する』という項目があります。
何のことを言っているのかよくわからないので放置…
という方も少なくないのではないでしょうか？
レンダリングのブロックとは一体何か？
どうやってこの問題をクリアすればよいのか？
今回は、レンダリングをブロックするCSSの最適化について、Googleも推奨している loadCSS 関数を用いた解決策を紹介します。
CSSの配信を最適化すると、ページの表示速度が目に見えて改善されることが多いので、ぜひ対策方法を知っておきましょう。
SEOにおける重複コンテンツの定義と判定基準
SEOの話題の中でも常に関心の高い話題に、重複コンテンツの問題があります。
2011年（日本では翌年）にパンダアップデートがリリースされ、低品質なページは評価が下がり、検索順位が落ちていきました。
それ以降、コンテンツの品質を高めることがSEOで最も重要な課題となり、重複するコンテンツへの対策にも一層注目が集まるようになりました。
おそらく、重複コンテンツと無縁でいられるWebサイトはほとんどないでしょう。
それくらい、どんなサイトにも起こり得る「あるある」な問題です。
具体的にはSEOにどんな影響があるのか、そもそもどこからが重複コンテンツの扱いになるのか、重複コンテンツの定義について改めて正しく理解しておきましょう。