新入社員が学んだ🖌デザインで大切なこと ③【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やデザインの事も沢山学んでいきますので
一緒に頑張りましょう~
本日も
最後までお読みいただきありがとうございました。