display: gridを調べてみる

最近、flexboxを使ってサイトを作ることが多いですが、

この間、flexboxではレスポンシブ対応するのに、難しいサイトを作成しました。

仕方ないので、久しぶりにfloatを使ってサイトを作成しました。

もっといい方法ないかなと思って、調べたところ、display: gridっていうものがあるみたいなので、ちょっと調べてみました。

display: gridとは

flexbox、table同様にマルチカラムレイアウトが可能なプロパティー

flexboxが一次元的なレイアウトに対して、gridは二次元的なレイアウトが可能。

 

対応ブラウザ

f:id:fuchi15:20171218100607p:plain

だいたいのブラウザで対応しているみたいですね。

用語

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-columnsgrid-template-rowsgrid-template-areasを指定できるショートハンド。
grid-column-gap グリッドトラック(列)の間を指定する。
grid-row-gap グリッドトラック(行)の間を指定する。
grid-gap grid-column-gapgrid-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-startgrid-column-endを指定できるショートハンド。
grid-row grid-row-startgrid-row-endを指定できるショートハンド。
grid-area グリッドセルに名前を付けてgrid-template-areasプロパティで参照できるようにする。
grid-columngrid-rowのショートハンドでもある。
justify-self グリッドアイテム内のコンテンツを行方向に整列する。
align-self グリッドアイテム内のコンテンツを列方向に整列する。

まとめ

色々なレイアウトに対応できそうなので、これから使っていこうかなと思います。

SEOの対策方法について、簡単にまとめてみる

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。 検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指す。

 

1:タイトルタグについて

タイトルタグに記述したタイトルは、検索結果やウェブブラウザのタブに表示され、ユーザーやクローラーがどんなwebページか認識するのに役立つ。

タイトルタグの文字数は30文字程度に収める。収まり切らない場合、「・・・」のように省略されてしまったり、変更されてしまう可能性がある。

タイトルタグは、検索エンジンSNSから直接来た人向けや、検索エンジンのロボット等に向けて記述する。

重複タイトル、コンテンツはGoogle品ライン違反質ガイドの恐れがある。なので、ページごとにオリジナルのタイトルタグを記述し、わかりやすいタイトルをつけることが大切。

まとめ

  1. サイトのそれぞれのページに <title> タグでタイトルを付ける。
  2. 具体的でわかりやすいページタイトルを付ける。
  3. キーワード(SEOキーワード)を詰め込んだようなタイトルは避ける。
  4. 同じタイトルや定型文を使用したタイトルは避ける。
  5. タイトルを目立たせる。ただし、簡潔になるように気を付けます。
  6. ページに対する検索エンジンのクロールの無効化に注意する。
  7. ページの内容に無関係なタイトルは付けない
  8. 「無題」のような初期設定のタイトルやあいまいなタイトルにしない
  9. サイトの大部分のページ、またはすべてのページに同じタイトルを使わない
  10. ユーザーのためにならない、極端に長いタイトルは使わない
  11. titleタグに不要なキーワードを詰め込まない

 

2:meta descriptionについて

meta descriptionタグとは、htmlファイルに記述する複数あるメタタグのうちの一つです。

meta descriptionタグは、htmlファイルの<head>~</head>の間に記述します。

 

meta descriptionタグの文字数は全角124文字程度に収める。収まり切らない場合、「・・・」に省略される。

Google推奨のポイント

・サイトのそれぞれのページにメタデータ(descriptions)を作成する。

・個々のページを正確に表す説明を記述する

・明確な情報を説明に含める。 文章形式にする必要はなく、タグで区別して記述するなど、関連性の高い情報をユーザーに提供する

・プログラムで説明を作成する。

・質の高い説明を使用する。

 

まとめ

  1. タイトルの内容に合わせながら、メタディスクリプション(サイト概要)を記述
  2. コンテンツの内容を要約したわかりやすい文言にし、魅力的な言い回しにする
  3. 全角124文字以内に収まるよう、重要な部分を前方に記述していく
  4. 上記に記述したgoogle推奨する適切なメタデータを作成する
  5. サイトの概要文にSEOキーワードを適切に含めながら、検索クエリとの関連性を高める。キーワードの詰め込みには注意。

 

3:link canonicalについて

canonicalタグは、「重複ページ」、つまり中身の同じページが2つ以上存在してしまっているときに、SEOへの悪影響を最大限回避できる機能を持っています。

 

canonicalタグの役目を端的に言うと、重複ページが複数存在するときにどのページ(URL)が最も大切かをGoogleに伝えることです。この、重複ページのなかの「最も大切なURL」を「正規ページ」と言い、また正規ページを(canonicalタグで)正しく決めてあげることを「URL正規化」と言います。

canonicalタグでURL正規化を行うと、Googleは、いくつかの重複ページの中から正規ページだけを検索インデックスに登録し、検索結果にも正規ページだけを掲載します。またcanonicalタグは、それぞれの重複ページのSEO評価を正規ページにまとめる働きもあります。

例:http://sample.com(正規ページ)

  http://www.sample.com(重複ページ)

  https://sample.com(重複ページ)

 

重複ページ対策の別のやり方に301リダイレクトがある。

 

canonical属性タグと301リダイレクトの使い分けポイント

・コンテンツが同じまたはほぼ同じページに複数のURLを与えなければならない場合、canonical属性タグを使う

・同じコンテンツを複数のサイトで公開する場合、canonical属性タグを使う

・デスクトップ向けページとスマートフォン向けページを別々のURLで提供する場合、canonical属性タグを使う

・301リダイレクトが使えない場合、canonical属性タグを使う

・ページネーションをビューオールページと併用する場合、canonical属性タグを使う

 

4: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" = 記事の概要

 

5:noindex,nofollow属性

noindexとは、設定したページがgoogle検索エンジンからインデックスされないようにするための構文です。インデックスされているページはgoogle検索した場合に何らかのワードで表示されますが、インデックスされていないページはどんなワードで検索しても100%表示されることはありません。正確には「noindexページはクロールされて裏側ではgoogleにインデックスされているが、検索結果には出てこないように制御される」という理解が正しいです。また、noindexページに発リンクがある場合、ページランクは渡します。この点にも注意しましょう。

 

nofollowとは、設定したリンクに対してクローラーが辿る事を禁止する設定です。通常、googleなど検索エンジンのボット(クローラー)は、リンクを辿って動き回ります。nofollowを設定していないリンクには移動しますが、nofollowが設定されているリンクには移動しないことになります。

<head>内に下記を書く

<meta name=”robots” content=”noindex,nofollow”>

 

6:HTMLタグの使い方

見出しタグ(<h1> ~ <h6>)の出てくる順番は<h2>があってから<h3>のように順番に使う

<h1>タグはページに1つだけ存在する

imgタグにあるalt属性には画像の説明を記述します。

alt属性は、代替テキストであり、画像が表示されない場合、alt属性の記述内容が表示される。さらに、画像検索でも使用される為、alt属性に画像説明を適切に記述しておくことが大切。


まとめ

今回書いた6つのことをしておくだけでも、全然違うみたいなので、気をつけながらやっていきたい