ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法【XML】サイトマップ作り方
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト(箇条書き)で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素
SEO(Search Engine Optimization)
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法





【HTML】【div】レイアウトの枠として使う方法

【HTML】
【div】タグ
レイアウトの枠として使う方法




「div」タグは、
「ブロック要素」のHTMLタグの一つで、
レイアウトの枠のような使い方をされることが多いタグ。


タグとしては、特に意味を持っていない「div」タグですが、
レイアウト用のHTMLタグとも言えます。


「div」タグは、
「ブロック要素」というHTMLタグの一つで、
コンテンツをレイアウトに配置するのに使われます。

「文字」「画像」などを「div」タグで囲い、
グループかすることにより、
CSSで、どのように表示するかをレイアウトデザインします。



「CSS」でのレイアウトデザインでは、
「div」タグは、頻繁に使われる「HTMLタグ」の一つ。



「インライン要素」と「ブロック要素」の違い


「div」タグは、
「ブロック要素(ブロックレベル要素)」のHTMLタグの一つで、

「HTMLタグ」は、
・ブロック要素
・インライン要素
の2つの種類に分類ができるようになっています。


「ブロック要素」は、
「見出し」「段落」「表」など「文書」「画像」などで構成された集合体で、
一つの「ブロック(かたまり)」のことを意味している。
コンテンツを囲む「枠」のイメージ。

「インライン要素」は、
ブロック要素を構成する「文字」「文章」「画像」などのことで、
文章の一部分を装飾したりするためのHTMLタグなどが「インライン要素」です。
「文章」の一部を装飾するイメージ。



 ブロック要素インライン要素
CSS「display」プロパティでの値blockinline
改行前後に改行が入る前後に改行が入らない
指定可能指定不可
高さ指定可能指定不可
余白指定可能指定不可
内包可能なタグなんでもOKインライン要素のみ
ブロック要素への変換-「display」プロパティにより一部可能
インライン要素への変換「display」プロパティにより一部可能-



ブロックレベル要素の種類

「address」「blockquote」「center」「div」「dl」「fieldset」「form」「h1 - h6」 「hr」「noframes」「noscript」「ol」「p」「pre」「table」「ul」


インライン要素の種類

「a」「abbr」「acronym」「b」「basefont」「bdo」「big」「br」「cite」「code」「dfn」 「em」「font」「i」「img」「input」「kbd」「label」「q」「s」「samp」「select」 「small」「span」「strike」「strong」「sub」「sup」「textarea」「tt」「u」「var」


Back

「div」タグの書式


「div」タグは、
「文字」「文字列」「画像」などを囲んで使用します。

「div」タグに「ID名」「クラス名」などを付与し、
「タグ名」「ID名」「クラス名」などを使用し、
「CSS」「Javascript」などを使って、
レイアウトデザインをし、動的な変化を指示することができます。


「div」タグは、便利ですが、
意味を持たない「HTMLタグ」なので、
「ブロック要素」を使用するときには、
極力、意味を持つ「HTMLタグ」を使用する。



意味を持つタグの例
意味HTMLタグ
ヘッダー「header」タグ
フッター「footer」タグ
主要なコンテンツ「main」タグ
補足的なコンテンツ「aside」タグ
1つのセクション「section」タグ
1つの独立した記事「article」タグ
メニューなどのナビゲーション「nav」タグ
見出し「h1-h6」タグ
段落「p」タグ



「div」タグの基本書式

<div>コンテンツ内容</div>
<div id="ID名" >コンテンツ内容</div>
<div class="クラス名">コンテンツ内容</div>

<div>文字列</div>
<div>画像</div>

<div>
<img src="画像のURL" width="200px" height="200px">
</div>

<div>
<img src="画像のURL" width="200px" height="200px">
文字列
</div>




グローバル属性

「グローバル属性」は、HTMLのすべての要素(タグ)で指定できる属性。


グローバル属性説明
acccesskey 「ショートカットキー」を指定できる属性。
「値」は、「1文字」で、「半角英数字」を指定する。
「大文字」「小文字」は、区別される。
「半角スペース」で区切ると、複数の値を指定できる。
id 要素に「ID名」を指定できる属性。
「ID名」は、文書内(ファイル)内に一つしか許されないので、
同名の「ID名」を複数に指定することはできない。
「ID名」は、「CSSセレクタ」として指定できるので、「CSS」レイアウトによく使われる。

「ID名」の条件は、
・1文字以上
・空白文字は使えない
要素に固有の識別名を指定します。id属性の値は文書内で一意であり、同じ値を複数の要素に指定できません。また、最低でも1文字が必要で、空白文字は含めません。CSSのセレクタとして利用できるほか、リンクのフラグメント識別子としても利用できます。
class 要素に「クラス名」を指定できる属性。
「クラス名」は、文書(ファイル)内に、同一クラス名を複数指定できる。
「クラス名」は、「CSSのセレクタ」として指定することができるので、
「CSS」でのレイアウトデザインによく使われる。

「半角スペース」で区切ることで、複数のクラス名を指定でき、
使用できるのは、「半角英数字」で、、最初の文字は「英字」から始める。
contenteditable 「閲覧者」による要素の「編集」を許可するかを指定できる属性。
「値」を指定しない場合は、「上位要素」の指定を継承する。

・「true」 = 閲覧者による編集を許可する
・「false」 = 閲覧者による編集を許可しない
dir 要素内にある「文章の向き」指定する属性。

・「ltr」 = 「左から右」(left to right)。
・「rtl」 = 「右から左」(right to left)。
hidden 指定すると、要素を表示しなくなる属性。
lang 要素内の文字列が、記されている言語を指定する属性。
指定するタグによって、
「html要素」「文書全体」「一部の要素」などに言語を指定することが可能。
spellcheck 指定したタグ(要素)の内容を「スペルチェック」するかを指定する属性。

・「true」 = スペルチェックを実行する
・「false」 = スペルチェックを実行しない
style 「HTMLタグ」に直接「CSS」を記述するための属性。
tabindex 「tab」キーで、フォーカスを移動させるときの「優先順位」を指定する属性。
「正の数字」で値を指定することで、「優先順位」を指定する。
「0」を指定された要素が「最後」にフォーカスされる。
title 「タグ(要素)」のタイトル的な補足情報を記述する属性。
「値」には、任意のテキストを記述する。
translate 「タグ(要素)」内の内容に「翻訳」を実行するかを指定する属性。

・「yes」 = 翻訳を許する
。 ・「no」 = 翻訳を許可しない
カスタムデータ 「カスタムデータ」は、
製作者が属性名を決めることができる属性で、
「data-*****="値"」という書式で記述することが可能。
「JavaScript」を利用してのデータ処理も可能。




イベントハンドラ属性

「イベントハンドラ属性」は、
属性値に指定した「JavaScript」などのプログラムコードを
「操作(アクション)」に合わせて実行する属性。


イベントハンドラ属性説明
onclick マウスクリックしたときに指定内容を実行することができる属性。
「Javascript」などのプログラムコードを指定して、動的な変化を起こすことも可能。
画像に置いては、画像のURLを変更するように指定することも可能。
oninput 入力フォームなどで、データが入力されたときにアクションが実行される属性。
「Javascript」などの実行プログラムを指定すると、データ入力されたときにプログラムが実行される。
onsubmit 入力フォームの「送信」ボタンを押した時など、
データが送信されるときに、アクションを実行する属性。



Back