404 が表示された時って皆はどんな気分になるんだろう...
さて、一行駄文はおしまい。
本題です。
同じデザインを組むにも、人が違えばそれだけ組み方も様々だとは思うのですが、こうした方がちょこっとだけ効率が良くなるかもね！っていう事をちょこっと書いてみるだす。
●サンプルページ
●サンプルダウンロード
●メインのCSSファイル
とりあえずこんな感じのサイトがあったとして、どう組むかっていう辺りが今回の主題なんです。はい。
あ、サンプルページを別ウィンドウで表示しながらお読みいただくとスムーズに事が運ぶ予感です。
では、詳細に。
2007年11月
コピペ出来そうなプロパティと値
プロパティの一覧なんて何処にでもあるんすけど、当たり前のように何かにリンクしてるので、ちょっとコピーしたい時に間違ってクリックしちゃったりっていうアレが嫌だったので、ずらっと並べてみたっす。
ボクの場合、﹁visibility﹂ってどうも覚えられない...
きっとそんな時にささやかに役立ちます。
値は、一番使いそうなのが入ってたり、どんな値が有るのか分かり難いプロパティや、スペルが覚えにくいっぽいのは｜で区切って一通り書いてあります。
モットーは﹁コピーしやすい﹂これです。えぇ。
クリーンな水平分割が出来そうな2カラムサンプル
2カラムなサンプルです。
海外で流行気味？ということで、﹁クリーンな水平分割﹂が出来そうなサンプルです。
どんなもんか見たい方・欲しい方は以下よりどうぞ。
●サンプル
●一式ダウンロード
この辺で知りました↓
POLAR BEAR BLOG: ﹁クリーンな水平分割﹂がウェブデザインの最新流行？
リニュしました。とRe:ブログでサイトタイトルをマークアップするときの要素
- 11/12 1:05頃追記
-
Safari2︵MacOSX 10.4︶で、CSSチェンジでリキッドにチェンジしてからマウスを動かすごとにリンクのテキスト︵画像も︶がどんどん消えて行くという症状が出るっぽいです。 Cookie保存されちゃうはずなんで、そうなった人って戻せないのかな、、、Mac全く分からないけど、Cookie削除してチェンジはしない方向でお願いします。 ちなみに、Win Safariでは問題ないです。 しかし、原因がさっぱり分からない。コレなんていうブラクラ？ CSS HappyLifeが Ver 5 になりました。 IE6が対象ブラウザからかなりはずれ気味という素晴らしさ。 IE7辺りが一番意図した通りの表示だと思います。次点でFxでしょうか。 今回の目立つトコロとしては、カラーとかレイアウトがちょこっと変えれるようにしてみましたがおまけレベルですので、ちょっと楽しんでいただければ幸いです。 こーゆーサイトなんで、こんな風にすることも出来るよチックな意味合いが込められてるとか、そうでもないとか。 一応リキッドも実装しましたが、コレはかなり手抜きなんで、突っ込みは割愛で... 2カラムも、この人が横幅でかいからうざいうざい言うんでつけてみました。 mixi、次期Yahoo!も横幅が大きくなって、気づけばWWW WATCHまでもが時流に飲まれたようです。 さっきの人も﹁時流についていけない﹂とか言ってますが、世の中まだまだそういう人は居るだろうな。って思います。はい。 他には、fixedを使って、ヘッダーと右のCSSスイッチ、pagetopを固定してます。 フレームが流行ってた時代の、良い部分を最大限に生かせるような感じでしょうか。 あんまり固定部分が大きいと邪魔なので、出来る限りシンプルにちっこくしてみましたが、解像度によっては邪魔かなぁ、、、 最後にデザイン部分に関してちょこっと。 今回最後まで背景が決まらなくって、色々作ってた結果がカラーチェンジっていう... まぁ、ボクは﹁デザイナー﹂としての性能はスズメの涙程度なんで、頑張ってる割にいけてないっていう切なさが滲み出てますが、暖かい目で見守ってて下さい。 あ、感想なり何なりは遠慮なく下さい。糧にして精進しますゆえ。 んでは、Re:部分に関しては続きにて。
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）
08年6月4日追記‥
コレの新しいの作りました。
●新規でサイトを作るのに使えそうなの一式。Ver 2
11月7日追記‥
contens.cssの56行と60行目の#contents部分でスペルミスしておました。
ごめんなさい...
現在は修正版になっております。
修正後のcontents.css
---
SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。
さて、一行駄文はお終い。本題です。
毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。
んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。
以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。
どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう可能性が大きいです。はい。
コレはかなり社内向けというか、仕事で最初に使うのに使えそうな感じにしているので、incとかあったりもしますが、SSIとか使わない場合は不要です。
まぁ何はともあれ、以下よりDL出来ます。
IE7のborder-styleの不思議
ジャンプで連載してるP2!がすごく好きなのに、非常に悲しい知らせを聞き、何とかしたいと切に願う今日この頃。
情報元‥P2!を応援しています
さて本題に。
border-bottom: 1px dotted #000;とかって書くと、IE6だけ破線の感覚が広くなってしまうじゃないですか。
というか、dashed を指定したときと同じになるアレです。
アレが嫌で、dotted でいけそうなデザインでも背景で切ってたりした訳で。
んで、IE7はなおってるーって喜んでたんですけど、solid で2px以上なborder があると、IE6と同じ破線になってしまうっぽいっていう事にいまさら？気づきました。
サンプルページとダウンロードは以下より。