Loading...
CSS入門課題

CSS入門課題

公開
2018.08.26
更新
2018.10.29
  • 課題

  • CSS

ここまで学んできた内容をしっかりと身に付けるため、CSS入門課題に取り組んでみましょう。

ブログ記事を装飾してみよう!

以下の課題に取り組んで、ブログ記事を装飾していきましょう。

今までの講座では触れていないCSSプロパティ・値を使う場合もあります。
わからないものは検索エンジンで調べて実装してみましょう。

前準備

以前作成したarticle.htmlを使用します。
style要素内の記述は一度全て削除し、新たにCSSを記述していきましょう。

  • style要素内を削除したarticle.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのブログ</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  /* ここに課題のCSSコードを記入します */
  </style>
</head>
<body>
<div class="article">
  <h1 class="heading">はじめてのブログ</h1>
  <p>
    <a href="https://gieer.tech/" target="_blank">Gieer</a>のHTML講座を始めました。<br>
    この記事はHTML基礎課題で作成したものです。<br>
  </p>
  <h2 class="subHeading">これまで学んだこと</h2>
  <dl>
    <dt>HTMLタグについて</dt>
    <dd>
      HTMLタグには様々なタグがあり、それぞれに意味があることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5ac5ea3e17075e616054fdfe" target="_blank">HTMLタグの意味を知ろう</a><br>
    </dd>
    <dt>HTML属性について</dt>
    <dd>
      HTMLにはタグに機能を追加するための属性というものがあることを学びました。<br>
      また、属性には自由に値を設定できるものから値を省略できるもの、決まった値の中から選ぶものと、種類があることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5aea62d217075e616054fe04" target="_blank">属性値の種類</a><br>
    </dd>
    <dt>HTML装飾について</dt>
    <dd>
      HTMLを装飾できるCSSというものを学びました。<br>
      装飾はstyle属性で行うか、head要素内にstyleタグを配置することで行うことができます。<br>
      また、装飾にはclass属性を行うことで限定的に、効率的に行えることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5a9676bcf4dbc704df712c85" target="_blank">styleタグでHTMLを装飾してみよう</a><br>
    </dd>
    <dt>その他</dt>
    <dd>
      faviconの設定やソースコードのインデントなど、目に見えるもの、見えないものに関わらず、やるべきことがまだまだたくさんあることを知りました。<br>
    </dd>
  </dl>
  <h2 class="subHeading">これから学ぶこと</h2>
  <ul>
    <li>CSS</li>
    <li>javascript</li>
    <li>開発の効率化</li>
    <li>その他たくさん</li>
  </ul>
  <h2 class="subHeading">まとめ</h2>
  <p>
    まだまだたくさん学ぶことはありますが、WEBエンジニアとしての入り口に立ち、確実にスキルは身についています。<br>
    ゆっくり、しかし確実に成長していきます。<br>
  </p>
</div>
<div>
  <h2 class="heading">コメント投稿フォーム</h2>
  <form action="./article.html" method="post">
    <div class="formItem">
      投稿者名:
      <input type="text" name="name">
    </div>
    <div class="formItem">
      コメント:
      <textarea name="comment"></textarea>
    </div>
    <div class="formItem">
      返信希望:
      <input type="radio" name="reply" value="する">する
      <input type="radio" name="reply" value="しない" checked>しない
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</div>
</body>
</html>

CSS入門課題_初期表示

課題1

文字の表示を整えて、全体を綺麗に見せましょう。

  • 文字サイズを14pxにする
  • 行間を1文字分空ける
  • 字間を0.05文字分空ける
  • 見出し文字の太さを通常にする
  • リンクの文字色を#069に設定する

CSS入門課題1

ヒント

課題2

見出し、ボタンを強調してページにメリハリを付けましょう。

  • h1タグの見出しを強く強調する

CSS入門課題2_レベル1見出し強調

カラーコード:#0ac

  • h2タグの見出しを強調する

CSS入門課題2_レベル2見出し強調

  • ボタンを強調する

ボタンの標準の見た目をリセットするため、先に以下のコードをstyle要素内の上部に追加してください。

