borderの幅はwidthに含まれるのか | なつみかん。
borderの幅はwidthに含まれるのか 2006.02.24 Friday borderの幅はboxの外側にあるのか、内側にあるのか。 これについては「URL入りのDOCTYPE宣言をした場合は外側に（標準モード）、そうでない場合は内側」と思っていた。padding についても同様に 標準モード：実際の幅 = width + padding + border 互換モード：実際の幅 = width ( padding および border を含む) 例えば .hoge{ width : 300px ; border : 2px solid ; padding : 5px } の場合、実際の幅は 標準モード→ 300 + 2*2 + 5*2 = 314px 互換モード→ 300px（中身は自動計算） です。 なので困った時は１行目に <!DOCTYPE HTML PUBLIC "-//W3
色や大きさを後から変更できる AQUA風ボタンの作り方
二日ほど前のブックマークの人気エントリーに入っていた、「AQUA風ボタンの作り方リンク集」を見てつくづく思ったのだが、Photoshopは奥が深く、同じような効果を作り出すのに何通りも方法があるのが興味深い。そこで、今日は、Photoshopにも関わらずあえて全てをベクターデータで書くという特殊な技法（知り合いのデザイナーから教わった技法）でAQUA風ボタンを描いてみた。 まず最初に、"Rounded Rectangle Tool"で適当な大きさの角の丸い四角を書く。角の丸みは、Radiusの値で変更できるが、この場合は16pxとした。 この時自動的に作られたレイヤーをダブルクリックして、レイヤースタイルのInner Glow属性をオンにする。Blend ModeはMultiplyで、Opacityは４０％程度が適切、色は黒にする（黒にしておくと、後でメインの色を変更したときにここを変更し
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
小粋空間: CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。 仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。 参考にさせて頂いたのは下記のサイトです。ありがとうございました。 1976design.com：Easy CSS drop shadows A List Apart：CSS Drop Shadows nlog(n)：アップロードした画像に影をつけるには POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる 今日の覚え書き：cssの設定で自動的に画像に影を付ける 花と写真とblogと。：画像に影をつけてみる。 最初の1976d
今日の覚え書き Tickler's bunkum days: サイト作りに使えそうなサイト
open-arms.biz 2023 著作権. 不許複製 プライバシーポリシー
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる
リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。 remote.html サンプルの (X)HTML コードは下記の通り。 <div id="rollover"> <ul> <li id="food"><a href="#"><em>焼き肉</em></a></li> <li id="sneaker"><a href="#"><em>オニツカタイガー ファブレ74/0123</em></a></li> <li id="beer"><a href="#"><em>仕事の後のビール</em></a></li> <li id="coffee"><a href="#"><em>缶コーヒー
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://hardwar.org.uk/
はてな cssを使ったおしゃれなformのデザイン方法について書いてあるサイトを教えてください。web2.0的なフォームを作りたいと考えています。http://demo.moo・・