未経験からエンジニア転職をするための最強ロードマップロードマップ

【CSS課題】CSSを学んだあとの腕試し問題を公開!【超有料級】

ファド

こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!

今回はCSSの課題に挑戦していただきます!

まだCSSの教材を読んでいない方は、下記リンクより学習してください!

あわせて読みたい
【完全無料】知識ゼロから体系的に学ぶプログラミング学習教材 イントロダクション FADOTECHでは、これからプログラミングを学ぼうと思っている方向けに、知識ゼロから完全無料でプログラミングが学べるように、すべての教材と課題を...
目次

課題の解答について

全ての課題の解答例はnoteにて販売しております。
解答が欲しい方のみ下記リンクよりご購入ください!

note(ノート)
CSS課題の全解答|ファド|無料プログラミング学習ブログ運営 こんにちは! 福岡でフリーランスエンジニアをしている「ファド」と申します! こちらの記事は、私の技術ブログ兼無料プログラミング学習教材サイトの「FADOTECH」で無料で...

また、MENTAのサポートでは1日あたり約300円でプログラミング学習のサポートを行っております。
そちらでご契約いただくことで全ての課題をレビューしております。

プログラミング学習サポートと解答例が欲しい方は、下記URLよりMENTAにてご契約ください。

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

CSS課題用フォルダ作成

CSS課題を始める前に、課題用のフォルダを作成します。
VSCodeでProgrammingフォルダを開きましょう。
そして、tasksフォルダをクリックして、フォルダ作成マークをクリックし、新しいフォルダを作成して、CSSをと名前を付けましょう。

これでCSS課題用のフォルダが完成しました。

課題を進める上での注意点

  • インデントを意識してください。
  • インデントなどでは、半角スペースを使用してください。
  • 調べたことをコピペするだけではなく、しっかりとコードの意味を理解してから使用しましょう。
  • 課題ごとに記載されている検索ワードは、詰まるまでなるべく見ないようにしましょう。

colorプロパティ

フォルダ名:「〇〇〇〇_css_color」
〇〇〇〇にはご自身のフルネームを入力してください。

それぞれの要素を指定された方法で色の変更をして下さい。

id="color1"を指定したp要素
文字色:キーワードを使用して色変更 例:black, white, redなど
背景色:キーワードを使用して色変更 例:black, white, redなど
※色は何色でも良い
※p要素の中のテキストは自由に記述して良い

id="color2"を指定したp要素
文字色:カラーコードを使用して色変更
背景色:カラーコードを使用して色変更
※色は何色でも良い
※p要素の中のテキストは自由に記述して良い

id="color3"を指定したp要素
文字色:RGBAを使用して色変更
背景色:RGBAを使用して色変更
※色は何色でも良い
※p要素の中のテキストは自由に記述して良い

class="color4"を指定した3つのp要素
文字色:キーワードを使用して色変更 例:black, white, redなど
背景色:キーワードを使用して色変更 例:black, white, redなど
※色は何色でも良い
※p要素の中のテキストは自由に記述して良い

class="color5"を指定した5つのp要素
文字色:カラーコードを使用して色変更
背景色:カラーコードを使用して色変更
※色は何色でも良い

class="color6"を指定した7つのp要素
文字色:RGBAを使用して色変更
背景色:RGBAを使用して色変更
※色は何色でも良い

⬇出力例⬇

★検索ワード
css colorプロパティ

横幅と高さ

フォルダ名:「〇〇〇〇_css_size」
〇〇〇〇にはご自身のフルネームを入力してください。

下記2つの要素を作成してください。

①idを指定したdiv要素で、横幅が150px高さが300px、枠線が2px
②classを指定したdiv要素で、横幅が200px高さが100px、枠線が3px

⬇出力例⬇

★検索ワード
css id
css class
css width
css height
css border

余白

フォルダ名:「〇〇〇〇_css_space」
〇〇〇〇にはご自身のフルネームを入力してください。

cssを使って下記の要件に合うdiv要素を作成してください。
※ただし、今回の課題ではmarginの相殺は起こってもよいとする。

id="test-margin1"を指定したdiv要素
横幅:200px
高さ:200px
枠線:1px,solid,black
margin:上下左右に50px

id="test-margin2"を指定したdiv要素
横幅:200px
高さ:200px
枠線:1px,solid,black
margin:上下に50px

