独学!Webサイト構築日誌

5日目:まずは模様替えから。

9:00

布団の中でゴロゴロする至福。
その誘惑から抜け出し、今日も頑張りましょう。

先日から足元が寒すぎたので、朝から仕事場を変更しました。日が当たる窓辺は温かいです。

一応本日の目標は、下記5点。
  1. style.cssとindex.html以外を1つのフォルダにまとめる。
  2. サイドバーの画像リンクがでか過ぎ。
  3. メニューの文字以外(ボタン部分)もリンクをつける。
  4. プライバシーポリシーページの作成。
  5. お問い合わせフォームの作成。

1.style.cssとindex.html以外を1つのフォルダにまとめる。

単純にサーバー内の整理なので、気にならない方はやらなくてOK。
私は今後このサイトを拡張してく予定なので、分かり易いように仕分けしておきます。分け方は自由ですが、私の場合ひとまずザックリ分けておいて、情報量が増えてきたら更に細分化させる予定。
リンク先修正( a href=""の書き換え)をお忘れなく。1つ修正→コピペの繰り返しです。

10:30

サクっと終了。

2.サイドバーの画像リンクがでか過ぎ。

元画像を小さくすることもできますが、今後も画像を載せたときに自動で小さくしてほしいので、cssをいじることにします。ついでに余白も作っておく。

今更感あるけど、%指定てのは「それが置かれている範囲の中で、どれぐらいの大きさにするか」ていうことらしい。なので、今回width:100%にしてるけども、「サイドバーの横幅の中で100%にしてください」という指示になっていて、「元の画像の100%サイズにしてください」という意味ではないみたい。
日々発見の連続だな。
            
nav img{
width: 100%;
margin:0.2rem;
}
            
        

3.ヘッダーメニューのボタン部分もリンクをつける。

文字だけじゃなく、ボタン全体でリンク飛べるようにしたい。
html・css共に、liとaの位置を交換すれば良いだけの話でした。
            
html
<ul id="top-nav">
<a href="../"><li>HOME</li></a>
<a href="/diary_index.html"><li>日誌</li></a>
<a href="https://zaitaku.ki-luck.info/" target="_blank"><li>在宅魂</li></a>
<a href="https://doinaka.ki-luck.info/" target="_blank"><li>ど田舎魂</li></a>
</ul>


css
#top-nav a li {
text-decoration: none;
color: #000;
font-size: 120%;
}
            
        

11:30

4.プライバシーポリシーページの作成。

現状作っても作らなくても問題無さそうですが、時代の流れとして必須になりそうなので作成します。html貼り付けるとやたら長くなるので、フッターのプライバシーポリシー参照してください。ただ、サイトによって扱う情報や商材が違うので、必ず自分で考えるようにしてください。
私が参考にしたサイトは4つ。法律が絡んでくるので、いつもより丁寧に調べ、検討しました。

1つ  2つ  3つ  4つ

5.お問い合わせフォームの作成。

むむむ…何やら大変そうだぞ。先に飯だな。

14:00

...昼飯食べながら料理系Youtube見てたら2時間経ってたという罠。危険。

どうやらhtml+cssだけでは実装出来ないようなので、一旦外観だけ整えることにした。

ココ参考にしました。inputて何それ怖い、て人はこの記事読もうね。このサイト分かり易くて良い。もっと内容充実してくれないかな...という他力本願。
            
html
<form action="confirm.php" method="post">
<label class="message-info">氏名</label>
<input class="message-input" type="text" name="yourname" placeholder="気楽 太郎"><br>
<br>
<label class="message-info">メールアドレス</label>
<input class="message-input" type="email" name="mail" placeholder="abc@xxx.yy.zzz"><br>
<br>
<label class="message-info">メッセージ本文</label>
<textarea  class="message-input" name="comment" placeholder="ここにメッセージを記載してください。"></textarea><br>
<div class="message-check">
※「<a href="/diary/privacy-policy.html">プライバシーポリシー, 免責事項</a>」をお読みいただき、予め同意の上、お問い合わせください。<br>
<input type="checkbox" name="check_privacy" value="check_privacy">
<label>個人情報の取り扱いについてに同意する。</label><br>
<br>
<input type="submit" value="送信する"><br>
</div>
</form>


