XHTML+CSSでの効率的な制作をおこなう上でのポイント Part3 | F+R (FplusR)
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。今回はPart3です。CSS編のPart 2です。うそみたいな話が多いですが、すべて実話ですので世の中怖いです。 マージンの方向は原則的に下と左右に統一する フロートも絶対配置もされていないブロックの場合、マージンは相殺します（参考：「マージンの相殺 - CSS Dencitie」）。見出しや段落、リストなどレイアウトブロック内での要素のマージンは原則的に下と左右に設定するように統一しましょう。 上マージンを使うのは原則としてブロック内の最初の要素だ
DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法 | F+R (FplusR)
今日は、DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法を紹介します。 DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまいます。 私はデザインビューをあてにしないで作業していますが、たまにはあてにしたくなる時もあります。 そんなときには、clearfixを指定している部分に、「overflow:hidden;」「overflow:auto;」のどちらかを指定します。 これで、デザインビューでclearfixが原因でレイアウトが滅茶苦茶になる時はなくなるでしょう。 ただし、「overflow:hidden;」「overflow:auto;」は、諸刃の刀ですので、本番環境でのブラウザ確認はしっかりとやられたほうがいいでしょう。 これが原因で本番環境でレイアウトが変になっても責任は取れな
自分が使いやすいと思ったJSを混ぜ混ぜしてみる｜CSS HappyLife
JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。 んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。 そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。 今回その実験に使わせていただいたJavaScriptたちは以下。 jquery.js interface.js thickbox.js jQuery_Auto.js yuga.js heightLine.js 上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。 サンプルページ ダウ
リストをinlineで並べた時の余白｜CSS HappyLife
下記のような指定でリストをinlineで並べ、li要素毎に改行すると、半角スペース分の余白ができてしまう。 ul { text-align: center; } ul li { display: inline; } <ul> <li><a href="/">トップページ</a></li> <li><a href="/service/">サービス案内</a></li> <li><a href="/company/">会社情報</a></li> <li><a href="/contact/">お問い合わせ</a></li> </ul> んで、この余白を埋めるための方法をいくつか紹介しますだ。 一行で書く <ul> <li><a href="/">トップページ</a></li><li><a href="/service/">サービス案内</a></li><li><a href="/company
タイトルと日付（リスト）が一行なサンプル
どことなく良くありそうなリストのサンプルです。 ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。 sample04辺りが良いかもしれないす。 サンプルページ ダウンロード ul要素のサンプル Sample 03まではul要素でやってみました。 XHTMLは↓こんな感じ。span要素無くてもいけそうな気もしたけど、めんどｒｙ <ul class="sample01"> <li> <a href="#">タイトル</a> <span>1983年03月24日</span> </li> </ul> Sample 01 positionプロパティ使って色々やってる感じです。 ul.sample01 { width: 500px; margin-bottom: 30px; padding: 10px; border: 1px solid #999; } ul
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