class="test-padding1"を指定したdiv要素
横幅:200px
高さ:200px
枠線:1px,solid,black
padding:上下左右に50px

class="test-padding2"を指定したdiv要素
横幅:200px
高さ:200px
枠線:1px,solid,black
padding:左右に50px

⬇出力例⬇

★検索ワード
css margin
css padding

float課題1

フォルダ名:「〇〇〇〇_css_float1」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのfloatを使って見本と同じレイアウトを作成してください。

◯注意点
・見た目を厳密に合わせる必要はありません

★検索ワード
css float 使い方

float課題2

フォルダ名:「〇〇〇〇_css_float2」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのfloatを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css float 使い方

float課題3

フォルダ名:「〇〇〇〇_css_float3」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのfloatとlast-childを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css float 使い方
css last-child使い方

float課題4

フォルダ名:「〇〇〇〇_css_float4」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのfloatとlast-childを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css float 使い方
css last-child使い方

float課題5

フォルダ名:「〇〇〇〇_css_float5」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのfloatとlast-childを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css float 使い方
css last-child使い方

flexbox課題1

フォルダ名:「〇〇〇〇_css_flexbox1」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのflexboxを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css flexbox 使い方

flexbox課題2

フォルダ名:「〇〇〇〇_css_flexbox2」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのflexboxを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css flexbox 使い方

flexbox課題3

フォルダ名:「〇〇〇〇_css_flexbox3」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのflexboxを使って見本と同じレイアウトを作成してください。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css flexbox 使い方

flexbox課題4

フォルダ名:「〇〇〇〇_css_flexbox4」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのflexboxを使って見本と同じレイアウトを作成してください。
ただし、3つの要素と4つの要素がそれぞれ縦で並んでいるレイアウト部分はflex-directionを使用して下さい。
3つの要素と4つの要素のそれぞれの親要素が縦に並んでいますが、そこはflex-directionを使う必要はありません。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css flexbox 使い方
css flex-direction 使い方

flexbox課題5

フォルダ名:「〇〇〇〇_css_flexbox5」
〇〇〇〇にはご自身のフルネームを入力してください。

cssのflexboxを使って見本と同じレイアウトを作成してください。
ただし、4つの要素が縦で並んでいるレイアウト部分のみflex-directionを使用して下さい。

○注意点
・余白はすべて10px
・見た目を厳密に合わせる必要はありません

★検索ワード
css flexbox 使い方
css flex-direction 使い方

レスポンシブ課題1

フォルダ名:「〇〇〇〇_css_responsive1」
〇〇〇〇にはご自身のフルネームを入力してください。

下記の見本のように、PC用、タブレット用とスマートフォン用の見た目を作成してください
○注意点
・htmlファイルとcssファイルはそれぞれ一つしか用意しない。
・余白はすべて10px

PC用(ブラウザ幅が769px以上)

タブレット用(ブラウザ幅が768px以下、481px以上)

スマホ用(480px以下)

★検索ワード
css レスポンシブ

レスポンシブ課題2

フォルダ名:「〇〇〇〇_css_responsive2」
〇〇〇〇にはご自身のフルネームを入力してください。

下記の見本のように、PC用、タブレット用とスマートフォン用の見た目を作成してください
○注意点
・htmlファイルとcssファイルはそれぞれ一つしか用意しない。
・余白はすべて10px

PC用(ブラウザ幅が769px以上)

タブレット用(ブラウザ幅が768px以下、481px以上)

スマホ用(480px以下)

★検索ワード
css レスポンシブ

おめでとうございます!

よくここまで頑張りました!

これでCSSの課題はすべて終了です。

次はプログラミング言語である「JavaScript」という言語を学んでいきましょう!

あわせて読みたい
【JavaScript教材①】JavaScriptとは?JSの基本からconsole.logの使い方、変数までを徹底解説 こちらの記事はJavaScript教材の第1回目の記事になります。 その他のJavaScript教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。 JavaScriptとは 今...

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!

サポート価格はなんと1日あたりたったの約300円!

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!

なお、サポート内容の詳細は下記の通りです。

  • 目標設定
  • マインドセット
  • オリジナル教材見放題
  • オリジナル課題見放題
  • オリジナル課題の解答見放題
  • 課題コードレビュー
  • 教材への無制限質問
  • 課題への無制限質問
  • ポートフォリオ作成アドバイス
  • 褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

コメント

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!

    コメント

    コメントする

    目次