CSSの書き方入門 - はじめてのWebデザイン
CSS（スタイルシート）の書き方を、初めて触れる初心者の方にも分かるように画像たっぷりで解説しています。スタイル指定に必要なdivやclassの考え方も解説。これさえ知っていればCSSの重要な部分をマスターすることができます。
無料で今すぐはじめる※ ログインする必要はありません。
レベル
ビギナー
10レッスン
1日間
CSSの勉強を始めて、こんなことはありませんか？
htmlとcssが
上手く噛み合わない
途中で変になると
もうお手上げ…
プロパティや値が多すぎて
どうして良いか、わからない
驚くほど速習!レスポンシブ対応までCSSの重要な部分を厳選して解説
～暗記不要! ほんとうに必要なことを作りながら学ぶミニマムcss入門～
Webページを見やすく、おしゃれに作ろうと思ったら、避けては通れないのがCSS（スタイルシート）。見た目を整えて一気にハイクオリティなWebページを作れる反面、使える命令が非常に多くて、どこから手を付けたらよいか困ってしまいますよね。
ですが、心配ありません。
CSSも基本構造はシンプルなものが大半。学ぶ順番と、よく使う重要なところさえ押さえれば、驚くほどすんなりとCSSの基礎は習得できます。基礎をマスターすれば、より高度なスタイル指定もすぐに理解できるようになります。
短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、受講したその日に基礎習得という超短期学習を実現することができます。
本講座は穴埋め形式ではなく、スタイルシートをイチから作成していきます。業界ではマストとなっているレスポンシブ対応方法までしっかりと解説。HTMLの書き方入門講座で作成したページにCSSを適用する方法もから順番に解説しているので、Webサイトコーディングの基礎を総合的にマスターすることが出来ます。
作りながら自然に覚えられるから、挫折しない
完全未経験でも大丈夫! 基本の基本からやさしく解説
本講座では、専門書やリファレンスのような難しい言葉使いをせず、親しみのある言葉や図解で解説しています。CSSって何? という初心者の方も安心して受講いただけます。
今後の学習やプロとしてお仕事をする上で、覚えていきたい用語の解説もあります。講座終了後には、いままで分からなかったリファレンスの説明も理解できるようになりますよ。
実際にCSSを書いて納得するから、自然に頭に入ってきます
本講座内に「読んで覚える」項目はありません。一緒に手を動かしてコードを書きながら進めていただきます。目に見えてページがグレードアップしていくので、楽しく進められますよ。
また、実際に作って納得したことは覚えやすく忘れにくいというメリットもあります。プロパティ名を唱えて暗記しなくても、一緒にWebサイトを作っていくだけで自然とCSS基礎が習得できます。
スマホでの表示にも対応した、本格的なWebサイトが完成!
一緒に手を動かしてレッスンを進めると、制作会社では「別料金オプション」となっていることもある、レスポンシブ対応（スマートフォンなど画面の幅に合わせて、最適な表示を行う方法）まで終えたWebサイトが完成します。
一度作ったサイトは別のサイトを作る時の“ひな形”としても利用可能。より高度なCSS学習にも活用いただけます。
本講座を終えると、できるようになること
- CSSでWebページを装飾できる
- divやclassを使ってデザインを再現できる
- 文字や背景色を好きに設定できる
- flexboxレイアウトを使った配置ができる
- レスポンシブ対応コーディングができる
レッスン内容
-
1
Webページの見栄えを整えるために使う、CSS（カスケーディング・スタイル・シート）とは何かを知りましょう。
-
2
CSSの基本書式、スタイルシートファイルを作ってhtmlから読み込む（適用させる）方法を解説します。
-
3
実際にhtmlをCSSで装飾しながら、スタイルシートの扱い方を覚えていきましょう。CSSによる装飾を行うためによく使用される
タグ、classを使ったスタイル指定方法を解説します。 -
4
スタイルシートでは要素の幅や高さを設定することができます。index.htmlを使って、最大幅を設定してみましょう。画像などがはみ出してしまう場合の対処法も解説します。
-
5
デザインに沿ったWebページを完成させるためには、余白や配置の設定も必要です。余白に使われるCSSプロパティであるmarginとpaddingの違い、要素の配置を変更する方法について解説します。
-
6
css3.0から正式採用された「flexbox」を使って、横並びのレイアウトを作ってみましょう。flexboxを使うためのHTML構造、CSSでFlexアイテムの幅を設定する方法も解説します。
-
7
横並びにしたulタグのリストマークを消す（非表示にする）方法を解説します。li要素間に間隔を作っって、Webページをさらに見やすく整えていきましょう。今回でindex.htmlのCSSコーディングが完成しますよ！
-
8
テーブル要素のスタイル指定を中心に、会社概要ページ（company.html）を使ってCSSを学んでいきましょう。既存のスタイル指定を適用する方法、枠線を作るborderプロパティ、テーブルの枠線が二重にならないようにする方法を解説します。
-
9
お問い合わせページ（form.html）のスタイル指定を行います。既存のクラスを使用しつつ、新しいクラスを作ってスタイルを指定することでデザイン通りのレイアウトを実現させます。
-
10
スマートフォンのような小さな画面でも、作成したWebサイトをストレス無く見られるように調整しましょう。CSSファイルに少し書き足すだけで、レスポンシブ対応にすることが出来ます。
もっと見る
CSSの書き方入門 - はじめてのWebデザインを 無料で始めましょう！
無料申し込み期限
11月24日まで
募集
人数
100名 （残りわずか）
HTMLの書き方入門の後に受講頂くと、完全なる白紙からWebサイトを完成させることができます。1つのサイトが出来上がっていく楽しさ、完成した時の感動が、制作者の原動力です。