独学!Webサイト構築日誌

1日目:始めるぞ。

9:00


明日から本気だす と前日に宣言してしまったので本気で頑張ることにする。
どれぐらい時間がかかるかさっぱり分からないが、目標が無いとやる気も出ないので目標を立てることにする。

目標

これから1ヶ月以内(2020年12月末)を目安に、このHPのWebサイトを自分で構築できるようにする。






WordPressを少し弄った感じでは、「htmlが身体、cssは装備や装飾品」というイメージなので、ひとまずHTMLを学ぶことにするが、必要ならば適宜cssを挟んでいく。
始めにコチラのサイトを参考に学んでいくことにする。
書籍で学びたい人は、コチラがオススメ。
【説明】1日で全部やろうと思ったら頭が割れますが、1週間なら可能。のんびりやっても1ヶ月でマスターできる。フルカラーで、中タイトルはオレンジ、変更部分は赤など、分かり易い色使いになっている。ありがちな、無駄なカラフルではない。目標とするHPも応用範囲が効くもので、プログラムも簡単なものを扱っているのが良い。書籍ということもあり、ネット情報のようにコピペが出来ないのが残念だが、非常に分かり易い。

プログラムを書いていくにあたって、テキストエディタというのがあると便利とのことだったので、早速色々調べてインストール。(※テキストエディタ=プログラミング用の「メモ帳」)

Microsoftが作っているということもあり、Visual Studio Codeを選択した。そのままだと英語なので、日本語化


12:00

htmlの構造は大体理解した。htmlとcssの関係性は上記の認識で合ってたみたい。

13:00

昼飯を挟んで勉強を再開したが、cssの記述もあるのでざっくり頭に入れておく。

16:00

・・・cssも含めて大体把握した。
が、今までWordPressしか使ったことがないので、どうやって自分の作成したHTMLを検索できるようにネットに上げる(?)のか分からない。

尚、WordPressと自前htmlの利点と欠点はコチラを参考にした。


17:00

よし、上げ方が分かったぞ。ひとまず契約したサーバーの適切なところにぶち込んだら表示された。契約会社や設定によって変わってくると思うので、どのフォルダに入れたら良いのか分からない場合は、契約したサーバー会社に聞くのが早くて正確だと思う。
今後は、FFFTPというソフトを使って、htmlファイル・cssファイル・画像ファイルなどを、サーバーに上げるようにした。使い方も簡単なのでオススメ。

リアルタイムでコードの反映結果が分かるように、HTML Previewを導入した。無料。動作がもっさり気味だけど便利。
※2021/01/10追記。
動きは遅いし、上手に反映されないことがある。個人的には途中から全く使わなくなったので、入れなくても良いかな。




17:30

文字の羅列状態のサイトが現在出来ているので、本日の最終目標は下記3点とする。
  1. URLリンクをクリックしたら飛べる状態にする。
  2. 上部にメニューをつける。
  3. 進捗画像掲載。

18:00


1.URLリンクをクリックしたら飛べる状態にする。

URLリンクをすべて飛べるように変更した。
            
そのまま飛ばす。
<a href="https://uxmilk.jp/60712">文字入力</a>
別タブを開いて飛ばす。
<a href="https://uxmilk.jp/60712" target="_blank">文字入力</a>
            
        

2.上部にメニューをつける。

次はメニューだな。腹減った。
メニューバー作成はこのサイトを参考にした。

            
css
#top-nav {
list-style: none;
overflow: hidden;
}

#top-nav li {
width: 140px;
text-align: center;
background-color: #333;
float: left;
height: 50px;
line-height: 50px;
margin-right: 2px;
}

#top-nav li a {
text-decoration: none;
color: #fff;
font-weight: bold;
padding: 20px;
}
            
        

18:30

cssはコピペになるが、一旦メニューバーも完成。 ブラウザ上でcssが反映されなかったので、コチラを参考にキャッシュを削除したら無事反映された。

3.進捗画像掲載。

画像の表示方法はコチラを参考に行った。

一旦目標まで出来たのでここで終了。


嫌がらせかと思うほど巨大な画像が表示されているので、明日は画像の表示を小さくする予定。


お疲れ、自分。
酒飲むぞー!



Before: 0日目

Before: 0日目

After: 1日目

After: 1日目



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

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

HOME > 日誌一覧 > 1日目:始めるぞ。