css
/*お問い合わせフォーム*/
.message-info{
float: left;
width:20%;
margin: 0 20px;
}
.message-input{
float: left;
width:60%;
}
textarea{
height:5rem;
}
.message-check{
margin: 20px;
float: left;
}
            
        

...今調べてたら、契約サーバーの設定で、簡単にお問い合わせフォームが作れるらしい…が!私は自分でやるよ!いずれその知識が活きると信じてるからねっ!
※良い子は先にサーバー会社に聞いてみましょう。


16:00

…1時間以上調べてるけど、ちょっと何言ってんのか分かんない。
ここで諦めると意味が無いので、少し現実逃避してから頑張ろう。





17:00

現実逃避から戻って参りました。
気持ち新たに調べたところ、JavaScriptてのは「htmlをベースとしたブラウザ上で動かせる言語」みたいです。
ちなみにJavaとJavaScriptは飛行機と飛行機雲ぐらい別物なので、一緒にしないようにしましょう。一文字違いで上手い例と見つけたな、と自分を褒めてやりたい。

ひとまず他のコンピュータ言語と似たような作りらしく、そっちの知識は多少あるのでどうにかなりそうです。
今後のJavaScriptの記述に関して、何言ってんのか分からんかもしれないですが、一緒に頑張ろ。余談だけど、パット見、JavaScriptはC++に似てる感じがする。
htmlやcssと同様に、文字の入力や色変更なんかもできるらしいが、優先順位はどうなってんのかね。JavaScript > html > css と予想。

※2021/01/12 追記。
書籍で学びたい方はコチラをどうぞ。
【説明】「たった1日で基本が身に付く! HTML&CSS超入門」と同様こちらも非常に分かり易い。ただ、JavaScriptとHTML/CSSではボリューム感がそもそも違うので、こちらは1週間以上かかるんじゃないかなと。ただ、文章や色使いは安定の見やすさなのでオススメ。残念な点としては、日記作成のページを、別のことに充てて欲しかったな、と。

コチラはhtmlとcssにも軽く触れてある。
【説明】htmlとcssにも軽く触れ、難しめのJavaScriptも分かり易くまとめられています。複雑なことをやるには物足りませんが、導入本としては良いのではないでしょうか。

古い本だけど、これも分かり易かった。
【説明】非常に丁寧で分かり易い。2014年と発行年が古いものの、初歩的な部分を抑えてくれるので、これで学んで後はネット検索で事足りそう。

18:00

腹減ってきた。先に夕飯だ。

19:30

古民家リフォーム動画を見入ってた。

ザっと読んだ感じココが分かり易いので、これをベースに作っていくが、用語やタグなどの不明点が多いので、複数のサイトを参考にしていく。

個人的に関数を使って弄る方が簡単なので、input→buttonへ変更します。
変数の定義の仕方・考えについてはココを参照。ar:どこでも使える変数、const/let:少し制限がある変数て感じですね。const/letがエラー回避できそうなので、この2つをメインで使っていきます。
比較演算子(=など)についてはココが分かり易い。

22:00

むむむ…JSだけでメールフォーム作るとセキュリティ的に良くないみたいだな…。
どうやらphpという言語を新たに学ぶ必要があるようなので、ちょっと一晩考えます。

今後の流れとしては、
・お問い合わせフォームを優先してphpも続けて学ぶ。
・お問い合わせフォームを優先してサーバー会社のやつ使う。
・お問い合わせフォームとphpは後回し。
のどれかになりますが、サーバー会社に頼ったら負けかなと思ってる。

疲れたのでお風呂入って寝ます。



Before: 4日目

Before: 4日目

After: 5日目

After: 5日目



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

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

HOME > 日誌一覧 > 5日目:まずは模様替えから。