CSS(スタイルシート)のテクニックとトピックのまとめ

HTML5/CSS3/jQueryをはじめ、サーバーやプログラミング、デザインなどウェブ制作関連のチートシートをまとめているサイトを紹介します。下記はチートシートを分類しているタグの一部です。Quickly Code [...]

iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。Less Framework 2ベースとなるカラムは下記のようになります。iPhoneなど...

ブラウザに表示しているページのスタイルシートをリアルタイムに変更できるChromeの機能拡張を紹介します。当サイトの背景白もチョチョイと黒地に変更できました。StylebotStylebotをChromeに組み [...]

text-shadowのカラー指定に何を使うかというのを意識していませんでしたが、下記のチップスを読んだら「なるほど」と思ったので、紹介します。A CSS3 Tip デモページ（当方作成）「text-shadow」のカラー指定には「black」「#000」などが使用できますが、「text-shad...

CSS3 Media Queries下記は各ポイントを意訳したものです。はじめにCSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。Med...

まずは、デフォルトのスタイリングです。* {margin: 0;padding: 0;}ul {list-style-type: none;margin: 2%;border: 1px solid #ccc;padding: 5px;width: 44%;float: left;}ul li {m...

Photoshopで作成したかのような美しいデザインのボタンを実装するスタイルシートを紹介します。キャプチャは上から、ノーマル時、ホバー時、クリック時です。Make CSS3 buttons that are extremely fancy デモページボタンはCSSで実装されているため、ブラウザの...

Tweetウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。Breadcrumbs Design Show [...]

TweetCSS3の中でも指定が特に複雑なCSS3グラデーションのスタイルシートを表示確認しながら、簡単に生成できるオンラインサービスを紹介します。Grad? Gradient!グラデーションは上記のキャプチャ [...]

クロスブラウザ対応、CSS3をベースにして作成したナビゲーションのテンプレート集を紹介します。HTML/CSSの初心者の人でも簡単に利用できると思います。CSS Menu -Only for CSS現在四つの [...]

HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。ファイル構成：コメント無し版各ファイルの説明index.htmlHTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込ま...

一枚の画像で、サイズ指定があるものやないものなど異なるサイズのボックスいっぱいに背景を表示するスタイルシートを紹介します。CSS3 Background Images – 100% width/height of container デモ上記三つのデモは上から順に、widthとheightの指定あ...

ページに読み込まれたCSSファイル内のセレクタが、実際に使用されているか確認できるFirefoxのアドオンを紹介します。CSS Usage「CSS Usage」を起動すると記述されているセレクタが一覧表示され、C [...]

繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。Take Advantage of CSS3 to Achieve Subtle Design デモページ下記は各ポイントを意訳したものです。はじめに繊細の大事なポイントは人...

jQueryの日本語の解説サイト、国産のプラグイン、おすすめの和書を紹介します。jQueryの日本語の解説サイトjQuery日本語リファレンスjQuery リファレンスjQuery 1.0.3～1.4対応[...]

ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。How to Resolve a Fluid Header/Footer Pr...

デモのキャプチャ（100%） ※クリックで全表示実装は下記のようになります。HTML疑似要素「:after」を使用するため、spanでimg要素を内包します。疑似要素「:after」を使用して、スタイルを適用します。span,img{padding:0;margin:0;border:0;}.fa...

HTML, CSS, JavaScriptをはじめ、PHP, Ruby, Perl, Apache Configなどにも対応した、コード表示を読みやすくするsyntax highlighterの超軽量スクリプトを紹介します。jQuery.Syntax デモページ対応する言語は、下記の25種類です。...

ツールチップの基本スタイルです。.tooltip {border-bottom: 1px dotted #000000;color: #000000; outline: none;cursor: help; text-decoration: none;position: relative;}.to...

CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。Multiple Backgrounds and Borders with CSS 2.1CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似...