これからWEB制作を行なっていく未経験の方が、

制作の基礎を6時間で一気に覚えるための問題と説明を制作させていただきました。

環境設定

まずは、環境設定、初期設定を行なっていきましょう。

HTML,CSSのファイルを制作しブラウザで文字を表示させる

環境設定はこちら

リセットCSSを行いHTMLの余計なレイアウトを削除

HTMLの初期にあるデザインの必要のないところをCSSでクリアすることを「リセットCSS」と言います。

このリセットCSSはご自身ですべて行うことも可能ですが、一般的にはインターネットから他の会社のリセットCSSを読み込んで設定を行う場合が多いです。

HTMLファイルのhead内に下記のコードを書き込めば完了です!

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

基礎知識の予習

これから問題に着手をしていただきます。

問題に使用する最低限覚えて欲しいCSSを一覧にさせていただきました。

1度、目を通しておきましょう。

CSS一覧はこちら

問題を着手中、ヒントが欲しい場合は、このページを見ていただくようお願いいたします。

ステップ1

それでは、早速問題に着手をしていきましょう!

ステップ1では、まずはHTMLの書き方と、CSSの反映方法を覚えていきましょう。

目標タイムに到達しない場合、何度もやり直して目標タイムを達成させましょう!

問題_1-01

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-02

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-03

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-04

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-05

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-06

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-07

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-08

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-09

目標タイム :60秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <h1>見出し</h1>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

ステップ2

ステップ2は、ボックスレイアウトを行なっていきましょう!

問題_2-01

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="box"></div>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_2-02

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_2-03

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="box">
            <div class="box01"></div>
    </div>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_2-04

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="box">
            <div class="box01"></div>
            <div class="box01"></div>
    </div>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_2-05

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="box">
            <div class="box01"></div>
            <div class="box01"></div>
    </div>

</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_2-06

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
 
    <div class="box">
            <div class="box01"></div>
            <div class="box01"></div>
            <div class="box01"></div>
    </div>
 
</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。

問題_1-01

目標タイム :180秒

設定HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
 <div class="box">
 <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>
</div>
</body>
</html>

上記のHTMLコードはそのままで、下記の画像と同じものをブラウザへ表現しなさい。