ホームページを作る際に参考にした情報まとめ
HTMLとCSSを書いてgithub.ioでホームページを公開した。Webページの作成自体初めてで知らないことが多かったので、参考にした情報をまとめておく。コメント付きブックマーク的な感じ。
できたもの
とりあえずこんな感じになった。サムネイルも何も指定してない簡素な作り。
制作過程
HTMLの基本
headとかtitleとかbodyとか、基本的なHTMLの構造を知った。これだけでとりあえず内容は書ける。これ以降はずっと見栄えの話。
ディレクトリ構造
自分が作った作品を説明するページ(HTMLファイル)はworksという名前のディレクトリに置いてみた。その方が作る本人も見に来る人も何と無く分かりやすい。
Favicon
ブックマークとかブラウザのタブとかに表示されるアイコンを設定する。
CSS
サイトの見栄えを良くするためにCSSを書く。記述方法は色々あるけどstyle.cssを作って読み込む方式にした。
中央寄せ
文章が画面の端から端まで続いてると読むのがしんどいし、改行して左寄せになっててもカッコ悪い。中央寄せにして、左右に余白を作ることにした。
画像のトリミング
今まで作った作品の画像を同じ大きさで並べたかった。それぞれ画像サイズや縦横比が異なるため、単純な拡大縮小では対応できない。object-fit: cover;によって指定したサイズに画像がトリミングされた。あと、参考サイトは猫の画像を例題に使っててすごく可愛いから見て。
画像を角丸にする
僕は保育園の頃から角が立ってるのが嫌いで、図工の授業でもずっとヤスリで削っていた。当然画像も角を丸くする。border-radius: 10px;みたいな感じで指定する。
レスポンシブデザイン
スマホなどの小さい画面で見るとギュッッッッッってなるので、PCだと2列、スマホだと1列にブロックが並ぶような構成にした。
画像や文字を中央寄せした際に、左右の余白は上下で揃ってて欲しいので、max-widthを指定することで余白や画像の大きさを揃えた。max-width以下の画面幅の場合は画面幅に合わせて大きさが変化するので見切れるようなことはない。
ちゃんとレスポンシブデザインになってるか、Googleが確認してくれる。そんなにこだわるつもりはないけど、GoogleがOKと言ってくれたらなんか安心できる。
フォント
せっかくなら文字のフォントにもある程度こだわりたい。Google fontsが好きなフォントを探したり見比べたりできて便利だった。使うときも読み込むコードを数行書くだけなのでお手軽。ありがたい。
M PLUS Rounded 1cにした。角が丸いことと、文字の縦横比が正方形に近いものを探したらこれが一番マシだった。
github.ioで公開
書いたファイルたちをGitHubに置いとくだけでページを公開できる。username.github.ioという名前でリポジトリを作るだけでhttps://username.github.ioで見れるようになる。つまり僕の場合はkuwamai.github.ioというリポジトリ名。
おしまい
紆余曲折あったけど、だいたい紹介した記事の情報でホームページを作ることができた。もともと阿部寛のホームページに憧れて作り始めたんだけど、あの簡素さは阿部寛だから面白いんだと悟ってやめた。
