独学!Webサイト構築日誌

3日目:サブメニューに苦戦なう。

8:30

ぐっどもーにんぐ世界。
今日も指先が捥げそうなほど寒いですね。肩凝るわ。カタコル。

本日の目標は下記6点。
  1. ブログのアイコンを考える。
  2. アイコンをヘッダーに適用&Home画面に戻るようにする。
  3. tableで作った表に、線が入るようにする。
  4. 引用コード部分を目立たせる。
  5. 多階層メニュー(サブメニュー)の作成。
  6. 日誌をベタ打ち→日にちごとにフォルダ分け。

昨日のようにドツボにハマってやる気デストラクションされると堪ったもんじゃないので、簡単なやつからサクっと終わらせちゃおう。

9:30

1.ブログのアイコンを考える。

2.アイコンをヘッダーに適用&Home画面に戻るようにする。

ココからアイコンを頂戴した。
風景画や鉛筆デッサンは得意なんだけど、人物画とかキャラクターとかは苦手なのよね。

さて、出来上がった画像をフォルダに入れて、ただ単にリンクで引っ張ればいんじゃないかと...

出来た。
ついでに中央寄せしておいた。中央寄せはこのサイト参照。
            
<div  style="text-align: center"><a href="../"><img src="img/title.jpg" alt="独学!Webサイト構築日誌" title="独学!Webサイト構築日誌"></a></div>
            
        

10:00

3.tableで作った表に、線が入るようにする。

ココを参照した。
            
table,td{
padding: 10px;/*上下左右10pxずつ*/
text-align: center;
border: solid 1px #000000;
border-collapse: collapse;
}
            
        

11:00

4.引用コード部分を目立たせる。

ついでに改行されるようにした。ココ参照。codeの部分がhtmlベースで見ると汚いけども、後日どうにかしよう。
            
pre{
white-space: pre-wrap ;
width: 50%;
border: solid 1px #000000;
background-color:	 #dadada;
padding:10px;
}
            
        

5.多階層メニュー(サブメニュー)の作成。

問題児登場。先に昼食だな。

13:00

昼食終了&夕飯の買い出しも終わらせたのでやっていこう。

14:30

悲しいぐらい自分の思い通りの仕様にならないが、一旦実装は出来た。ココの説明が丁寧で分かり易い。分かり易いんだけど、中央寄せが何故かできない。ここで躓いていると先に進めないので、ひとまず下記のようにメニュー部分をごっそり変更した。
            
/*メニュー部分*/
#top-nav {
display: flex;
height: 2rem;/*箱の高さ*/
margin: 0 auto;
width: 1000px;
}
#top-nav > li {/*親階層のみ幅を25%にする*/
width: 25%;
}
/*全てのリスト・リンク共通*/
#top-nav li {
list-style: none;
position: relative;
}
#top-nav li a {
background: #333;
border-right: 1px solid #fff;
color: #fff;
display: block;
height: 2rem;
line-height: 2rem;/*行間の高さ*/
text-align: center;
text-decoration: none;
width: 99%;
}
/*子階層以降共通*/
#top-nav li li {/*隠す動作*/
height: 0;
overflow: hidden;
transition: .5s;
}
#top-nav li li a {
border-top: 1px solid #fff;
}
#top-nav li:hover > ul > li {
height: 2rem;
overflow: visible;
}
            
        

6.日誌をベタ打ち→日にちごとにフォルダ分け。

多分これを実装してないせいで、現在読み込みに時間がかかってんじゃないかと。カテゴリー分けして、日誌ごとにhtmlを作っていくのかな???調べてみよう。

フォルダを作成してゴリ押しで表示してみたが...こういうのじゃないんだよな~。一応参考サイト

16:30

とりあえず、日毎にhtmlファイルを作成し、「a href=」を乱用して疑似的なカテゴリー分け終了。ただ、普通に考えて、ヘッダーやサイドバーを変更したときに、毎度日毎のhtmlを作成し直すというのは非効率。
・指定したidやclass部分だけ参照してくる。
・指定したidやclass部分を一括変更。
とか、そういったのは出来ないのかねぇ。
何で調べたら良いのかよく分からんので、明日本を買うか借りてきます。



Before: 2日目

Before: 2日目

After: 3日目

After: 3日目



作成日:2020/12/15 - 更新日:2021/01/26

≪ 2日目≪ 一覧に戻る ≫4日目 ≫

HOME > 日誌一覧 > 3日目:サブメニューに苦戦なう。