Web言語マスター復活への道/5日目

alice

2021年7月24日 23:25

東京五輪がなんやかんやで盛り上がってますが、変わらず書いていきます！
1回はオンタイムでみたいなあと思ってます🥳🥳

目標

・css完了

本日の作業

・css基礎残り
本来なら縦にリスト化するはずですが、横に並べることができている
また、backgroundプロパティ？を使うことでボタンぽくもできる

coding.css

nav ul li {
   display: inline-block;
   width: 100px;
   padding: 5px;
   background-color: gray;
}

nav ul {
   position: fixed;
}

.background {
   height: 100px;
   background-color: olive;
}

・css完了
今回わからないところは調べながらですが、ホームページの原型のようなイメージでデザインあててみました。前日のbeverageサイトをベースにしています。

coding.html

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

<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="coding.css">
   <title>
       beveragesite
   </title>
</head>

<body>
   <header>
       飲みもの紹介
   </header>
   <ul>
       <li><a href="https://test">水</a></li>
       <li><a href="https://test">お茶</a></li>
       <li><a href="https://test">ジュース</a></li>
       <li><a href="https://test">お酒</a></li>
       <li><a href="https://test">炭酸</a></li>
   </ul>

   <div id="main">
       <h1>飲み物紹介</h1>
       <p>飲み物とは、水分の多い、人間が体内に摂取できるものである。</p>
   </div>
   <div id="wrapper" class="clearfix">
       <div id="sidebar">
           サイドバー
       </div>
   </div>
   <footer>
       <div id="footer">
           <ul>
               <li><a href="http://test">HOME</a></li>
               <li><a href="http://test">アクセス</a></li>
               <li><a href="http://test">問い合わせ</a></li>
           </ul>
       </div>
       <small>&copy; 2021 beveragesite.com</small>
   </footer>
</body>

</html>

coding.css

ul li {
   color: red;
}

body {
   margin: 0;
   padding: 0;
   color: grey;
   font-size: 14px;
}

a {
   color: grey;
}

a:visited {
   color: purple;
}

a:hover {
   color: grey;
   font-weight: 700;
   text-decoration: none;
}

h1, h2 {
   margin-top: 0;
}

img {
   vertical-align: bottom;
}

header {
   color: white;
   background-color: indianred;
   padding: 10px 22px;
}

body ul li {
   width: 150px;
   margin-bottom: 20px;
   display: inline-block;
   background-color: tomato;
   color: wheat;
   text-align: center;
}

body ul li.current a {
   background-color: violet;
}

body ul li a:hover {
   background-color: white;
}

#wrapper {
   width: 984px;
   margin: 0 auto;
}

#sidebar {
   width: 220px;
   float: right;
}

#footer ul li {
   list-style: none;
   margin: 0;
   padding: 0;
   text-align: center;
   background-color: peru;
}

footer {
   color: white;
   background-color: grey;
   text-align: center;
}

最終画面
リンク先が架空のものになっているので、現在の画面の色は変わってはおりませんが、カーソル乗せると色が変わる、とかは確認済みです。
a:visited , a:hover とか、追加で指定できることも覚えました

感想

　HTMLより難しくなっているなとはおもいました、原型のHTMLがしっかり構成されてないと、別のところに色があたってしまったりと、とても面倒なこともわかりました。今日あまり使わなかったプロパティは後ほどまとめます！
　構造自体は理解したので、次はJavaScriptいきます。完璧は目指さないです😎
明日の目標：・javascript基礎理解
　　　　　　・javascript基礎処理

この記事が気に入ったらサポートをしてみませんか？