初心者の方へ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にするなどを指定する場合には。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ページ制作に特化した勉強や働き方を考えてみましょう。自分のサービス作れて嬉しい。情報系学部なのにスクールに。