ポートフォリオサイト制作記part2

tmb_portfolio01
スポンサーリンク

作成状況

今はローカルにてHTMLとcssで作成しています。最低限のレイアウトが固まり、配置とフォントの設定が終わったところです。どこにでもあるレイアウトですが、各要素の配置に苦労しました。あらためて1から作ると理解してない部分が多いと感じています。

ヘッダーの余白が変

HTMLでページの構造を決めた後、cssで配置を調整していたのですが、謎のマージンに惑わされました。ヘッダーにロゴ文字とグローバルメニューを作成したのですが、なぜか妙に上下の余白があります。cssでマージンもパディングもを指定していないのに。 GoogleChromeの要素検証で見てみると確かに高さが設定されていま>す。しばらく悩んだ結果、ロゴ文字が入ってるタグのマージンを0に指定したらほどよく収まりました。

デフォルトマージン

調べた結果、ブラウザごとにデフォルトマージンというものが設定されているとのことでした。つまり、自分で1からタグ打ってマージン指定なしで設定してもある程度はマージンが設定されるということです。ブラウザごとに値は違うようです。HTMLコーダーには常識だと思いますが、おもいがけずハマりました。

cssにて全称セレクタ(*)を使い、ブラウザのデフォルトマージンをリセットするという方法もあるようです。最初からリセットしておけば不思議なマージンに惑わせることはなく、自分で一からマージンを設定できます。しかしながらこの方法は賛否両論あるらしく、 当面は使わずにデフォルトマージンとうまく付き合っていきたいと思います。いきなり全部消してしまうと調整する力が付かないと思ったので。

やっぱりcssは難しい

HTMLとcssはプログラムというほどのものではなく、簡単に覚えることができます。何も気にしなければ思ったレイアウトや色で作成することは比較的すぐにできるようになると思います。個人サイトならとりあえずできればいいのですが、実務ではそうもいきません。あらためて基礎から学びたいと思います。

今のところ難しいのはcssをどの要素に指定すればいいのかです。とくにレイアウトに関してマージンやパディングを設定するときです。文字色の変更はその文字が入ったタグに指定すればいいのですが、マージンやパディングはタグが入れ子になっている場合、親要素、子要素どちらに指定すればいいか等、曖昧です。 理屈はあるはずですが、作成していてcssが適用されないといった場面はまだまだあります。ボックスモデルの理解とスタイルの継承など曖昧な部分を理解する必要があると感じています。

今後の予定

  • 静的HTMLのPHP化(CakePHPに取り込み)
  • トップページ画像をjQueryでスライドショー化
  • PHPにてお問い合わせフォーム作成
  • WordPress新着記事をトップページメニューに表示
  • WordPressへのデザイン適用

です。上から順にやる予定です。WordPressはデフォルトテーマがすでにシンプルな構造ではないので、1からテンプレートテーマを作成するつもりです。とりあえずPHP化したら公開するつもりです。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev Sublime Text 3インストールでハマったこと next ポートフォリオサイト制作記part3

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です