新入社員が学んだ🖌デザインで大切なこと ③【HTMLとCSS編】
みなさま、こんにちは！
ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する
『にし』です。
今年は例年よりも早い梅雨入りを迎えましたね。
今年こそは、梅雨入り前に雨合羽と傘を購入しようと
考えていましたが、いつもより早く梅雨が来てしまいました。
さて、今回も前回、前々回に引き続き、
「新入社員が学んだ🖌デザインで大切なこと」シリーズです！
今回は「目的」や「優先順位」とは打って変わって
「HTMLとCSS」について紹介したいと思います。
-目次-
1.デザインとHTML、CSSの関係性
2.HTMLとCSSとは何か？
3.HTMLとCSSをもっと知りたい！
1.デザインとHTML、CSSの関係性
前回のおさらい
前回、前々回とデザインにおいて大切な
「目的」「優先順位」について紹介しました。
そこから急に「HTMLとCSS」なんて言われても
「はて？」となってしまいますよね！
そこで、今回はHTMLとCSSの話の前に
デザインとHTML、CSSの関係性について
説明したいと思います。
デザインとHTML、CSSの関係性
結論から言いますと、デザインとHTML、CSSの関係性とは
「デザイン（目的と優先順位）が動機だとすればHTML、CSSは手段」
という事です。
お料理に例えると、カレーを作りたい（動機）として
→野菜を煮込むために水が必要（webサイトを用いる）だとすれば
→水を計るために計量カップが必要（HTMLとCSS）という事になります。
つまり、HTMLとCSSはWEBサイトを構築するために必要な手段なので、
WEBサイトなどをデザインしたい！と思った時に必要なもの、と言えるでしょう。
2.HTMLとCSSとは何か？
という訳で、HTMLとCSSというものがWEBサイトなど構築する時に
必要なもの！という事は分かりましたね！
とは言え、何と関係するかは分かったけど
そもそもHTMLとCSSって何？
という疑問が残ると思います。
そこで次は、HTMLとCSSそのものの
説明をしたいと思います。
HTMLとは”Hyper Text Markup Language”の略で、
Webページを作成するために開発されたプログラミング言語です。
私たちが普段PCやスマホで見ている
WebページのほとんどはこのHTMLを使って作られています。
CSSとは”Cascading Style Sheets”の略で、
Webページのスタイルを指定するための言語です。
CSSはHTMLと組み合わせて使います。
Webページのレイアウトや装飾などの
スタイルを決めるために使用します。
実際に普段見ているWEBサイトも
↑黒字ラボのトップページ
このような文字列で作られています。
↑黒字ラボのトップページの文字列(ソース)
ひえええ！と思いますよね。
こんなの自分には書けない！と感じますが、
実際にどのようなルールで書かれているのか、気になりませんか？
3.HTMLとCSSをもっと知りたい！
HTMLとCSSをどのように使えば、
私たちが見ているようなWEBサイトになるのか？
とても気になる所ですよね！
そんな時！本やWEBサイトの記事などで知る事も可能ですが
今回はHTMLとCSSを学べるような学習サイトを紹介したいと思います！
Progate
このサイトはスライド式で実際にHTMLやCSSを書きながら
学習を進められるので、分かりやすく納得して、HTMLやCSSについて
知ることが出来ます。
HTMLやCSS以外にも様々なプログラミング言語を学ぶことが出来ます。
初級の講座は無料で受ける事が出来るので、まずは試してみたい！
という方にピッタリです！
SKILLHUB
こちらはProgateと同様に
無料で受講できる講座がある事と
講座の種類の多さ（Word Pressやillustratorなど）も特徴の一つです。
動画での解説もあり、カリキュラムもしっかりしている為
バチバチ勉強していくぜ！という方におすすめです！
他にもHTMLやCSSを学べる学習サイトは沢山ありますので、
実際に触ってみて、自分に合うサイトを見付けてみてください。
さてさて、「HTMLとCSS」について
ご紹介しましたが、いかがでしたか？
実際にWEBサイトの仕組みを理解していくと
あれが出来るかも！？こういう事もやってみたい！と
夢が広がるので、ワクワクしますよね。
私も夢を現実に出来るように
HTMLとCSSやデザインの事も沢山学んでいきますので
一緒に頑張りましょう～
本日も
最後までお読みいただきありがとうございました。
