よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (1) Lightbox 2.0とは？ | パソコン | マイコミジャーナル
Lightbox 2.0とは？ Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。 Lightbox 2.0の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。 Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます(*1)。 「Lightbox2のダウンロードサイト」 「Lightbox v2.0
Firebug :: Add-ons for Firefox
Firebug は、Web ページを閲覧中にクリック一つで使える豊富な開発ツールを Firefox に統合します。あなたはあらゆる Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。 Firefox 専用 — 今すぐ Firefox をダウンロード
サイト制作のためのテンプレートをごっそり自動生成してくれる『Project deply*』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
サイトのレイアウトがサクサク作れるAIRアプリ「Boks」:phpspot開発日誌
Boks - A Visual Grid Editor サイトのレイアウトがサクサク作れるAIRアプリ「Boks」。 Boksを使えば、グリッド内をドラッグ＆ドロップして直感的にレイアウトを作っていけます 作ったレイアウトは「Export」で簡単にHTML+CSSに出来ます。 HTMLとCSS複数が吐き出されます 基本設定として、グリッドの設定なんかも調整できて、自由度はあります サイトのレイアウトがめんどくさいという方はこういうものでサクっと済ませちゃうというのもありですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サ
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
Blogger
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
http://www.designwalker.com/2009/04/wireframe-2.html
CSS Spriteを活用しよう - DesignWalker