ど素人が 「progate」で html＆cssを学ぶ①
最近、プログラミング学習サイト「Progate」
を空き時間に利用しHTML＆CSSを学んでいますショニーです。（ instagram ⇒ @sho_mn )
これは、写真のポートフォリオサイトを
自力で作成するために理解を深めたいという目的があるのですが、
それはさておき、学習途中で
“stylesheet”というワードが出てきて
このワードに関してはProgate上触れていなかったので
独自に調べてみました。
htmlには、
そのhtmlのバージョンを宣言したあとに
head要素にそのWebページの設定に関する情報を書きます。
以下のような具合です。
<!DOCTYPE html> ←htmlバージョンを宣言
<html>
<head>
<meta charset="utf-8"> ←文字コードを指定
<title>Sho photographer</title> ←webページのタイトルを指定
<link rel="stylesheet" href="stylesheet.css"> ←cssを読み込む宣言
</head>
<body>
</body>
<html>
このうち、head要素の中の3行目の
stylesheetって何だろうって素朴に思ったので
調べてみました。
この3行目の
<link rel="stylesheet" href="stylesheet.css">
は、
①前半の「link rel="stylesheet"」でCSSファイルを読み込む宣言をし
②後半の「href="stylesheet.css"」で読み込むCSSファイルを指定しています。
①のstylesheetってそもそもなんやねんって思ったわけですが、
CSSは何の略称かというと、
「Cascading Style Sheet （カスケーディング・スタイルシート）」の略称となっており
この事から、単にstylesheetとは＝CSSの事。と認識しました。
大した話ではないのですが(笑)、
Progateなどプログラミング学習サイトで
分からないワードが出てきたら、調べてみるとより理解が深まるな。
なんて思いました。
ちなみに、
HTMLでは「文章の構造」を記述することを目的としており、
CSSでは「視覚表現の定義」がなされていると僕の中で認識しており、
このようにファイル別に役割が分担されている事で
コンピュータ側も処理がスムーズになるのかな。なんて思いました。
（この辺知識不足でただの推測ですが。。笑）
HTMLのファイルに「文章の構造」も「視覚表現の定義」も全て記述があると、ごちゃごちゃな見た目になってコードを確認する側も嫌ですよね。
では、今日も引き続き
空き時間にProgateなどで学習したいと思います。
この記事が気に入ったらサポートをしてみませんか？