【プログラミング】当時のTOPページ再現Project～HTML&CSS演習
本日は、仕事後の短時間ということもありましたので。
先日の宣言通り、学生時代のHPを再現するProjectを開始しました。
Atomでコードを書きつつ、当時のHPのことを思い出しつつデッサンというか白い紙に大体の思い出せることを書き出しました。
そこで、さっそくコードを書いてみようと、書き出してみるも・・・・・・・
たった数行＋タイトルのCSSで散々悩み、結局タイトルと説明文のみしか表示されていないページで本日は終了。
HTMLコードは
<body>
<br>
<br>
<div class="title">
<h1>W Pleasant</h1>
<p>学生時代の記憶を便りにHTML&CSSで当時のページを再現するプロジェクト</p>
</div>
</body>
このBodyを少しいじった程度で終了。
その後は、タイトルのCSSを、
.title h1 {
color: white;
width: 400px;
font-size: 36px;
border-bottom: double 5px white;
letter-spacing: 0.1em;
margin: 0px auto;
}
上記に仕上げるのになんと！50分かかりました！！
途中、アンダーラインをどう自分の思い通りにするかで悩み、
調べ、あげく途中でもう少し文字間隔をあけたいなぁと思い始め,
文字の大きさが気になり修正を始めました。
そして、boder-bottomを使用するに至った後、Borderが横いっぱいに拡がるため、
widthを設定するも、タイトルの位置がtext-alignでは直せず。。。。
調べて、ようやくBlock状態では、marginの設定をしなければならないことに気づき、
やっと真ん中に寄せられた！！と感激し。。。
でも、border-bottomと文字の間のスペースが気になり、
やはりtext-decorationじゃないとダメなのかな？と
paddingをいじってみるも失敗。
結局下図のまま、本日は終了になりました。
なかなか自分の思う通りにデザインを作成するって難しいと実感しました。
昔の記憶では、text-decorationを使用していたような気もしますが。。。
今だからこそ、細部にこだわりつつ再現できるはずだと思うので。
今後も少しずつ再現作業を継続していこうと思います。
以上、本日のHP再現Project進捗報告でした。
