プログラミング入門

初心者の方へHTMLとCSSの関係を分かりやすく解説

HTMLのキホンのキをお伝えします。

  シェア   0

初心者の方がHTMLでWEBサイトの作成してみたけど、パッとしない!と思ったことはありませんか。HTMLだけでは、WEBサイトデザインをオシャレに見せることができません。今回は、WEBデザインを学ぶ最初のステップHTMLとCSSの関係を分かりやすく解説します。

HTMLとCSSについて


WEBサイト・ホームページを制作する上での役割りは、HTMLがページの内容を意味付けるのに対し、CSSはHTMLのタグで囲んだ範囲に、文字の色・大きさ・背景の色や配置などを指定するためのページ装飾といったデザインを担当する言語になります。
そのため、CSSで作成したデザインをHTMLに読み込ませることで、普段私たちがスマホやパソコンで見ているオシャレなWEBサイトが作られています。

CSSの記述は、デザインを指定したい要素を宣言し、どのような装飾をするのか記述する形になります。下記のような形で宣言します。

要素名 {
プロパティ名:値;
}

要素名は、HTMLのタグ名やid、class名を宣言し、プロパティ名は、背景・幅・高さ・文字の大きさや太さなどを指定し宣言することができます。値は、そのプロパティをどんな値にするのか宣言する事になります。
例えば、見出し1の文字を青くし、幅を100pxにするなどを指定する場合には。

h1{
 color : blue;
width: 100px

このように、CSSで宣言しHTMLのタグを装飾することで、WEBサイトの見栄えに変化を与えられます。

CSSには3つの書き方がある

CSSの記述方法には、HTMLタグに埋め込む方法、HTMLファイル内に埋め込む方法、CSSファイルに記述する3つの方法で、デザインが適用される優先順位が変わる事になります。

HTMLタグに埋め込む方法は、優先順位が一番高い。次にHTMLファイルに埋め込んだもの。優先順位が低くなるのが、CSSファイルに記述したパターンになります。
しかし、綺麗な記述を目指すのであれば、HTMLタグに装飾を埋め込む書き方は極力行わないほうが良いでしょう。

また記述で注意して欲しいのが、CSSの記述方法以外にも優先順位が決まるポイントがあります。
それは、CSSで記述する内容が、下段に書いたものほど優先順位が優遇される事になります。もし、デザインの修正を行い、新たなデザインが反映されない場合には、このことを思い出し、反映されない理由を発見することが出来るかもしれません。

まとめ

WEBサイトを構築する際には、HTMLとCSSは簡単に適用させることができますが、タグやプロパティに値の設定するためには、膨大な種類の項目内容の記述が必要とされます。全てを覚えるのではなく、その都度、使用方法を調べ適用させる方法でも問題ないでしょう。また、参考サイトや入門サイトも豊富なため、WEB制作に必要な知識を取り込みやすい環境です。

また、現在インターネットの普及により、WEB制作やWEBデザイナーの需要も高まっています。ドメイン・サイト・サーバーさえあれば、ホームページやブログを立ち上げることが可能に。そして、世界中に発信することができるお手軽な広告塔のため、クラウドワークスでもWEBサイトの新規構築や、サイトの修正といった仕事も豊富です。
特に、illustrationやPhotoshopでデザイン制作もできる方であれば、C言語などのプログラミング言語より、WEBページ制作に特化した勉強や働き方を考えてみましょう。