MdN Design｜総合情報サイトLesson 01 CSSのみで実装するシンプルなロールオーバー(1) ベーシックタイプ - Webデザイン表現&技法の新・ナビゲーション編 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.4.22 MON
[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
特殊効果（エフェクト）：不透明度の処理
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>半透明で表示する</title> <link rel="stylesheet" href="main.css" type="text/css" media="all"> </head> <body> <h1>半透明で表示する</h1> <img src="photo.jpg"> <img src="photo.jpg" id="photo"> </body> </html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>半透明で表示する</title> <link rel="stylesh
Cross-Browser CSS Gradient
The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check ou
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ
Simplified page borders in pure CSS デモページ（当方作成） [ad#ad-2] 下記に、元記事で紹介されている方法（その1）をはじめ、コメントに掲載されている方法を含めて紹介します。 対応ブラウザは基本的に:before, :after疑似要素を使用するため、IE 8+, Firefox, Chrome, Safari, Operaとなります。 ブラウザの表示領域いっぱいにボーダーを配置する方法：その1 元記事で紹介されている方法です。 デモページ：その1（当方作成） HTML HTMLは、divなど特別な要素は配置しません。 以下に紹介する全ての方法で共通です。 <html> <body> </body> </html> /*------------------------------------*\ BORDERS \*---------------
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
CSS Click Chart | CSS3 Browser Support and Information
Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
今使えるCSS3の書き方まとめサイト パート2 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebデベロッパやWebデザイナにとってCSS3で提供が予定されている各種機能(角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッション)は魅力的だ。これまでよりも美しいページを、これまでよりもスマートに実現できるようになる。CSS3を使ったページを制作するのは楽しい作業だが、すべてのブラウザに対応させるとなると骨が折れる。 今使えるCSS3の書き方まとめサイト CSS3は策定段階にあるため、これら機能のほとんどはベンダプレフィックスがついた状態で提供されている。また、ブラウザに同機能を実装した時点での仕様の違いによって指定方法が変わっている部分もある。CSS3 Generators Write All
12 Excellent CSS3 Button and Menu Techniques - Web Design Ledger
37 Comments I use a few CSS3 tricks on my blog and it’s important to not completely base your design off of CSS3 as there are still some browser compatibility problems and some people may not be seeing what you think they are. (*ahem* IE). That is true. Now, being 2 years later, IE has gotten better (still bad, but better). IE9 supports css3 and using the PIE library, you can design in css3 with s
CSSslide - CSS と JavaScript で動くウェブプレゼンツール
CSSslide は、Web ブラウザで動くプレゼンツールです。 HTML Slidy や S6 にインスパイアされて作りました。CSS と JavaScript を組み合わせて作れます。実装が単純な反面、CSS を変更するだけで簡単にレイアウトを変更できます。 サンプル サンプル 1 : 黒を基調としたクールなデザイン。 サンプル 2 : 白を基調としたシンプルなデザイン。Firefox なら、メニューの 表示 → スタイルシート で配色を切り替えできます。 実用例 [就活のしかた] : 背景画像や高橋メソッドを設定した例。 ダウンロード バージョン 1.0 CSSslide.html CSSslide.css CSSslide.js 上記の 3 つのファイルをダウンロードし、CSSslide.html を編集することで本文を作成できます。 PC 内でもサーバ上でもどちらでも動作します。
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
CSSレイアウトの肝！ 表示・配置のプロパティ、14選
詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ
IE6よさらば：CSS 3分コーディング
CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。 はじまりはじまり。 既報の通り、Googleは段階的にIE6のサポートを打ち切ると発表しました。 また、欧州では政府機関が公式にIE6からの乗り換えを推奨するなど、IE6のシェアは徐々に低下しています。 日本でもこの流れは同様ですが、企業のサイトなどがサポート外のブラウザーとするにはまだ勇気が必要かもしれません。 しかし、IE6を考慮しないだけでWebサイト制作はガラリと変わります。 IE6の問題点は様々ですが、中でも未実装のセレクタが多数ある点が非常に痛い点です。IE6を考慮しなければ次のようなセレクタが使えます。いずれの方法もIE6をサポートする場合はIE6を考慮するのであれば、対象の要素にclass属性やid属性が必要になります。 親要素 > 子要素 { プロパティ:値 } 子
必見！携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法 - 適当な日々
フリーランスでwebの仕事をしながらwebサービスとかを作ったり作らなかったり、成長と挫折の記録・・・かもしれないiPhoneの登場でスマートフォンで閲覧しやすいサイトの需要が高まってきたようです。 でもわざわざiPhoneやスマートフォン向けにサイトを作るのは大変・・・。 そんな方に、今までに制作したモバイルサイトをスマートフォン対応させる方法があります。 しかも5分でお手軽にできます！ htmlとCSSで解決する方法なのですが、実はこの方法を使うだけで開発もしやすくなる優れものです。 論より証拠ということで、まずはこちらをご覧ください。 （PCからでもオッケーです。htmlはこちらの記事で作成したものを使ってます。） まず、こちらが普通に作成したモバイルサイト→before そしてこれがその方法を使ったもの→after やっていることは閲覧しているブラウザに応じて、3つの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSリファレンス - とほほのWWW入門
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法