ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
User Interface Icons.com - Preview 32x32 pixels
Sizes: Icons come in 4 sizes; 80 by 80 pixels, 48 by 48 pixels, 32 by 32 pixels, and 24 by 24 pixels. Format: .PNG (transparent background)
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
RedLine Magazine : 気になった初期化CSS
気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像
本物のリキッドレイアウト - 補足：Hatena::agenda
Hatena::agenda - 本物のリキッドレイアウトの続き。 リキッドなマルチカラムの実例 Hatena::agendaは実験場ではないけれども、CSS3 Columns - MDCで紹介されているmozilla独自拡張プロパティを使用してリキッドマルチカラムにしてみた。デメリットもかなりあってまだ改善の余地があり余っているものの、場合によっては低解像度から高解像度まで、シングルウィンドウから並行閲覧まで手広くカバーできる。 このプロパティを実装していないブラウザ向けに、一応スクリーンショットを用意してみた。 幅が小さいと1カラム（約50kb） ある程度広げると2カラム（約90kb） 充分広げると3カラム（約110kb） 念を押しておくが、-moz-で始まる独自拡張プロパティは、正しく使えば問題ない。これはCSS validatorを通らない。しかしCSS実装は、不明なプロパティは無
第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 ::: creazy photograph
前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第11回：引用（blockquote）を簡単にするブックマークレット 今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。 最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。 １）左上に「“」を表示させる まずは一番簡単そうな左上コーナー１カ所に引用符を表示してみます。 使用した画像はこちら。 完成したのがコチラ。 HTML例 <blockquote cite="http://creazy.net/" title="creazy photograph"> <p
全てのブラウザで同じに見える必要はないし、それは不可能で間違ってる - 氾濫原
だって、ブラウザには、画像を表示できないブラウザとかがあるんだもんね。IE も Fx も Opera も、そういう意味では同じような違いで、Fx では先行実装を使って段組になってよみやすくなっていたり、IE ではのっぺりだったり、そういうのがあっていいはず。なのに、一個の表示に統一しないといけないみたいな、わけわかんないのに縛られたりする。別に違ってていいと思う。 あと Web と紙は違うから、違うアプローチの仕方 (可変レイアウト) をすべきなのに、紙と全く同じスタンスで作るから、問題になる。いろんな UA にむけてデザインするのがウェブデザインじゃないの？ 今のウェブデザイナーは殆どウェブデザイナーじゃないよね。そんなだから「ウェブデザイナー(笑)」みたいになるんだ。 しかし、ウェブデザイナーでもなんでもない自分がごたごたいうのもおかしいので、あれなんだけど、最近どうも甘く考え気味 (
ウノウラボ Unoh Labs: ブログパーツ貼り付けタグのまとめ＋Googleガジェット＠はてな
ごらんの通りこれらのタグは、一部例外を除き少なくとも上表にあるブログサービスでは、すべてOKかすべてNGかのどちらかで、つまりこれらのひとつがNGなら他のタグもNGであるようなので、どのタグを選択するか、ブログサービス側の制限を考慮して悩む必要はないようです。 そうするとFlashオブジェクトの表示は、「Internet ExplorerでのActiveXコントロールのアクティブ化問題」を考慮するなら、OBJECTタグを直接記述するのは避けて、JavaScriptで行ったほうがよいのかなと。 全般的な留意点 貼り付けコードはブログの投稿設定などに影響されないように配慮しておく必要があります。特に、サイドバーだけではなく記事本文中にも貼り付けられることを想定している場合は、以下の設定は、殆どのブログサービスで記事本文の投稿についてはデフォルトでONの筈なので、こうした設定に影響を受けないもの
MOONGIFT: » ついに登場！CSSフレームワーク「Blueprint」:オープンソースを毎日紹介
誰かがきっと作ってくれると思っていた。 prototype.jsのようなライブラリを利用するのは、便利な機能が多いという事もあるが、各ブラウザ間での相違を吸収してくれるという点も大きい。 その点において、CSSもまた各ブラウザ間での表示の差異が大きい。そこで試してみたいのがこれだ。 今回紹介するオープンソース・ソフトウェアはBlueprint、ブラウザ間の描画差異を吸収して簡単にマルチカラムを実現してくれるCSSライブラリだ。 Blueprintはヘッダ、コンテンツ、サイドバー、フッターのようなテンプレートをクラス指定するだけで簡単に作成できる。デフォルトのフォーマットはリセットされているので、ブラウザ間の違いが出るマージンやパディングの差異も吸収してくれている。 また、印刷時のCSSも用意されている。これを使えば印刷時やプリンタ経由でのPDF作成時に綺麗なものが仕上がるようになる。今後の
ブログのサイドバーは要らない - Hatena::agenda
記事本文（いわゆるpermanent link / permalink）に関して、「サイドバー」は100%要らない。要ると思っているのは100%勘違いである。エゴで固執するなら「さいどばー」に相当するリソースへのハイパーリンクを提供すればいい。Web2.0なんだろ? だったらそのリンク先を得意のAjaxとやらで上手に扱えばいいじゃないの。もっともその程度にAjaxなんて全然必要ないけれども、かっこよさげだろう? わらい。 煩悩是道場 - ブログのサイドバーって本当に必要？ 煩悩是道場の中の人は情報の消費者の視点で記事を書かれているが、サイドバーは「ブロガー」として見ても要らないものである。せっかくのPCのマルチタスク機能の利用を妨害してまで横幅を消費する価値が、「さいどばー」にあるのかどうかを考えればわかる。ある記事を参照しながら何かを書くときウィンドウを左右に二つ並べないのは、多くの人に
ブログテンプレート作成ツールで簡単ブログデザイン！ - CSSEZ
Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
見出し要素に関する議論 - 徒委記
見出し要素に関する議論 2007年6月30日 2007年7月2日 2007年7月4日 2007年7月5日 2007年7月6日 2007年7月7日 2007年7月8日 2007年7月9日 2007年7月10日 2007年7月11日 2007年7月13日 2007年7月14日 2007年7月15日 2007年7月17日 2007年7月26日 サイト内の各ページで常にh1要素をサイト名とすることについて、等々。 2007年6月30日 CSSでイケてるデザインサイト : 雑記帳 : der Gegenwart Rusicaさん。「イケてる」条件に「トップページ以外のh1要素がサイト名になっていないかどうか」を提示。 die Vernunft - 個人的なイケてるサイト基準 emiさん。「駄目ですか…？」 2007年7月2日 h1は最も重要な見出し - 徒書 北村曉。文書作成者は重要と思うものをh1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
ライブドアブログ｜無料で豊富な機能が充実
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
Liner Note - 無償で商用利用できて品質の高い日本語フォント一覧
Googleの検索結果ページは画像を一つしか読み込んでいない (polog)