トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • ブログテンプレート作成記(ヘッダ作成、CSS属性記述順)

ブログの作成イメージがある程度決まったので作成開始です。まずは作ってみることです。作ってみて分かることがとても多く特にブログテンプレート作成記では試行錯誤したことや小技を中心に書いていきます。
ブログ作成(ブログランキング)
 ヘッダで作ってみたいこと
現在開いているページがどのカテゴリ、どのカテゴリに属している記事かということが分かるようにカテゴリのナビゲーションを作成する

FC2ブログでは、親カテゴリや子カテゴリのようにわけることが出来るので結構需要もありそうなのでトライしてみることにしました。

ヘッダ作成でちょっと困ったことや作成時のトピックです。


ヘッダの高さを決める

あし@というブログアクセスUPを目的として利用されるサービスがありますが、JavaScriptの記述を埋め込むことでページの左上または右上に表示されます。実は結構これ邪魔でテンプレートや開いているページの大きさによっては、タイトルにかぶってしまうこともあるそうです。

そんなこともありヘッダの高さはあし@のバーが重なっても良いように28pxにしました。

CSSの属性記述順

こんな所にこだわらなくてもいいかもしれませんが、CSSの属性記述順を自分で決めておくと出来あがったCSSが見やすそうなので規定しました。勿論自分で規定出来るわけないので、Webで探してきてFireFoxを作成しているmozillaの規定をそのまま流用することにしました。

28pxのヘッダバーの縦方向のセンタリング

vertical-alignを使えば出来ると思ったら『ボックス全体の縦方向の配置や、ブロックボックス内のテキストの縦方向の位置などを制御することはできません。』だと

そんなわけでやむを得ずline-heghtをピクセル指定で記載することで代用

HTMLもCSSも初心者なので結局かなり時間かかってしまった・・・


CSS属性記述順

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup )
*/
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/

コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。