【CSS】を知る - 勉強方法と誰でもできるWebデザイン
HTMLはわかったけど、みんなどうやって色つけたり、配置を一番右にしたりしてるの？
今回はCSS(シーエスエス)を勉強していきます。
まだ勉強を始める段階、HTMLがわかっていない方は以下を参考に始めてみてください。
HTMLの理解がまだお済みでない方はこちら
どうやって勉強するか悩んでいる人はこちら
soriblog.comHTMLを勉強し始めると必ず必要なのがCSSです。
今回は以下のような方達に是非読んでもらいたいです。
CSSとは
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート[1]）は、HTMLやXMLの要素をどのように修飾（表示）するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する。 引用： Cascading Style Sheets - Wikipedia
HTMLで表現した要素に対して色、ブロック配置、物体の形など様々なデザイン装飾ができます。 Webサイトを作る上で必須言語です。
実際にはこんな感じです。
例えば以下のようなHTMLを作成します。
するとこんな感じのHTMLの見た目ができます。
これに対して、簡単にCSSを適応してみます。
見た目が大きく変わりました。
上記のような感じで、CSSを適応してみると一気にWebサイト感がでました。
デザインを知る
CSSを適応するにしても、どのようにデザインしたら良いかわかりません。
いきなり書き始めると変な感じのデザインなってしまうと思います。
まずは、目標となるWeb作ることがとても大事です。
そのためには、いろんなサイトをみてみましょう。
最初のうちはレイアウトや色の使い方など、どんどん真似てください。
※完全コピーはNGです。
例えばこんなCSSの祭典みたいな物もあります。
以下はWebサイトに関する国際的なWebデザイン/開発アワードです。
https://www.cssdesignawards.com/これ以外にもあなたが日々、みているWebサイトで「かっこいいな」「かわいいな」と思うものをブックマークする習慣をつけてください。そしてこんなサイトを作りたいという目標を作りましょう。
いざ、サイトを作るときにあなたのインスピレーションの助けになります。
CSSのおすすめの勉強方法
学習方法
作りたいサイトの目標が決まったら、実際にCSSを勉強します。
以下を１回やってみてください。
大事なのは２周目で
こんなことを常に考え、いじりながら進めてください。
おすすめの学習サイト
学習サイトはやっぱりドットインストールがおすすめです。
dotinstall.comですが、本でも良いものはたくさんあるのでOKです。
その先の進め方
ある程度基本がわかったら、特に改めて基礎を学習することはないと思います。
とりあえず、試行錯誤しながらまずは完成に導いてください。
本や学習サイトではやってないCSSもたくさんあるはずです。
わからないことは全エンジニアの共通ルールで「検索」をします。
あるいは、知人に聞いてもOKです。
これは理系エンジニアも文系エンジニアも関係なく一緒です。
検索することに慣れることは今後のエンジニアキャリアへの第一歩となるので
わからなければひたすら検索
を意識してまずはチャレンジしてみてください。
