こんにちは、こんばんは。

今日からお弁当を持っていくことにした私です。大学時代の過度な食費削減のせいで、職場の350円のお昼ごはんでさえ高いと思ってしまうんですよねー笑。とりあえずお弁当箱にサラダを山盛り詰めて、あとはおにぎりがあればいいかなと・・・。昨日、太る原因がどうのこうのという記事を書いていた人間とは思えない食生活ですね笑。

《第１回HTMLとCSS講座》

さてさて、今日から新シリーズです！新しく「HTMLとCSS講座」を始めました(^^)バージョンはHTML5とCSS3です。この勉強は私自身やりたいと思っていましたし、読んでくださる方々のためにもなるのではないかと思いました。はてなブログはこの言語で編集することもできますよね(^^)「HTMLの勉強をしてみたいけどやる気が出ない」「参考書を買っても最後まで続かない」「ゆっくり勉強する時間がない」という方は、ぜひこれから見てみてくださいね！

f:id:chihiro-kk:20190513233957j:image

【HTML】

今日は技術的なことではなく導入です。まずは、HTMLの説明をしていこうと思います(^^)まるで知っているかのような話し方になっていますが、たった今勉強したものがそのままこちらの記事になっています笑。わかりにくい部分もあるかと思いますが、お手柔らかにお願いします(^^)笑

【HTMLって何だろう。】

HTMLというのは「Hyper Text Markup Language」を略したもので、ネット上で公開するWebページを作成するために開発された言語です。一度は見たことがある方が多いと思いますが、小なり記号（<）と大なり記号（>）で囲まれた部分を「タグ」と呼びます。このタグを使うと「ここが見出しです」「ここの文字を大きくします」「ここに画像を入れます」というようにコンピュータに指示を出すことができ、思い通りのものを作ることができます(^^)また、HTMLは世界標準の言語となっているので、海外に住んでいる方でも美しい状態のWebページを見ることができます。

【HTMLってどんな書式？】

ではさっそく、HTMLの基本的な書式を見ていきましょう(^^)下の画像が基本的なものです。

f:id:chihiro-kk:20190514065731j:image

◯タグ◯

「タグ」は、やのように、小なり記号（<）と大なり記号（>）で囲まれた部分のことをいいます。さらに、を「開始タグ」、を「終了タグ」といいます。（<>の中は必ずしもpではありません。）

◯タグ名◯

「タグ名」は、<>で囲まれた中身の部分です。例えば、だとpです(^^)例ではpを使いましたが他にもいろいろなタグ名があり、それぞれ意味が決まっています。

◯コンテンツ◯

「コンテンツ」は、開始タグと終了タグに囲まれた部分のことを言います。例でいうと「こんにちは、こんばんは。」の部分ですね！普段私たちが見るもの（画面上に表示されるもの）はコンテンツです(^^)タグは表示されません。

◯要素◯

「要素」は、タグ（開始タグと終了タグ）とタグで囲まれたコンテンツをひとまとめにしたものです。Webページは要素がたくさん集まってできています(^^)

◯空要素◯

ほとんどの場合は開始タグと終了タグがコンテンツを囲っているのですが、中にはコンテンツを持たず、終了タグがない場合があります。こうしたタグのことを「空要素」と言います。よく見られるのはテキストを改行するときに使う や、画像を挿入するときに使う<img>です(^^)

【注意点は？】

注意点としては、コンテンツ意外の部分であるタグや属性（←今後お話しします）は基本的に全て半角文字で記述することです。コンテンツ部分は全角が含まれていても正しく表示され、自由に文字を書くことができます。ですが、コンテンツには<>を含めることができません。コンピュータがタグと認識してしまうからです。と言いつつ、今みなさんが見ているこちらの記事には<>が見えていると思います。これは「文字実体参照」と呼ばれる書式を使っていています。そうすることで、HTML記述できなかったり入力しづらかったりする文字を表示することができるのです(^^)

具体的にどのようになっているかというと・・・

f:id:chihiro-kk:20190514065756j:image