ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法
「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】「ルビ」をふるための要素





【HTML】【span】文字列の一部を装飾する方法

【HTML】
【span】タグ
文字列の一部を装飾する方法




「span」タグは、
「インライン要素」の一つで、
文字列の一部を装飾するのに使われる「HTMLタグ」。


「文字」「単語」「文章」の
「色」を変えたり、
「太字」にしたり、
「サイズ」を変更したり、
するときに、「span」タグで囲んで、
「CSS」で装飾します。



「span」タグの使い方


「span」タグは、
「インライン要素」で、
「div」タグなどの「ブロック要素」の中にある
コンテンツの一部をグループ化し、
「CSS」を使って装飾デザインをすることができる「HTMLタグ」。


「属性値」や「イベント属性」を使用することで、
装飾だけでなく、動きのある変化もつけることができる。



「span」タグの書式

<span> コンテンツ </span>

<span> 文字列 </span>
<span id="ID名"> 文字列 </span>
<span class="クラス名"> 文字列 </span>

<span style=" font-size: bold; color: red;"> 文字列 </span>

<span onclick="javascript:関数名;> 文字列 </span>




グローバル属性

「グローバル属性」は、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