HTML・CSS独学応援 3-8 課題に挑戦

今回は、今まで学んだHTMLとCSSを使って
課題に挑戦してみましょう。

下記の画像に似せたwebページを作ってみましょう。
CSSは外部読み込みをしてください。

ヒント

  1. HTMLの型を用意する
  2. 各要素を書き込む
  3. CSSを付ける

上記のような手順で製作するとスムーズです。
各要素については、画像を参考にしてください。

spanについては、記事内では触れていません。
練習もかねて、リファレンスなどで調べて使用してみてください。

解説

1,ファイルの用意

HTMLファイルとCSSファイルを作成します。

*今まで学習で使ってきた「reonoheya」というフォルダー内に
 「3-8」というフォルダーを作り
 index.htmlとstyle.cssというファイルを作ります。

 便利上そうしていますが、
 ファイル構造が機能していればOKなので
 新規でフォルダーを作ってもOKですし、
 名前も自由につけてもかまいません。

2,index.hemlを書く

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>3-8チャレンジ</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

</body>
</html>

まずはぁhtmlの型を要しましょう。
この時に、CSSを外部ファイルから読み込みましょう。

<head>の中の<link>がその部分になります。

ヒントの画像をもとに、
<body>の中身を書いていきます。

完成させたコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>3-8チャレンジ</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>&lt;れおの冒険登場人物&gt;</h1>
        <ul class="rist">
            <li><span>れお</span></li>
            <li>がぶ</li>
            <li>らび</li>
        </ul>
    <h1>&lt;あらすじ&gt;</h1>
    <p>小さな保育園にマスコットとして誕生した、れお。
       <br>平和に暮らしていたが、<span class="strength">ある時大きな問題に気付く</span>、
       <br>大好きな海が少しずつ汚れてきているようだ。
       <br>ふたりの仲間と共に・・・・
       <a
 href="#">続きを読む</a></p>
</body>
</html>

<body>の中では以下のものを使用しています。

  • <h1>
  • <ul><li>
  • <p>
  • <span>
  • <br>
  • <a>

<span>については解説していません。
自分で調べて解決する練習として、リファレンスなどで調べて使用してください。

href=" "とclass属性
特殊文字については、すでに学習済みです。

3,style.cssを書く

CSSの適応方法が分からない方は、確認してください。

<h1>のCSS

h1 {
    background-color: #b5ffd1;
    text-align: center;
    font-size: 20px;
    border-top: dotted 3px #0000ff;
    border-bottom: dotted 3px #0000ff;
}

<h1>に対して、CSSを指定します。

色や文字サイズは自由ですが
サンプルではこんな感じでした。

<h1>に対して、CSSを指定します。

  • backgroundo-color 背景色の指定
  • text-align 中央揃え
  • font-size 文字サイズ指定
  • border-top 上の線
  • border-bottom 下の線

<ul>のCSS

ul {
    list-style: none;
    font-size: 16px;
    text-align: center;
}

<ul>の対してCSSを指定していきます。

リストの・を消すCSSは
<li>ではなく<ul>につけています。

  • list-style リストのスタイル(・を消しています)
  • font-size 文字の大きさ
  • text-aligin 中央揃え

<p>のCSS

p {
    font-size: 16px;
    text-align: center;
}

<p>に対してCSSを指定していきます。

  • font-size 文字サイズ
  • text-aligin 中央揃え

<a>のCSS

a {
    text-decoration: none;
}

<a>のCSSを指定していきます。

デフォルトでつく、下線を消しています。

  • text-decoration テキストの装飾

<span>のCSS

span {
    color: #f00;
    font-size: 25px;
}

<span>のCSSを指定していきます。

  • color 文字色の指定
  • font-size フォントサイズの指定

strengthクラスのCSSを指定

.strength {
    color: #ff9900;
    font-size: 16px;
}

<span>のstrengthクラスのCSSを
指定していきます。

  • color 文字色の指定
  • font-size フォントサイズの指定
完成させたコード
h1 {
    background-color: #b5ffd1;
    text-align: center;
    font-size: 20px;
    border-top: dotted 3px #0000ff;
    border-bottom: dotted 3px #0000ff;
}

span {
    color: #f00;
    font-size: 25px;
}
.strength {
    color: #ff9900;
    font-size: 16px;
}

ul {
    list-style: none;
    font-size: 16px;
    text-align: center;
}

p {
    font-size: 16px;
    text-align: center;
}

a {
    text-decoration: none;
}