HTMLとCSSについて〜noteのありがたみを感じる〜
ここ数日で1番暖かい陽気になりましたが、いかがお過ごしでしょうか。
明日から週末にかけて急激に気温が下がるので、温度差で体調を崩さないように気をつけましょう。
最近の記事では家庭菜園や見出し画像の話題が多かったですが、今回は最近勉強しはじめた内容について話したいと思います。
いきさつ
将来的に在宅での仕事を考えていますが、その選択肢の1つ「Webデザイナー」について調べていました。
Webサイトの制作に携わるデザイナーのことで、ページを見栄えが良く・わかりやすくするためにデザインをする仕事です。
その情報を集めている中で出てきた単語が、「HTML」と「CSS」でした。
Webサイトを作るために開発されたプログラミング言語のことで、構造や形を設定するのに使われています。
普段利用しているWebサイトがどうやって作られているのか、興味を持ったため学んでみることにしました。
HTMLやCSSの勉強するのに、紹介されていたのが「Progate」です。
Webサイトがどのような構図で作られ、どう入力するかを実際にしながら勉強できます。
手本を見ながら作れるため、入力することでどの様に変化していくかがわかりました。
ただ入力がメインですので、用語などの理解を深めたい場合は、ネットや本の情報も調べた方が良さそうです。
初歩的なことは無料で体験できるので、さらにプログラミンの勉強を続けるかの判断はしやすいかと思います。
HTMLとは
HTMLはサイトに表示される文章や画像、ページのレイアウトなどの構造を定義している書式です。
HTMLで作成したファイルをブラウザ（データを表示するプログラム）が読み込むことで、文字や画像が画面に出てきます。
具体例として、noteで記事を投稿するときの様子を思い浮かべてください。
記事の中に目次を入れたいとき、ただ文章を改行しただけでは目次にする設定は使えません。
エディタの機能を使って、表示させたい部分を”見出し”にすることで、目次設定を使うことができます。
このときプログラム側では、指定した部分に専用のタグをつけているのです。
このタグつけることで指定した部分が”見出し”であると、コンピューターに認識させることができます。
HTMLではそれぞれの要素に合わせたタグをつけることで、ページの構造を作っているのです。
CSSとは
HTMLの話しで、指定した部分に専用のタグをつけると説明していました。
しかしただタグをつけただけでは、文字の大きさなどは変わりません。
そこで使用するのが、CSSです。
CSSではHTMLで作った構造をもとに、どの様な装飾するかを細かく指定することができます。
noteの記事で、”引用”表示にすることで文字の背景がグレーになります。
本来の目的は”引用”であることをHTMLで指定することですが、背景色が変わるのはCSSで指定しているからです。
この様にCSSを使うことで、文章の色やサイズを変更したり、配置を動かしたりすることで見やすいページになるのです。
まとめ
簡単にですが、HTMLとCSSについて話していきました。
基本的なことを勉強しただけですが、1つのページを作り上げるためにもたくさんの手順があることを知りました。
そして大変な部分を省略して、創作活動がしやすい仕組みを提供していただいてるnoteのありがたみを改めて感じます。
長くなりましたが、最後まで読んでいただいて、ありがとうございました。
専門的に詳しく知りたい場合は、こちらをご参考ください
https://www.profuture.co.jp/mk/column/20024