CSSの書き方入門 - はじめてのWebデザイン

CSS(スタイルシート)の書き方を、初めて触れる初心者の方にも分かるように画像たっぷりで解説しています。スタイル指定に必要なdivやclassの考え方も解説。これさえ知っていればCSSの重要な部分をマスターすることができます。


無料

レベル

ビギナー

6レッスン

access_time 1日間

CSSの勉強を始めて、こんなことはありませんか?

htmlとcssが
上手く噛み合わない

途中で変になると
もうお手上げ…

プロパティや値が多すぎて
どうして良いか、わからない

驚くほど速習!レスポンシブ対応までCSSの重要な部分を厳選して解説

~暗記不要! ほんとうに必要なことを作りながら学ぶミニマムcss入門~

Webページを見やすく、おしゃれに作ろうと思ったら、避けては通れないのがCSS(スタイルシート)。見た目を整えて一気にハイクオリティなWebページを作れる反面、使える命令が非常に多くて、どこから手を付けたらよいか困ってしまいますよね。

ですが、心配ありません。
CSSも基本構造はシンプルなものが大半。学ぶ順番と、よく使う重要なところさえ押さえれば、驚くほどすんなりとCSSの基礎は習得できます。基礎をマスターすれば、より高度なスタイル指定もすぐに理解できるようになります。

HTMLの書き方入門の後に受講頂くと、完全なる白紙からWebサイトを完成させることができます。1つのサイトが出来上がっていく楽しさ、完成した時の感動が、制作者の原動力です。

短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、受講したその日に基礎習得という超短期学習を実現することができます。

本講座は穴埋め形式ではなく、スタイルシートをイチから作成していきます。業界ではマストとなっているレスポンシブ対応方法までしっかりと解説。HTMLの書き方入門講座で作成したページにCSSを適用する方法もから順番に解説しているので、Webサイトコーディングの基礎を総合的にマスターすることが出来ます。

作りながら自然に覚えられるから、挫折しない

1

完全未経験でも大丈夫! 基本の基本からやさしく解説

本講座では、専門書やリファレンスのような難しい言葉使いをせず、親しみのある言葉や図解で解説しています。CSSって何? という初心者の方も安心して受講いただけます。

今後の学習やプロとしてお仕事をする上で、覚えていきたい用語の解説もあります。講座終了後には、いままで分からなかったリファレンスの説明も理解できるようになりますよ。

2

実際にCSSを書いて納得するから、自然に頭に入ってきます

本講座内に「読んで覚える」項目はありません。一緒に手を動かしてコードを書きながら進めていただきます。目に見えてページがグレードアップしていくので、楽しく進められますよ。

また、実際に作って納得したことは覚えやすく忘れにくいというメリットもあります。プロパティ名を唱えて暗記しなくても、一緒にWebサイトを作っていくだけで自然とCSS基礎が習得できます。

3

スマホでの表示にも対応した、本格的なWebサイトが完成!

一緒に手を動かしてレッスンを進めると、制作会社では「別料金オプション」となっていることもある、レスポンシブ対応(スマートフォンなど画面の幅に合わせて、最適な表示を行う方法)まで終えたWebサイトが完成します。

一度作ったサイトは別のサイトを作る時の“ひな形”としても利用可能。より高度なCSS学習にも活用いただけます。

本講座を終えると、できるようになること

  • CSSでWebページを装飾できる
  • divやclassを使ってデザインを再現できる
  • 文字や背景色を好きに設定できる
  • flexboxレイアウトを使った配置ができる
  • レスポンシブ対応コーディングができる

レッスン内容

  • 1

    CSSとは何か、Webページの見た目を整えるために書くスタイル指定の基本書式を解説します。

  • 2

    実際にhtmlをCSSで装飾しながら、スタイルシートの扱い方を覚えていきましょう。cssファイルを読み込ませる方法や、classを使ったスタイル指定方法を解説します。

  • 3

    要素を横並びにする方法や、余白の設定方法を解説します。配置に関係するスタイル指定を書いて、index.htmlを完成させましょう。

  • 4

    会社概要ページ(company.html)にCSSを適用させていきましょう。テーブルの枠線を整える方法も解説しています。

  • 5

    お問い合わせページ(form.html)のスタイル指定を行います。既存のクラスを使用しつつ、新しいクラスを作ってスタイルを指定することでデザイン通りのレイアウトを実現させます。

  • 6

    スマートフォンのような小さな画面でも、作成したWebサイトをストレス無く見られるように調整しましょう。CSSファイルに少し書き足すだけで、レスポンシブ対応にすることが出来ます。

もっと見る


CSSの書き方入門 - はじめてのWebデザインを 無料で始めましょう!

募集人数には制限があります。サインアップはお早めに。

無料申し込み期限

10月31日まで


募集
人数

100名 (残りわずか)

×