1. HOME
  2. ブログ
  3. 新入社員が学んだ🖌デザインで大切なこと ③【HTMLとCSS編】

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

本日も
最後までお読みいただきありがとうございました。

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2021年5月
« 4月   6月 »
 12
3456789
10111213141516
17181920212223
24252627282930
31