WEB制作 HTML CSS を理解するための3つの法則 コーディングにつまずいた時には 初心者ホームページの疑問

HTMLとは

HTML CSS はWEBサイトの制作、又ウェブデザイナーに必要な言語スキルです。

HTMLは HyperText Markup Language ハイパーテキストマークアップランゲージ、の略。
ホームページ制作は、HTMLファイルを作成しその中に、サイトの内容をマークアップします。
マークアップは「目印をつけること」を意味します。

HTMLにはルールがあり「見出し」「段落」「表」など、文書の中で各部分が果たしている役割が分かるようにマークアップします。

CSSとは

CSSは Cascading Style Sheets カスケーディング・スタイル・シート の略です。
HTMLでサイトの骨組みや内容を構成したら、CSSで色をつけたり文字の大きさを装飾したり、レイアウトを指定します。

HTML と CSS は難しい？

HTML と CSS を書いたり読んだりすることを「コーディング」と言います。webデザインには欠かせないスキルですが、この「コーディング」を難しく感じるという人が割合多いのです。

学び始めて「ぜんぜん意味がわからないんですけど・・・」
そんな壁にぶつかっているデザイナー志望や、勉強中の方は今回の「 HTML CSS を理解するための3つの法則」読んでみて下さい。

1、暗記してもダメ

コードを丸暗記して覚えていませんか？
コードを暗記するのはおすすめしません。なぜか？！

それは受動的だからです。物事の結果を暗記しても意味がありません。「なぜ、そのコードになったのか、その結果になったのか」点と点を自分の頭の中で結びつけ線にする能動性こそが大事なのです。

コードには全て意味があります。ではその意味を理解するためにどうしたらいいのでしょう。

2、英語を要約してみる

コードは英語や数字の羅列と考えると、英語や数学が苦手な人は、頭の中がオーバーヒートしてしまいますね。目線を変えて考えてみましょう。

コードはそれぞれ意味を持っています。
プロパティ、セレクタ、タグ、、、聞き慣れない言葉で難しく感じてしまうなら、自分の中で要約してみます。

プロパティ ＝ 値 、どの位かを示すもの
セレクタ ＝ これは class だけ覚えておけばいいです、idは使わない
タグ ＝ 属性、それぞれの役割

3、ストーリーとして考える

代表的なタグ、　h1 「見出し1」を例えて考えてみます。
ページのタイトルに使用される h1 はSEO対策的にも重要です。

ページの内容を要約して分かりやすく表現する責任を担った h1 だから、フォントサイズは大きく、装飾が施されているのです。
そう考えると1枚のページ、HTMLファイルにストーリーが出てくるはずです。

サイト構成の歴史

サイトのデザインというのは、こうだとゆう決まりは本来ありません。
ですが、レンスポンシブデザイン（PC、タブレット、スマホに対応する可変するデザイン）で構成しなければならないことや、検索エンジンGoogleが推奨するコード構成など、様々な理由が絡まり合った結果、今現在の流行やスタンダードなサイトデザインに落ち着いたわけです。

コードにも歴史があり様々な流れを経て、今のコード HTML5 CSS3 にたどり着いたわけです。

その歴史の結果だけを丸暗記しても、疑問ばかりが残るでしょう。腑に落ちない点がいくつも出てきてしまうのも無理ありません。

おすすめの本

ごく基本的なタグやコードを覚えるのは必要だと思います。ですが、とにかく全部覚えなければならないと思い込んでしまったりするのは、実は「コーディング」の原理原則をわかっていないから。

そこで、今回はコードの本質や成り立ちを理解するのに役立つ本を紹介させていただきます。
こちらはコーディングの参考書やハウツー本とは違います。
コードの歴史、特性を語りかけるように伝えてくれます。口語体なので頭にすんなり入りやすい内容です。

【「HTMLとCSSで基礎から学ぶWebデザイン」園田 誠 (著)　】


↓ ご自身で原理原則を導き出したい方は、レッスンのご相談お気軽にどうぞ

○●----------------------------------------------------●○

【 自分の好きな時間場所でレッスンできる個人レッスン・グループレッスンオンライン可能 】
マンツーマンレッスンについて

【 WEB制作、グラフィックデザインに必要なこと 】
AIデジタル化で活躍していくためのご提案

【 いい上司いい先生はなぜ教えてくれない?! 質問スキルを上げよう 】
学び上手、質問上手になるにはどうするか

○●----------------------------------------------------●○