トップSEOSEO対策SEO内部対策DIVタグとは~HTMLタグでグループ化すると共に抑えたい5つのテクニックDIVタグとは~HTMLタグでグループ化すると共に抑えたい5つのテクニック2018/11/22DIVタグでコンテンツをグループ化し、HTMLタグでマークアップしながら、サイト構築する方法があります。今回は、DIVタグにCSSを適用する、HTMLのDIVタグを横並びにする方法、HTMLのDIVタグのclass属性・id属性の使い方について中心に解説したいと思います。目次DIVタグとはDIVの略・読み方DIVタグの属性HTMLのDIVタグのclass属性の使い方HTMLのDIVタグのid属性の使い方HTMLのDIVタグのstyle属性の使い方DIVタグにCSSを適用するHTMLのDIVタグを横並びにする(改行させない)CSSの「float」プロパティを使う方法CSSの「display」プロパティを使う方法display:inline;display:inline-block;display:table-cell;HTMLのDIVタグで位置を指定する方法HTMLのDIVタグで中央寄せ(center・センタリング)にするtext-align:center;margin:auto;HTMLのDIVタグで右寄せにするtext-align:right;float:rightHTMLのDIVタグで非表示にするCSSの「visibility:hidden」を活用するCSSの「display:block」を活用するHTMLのDIVタグでスクロールするまとめDIVタグとはDIVタグとは、各コンテンツをひとまとめする(グループ化する)際に使う、汎用的なHTMLタグです。DIVタグは、コンテンツの幅や余白など柔軟に指定できるブロック要素です。DIVタグは、インライン要素であるSPANタグと似通った部分があり、共にタグ自体には意味を持ちません。DIVタグは、PタグやMETAタグといった良く活用される代表的なHTMLタグの一つといえます。DIVの略・読み方DIVは、「division(ディヴィジョン)」の略で、区分・部分といった意味合いです。DIVは、「ディヴ」という読み方になります。DIVタグの属性DIVタグの主な属性として、「class属性」「id属性」「style属性」があり、以下のように記述します。CSSなどの外部ファイルと連携するために指定する属性です。{プロパティ名:値;}」という書式です。※要素名は省略できます。class="box">ホームページの順位を上げるためにSEO対策が重要です。class="box">ホームページの順位を上げるためにSEO対策が重要です。CSSなどの外部ファイルと連携するために指定する属性です。{プロパティ名:値;}」という書式です。※要素名は省略できます。id="box">ホームページの順位を上げるためにSEO対策が重要です。id="box">ホームページの順位を上げるためにSEO対策が重要です。#CCC;}HTMLのDIVタグの「style属性」使い方HTML上で直接CSSを適用する際に使う属性です。#CCC;">ホームページの順位を上げるためにSEO対策が重要です。#CCC;">ホームページの順位を上げるためにSEO対策が重要です。</div>DIVタグにCSSを適用するDIVタグにCSSを適用するには、主に以下のようなパターンがあります。HTMLのDIVタグを横並びにする(改行させない)※参考:CSSで要素を横並びにする方法まとめCSSの「float」プロパティを使う方法CSSの「float」プロパティを活用し、要素を回り込ませることでDIVタグで横並びができます。※基本的にDIVタグで囲んだ次の要素は改行されるため、横並びにはCSSの適用が必要となります。#CCC;}CSSの「display」プロパティを使う方法display:inline;CSSの「display」プロパティでinline値を指定し、インライン要素にすることでDIVタグで横並びができます。インライン要素のため、高さや横幅、上下マージンが無効となります。要素間の隙間は、改行せずにHTMLソースコードを記述すれば回避できます。#CCC;}display:inline-block;CSSの「display」プロパティでinline-block値を指定し、インライン要素にすることでDIVタグで横並びができます。ブロック要素も持ち合わせてるため、高さや横幅、上下マージンが有効となります。要素間の隙間は、改行せずにHTMLソースコードを記述すれば回避できます。#CCC;}display:table-cell;CSSの「display」プロパティでtable-cell値を指定し、テーブルセルにすることでDIVタグで横並びができます。※参考:CSSで中央寄せの方法いろいろメモHTMLのDIVタグで中央寄せ(center・センタリング)にするtext-align:center;CSSの「text-align」プロパティでright値を指定することで、DIVタグで右寄せできます。この場合、DIVタグの中の要素(テキストや画像)に対する位置指定となります。#CCC;}float:right;CSSの「float」プロパティでright値を指定することで、DIVタグで右寄せできます。この場合、レイアウトが崩れるので、次の要素clearプロパティを適用し、回り込み解除します。この場合、DIVタグ自体の右寄せとなり、DIVタグの中の要素には適用されません。略で「検索エンジン最適化」を意味します。略で「検索エンジン最適化」を意味します。#CCC;}HTMLのDIVタグで非表示にするHTMLのDIVタグで非表示にするには、以下のような方法があります。違いCSSの「visibility:hidden」を活用するCSSの「visibility」プロパティでhidden値を指定することで、DIVタグで非表示にできます。扱いとしては、要素はあるけど見えない状態となるため、空白となります。#CCC;}CSSの「display:none」を活用するCSSの「display」プロパティでnone値を指定することで、DIVタグで非表示にできます。扱いとしては、要素が取得されず、その場にない状態となるため、空白も無く詰めて表示されます。#CCC;}HTMLのDIVタグでスクロールするHTMLのDIVタグでスクロールするには、以下のようなCSSの「overflow:auto」を活用する方法があります。CSSの「overflow」プロパティでauto値を指定し、自動て縦横のスクロールが挿入され、DIVタグでスクロールできます。「overflow-x:auto;」で横スクロール、「overflow-y:auto;」で縦スクロールがそれぞれ指定できます。auto;/*縦スクロール表示*/}まとめDIVタグをうまくマークアップし、サイト構築しましょう。ソース・内容・デザインといったコンテンツの質を上げ、サイト価値を高めながら、SEO対策で上位化を目指すことが重要です。