53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
Nifty Corners Cube - freedom to round
by Alessandro Fulciniti More than one year has passed from the first version of Nifty Corners. While it was more of a proof of concept, and the second version presented some big improvements, there was still something missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous versions. Let's start. New features If you're new to Nifty Corners, I suggest to l
CSS で外部リンクにだけアイコンを表示
当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いて... 当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。 で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。 まずは、アイコンを用意しますね。こんなやつ↓ あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコン
Advice325 Neo’s World
お待たせしました。「お待たせする→何だか申し訳ないのでたくさん書く→時間がかかる割に内容がない→次の人をますます待たせる→書きにくくなる」……たいへん悪循環なので、なるべく簡潔に書きたいと思います。長々と書いているアドバイスも、そうでないアドバイスも、本当にお伝えしたいことは僅かしかないので。 ご依頼人と Web サイトのご紹介 Neo’s World ポケモンフリーク、マリオランド、Web サイト作成支援のコンテンツからなる1日約2000ページビューの人気サイト。端正な構成・デザインなので、管理人の Neo さんが中学生と知ってビックリしました。2002年10月27日開始だそうですから、もう3年目。若い人の Web サイトはあっという間に消えてしまうものが大半なので、これはちょっとした快挙だと思います。この調子で4年、5年と続いてほしいですね。 ご相談の内容 サイトを作り初めて2年が経ち
heightの%指定で正しく100%のボックスを作成 - bnote
高さの割合を正しく求める場合、その高さの基になる高さが必要になります。 CSSの定義では、パーセントは、生成されたボックスの包含ブロックの高さに 関して計算されるとあります。また、heightの高さが指定されてない場合、 heightの初期値はautoとなります。 (参考: 仕様書(邦訳)) 包含関係のルート要素はUserAgentによって定める事になっているので、 htmlの高さを明示的に100%に指定します。次にbodyの高さを明示的に100%に指定します。 このようにすることによってbody以下の要素に対して高さを指定する基準を明示的に設定します。 CSSの例 *{ margin:0; padding:0; } html{ height:100%; } body{ height:100%; margin:0 30px 0 30px; } #container{ height:100%
hxxk.jp - CSS の記述ルール記事のまとめ
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お
見出しの管轄範囲を考える
ページ情報 制作日 2004-01-14 最終更新日 2004-01-14 参照用URI http://www.arielworks.net/articles/2004/0114a 分野 HTML XML どこまでを上位の見出しの管轄とするか XSLTで自動的にページ目次を作るようになってから、見出しの付け方に非常に悩むようになってきた。 1つのページ内に違う事についての文章が並んでいる時は比較的考えやすい。このサイトの『サイト案内』を例に取ると、「サイトの概要」から始まって「諸情報」まで、それぞれサイト案内に関することではあるが、見出しが管轄している内容自体は全く連続性が無い。こういうときはページの最初にある目次もうまく機能している。 「h1からh6まで、見出しは連続して出てくるべきだ」ということではない。そもそも元のXML文章では見出しレベルなんていちいち付けずに、XHTML2.0のs
プロが教えるMovable Typeの構造デザイン - 元原稿
CSSだけでどうにでも！ MovableType（以下、MT）で表示されるいろいろなページは、どれもこれもテンプレートによってその内容や見栄えが制御されているということは、もはや周知の事実でしょう。XHTMLファイルになっている部分だけでなく、CSSファイルやRDF/RSSによるメタデータファイルも、やはりテンプレートから生成されています。 MTはコンテンツマネジメントシステムですから、テンプレートの内容は気にしなくとも、エントリーを追加していけさえすれば一定の構造と見栄えを備えたページが生成されていきます。ウェブログはやはりコンテンツありきとはいえども、やはりその見栄えも気になるところでしょう。MainIndex.tmplのようなMT独自のテンプレートタグを含むテンプレートを直接いじるのではなく、StyleSheet.tmplのみをいじるだけでも、その見栄えを大きく変更することが可能です
見出し構造とツリー構造明示 @ ぽかぽかWeb研究室
どのような方法が定められているか 仕様としては、以下のあり方が考えられています。 hn 要素に関係する要素群を、hn 要素ごと div 要素で括る (旧来の (X)HTML で最も行われてきた方法) hn 要素に関係する要素群を、まとめて divn で括る。 hn 要素自体は divn 要素では括られない (ISO/IEC 15445 の Pre-HTML の方法) hn 要素のみで階層構造を作る (XHTML Primary の方法) section 要素の入れ子で階層構造を明示。見出しは h 要素で明示(かつて XHTML 2.0 (2022 年現在廃止)で提唱されていた方法) セクションの役割 (article, hgroup, section 等) を持つ要素と見出し (h1 ~ h6 各要素) の組み合わせで階層構造を明治する方法 (HTML Living Standard で
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
Harukiya Archives
2006/07/09 category / HTML いかにも息切れネタ切れな、苦しさすら感じるタイトルである。以前もちょっとふれたIE独自拡張のexpression()を使いつつ、広い範囲で読むことのできるWEBページをデザインしてみよう。 ekken♂： １カラムにはmax-width レイアウトにはそれぞれ利点欠点があり、ワンカラムにも当然それはあります。例えば<body>要素直下の<div id="main">というブロックをリキッドレイアウトし、かつ800px以上には広がらないようにスタイリングするには div#main { width: auto; max-width: 800px; } のようにしますね。しかし、IEでもmax-widthを取り入れてくれないかなぁ……と、えっけんさんもこぼしてるように、IEはmax-widthを理解しません。これにはsvendtofte.co
Lucky bag::blog: float の問題を overflow で解決
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。 CSS - Clearing floats 簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。 floatサンプル01 container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。 floatサンプル02 しかし、container に幅と overflow を指定すれば解決します。 #container { background-color: #ddffb
Hybrid CSS Dropdowns
I know what you’re thinking…“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are: their secondary options are inaccesible unless you activa
GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.findmotive.com/tag/css/
aplus moments
虚心生白 - css WebDesign Templates
注意点,ブラウザ振り分け（スタイルシートが存在しない）
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
CSS Tips：メモランダム