display: gridを調べてみる
最近、flexboxを使ってサイトを作ることが多いですが、
この間、flexboxではレスポンシブ対応するのに、難しいサイトを作成しました。
仕方ないので、久しぶりにfloatを使ってサイトを作成しました。
もっといい方法ないかなと思って、調べたところ、display: gridっていうものがあるみたいなので、ちょっと調べてみました。
display: gridとは
flexbox、table同様にマルチカラムレイアウトが可能なプロパティー
flexboxが一次元的なレイアウトに対して、gridは二次元的なレイアウトが可能。
対応ブラウザ
だいたいのブラウザで対応しているみたいですね。
用語
html要素が作る構成物
コンテナ
グリッド全体を囲む要素。
display: grid; かdisplay: inline-grid; を指定すると、その要素は Grid Layout のコンテナになる。
アイテム
コンテナの子要素。
コンテナの直接の子要素は基本的にすべてアイテムになる。
<div style="display:grid;"> <!-- コンテナ -->
<div></div> <!-- アイテム-->
<p></p> <!-- アイテム -->
<div> <!-- アイテム -->
<div></div> <!-- これはアイテムではない -->
</div>
</div>
その他の構成物
ライン
グリッドを分ける垂直および水平の線のこと。
グリッドの上下左右それぞれの両端にも存在する。
ラインには、上あるいは左から1から順に正の番号が振られている。
同時に、下あるいは右からは-1から順に負の番号が振られている。（0という番号のラインはない）
トラック
グリッドの行および列のこと。
言い換えればトラックは、隣接する2本のラインの間を表す。
セル
隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位。
エリア
一つあるいは複数のセルが結合してできるセルの集まり。
エリアには名前を付けることができ、アイテムを配置できる。
プロパティ
コンテナ
grid |
要素をグリッドコンテナとして定義する。 |
grid-template-columns |
グリッドトラック（列）のサイズを指定する。 |
grid-template-rows |
グリッドトラック（行）のサイズを指定する。 |
grid-template-areas |
グリッドエリアの名前を参照して、グリッドテンプレートを定義する。 |
grid-template |
grid-template-columns、grid-template-rows、grid-template-areasを指定できるショートハンド。 |
grid-column-gap |
グリッドトラック（列）の間を指定する。 |
grid-row-gap |
グリッドトラック（行）の間を指定する。 |
grid-gap |
grid-column-gap、grid-row-gapを指定できるショートハンド。 |
justify-items |
グリッドアイテムの行方向の整列。 |
align-items |
グリッドアイテムの列方向の整列。 |
justify-content |
グリッドトラックの行方向の整列。 |
align-content |
グリッドトラックの列方向の整列。 |
grid-auto-columns |
自動的に生成されたグリッドトラックのサイズを指定する。 |
grid-auto-rows |
自動的に生成されたグリッドトラックのサイズを指定する。 |
grid-auto-flow |
明示的に配置されていないグリッドアイテムの配置を指定する。 |
アイテム
grid-column-start |
グリッドアイテム（列）の開始位置を指定する。 |
grid-column-end |
グリッドアイテム（列）の終了位置を指定する。 |
grid-row-start |
グリッドアイテム（行）の開始位置を指定する。 |
grid-row-end |
グリッドアイテム（行）の終了位置を指定する。 |
grid-column |
grid-column-start、grid-column-endを指定できるショートハンド。 |
grid-row |
grid-row-start、grid-row-endを指定できるショートハンド。 |
grid-area |
グリッドセルに名前を付けてgrid-template-areasプロパティで参照できるようにする。grid-column、grid-rowのショートハンドでもある。 |
justify-self |
グリッドアイテム内のコンテンツを行方向に整列する。 |
align-self |
グリッドアイテム内のコンテンツを列方向に整列する。 |
まとめ
色々なレイアウトに対応できそうなので、これから使っていこうかなと思います。
SEOの対策方法について、簡単にまとめてみる
SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。 検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指す。
１：タイトルタグについて
タイトルタグに記述したタイトルは、検索結果やウェブブラウザのタブに表示され、ユーザーやクローラーがどんなwebページか認識するのに役立つ。
タイトルタグの文字数は30文字程度に収める。収まり切らない場合、「・・・」のように省略されてしまったり、変更されてしまう可能性がある。
タイトルタグは、検索エンジンやSNSから直接来た人向けや、検索エンジンのロボット等に向けて記述する。
重複タイトル、コンテンツはGoogle品ライン違反質ガイドの恐れがある。なので、ページごとにオリジナルのタイトルタグを記述し、わかりやすいタイトルをつけることが大切。
まとめ
- サイトのそれぞれのページに ＜title＞ タグでタイトルを付ける。
- 具体的でわかりやすいページタイトルを付ける。
- キーワード（SEOキーワード）を詰め込んだようなタイトルは避ける。
- 同じタイトルや定型文を使用したタイトルは避ける。
- タイトルを目立たせる。ただし、簡潔になるように気を付けます。
- ページに対する検索エンジンのクロールの無効化に注意する。
- ページの内容に無関係なタイトルは付けない
- 「無題」のような初期設定のタイトルやあいまいなタイトルにしない
- サイトの大部分のページ、またはすべてのページに同じタイトルを使わない
- ユーザーのためにならない、極端に長いタイトルは使わない
- titleタグに不要なキーワードを詰め込まない
２：meta descriptionについて
meta descriptionタグとは、htmlファイルに記述する複数あるメタタグのうちの一つです。
meta descriptionタグは、htmlファイルの＜head＞～＜/head＞の間に記述します。
meta descriptionタグの文字数は全角124文字程度に収める。収まり切らない場合、「・・・」に省略される。
Google推奨のポイント
・サイトのそれぞれのページにメタデータ（descriptions）を作成する。
・個々のページを正確に表す説明を記述する
・明確な情報を説明に含める。 文章形式にする必要はなく、タグで区別して記述するなど、関連性の高い情報をユーザーに提供する
・プログラムで説明を作成する。
・質の高い説明を使用する。
まとめ
- タイトルの内容に合わせながら、メタディスクリプション（サイト概要）を記述
- コンテンツの内容を要約したわかりやすい文言にし、魅力的な言い回しにする
- 全角124文字以内に収まるよう、重要な部分を前方に記述していく
- 上記に記述したgoogle推奨する適切なメタデータを作成する
- サイトの概要文にSEOキーワードを適切に含めながら、検索クエリとの関連性を高める。キーワードの詰め込みには注意。
３：link canonicalについて
canonicalタグは、「重複ページ」、つまり中身の同じページが２つ以上存在してしまっているときに、SEOへの悪影響を最大限回避できる機能を持っています。
canonicalタグの役目を端的に言うと、重複ページが複数存在するときに「どのページ（URL）が最も大切かをGoogleに伝える」ことです。この、重複ページのなかの「最も大切なURL」を「正規ページ」と言い、また正規ページを（canonicalタグで）正しく決めてあげることを「URL正規化」と言います。
canonicalタグでURL正規化を行うと、Googleは、いくつかの重複ページの中から正規ページだけを検索インデックスに登録し、検索結果にも正規ページだけを掲載します。またcanonicalタグは、それぞれの重複ページのSEO評価を正規ページにまとめる働きもあります。
https://sample.com（重複ページ）
重複ページ対策の別のやり方に301リダイレクトがある。
canonical属性タグと301リダイレクトの使い分けポイント
・コンテンツが同じまたはほぼ同じページに複数のURLを与えなければならない場合、canonical属性タグを使う
・同じコンテンツを複数のサイトで公開する場合、canonical属性タグを使う
・デスクトップ向けページとスマートフォン向けページを別々のURLで提供する場合、canonical属性タグを使う
・301リダイレクトが使えない場合、canonical属性タグを使う
・ページネーションをビューオールページと併用する場合、canonical属性タグを使う
４：OGPについて
OGPとは、Webページの内容をSNS上へ伝えるために必要な記述のこと。例えば、FacebookなどでWebページがシェアされると、そのWebページのタイトルやURL、概要、使われている画像などを利用して、各種SNSのウォールや、それぞれのニュースフィードに「シェアされたWebページはこんなサイトですよ」と表示してくれます。
OGPタグの種類
"og:title" = ページのタイトル
"og:type" = なんのページなのか（website・article・blog など）
"og:image" = サムネイル画像のURL
"og:url" = ページのURL
"og:site_name" = サイトの名前
"og:description" = 記事の概要
５：noindex,nofollow属性
noindexとは、設定したページがgoogleの検索エンジンからインデックスされないようにするための構文です。インデックスされているページはgoogle検索した場合に何らかのワードで表示されますが、インデックスされていないページはどんなワードで検索しても100%表示されることはありません。正確には「noindexページはクロールされて裏側ではgoogleにインデックスされているが、検索結果には出てこないように制御される」という理解が正しいです。また、noindexページに発リンクがある場合、ページランクは渡します。この点にも注意しましょう。
nofollowとは、設定したリンクに対してクローラーが辿る事を禁止する設定です。通常、googleなど検索エンジンのボット（クローラー）は、リンクを辿って動き回ります。nofollowを設定していないリンクには移動しますが、nofollowが設定されているリンクには移動しないことになります。
<head>内に下記を書く
<meta name=”robots” content=”noindex,nofollow”>
６：HTMLタグの使い方
見出しタグ（<h1> ~ <h6>）の出てくる順番は<h2>があってから<h3>のように順番に使う
<h1>タグはページに１つだけ存在する
imgタグにあるalt属性には画像の説明を記述します。
alt属性は、代替テキストであり、画像が表示されない場合、alt属性の記述内容が表示される。さらに、画像検索でも使用される為、alt属性に画像説明を適切に記述しておくことが大切。
まとめ
今回書いた６つのことをしておくだけでも、全然違うみたいなので、気をつけながらやっていきたい
