daikixのブックマーク - はてなブックマーク

HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。今回は、position を使わない方法をご紹介します。ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
daikix 2008/07/21
css
リンク
[使える CSS テクニック] CSSを使った見栄えの良いサイトマップ | バシャログ。
第 7 回目は「CSSを使った見栄えの良いサイトマップ」です。今回は、Web サイト構成をすばやく確認できるように見栄えのいいサイトマップを紹介したいと思います。以下のようなツリー構造のサイトマップを作成してみます。 sample 1.画像を用意以下のような画像を使用します。アイコンから伸びる点線はなるべく長くします。 2. XHTML はリストの入れ子で XHTML <ul> <li><a href="#">ホーム</a> <ul class="category"> <li><a href="#">会社案内</a> <ul class="page"> <li><a href="#">会社概要</a></li> <li><a href="#">コンセプト</a></li> <li><a href="#">沿革</a></li> <li><a href="#">社長挨拶</a></l
daikix 2008/06/20
web制作

css
リンク
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。時間もスキルも足りない！ [1] まずフリー写真を探します。アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。輪郭線を書き足したり、グラデーションを上か
daikix 2008/05/08
fireworks
リンク
前のページ 1 2 3