CSS練習問題２(後半) トップページ

ちなみに前回終了時点で、index.html と mystyle.css は、それぞれ以下のような状態になっていることでしょう。参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="mystyle.css">
<title>ガジェットブログ</title>
</head>

<body>

<header>
<h1><a href="#">Gadget BLOG</a></h1>
<p>物欲にまみれた管理人が気になるガジェットを紹介しているブログです。</p>
</header>

<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">ガジェット</a></li>
<li><a href="#">その他雑貨</a></li>
<li><a href="#">過去の記事</a></li>
<li><a href="#">よくある質問</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>

<div class="wrap">

<article>
<h1>新型タブレット端末ついに発売</h1>

<p>今週、Mapple社の新型タブレット端末iBoard Pro(第4世代)がついに発売となりました。秋葉原の各店舗にも並んでいる模様です。管理人も早速、朝から行列に並んできました。入荷数は限られているようでしたが苦労の甲斐あって無事入手に成功！ 早速レビューしていきたいと思います。</p>

<p>CPUはZMD社のZ99 8840を搭載。GEN4 CPUとしては最多のコア数である16コアを搭載。内蔵グラフィックチップとの接続インターフェイスはPCIe 3.0 x16からPCIe 4.0 x16になり、帯域幅が従来の最大128Gbpsから最大256Gbpsに向上しています。なお、M.2コネクタ位置がPCIe x16スロットに隣接する仕様になったため、本体の筐体サイズは202×96×13mmから270×122×15mmと大型化している点には注意が必要のようです。</p>
</article>

<aside>
<h1>特集</h1>
<ul>
<li><a href="#">新しい通信方式５Ｇについて</a></li>
<li><a href="#">バッテリーを長持ちさせる方法</a></li>
<li><a href="#">スマホと一緒の便利な生活</a></li>
<li><a href="#">100円ショップでお手軽DIY</a></li>
</ul>
</aside>

</div>

<footer>
<p>Copyright © 2007-2020 Gadget Technology inc. All Rights Reserved.</p>
</footer>

</body>
</html>

@charset "UTF-8";

body {font-family: Meiryo,'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;}


/* サイトタイトル */
header h1 a { color: #444444;
              text-decoration: none; }

header h1 { margin: 0;
            font-size: 30px; }

header p { margin: 0;
           font-size: 12px; }


/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { display: block;
        padding: 5px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #dddddd; }

/* メニューを横に並べる */
nav ul:after { content: "";
               display: block;
               clear: both; }

nav li { float: left;
         width: auto; }


/* 記事 */
article h1 { margin-top: 0;
             margin-bottom: 20px;
             font-size:34px; }

article p { margin-top: 0;
            margin-bottom: 20px; }


/* サイドメニュー */
aside ul { margin: 0;
           padding: 0;
           list-style: none; }

aside a { display: block;
          padding: 5px;
          color: black;
          font-size: 14px;
          text-decoration: none; }

aside a:hover { background-color: #dddddd; }


/* フッター */
footer p { margin: 0;
           color: #888888;
           font-size: 14px; }


/* 幅768px以上 */
@media (min-width:768px) {

  /* 横に並べる設定 */
  .wrap:after { content: "";
                display: block;
                clear: both; }

  article { float: left; 
            width:70%; }

  aside { float: left; 
          width:30%; }

}

CSS練習問題２(後半)

課題の概要

課題

7 デザインの調整

8 パーツの追加と修正