button {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  background-color: transparent;
  border: none;
}

CSS入門課題2_ボタン強調

カラーコード:#0ac

CSS入門課題2

ヒント

  • 特定の要素、グループにCSSを適応させるにはクラスセレクタが最適です(CSSセレクタの種類を知ろう
  • 境界線は上・下・左・右を個別に指定することができます

課題3

フォーム内の入力項目の見た目を整えましょう。

  • 投稿者名の入力欄の横幅を20文字分に設定する
  • コメントの入力欄の横幅を画面いっぱいに設定する

CSS入門課題3

ヒント

解答例

解答例を表示する
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのブログ</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  /* ページ全体の設定 */
  body {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.05em;
  }
  h1, h2 {
    font-weight: normal;
  }
  a {
    color: #069;
  }
  button {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    background-color: transparent;
    border: none;
  }

  /* 個別の設定 */
  .heading {
    border-top: double 7px;
    border-bottom: double 7px;
    color: #0ac;
  }
  .subHeading {
    border-top: solid 1px;
    border-bottom: solid 1px;
  }
  .actionButton {
    padding: 10px;
    background-color: #0ac;
    color: #fff;
    font-size: 20px;
  }
  .nameItem {
    display: block;
    width: 15em;
  }
  .commentItem {
    display: block;
    width: 100%;
    height: 10em;
  }
  </style>
</head>
<body>
<div class="article">
  <h1 class="heading">はじめてのブログ</h1>
  <p>
    <a href="https://gieer.tech/" target="_blank">Gieer</a>のHTML講座を始めました。<br>
    この記事はHTML基礎課題で作成したものです。<br>
  </p>
  <h2 class="subHeading">これまで学んだこと</h2>
  <dl>
    <dt>HTMLタグについて</dt>
    <dd>
      HTMLタグには様々なタグがあり、それぞれに意味があることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5ac5ea3e17075e616054fdfe" target="_blank">HTMLタグの意味を知ろう</a><br>
    </dd>
    <dt>HTML属性について</dt>
    <dd>
      HTMLにはタグに機能を追加するための属性というものがあることを学びました。<br>
      また、属性には自由に値を設定できるものから値を省略できるもの、決まった値の中から選ぶものと、種類があることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5aea62d217075e616054fe04" target="_blank">属性値の種類</a><br>
    </dd>
    <dt>HTML装飾について</dt>
    <dd>
      HTMLを装飾できるCSSというものを学びました。<br>
      装飾はstyle属性で行うか、head要素内にstyleタグを配置することで行うことができます。<br>
      また、装飾にはclass属性を行うことで限定的に、効率的に行えることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5a9676bcf4dbc704df712c85" target="_blank">styleタグでHTMLを装飾してみよう</a><br>
    </dd>
    <dt>その他</dt>
    <dd>
      faviconの設定やソースコードのインデントなど、目に見えるもの、見えないものに関わらず、やるべきことがまだまだたくさんあることを知りました。<br>
    </dd>
  </dl>
  <h2 class="subHeading">これから学ぶこと</h2>
  <ul>
    <li>CSS</li>
    <li>javascript</li>
    <li>開発の効率化</li>
    <li>その他たくさん</li>
  </ul>
  <h2 class="subHeading">まとめ</h2>
  <p>
    まだまだたくさん学ぶことはありますが、WEBエンジニアとしての入り口に立ち、確実にスキルは身についています。<br>
    ゆっくり、しかし確実に成長していきます。<br>
  </p>
</div>
<div>
  <h2 class="heading">コメント投稿フォーム</h2>
  <form action="./article.html" method="post">
    <div class="formItem">
      投稿者名:
      <input type="text" name="name" class="nameItem">
    </div>
    <div class="formItem">
      コメント:
      <textarea name="comment" class="commentItem"></textarea>
    </div>
    <div class="formItem">
      返信希望:
      <input type="radio" name="reply" value="する">する
      <input type="radio" name="reply" value="しない" checked>しない
    </div>
    <div>
      <button type="submit" class="actionButton">送信する</button>
    </div>
  </form>
</div>
</body>
</html>

CSS入門課題3

お疲れ様でした!

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!