Diary

5/302021

このブログ、HTML/CSS独学について。

5月いっぱいを使って、このブログを大きく作り変えました。 なので久々のブログ更新となります。

まだまだ未完成な部分もあり、twitter cardの設定も終わっていない状況ですが、 現状報告と、初心者の私が参考にしている参考書を書いております。

目次

参考書紹介

HTMLに関しては義務教育でかじった程度だった私が参考にしている本は、

1冊ですべて見につく HTML&CSSとWebデザイン入門講座
著者:Mana
発行所:SBクリエイティブ株式会社
発行年月日:初版2019年3月28日
定価:2,260円+税

で、ブログを開設しようと思って、まず一番最初に購入した参考書です。

とても見やすいですし、Webサイトを作るためにまず何を用意いなければならないのか、何のソフトがいいのか、 一つ一つ丁寧に説明してあるので、完全初心者でも簡単にブログ作りに取り込むことができました。 そして実例としてwebページを作成していく過程も分かりやすく書いてあるので、 実際にコードを書いて実行してみてを繰り返す内に徐々にHMTLとCSSについての理解が深まっていくという私には 最高に合った参考書です。

HTML/CSSに加えて Webデザインに使える色の組み合わせや、見やすいブログの作り方など丁寧に書かれているので、 自作ブログのデザインをしながらちらちらと見て参考にしています。

2冊目に購入したのが同じ筆者の方の

ほんの一手間で劇的に変わる HTML&CSSとWebデザイン実践講座
著者:Mana
発行所:SBクリエイティブ株式会社
発行年月日:初版2021年3月6日
定価:2,480円+税

です。あくまで1冊目の"入門講座"を読んだ前提で書かれていますが、こちらもとても分かりやすいです。 "入門講座"より内容が難しく、全てを把握するには時間がかかりますが(まだ理解しきってません。)、 見出しの装飾の仕方や、グラデーション、スクロールのタイプなど一気にこなれたwebサイトを作れる方法が 詰まっています。

もう一冊は、事典です。

HTML&CSS 逆引き事典
著者:大藤幹
発行所:株式会社 技術評論社
発行年月日:初版2020年5月2日
定価:2,180円+税

この本は、"このタグどういう意味だっけ?"、"どうやって記述すればいいんだっけ?"というときに 気軽に調べられるので重宝しています。ただ初心者向けというよりはある程度知識があるのが前提の ようで、まだまだ分からないタグがたくさんあります。(これから頑張ります。)

ブログ新旧比較

PC版のリニューアル前と後の各ページの変化です。

ホームになるページ(index)は、3つのボックスに分けてCCSグリッドで並べました。 「Love B777 and Try CAMP.」のタイトルは、marginをマイナスにすることで、 要素を飛び出して表示できるようにしました。

全てのページ上部にはメニューバーを設け、fixedで固定し、ページをスクロールしても 常にメニューが表示されるようにしました。

疑似要素も少しだけ取り入れ、「new post」の後の線などを記述しています。

以前のブログでは改行や段落間の行間を要素brで調整していたため、あまり褒められたものではありませんでした。 今回は全てのページで、文章の読みやすさのために小段落を要素でブロックを作成し、行間の調整などを工夫しています。

B777の歴史や構造、キャンプギアのページでは、目次を見やすいように改善し、 htmlタグscroll-behavior: smoothを設定することで、 目次をクリックすると、スルスルとページが動くようにしました。

「ブログ筆者ページ」も少しだけお洒落にして、「Diary」の一覧も画像を加えて視覚的に分かりやすくしてみました。

レスポンシブ対応として、スマートフォンなど狭い画面で見たときの設定もしております。

メニューバーはスマホで見るとごちゃごちゃしてしまったので、ハンバーガーメニューを置くことにしました。 このメニューアイコンの位置を調整できず、只今苦戦中です。

今回個人的に頑張ったのは、「Diary」のページで、PCで見ると"画像の下に紹介文"としているのを、 スマホなどで見ると"画像の横に紹介文"となるようメディアクエリー内で調整しました。

左:PCで見たとき 右:スマホで見たとき

最初にブログを立ち上げたときは、思いつくままにファイルを作成し、クラス名を名付け、只々プログラムを 書き連ねるだけだったので、最終的に整理をするのがとても大変になってしまいました。今回作り変えるということで フォルダを作って仕分けをし、後から修正するときも見やすいように工夫しました。

まだ改善すべきところ、記事を書かなければならないところがあるので、これからもぼちぼち隙間時間を見つけて更新していきます。