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で困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

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

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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