フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 <p>塩レモン</p> CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 p{ padding:1em; background: linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px, linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px; background-color: #4885ff; background-position: left bottom !important; b
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。 Blueprint YAML YUI Tripoli meyerweb warpspire christianmontoya crucialwebhost 下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。 Blueprint Blueprint Based:Reset Reloaded <textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
How To: Resizeable Background Image - CSS-Tricks Is there a way to make a background image resizeable? CSSで背景画像をリサイズするテクニック デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。 記事中では３種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する３つ目の方法がスマートです。 background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。 #img.source-image { width: 100%; position: absolute; top: 0; left: 0; } body { overflow: hidden; } 背景が伸びるというと、ちょっと珍しいので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
