CSS

【演習課題】CSSでブログページのスタイルを整える

どうも、つよぽんです!

今回はこれまで解説してきたCSS知識の総復習としてブログページのスタイルを整える課題に取り組んでもらうことが目的の記事となります。

課題の詳細は以下の記事から確認することが出来るので、今すぐ課題に取り組みたい方は以下のリンクから早速課題ページにアクセスして取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】CSSを使ってブログページのスタイルを整える今回はCSSの学習コンテンツ初級編・中級編で学んできた知識全般を使っていただきます。こちらで用意したブログページ(HTML)のスタイルをCSSを使って整えていただきます。練習課題をクリアして初級編・中級編で学習してきた知識を定着させましょう。...

課題で作成するブログページは以下の画像の内容になります。(画像をクリックすると拡大されます。)

課題で作成するブログページ課題で作成するブログページ

この記事の想定読者は次のとおりです。

想定読者
  • CSSの基本部分をおさえたい
  • 実践的なスキルを身につけたい

今回の課題をクリアすることは、CSSでよく使うプロパティの知識が定着していることを意味し、マージン・パディング・ボーダーなどのCSSボックスモデルの基本も理解することになります。

そのため、課題クリア後は必要に応じて検索しながら開発を進めるだけのスキルは身についていることになるので、次のような新しいことの学習に入っても問題ないでしょう。

新しい学習内容の一例
  • BootstrapなどのCSSフレームワーク
  • JavaScript

この記事では今回の課題で使われるCSSの知識のふりかえりを行います。

CSSで色コードを指定する3種類の方法【16進数・関数・英単語】

あわせて読みたい
CSSで色コードを指定する3種類の方法【16進数・関数・英単語】CSSで色コードを指定する方法は複数種類あります。この記事ではその中でも使われることが多い3種類の色コードの指定方法を解説していきます。その3つは「英単語」「16進数表記」「関数記法」です。この記事で使い方を学習しましょう。...

こちらの記事では、CSSで色を設定する3つのやり方を解説しました。

今回の課題では「見出しの背景色」「見出しの文字色」「強調文字の文字色」を変更させる際に、こちらの記事で学習した知識を使います。

CSSでの色の指定方法を忘れてしまった場合は上記記事で学習した内容をふりかえってみましょう。

CSSのbackgroundとborderの基本的な使い方【図解】

あわせて読みたい
CSSのbackgroundとborderの基本的な使い方【図解】CSSで背景に色や画像をセットしたいときに使うbackground。枠線をつけたいときに使うborder。Webページをキレイにするだけでなく要素の形(CSSボックスモデル)を理解するときにも便利なのでデバッグ時にも重宝するプロパティです。...

こちらの記事では、CSSで背景のスタイル変更方法とボーダー(枠線)をつける方法を解説しました。

今回の課題では「見出しの背景色」「小見出しの下のボーダー」「引用部分の左のボーダー」を実装するのに、こちらの記事で学習した知識を使います。

CSSでの背景のスタイル変更方法ボーダーの設定方法を忘れてしまった場合は上記記事で学習した内容をふりかえってみましょう。

CSSボックスモデルとは?4つの基本構成を理解する【図解】

あわせて読みたい
CSSボックスモデルとは?4つの基本構成を理解する【図解】CSSのボックスモデルを理解することは、Webページの実装に大きな助けとなります。①コンテンツ境界・②パディング境界・③ボーダー境界・④マージン境界、これら4つはCSSのボックスモデルを構成する大事な概念となります。...

こちらの記事では、CSSで「コンテンツ領域」「パディング領域」「ボーダー領域」「マージン領域」を理解するために必要な知識であるボックスモデルについて解説しました。

今回での課題では「padding」「margin」「border」をいたるところで利用しています。

特に「padding」と「margin」に関してはどのWebページでも利用されるプロパティとなるので、ボックスモデルはぜひともおさせておきましょう。

CSSセレクターの書き方【まずは覚えたい3つの基本形】

あわせて読みたい
CSSセレクターの書き方【まずは覚えたい3つの基本形】CSSでスタイルを定義するときに使うセレクターについて解説します。セレクターの書き方はたくさんあります。まずは基本となる「要素型セレクター」「クラスセレクター」「IDセレクター」の3つを覚えましょう。...

こちらの記事では、CSSでスタイル定義を行う際に必要不可欠な「セレクター」について解説しています。

今回の課題では「要素型セレクター」「クラスセレクター」を使ってブログページのスタイルを整えます。

セレクター基本中の基本の概念となるので「要素型セレクター、クラスセレクターって何?」っていう方は、上記記事で復習しておきましょう。

CSSで文字スタイルを変えるパート1 【フォント・サイズ・太さ】

あわせて読みたい
CSSで文字スタイルを変えるパート1 【フォント・サイズ・太さ】今回はCSSで文字スタイルを変更する方法について解説します。2部構成で話を進め、今回は第1部となります。第1部では「フォントスタイル」「サイズ」「太さ」の変更方法について解説します。...

こちらの記事では、文字の「フォントスタイル」「サイズ」「太さ」の変更方法について解説しました。

今回の課題では、「見出し・小見出しの文字サイズと太さの変更」「強調文字のサイズと太さの変更」「ベースとなるフォントスタイルの指定」を行います。

特に文字サイズの指定に関しては、サイズを数値で指定する際に「px」「%」「em」「rem」などさまざまな単位を使うことが出来ます。

それぞれの単位が何を意味しているのか覚えていない場合は上記記事でふりかえることをオススメします。

CSSで文字スタイルを変えるパート2【行間・配置・装飾】

あわせて読みたい
CSSで文字スタイルを変えるパート2【行間・配置・装飾】CSSで文字スタイルを変更する方法について解説します。全2部構成で話を進め、今回は第2部となります。第2部ではテキストの「行間」「配置」「装飾」の変更方法について解説します。...

こちらの記事では、文字の「行間幅の指定」「配置方法」「下線などのつけかた」について解説しました。

今回の課題では、「強調文字に下線をつける」部分で上記記事で学習した知識を活用します。

下線のつけかたを忘れてしまった場合は、上記記事を参考に課題をこなしていただけたらと思います。

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、「ブログページのスタイルを整える」課題に取り組んでみましょう。

あわせて読みたい
【エクササイズ】CSSを使ってブログページのスタイルを整える今回はCSSの学習コンテンツ初級編・中級編で学んできた知識全般を使っていただきます。こちらで用意したブログページ(HTML)のスタイルをCSSを使って整えていただきます。練習課題をクリアして初級編・中級編で学習してきた知識を定着させましょう。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です