独学!Webサイト構築日誌

2日目:始めたぞ。

8:30

起床してすぐ、成長期かと間違うぐらいお腹が減っていたので、コーヒー飲みながら昼食調理開始。いつも朝はコーヒーだけです。

11:00

葱油餅・チーズonフライドポテト・スクランブルエッグを作り、たらふく食べました。食い過ぎた。ちょっと図書館に行ってから作業始めます。

12:30

図書館から帰宅。
本日の目標は下記6点に増やしました。
  1. サーバーに直接indexファイルなどを入れているので整理する。
  2. 使用したcssを随時記載していく。
  3. 表示画像を小さくし、クリックすると拡大するようにする。
  4. 表示エリアを区切る。
  5. 全体が左に寄っているので真ん中にずらす。
  6. 色が気持ち悪いので、随時変更していく。

1.サーバーに直接indexファイルなどを入れているので整理する

早速サーバーの整理方法を確かめるためにサーバー管理会社に電話したところ、「メインドメインフォルダの場所は動かすことが出来ない」とのこと。こちらはサーバー会社に寄っても違うと思われるが、死活問題でもないので諦めよう。

2.使用したcssを随時記載していく。

使用したcssを載せる方法については、コチラを参考にしました。
ちなみにhtmlのコードをそのまま貼り付けることは出来ないようなので、それはココを参考にしました。
※2021/01/10追記。
普段は使わないと思われるので、無視してOK。

3.表示画像を小さくし、クリックすると拡大するようにする。

表示画像を縮小する方法ですが、htmlで縦横を指定してしまうと毎度変更する必要があるので、cssで自動的に縮小してくれるような仕様にします。参考サイトはここ。
最近流行の拡大表示をするにはJavaScriptという別言語が必要になるようなので、今回はhtml+cssで実装できるこちらのサイトを参考にしました。
2つのサイト情報を合算したやつが下記。
            
html
<a href="img/day00.jpg" target="_blank"><img src="img/day00.jpg" alt="before" title="before"></a>


css
/*画像の大きさ指定*/
img {
width: 50%;    /* 横幅を割合で指定 */
height: auto;  /* 高さは自動指定 */
}
            
        

4.表示エリアを区切る。

参考にしたのはこちら。htmlとcssの両方弄る必要があるようです。
上記のサイトを見るとヘッダーが付いているようなので、前日に作成したメニューとタイトルを追加してみた。bodyのすぐ下の行に、headerコードを入れたら良いだけみたい。
            
<header>
<h1>独学!Webサイト構築日誌</h1>
<ul id="top-nav">
<li><a href="../">Home</a></li>
<li><a href="#day1">1日目</a></li>
<li><a href="https://zaitaku.ki-luck.info/" target="_blank">在宅魂</a></li>
<li><a href="https://doinaka.ki-luck.info/" target="_blank">ど田舎魂</a></li>
</ul>
</header>
            
        

13:30

5.全体が左に寄っているので真ん中にずらす。

参考にしたのはコチラ。どうやらhtmlを触らずに、cssを弄れば良いだけのようです。

            
body{
    width:700px;
    margin-right: auto;
    margin-left : auto;
}

body{
    width:700px;
    margin: 0 auto;  ← 2021/01/10追記。上記と同じ動き。
}
            
        

6.色が気持ち悪いので、随時変更していく。

参考にしたのはこのサイト


14:00

一旦今日の目標は終わったが、少々汚いので追加で修正していく。
※htmlでolリストのカウント番号を途中から開始するにはコチラを参照した。
  1. ブログタイトルの中央寄せ。
  2. ヘッダーとサイドバーの間にある空間を詰める。
  3. 文章欄とサイドバーの間に空間を作る。
  4. コード引用部分の表示が変なのでどうにかする。
  5. 文章の表示領域を広げる。
  6. 多階層メニューの作成。

7.ブログタイトルの中央寄せ。

「style="text-align:center"」を加えたら良いだけらしい。
            
<header>
<h1 style="text-align:center">独学!Webサイト構築日誌</h1>
</header>
            
        

8.ヘッダーとサイドバーの間にある空間を詰める。

現状把握のために、css知識として参照したサイト

15:00

かれこれ1時間ほど調べているが、解決策が見つからないという罠。
これはアレだな。空白を詰めるという考えではなく、全体をその色にしてしまって、文章部分だけ白にすれば良いのかな。

            
body{
background-color:#C0C0C0; ←これ追加した
width:700px;
margin-right: auto;
margin-left : auto;
}
            
        

...ぬりかべみたいになったけど、ひとまず空白は無くなったぞwww
別の問題として、両サイドを白くしたいが、とりあえずOK。

16:00

9.文章欄とサイドバーの間に空間を作る。

あれかな、さっき調べたmarginとpaddingでどうにかならないかな。
...合ってたw
            
div#main {
background-color: #ffffff;
width: 80%;
float: right;
padding: 10px; ←これ追加した
}
            
        
サイドバーの項目分のスペースが出来てしまったので、明日どうにかしよう。

10.コード引用部分の表示が変なのでどうにかする。

html上で無駄にheaderの文字が入っていたのでそれを削除、必要に応じて「&lt;」や「&gt;」に変換したところ直った。


11.文章の表示領域を広げる。

            
body{
background-color:#C0C0C0;
width:1000px; ←ここの数値大きくした。
margin-right: auto;
margin-left : auto;
}
            
        

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

メニューにカーソル置いたらズラーっと下に出てくるアレです。


18:30

いくつかサイトを参考にしましたが・・・さっぱり分からん。参考にしたサイトたちは、cssの説明端折っているので、どこがどう機能しているのか全く分からん。
2時間近く色々触ってみた結果、今のところ分かったのは下記。

非表示/表示させる場所が絶対指定になるのかな???いくつか試してみたけど、タイトルを1行上に入れると場所がズレたり、挙動がよく分からんのよね。頭痛いので明日の課題にします。

そいえば、昨晩Google Analyticsを追加したので、その方法についてはココを参考にしました。WordPressの内容ですが、やることは同じなので難しくないかと。
※Google Analytics: 自分のサイトに、どういった人たちが、いつ、何人訪問したか分かるようになる素敵システム。人気サイトになるか、Dos攻撃受けたり、炎上したりしない限り無料だと思って問題ない。

頭痛い~。少し休んで夕飯にしよう。



Before: 1日目

Before: 1日目

After: 2日目

After: 2日目



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

≪ 1日目≪ 一覧に戻る ≫3日目 ≫

HOME > 日誌一覧 > 2日目:始めたぞ。