どうも、しいたけ夫（@shiitakeo0326)です。
今日HTMLをドットインストールで勉強していました。しかしながらプログラミング言語って恐らく書いてないと忘れちゃいますよね…。
HTMLの基礎についてとりあえずまとめておこうと思います。なんかイメージですけど、こういうプログラミング言語っていきなり専門用語が入ってくるからとっつきにくい。
ドットインストール見ていても思ったのですが、動画が早すぎてついていけないし、なんでこうするのか…という説明がないまま進むので理解出来ないで終わってしまう。
とりあえずこういうもんか…と納得した気でいると後で分からなくなった時に収集つかなくなってしまって辞めてしまう…ということが起きる気がします。
下記の本も参考にしていますのでもし良ければご参照ください。この本を読んで誰かがかいてくれたHTMLやCSSを見てなんとなく理解が出来るようになりました。自分で書くのは難しいですが、後でCSSとか削除するときとかに役立ちそうです。
HTMLとは
HTMLとは
H=Hyper
T=Text
M=Markup
L=Language
HTMLの基本構造
<html lang=”ja”>・・・②
<head>・・・③
<title>タイトル</title>・・・④
<meta name=”discription” content=”サイトの説明分”>・・・⑤
</head>・・・③
<body>・・・⑥
<p>段落<a href=”link先のURL”>リンク先名</a></p>・・・⑦、⑧
</body>・・・⑥
</html>・・・②
・文字コードは小文字・大文字どちらでもOK
・文字コードは全角はNG（文章内とかはOK）
<!DOCTYPE html>
<!DOCTYPE html>はDOCTYPE宣言と呼ばれており、この文書はHTML5というバージョンで書かれていますよ。と宣言をするものです。
HTML4の場合にはもっと長かったようで、HTML5のDOCTYPE宣言はあまり意味がないと言われているようです。
しかしHTML5で書いた文書も、このDOCTYPE宣言をしないとブラウザで読み込んだ時にレンダリングモードというものになり、別で記載するCSSの装飾等が上手く反映できない可能性があります。
DOCTYPE宣言をすることによって標準モードになり、CSSが記載通りしっかりと反映出来ます。何れにせよ、「今からHTML5で書くね！」「この後に記載するものはHTML5で書いているよ！」とWEB側に知らせるためにも書くものだと覚えておきましょう。
<html lang=”ja”>
html要素は<html>と</html>で囲まれている間のところはHTMLで記載していることを示すタグになります。
話が前後しますが、基本的に要素は<>不等号で挟み、タグの終わりの方には/をつけます。
＊例…<p>文書</p>、<html></html>、<head></head>など。
今回はhtml要素にlang属性と呼ばれる、どこの言語で書かれているか示す属性をつけています。この属性はつけてもつけなくてもどちらでも良いのですが最近読んだものだとGoogleはこのlang属性は見てないよっていう記事がありましたのでどちらでも良いかもしれません。
<html lang=”ja”> →html要素に半角スペースを入れて、langを記載し、=”属性値”を記載します。langが属性に対して、””に挟まれたところは属性値といってその値などを記載します。
＊例・・・<a href=”画像URL”>など
<head>
<head>はタイトルを設定したり、サイトの説明文などを記載する要素です。この後説明する<title>要素や<meta>要素などもここに入れます。
分かりやすく説明すると本文以外の説明等については、ここに記載します。他にもGoogle Adsenseなどの判別用のコードなどを記載する際もここだったかと思います。（はてなブログでやってた時はheadのとこに入れてくださいって書いてあった）
<title>
<title>は名前の通りブログタイトルを設定します。タイトルもそうですが、ウェブブラウザ上のタブに表示されるのもここの<title>で設定した文言になります。
これも必須なので<head>要素内で記載をするようにしましょう。<head>要素内で記載する理由としては<head>のところで説明した通り、本文以外だからです。
<meta>
<meta>要素は結構難しい気がしていますが、要はウェブに対して、このサイトはこういうサイトだよ！こういうキーワードでこの記事書いてるよ！などをGoogleなどのクローラー（ウェブサイトを自動で巡回しているやつ）に対してアピールするものです。
⇒これはサイトの説明文を記載するものです。discriptionは日本語で「説明・記述」などの意味を持ちます。
⇒サイトのキーワードを記載するものです。キーワードは””ダブルコロンの中に記載し、複数ある場合は,カンマで仕切ります。
<body>
<body>は分かりやすく言えば、本文です。この中には色んな要素が入ってきます。<body>～</body>で囲まれている間にこの今書いている本文も入っています。
本文でよく使う要素を紹介します。
<h1>～<h6>
これは見出しタグです。<h1>から順番に使っていきます。<h1>は本文中のタイトルのイメージで後は区切りごとに使っていけば良いかと思います。
はてなブログだと大見出しを設定するといきなり<h3>が設定されるそうです。<h1>は基本的にあまり弄ることはないのですが、本文中<h2>からしっかり設定しないとSEOに悪影響があるそうなので数字の小さいところから使っていきましょう。
このブログで言うところの緑で囲われたところが見出しで、それぞれ装飾が違うのはh2とかh3とかによってこのブログは装飾を分けているからです。
<p>
<p>は段落を表す要素です。段落ごとに仕分けをするために使用します。WordPressでもはてなブログでも通常エンターを押すとこの<p>要素で囲われます。
段落として分けるのではなくただの改行の時は</br>（break)を使用します。それだと段落のように1行空いたりせずに改行することができます。
<a>
<a>だけで使用することはありませんが、リンクに飛ばすときにこれを使用します。
<a href=”link先のURL”>リンク先名</a>でリンクを飛ばすことが出来ます。
例えば<a href=”https://www.shiitake0326.net”>しいたけ夫（お）の雑記ブログ</a>でしいたけ夫のHPに移動することが出来ます。
タグを有効にすると・・・⇒しいたけ夫（お）の雑記ブログ
別タブで開く時にはtarget=”_blank”>を追加してあげます。
<a href=”https://www.shiitake0326.net” target=”_blank”>しいたけ夫（お）の雑記ブログ</a>
タグを有効にすると・・・⇒しいたけ夫（お）の雑記ブログ
<img>
<img>要素は画像を表示させるものです。使用するときは下記のように使用します。
<img src=”画像ファイル” width=”400″ height=”300″ alt=”画像の説明”>
srcはsourceソースの略です。どれを元にするかという属性になります。widthは幅（横幅）でheightは高さです。画像の大きさをどうするか設定します。
altは画像が表示されなかったり、読み込みが遅くなった時とかに表示するものです。画像の説明を書いてあると表示されなかった時に親切かと思います。
まとめ
いかがでしたでしょうか。
うん、どちらかというとしいたけ夫用の備忘録なので、もしかしたら分かりにくい部分があったかもしれません。
但しHTML勉強したてのしいたけ夫が書いているので、まだみんなに近い目線で書けている気がします。自画自賛ですが。
プログラミング言語って全部を網羅するの難しいので、要素や属性について分からないことがあれば都度調べて、どう使うか把握することが大事な気がします。
それではまた！
にほんブログ村