FP学習ガイド・リニューアル
かなり前からやろうと決めていた、FPサイトのリニューアル。ようやく
完了しましたヨイ。(できたのは5日前なんですが。)
僕はサイトを新設したり改築したりする時は、大小問わず新しいモノを
必ず取り入れたりするんですが、今回やろうとしたのはあまりにも時間が
かかりそうなので、とりあえず一旦オープンさせた次第であります。
特に急いだわけでもなかったんですが、どーも前からデザインが気に入ら
なかったんですよね。何せHTMLとCSSを覚えたての頃に作ったものです
から、初心者丸出しな状態でして。(見れば見るほどやる気がなくなる・・・)
では今回気をつけたことや、やってみました的なことを軽く説明します。
XHTMLの正しいマークアップ
今まであんまり意識していなかったのが間違いだったんですけど、今回は
見だしにはhxタグ、リストにはulやli と基本に忠実に記しました。
ブログが検索エンジンに有利だというのは、見栄えを意識したHTML4.01
ではなく、文書構造を意識したXHTMLを使っているからというのが定説
ですが、このXHTMLを使っているのに記述がムチャクチャでは話になら
んわけです。
HTMLを打っている最中に、ついCSSも平行してさわりたくなるんですけど、
ここをグッとガマンしてまずHTMLを終わらせました。すると、あとは適当に
ヘッダーやコンテンツ・サイドバー・フッダーをdivタグでくくって、CSSでイジ
っていけばいいので、ものすごくHTMLソースがスッキリ。何となくCSS本来
の役割を活かせたような、そんな気がします。(気がするだけか??)
ポジション relative absolute
今回CSSプロパティで初めて使ったのが、絶対位置・相対位置を決める
positionプロパティ。ヘッダー部分に使っているんですが、変にボックス
を作って左寄せ・右寄せをしたり、テーブルタグでレイアウトしなくていい
のが便利です。(多用はしたくないので、ヘッダーとフッダーのみです)
ただ、コレを使うには少し気を使わないといけなくて、いきなりabsolute指定を
して、上から**px・・・という感じで決めてしまうと、ブラウザを基本要素として
しまうので、表示がバラけてしまいます。
(ブラウザの上から**px・・・ という風になるからです。)
なので、親ボックス(ヘッダー)に、まず position:relativeを指定しておいて、
その中の要素(classやid)に position:absolute top:**px left:**px と
指定すれば、「ヘッダーボックスの上から**px 左から**px」 という表示に
なりますので、かなり使えるプロパティとなりえます。
制作後・・・
最近はサイトを作ったあとに燃え尽きてしまう傾向にあります。コンテンツ
ありきなのは自分でもよくわかっているつもりなのですがねぇ。デザイン力
や技術力も上げたいキモチがあるのですが、何よりも大切なのが文章です。
結局自分が作った土台に文章が載らないと何もならないわけですからね。
実は一つのページをデザインするよりも、一つの記事をガツッと書くほうが
僕の場合はパワーが要ります。(このブログは別です。常時脱力です。)
モノによっては構造を考えて書きますから、結構大変です。FPサイトはまだ
作りかけのコンテンツがあるので、まずはそこを作んないとなぁ・・・。
リニューアルしたとはいえ、まだまだ未完成なサイトでございますです。
|
次 :
バイクスタイル・リニューアル
|