お疲れ様です。
「ブロガーが独学でプログラミングを学んでwebサービスを作ってみる企画」2回目です！
この企画、タイトルが長すぎるので何かしら略称つけられないかな。
ブロサー企画とでも言いましょうか。
ブロ(グでweb)サー(ビスを展開する)企画
なにかしら呼びやすい略称あったらコメントで教えてください！
早速表題の件ですが
今日はHTMLの基礎中の基礎を紹介します！
この記事もWordPressのアシストを使わず
HTML直打ちで作っています。
HTML直打ちならテーマや記事投稿画面の仕様に影響をうけず
ただひたすら文章を打ち込むのと動作が変わらないからです。
ブログ始めたての方だと、ビジュアルを見ながら打ち込みしたほうが楽かと思いますが
慣れてくるとHTMLの良さがわかってきますよ！
HTMLは<>と</>で挟むだけ
HTMLの極意はこれに尽きます。
これさえ覚えられれば、あとはよく使う単語を覚えるだけ。
h（エイチ）タグ
最も身近なものだと記事中のタグですね
この章のタイトルでもある、
「HTMLは<>と</>で挟むだけ」は
<h2>HTMLは<>と</>で挟むだけ<h2/>といったように表記します。
h1タグから通常だとh6タグまである場合が多く
それぞれの役割を説明します。
そもそも文章の構造は段階として
題名・章・説・項と分けられます。
なんて難しい説明はやめて、わかりやすく説明すると
h1タグは記事全体のタイトル
h2タグは中分類
h3タグは小分類
といったように
hのあとの数字が大きくなるほど
文章の分類としては小さくなっていきます。
何が中分類で、何が小分類かなんて
記事に依りますよね。
例えば私のブログ内にある腕時計のパーツショップの記事でいうと
h1タグはタイトルなので 【SEIKO MOD】パーツショップ一覧 です。
h2タグはタイトルの中の分類で、各ショップの強みで分類したので
パーツ全般系
中規模サイト
文字盤
バンド系
その他
といった分類がh2タグで表示されています。
その中から具体的な各ショップの屋号はh3タグで表示されています。
さらに別の例をいうと
もし私が時計に関する記事のまとめ記事を作ろうと書こうとしたら
h1タグは「時計に関する記事のまとめ」のようなタイトルになりますね。
h2タグはまとめに表示したい、各記事のタイトルになるでしょうね。
といったように相対的にタグは使われていきます。
つまりは優先順位と同格をが重要です。
同じ記事の中でh1タグは1つ。同格なし。基本的に①記事にタイトルは1つですもんね。
h2タグには章立てしてあれば同格が存在するかと思います。
h3タグはh2タグの中でも分類が必要なものがあれば同格が存在するわけです。
bタグ,strongタグ
これは太文字にするタグです。
強調、太文字にはまたはが使われます。
太文字 ←これは
<b>太文字<b/>って感じにしてます。
強調させたいときに使いますよね。
なので「ブロック」のbタグまたは、「強める」のstrongタグ
どちらも見た目は同じです！
イタリック
別名、斜め文字です！
これにはタグ
イタリック体←これは
<i>イタリック体<i/>になります。
打ち消し線
文字の中央部に線をひく、打消し線
これはタグを使います。
この文章を打ち消したい場合 ←これは
<del>イタリック体<del/>という風に用いられます。
重ね技ももちろんOK！
たとえば、イタリック体で、強調も打ち消し線もひきたい！
なんていうわがままなオーダーもできちゃいます！
そのときはしっかり、「入れ子の順番」を気をつけましょう！
イタリック体で強調も打消し線もひきたい ←これは
<del><b><i>イタリック体で強調も打消し線もひきたい</i></b></del>このとき、頭のタグを
delタグ,bタグ,iタグの順番で使っているので
結びのタグは
/iタグ,/bタグ,/delタグの順番で締めくくるようにします。
つまり、
①文章をiタグで挟む
<i>イタリック体で強調も打消し線もひきたい</i>表示：イタリック体で強調も打消し線もひきたい
iタグ挟んだものを、さらにbタグで挟む
<b><i>イタリック体で強調も打消し線もひきたい</i></b>表示：イタリック体で強調も打消し線もひきたい
③bタグで挟んだものを、さらにdelタグで挟んだら完成！
<del><b><i>イタリック体で強調も打消し線もひきたい</i></b></del>表示：イタリック体で強調も打消し線もひきたい
今回はタグの優先順位が関係ないものなので
どの順番でもいいですが、
必ず同じタグで挟む。
これだけは必須ルールです！
HTMLのタグの使い方、
大体わかってきましたでしょうか。
私自身、あまり使わないタグではありますが
タグの基本的な使い方になりますので
ぜひ覚えてください。
<***>表示を変えたい文章</***>
コメント