見出し画像

継続は力なり＃２

うちやましょうたろう/成り上がり

従来のインライン要素に該当する要素（１）頻度が高い

※インライン要素にはインライン要素しか入らない（ブロックレベル要素は入れられない）

br→改行
改行をブラウザ表示に適用したい場合（住所と名前を載せる際、住所と名前の間に改行する）
brは空要素

例

<p>
〒012-3456<br>
北海道札幌市鳥獣保護区1-2-3<br>
</p>

em→強調されている部分を示す
一般的には斜体で表示（表示方法はCSSで変更可能）
どこで強調するかによって意味合いが変わる

例：『<em>僕は</em>彼女が好き』→他は人は知らんが”僕は”好き

　　『僕は<em>彼女</em>が好き』→他の人ではなく”彼女が”好き

というように、
strong→重要な部分・緊張性のある部分・注意・警告
一般的には太字で表示（表示方法はCSSで変更可能）

q→引用文（bockquoteのインライン版）
引用先のURLを示す「cite属性」も指定できる
「　」や他の引用符は含めない（CSSで表示させる）
ただし、q要素を使わずに元の原稿のままでも良い

例

<p>
君は<q>僕を好き</q>と言う
</p>
<p>
君は「僕を好き」と言う
</q>

どちらも同じである

cite→出典（作品名・作者名・URL）

例：本・エッセイ・詩・論文・Webサイト・Webページ・ブログの記事・ブログのコメント・ツイート・映画・テレビ番組・脚本・歌・楽譜・絵画・彫刻・ゲーム

code→ソースコード（要素名やファイル名にも使用できる）
ソースコード内の改行やインデントをそのまま消する場合は、「pre要素」内で「code要素」を使う

例・CSSのソースコードをコンテンツとして喝載する場合のcode要素の使用

<pre><code>body {
   background-image: url(photo.jpg);
   background-repeat: repeat;
}</code></pre>
small→欄外の付帯情報や注記（Copyring〜　など）


small要素→欄外の付帯情報や注記（Copyright〜　など）
印刷物において欄外に小さな文字で喝載されているような付帯情報や注記（著作権表示や免責事項など）の部分を表す要素

例

<p>
<small>Conpyright &copy; 2018 〇〇,Inc. All rights reserved.</small>
</p>

span→汎用インライン要素
その範囲がインライン要素であることだけを示す
（他のインライン要素の中にふさわしいものがない場合に使用）


従来のインライン要素に該当する要素（２）頻度が低い

abbr→「略語」であることを示す
dfn→定義対象の用語であることを示す

sup→上付き文字を示す
sub→下付き文字を示す
例

<p>
二酸化炭素はCO<sub>2</sub>です
</p>

画像1

こうなる。

i　→テキストの性質が異なる部分
日本語では「学名」他には外国語として使われる
b　→実用的な目的で単純に目立たせてある部分
例：キーワード・製品名
※「重要」や「強調」とは別物
mark→読者に注目してほしい部分を示す
イメージは蛍光ペンで線を引くような感じ

リンク

a要素→リンクを作成するための要素
テキストの一部をリンクにする場合「a」で囲ってリンク先のURLを「href要素」で指定する
例：サンプルを「http://www.example.com/」にリンクさせる

<p>
わかりやすい<a href="http://www.example.com/">サンプル</a>もある
</p>

a要素はa要素がなくても成立する要素であれば
<a href="○○”> 〜 </a>
でリンクにできる
例：h1~h6・div・ul　などのブロック要素も可

例外としてインタラクティブコンテンツに分類する要素はNG
・リンクの中に別リンクがある
・リンク内に　テキスト入力欄/メニュー/ボタン　などがある

a要素が指定できる属性


href="リンク先のURL"
a要素はリンクになる

target="リンク先を表示させるウィンドウまたはタブ名"
リンク先を表示されるウィンドウ/タブを指示する
「_black」→リンク先は新しい場所で表示される
「_self」   →リンク先は現在の場所で表示される
「_parent」→iframe要素を用いて親ページがある場合に使用し、親となる場所がある場合はそこへ、なければ現在の場所で表示

ページの特定の場所をリンクにする

href属性で指定するURLの最後に「#」をつけ、「id属性」で指定してある値を加える
そうすると「id属性」が指定されている要素の位置へリンクできる
例
・リンク元のソースコード

<p>
<a href="http://www.example.com/index.html#section2">第２節</a>へ
</p>

・リンク先（http://www.exanple.com/index.html）のソースコード

・・・
<h1 id="s＜ection2">
第２節　アイアンバイブル
</h1>
・・・


ルビ

ruby要素→テキストにふりがなをふれる
<ruby>ふりがなをふるテキスト の直後に「rt要素」を使い
<rt>ふりがな</rt></ruby>