HTMLとCSSの基礎中の基礎復習

今日は随分前に学習したHTMLとCSSの復習を行いました。

まず、HTMLには要素というものがありそれが積み重なって構成されている。

そしてこの要素を囲っているのがタグになります。基本はこの開始タグと終了タグに囲まれて要素は表現されます！

<開始>要素</終了>

上記のような形！

また、HTMLは実際にどのような要素で構成されているかというと大きく分けてhead要素とbody要素になる。

head要素には、ウェブサイトの基本情報つまり設定のような記述を書き込む。

body要素には、実際にブラウザに表示される情報を記載します。

特にhead要素にはDOCTYPE HTMLというこれから記述していく文章がhtmlであるという宣言する要素を記述し、html要素にて文章の始まりと終わりを示す要素を合わせて記述する必要があります。他にも文章に関する情報やタイトルに関する記述などありますが今回は割愛します。

次にbody要素ですがこちらはテキストに関する情報を記述していきます。

例えば見出しや文章をリスト形式にしたり、テキストをリンクにする記述などもあります。

後、学習するときに特に用いたのがコメントアウトです！

これは記述したものを無いものとして扱うことができるものです。メモとして残せる機能の方が正しいかな？

何かコードを記述した際にコメントを残すことで復習する際などに特に役立ちました！

実務でも使うのかな？

まあでも複数人で開発するときにコメントがあると分かりやすい部分とかもありそう...

次にCSSについてです。

CSSを実際に適用させるにはhtmlのhead要素にファイル読み込み用の記述を行います。

CSSにはセレクタというものがありこれはCSSによる装飾をどの部分のHTMLに適用するかを選択するための記述です。

セレクタを記述後にプロパティを記述します。これはセレクタの何を変えるのかを選択するための記述です。

テキストの大きさや色を変えて装飾を行います。

初めて学んだ時はとにかく自分の入力した通りにブラウザが変わるのが楽しく夢中になってコードを記述していましたが実際にレイアウトを作る時が苦労したなと思いました。コードを書いているのによくわからない位置にレイアウトしてしまったりと...

そんなときに一瞬で少し成長を感じたことがありました。それがボックスモデルというものを学び理解した時です。これをイメージして頭の中で積み木をしていくイメージで作業を進められるようになりました！

これはかなり重要だなと感じたので共有しておきます。

それと今日は求人情報の確認とオリジナルアプリの投稿検索機能の実装を行なってました！

form_withを使って実装しました。

今まで学習してきた内容を元に実装したのであまり時間はかかりませんでしたが初めて触れた時はめちゃくちゃ時間かかっていたなと思います。でも毎日10時間も勉強すると必ず成長するんだなと自分でも思いました。

プログラミングを学習するまではほとんど知識もなかったけど新しい知識を学んでいくって本当に楽しいことだなと思いました！

今日は岩盤浴に行ってリラックスしたいので学習も20時で終了しようと思います。

それでは！！