Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
RedLine Magazine : hrタグの使い道を考える
hrタグの使い道を考える このサイトの状況は段組部分の背景をそれぞれの段組をまとめているブロックの背景として表示する定番技を使っているわけだけど、floatを使っているので当然IE以外のブラウザでは背景がちゃんと縦に伸びない(伸びないっつーかそのブロックに高さがない状態になるアレね。) 解決策としてはこれまた定番の clearFIx 技で解決すればいいやと思ってたわけなんだけど、どうもOperaさんの機嫌を損ねたらしく、Operaでだけ背景が表示されないという罠に陥った。 いつもなら「しょうがないやー、brでクリアしてやるかー」なんていう発想にたどり着くわけなんだけど、br タグでクリアするってのも本当はスマートじゃないよなぁと思いとどまった。で代わりになりそうな要素を考えてて思いついたのがhrタグ。 web標準が広まってきて、「構造と見栄えの分離」ってフレーズを遂行しているわけだが、hr
IE7の具体的な対策の仕方。 | blog | circuit breaker
君の知らない未来へ、進もう＞挨拶。 アメリカ現地時間の10月18日、いよいよIE7(Windows Internet Explorer 7.0)がリリースされる予定です。 ほかのモダンブラウザ(FirefoxやOpera、Safariなど)に比べてしまえばまだまだなのかもしれませんが、従来のIEに比べれば無茶苦茶よくなりました。 PNGのアルファチャンネルにも対応したし、フィードも読めるようになったし、タブブラウザにもなった。 でも、具体的対策、みんなしているのかなぁ？って思った。 弊社(何)だって俺が「IE7! IE7!」って騒いでいなきゃ「じゃ、リリース後に」ってなってたくらいだから。 ってなわけで今回は覚え書きをかねて、IE7対策特集。 まず、細かいことは後で説明するけど、Windows版のIEはバージョン6以降から二つのレンダリングモードがあるんだ(ちなみにMac版のIEにもVer
bmblog: IEでmin-heightらしきことをする
Top Page: メイン Previous Page: 進化論の挑戦 Next Page: 地上ã¯åœ°ä¸Šã€åœ°ä¸‹ã¯åœ°ä¸‹ May 23, 2007 Category: web Tags: css , internetexplorer , min-height IEでmin-heightらしきことをする CSSのお話。 IEはmin-heightに対応してないのでhackが必要。 under score hackとボックスのheightを指定しても内側のコンテンツがそれより長かったら指定したheight以上に伸びてしまうbugを利用 <style type="text/css"> .no_hack{ margin: 8px; background-color: #CDC; min-height:40px; } </style> <div class=
正しいコメントを書こう
HTML文書の中で、ソースを読みやすくするため、コメントをセクションの区切りとして用いている人は少なくないでしょう。しかし、コメントの書式は正しく理解されていないことが多く、誤った用法を頻繁に見かけます。実際に支障が出ることは少ないのですが、厳密なブラウザでは内容が読めなくなってしまうこともあり、注意が必要です。 コメントのきちんとした定義はHTMLのバージョンによって微妙に異なりますが、基本的には コメントは <!-- 注釈の文 --> という形式で、これ以上余計なハイフンを使っちゃだめ と理解しておくのがよいでしょう。（2016現在ではHTMLなら少し緩和されることになりそうです） HTML 2.0で定義されていたコメント HTML 2.0の場合、RFC 1866の"3.2.5. Comments"において次のように定義されていました： To include comments in a
アンダースコアハック
CSS覚え始めの頃、多様していたハックがアンダースコアハックです。 アンダースコアハックとは、Win版IEのみ適用させたい時に使います。 コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。 記述方法はいたって簡単。 プロパティの前に _ を置くだけ。 使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。 例えば、 .hoge { border-top:1px solid #CCC; margin:1px 10px 20px 0; _margin-top:0; } などのように、記述すればIEだけmargin-topが0になります。 IEには、互換モードの時に、 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう というバグがあるので、バグにはバグ
雑食堂
↓ クリックで それぞれの感想に飛びます。 黒執事 寄宿学校編 第2話 声優ラジオのウラオモテ 第2話 黒執事 寄宿学校編 第2話 黒執事 寄宿学校編 第2話 『その執事、偽装』 リジーのお兄ちゃんが出てくるのは覚えてた。 そうだ、そうだ、あの王子様も出てくるんだった。 www.kuroshitsuji.tv 声優ラジオのウラオモテ 第2話 声優ラジオのウラオモテ 第2話 『夕陽とやすみとユニットと』 お肉屋さんでコロッケが売ってる事を知らない人がいるのか。 揚げたては おいしいよね。 2人でユニット組むのかと思ってたら、3人だった。 seiyuradio-anime.com ビアードパパの《カスタードプリンシュー》。 シュー生地はクッキーシュー。 4月30日までの販売です。 ファミマの《U.F.O.ぶっ濃い濃厚そばめしおむすび》。 食べかけ。
clearfix overflow auto float - Google 検索
overflow: hidden は親要素に追記するだけです。 理由としてはoverflowプロパティではfloatで浮いている子要素の高さを認識してくれるからだそうです。
clearfix overflow float - Google 検索
2015/01/15 · overflow: hidden は親要素に追記するだけです。 理由としてはoverflowプロパティではfloatで浮いている子要素の高さを認識してくれるからだそうです。
clear:both;を忘れずに－ブログ・テンプレート作成入門
MovableTypeのオリジナル・テンプレート作成を０から図解式で解説します。 ブログ・テンプレート作成入門 ＞ ２カラムレイアウト ＞ clear:both;を忘れずに ＜＜ 前のページ メインページのテンプレートの修正と画面確認 前回サイドバーを設置し、ブラウザで画面を確認したところ、フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しました。 これは、CSSの仕様であり、floatプロパティで指定したグループの次のグループは、回りこんで表示されるという仕組みになっているからです。 この回り込みを無くすために、スタイルシートのフッタグループ（footer）に次の1行(clear:both;)を追記します。回り込みをクリアしますという命令です。（厳密な仕様は違います。ここでは簡単な説明でおさえます。） ※width指定も追加します。指定しなかった場合、レイアウト
画像置換の問題点 | d-spica
画像置換の問題点 2007-05-19 0 0 XHTML/CSS CSS, image 画像置換の使いどころって，そんなにないような気がしてきました。 「heading要素（h1〜h6）にはビシッとテキストを入れておくほうが，SEO的にはいいだろう」と考えて，XHTMLにはテキスト，CSSでそれを背景画像に置換するという方法をよく使っていました。 画像置換 骨だけ書くと，次のような感じ。 <h1><a href="index.html">サイトタイトル</a></h1> h1 { background: url(img/logo.png) no-repeat; } h1 a { display: block; width: 200px; height: 50px; text-indent: -9999px; } 何も出なくなる場合 しかしこの方法だと，CSSが効いていて画像を非表示にした
リスト全体の余白を調整する
margin の値には auto（自動）を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン（外側の余白）を指定する ボックスのパディング（内側の余白）を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u
これだけは知ってほしいウェブデザインの常識 インターネット-最新ニュース:IT-PLUS
電通、三菱UFJ信託銀行など大手企業が相次ぎ参入を表明する「情報銀行」。ここに挑むベンチャー企業がDataSign（東京・渋谷）だ。同社の太田祐一社長は情報銀行という言葉が生まれる…続き 中部電力が「情報銀行」参入へ 電力データを活用 ［有料会員限定］ 「情報銀行」説明会に２００社 データ流通の枠組み始動
見やすいサイトの条件
最近は単にデザインや動きに圧倒されるより、どれだけ見る人に負担を与えないかというサイトに感動します。あくまでも観る側として条件をまとめてみます。 軽い……すぐに表示される ごちゃごちゃしない……無駄に迷わせない 文字が小さくない……小さい文字は読みたくない 色・配置に意味がある……使ううちに操作を覚えやすい 目的がすぐにわかる……不要な場合はすぐ離脱できる およそこの５点。 こういう視点で見やすいと思うサイトをいくつかご紹介。 日刊イトイ新聞 おもしろいことを教えようという目的があって、読みやすいテキスト、おそらく誰も嫌わないデザイン。技術的なことは置いておいて、考えが見えてくるサイトだと思います。 東京アートビート 使っている色の意味や目的もすぐにわかります。全体に見やすさと賑やかさのバランスが丁度よく、無駄なデザインもなく軽くできています。 Google 見やすいサイトが義務みたいなサ
リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」
TOP > WebDesign > リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」 かなり昔のエントリーですが、知らなかったのでメモ代わりにエントリーしたいと思います。今日紹介する「Showing Hyperlink Cues with CSS」はリンク先の拡張子に併せてリンクテキストの前にアイコンを表示させるというテクニックです。 基本的には何かプログラムを用いてと言うわけではなく、CSSで制御してアイコンを表示させるという物になっています。この方法に対応しているブラウザはIE7,FireFox,Safariとなっています。 詳しくは以下 例えばリンク先がPDFのテキストリンクの後ろにアイコンを表示させる場合について紹介したいと思います。HTML側にはまったくなにも細工する必要はなく下記のように記述します。 <
写真やテキスト画像にエフェクトを与えるPhotoshopのアクション集 | コリス
The Photoshop Roadmapのエントリー「40+のスペシャルなエフェクトを与えるPhotoshopのアクション」から、面白そうなPhotoshopのアクションをいくつか紹介します。 40+ Special Effects Photoshop Actions
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
タブインターフェースを使うための条件 | へたれwebディレクターの覚え書き
36 Cool Business Cards You Should’ve Seen
lllcolor.com