[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
[CSS]シンプルなHTMLでタブを角丸にするチュートリアル（イラスト付き）
シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 Tabs with Round Out Borders デモページ [ad#ad-2] HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#three">Four</a></li> </ul> classのactiveは、現在のタブを明示するものです。 リスト要素をどのように角丸のタブにするか、イラストでご紹介。
ウェブ業界は人材が余っていて人材が不足している
ある企業サイトの作成に関わっていた。サイトに真剣に向き合いながら、一度決めたことをひっくり返すようなことは言わない、よいクライアントだった。 作成に関わったので贔屓目もあるかも知れないが、よくできたサイトだった。好みの違いはあっても、誰に見せても「合格」をもらえるデザインだったと思う。 作ってから何度か改修があり、若干テイストが変わることもあったが、一貫して企業サイトとして恥ずかしくないデザインだった。改修のたび、担当のディレクター・デザイナーが愛情を持って頑張っているんだな、と思っていた。 そのサイトのトップがまた改修した。 ダサい配色、適当なグラデーション + 角丸 + ドロップシャドウ、カーニングが調整されていない文字……。 素人のようなデザインだった。 これでクライアントのOKが出たことに驚いた。と同時に、それを提出したディレクターが許せなかった。それ以上に、これでデザイナーとして
古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌
Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます 実装コードの例。 prefix+"top-left"+拡張子 prefix+"top"+拡張子 prefix+"bottom"+拡張子 ・・・ という感じで画像を８枚用意すれば独自の縁が簡単にできます グラデーションがかかったものも簡単に実装できます 単純にdivで分割しているだけです 関連エントリ IEでもCSS3を使うためのツールやリソース集 CSS3の擬似クラスをIE6-8でも使えるように
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
[CSS]縫い目風のかわいいデザインをスタイルシートで実装したナビゲーション
ぱっと見、画像を使用しているかのような縫い目風のデザインをスタイルシートで実装するナビゲーションを紹介します。 もちろん、画像は使っていません。 また、IE6などのCSS3非対応ブラウザも配慮した実装となっています。 Sexy CSS3 menu デモページ [ad#ad-2] 実装のポイント スケーラビリティ アンカーのフォントサイズを変更することで、サイズを簡単に調整できます。 画像は無し 画像を使用していないため、メンテナンスが簡単です。またHTTPリクエストを減らします。 カスタマイズ 簡単にドロップダウン型などに変更できます。 このスタイルシートのアイデアの元となったのは、LESSで使用されているダウンロードボタンです。 LESS 実装方法 HTML HTMLはspan要素を使っている以外は、クリーンです。 このspanはスタイルをつけるのに必要で、疑似要素非対応ブラウザへの配慮
YouTube人気急上昇
【2016年埼玉】あれ？機械の音がなくなったな…→パートの女性がプレス機に頭をつぶされ絶命していた『埼玉県プレス工場挟まれ事故』【ゆっくり解説】
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート
Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸
Webデザイナーやデベロッパー向けのカンファレンスや講演、レクチャー動画を収集しているontwik
Webデザイナーやデベロッパー向けに 行われたカンファレンスや講演、レクチ ャーなどの動画だけを収集し、ギャラリー として公開しているWebサービス・ontwik のご紹介。内容によっては英語が必須 ですが、英語力不要のスライドのような チュートリアル系動画もあります。 この発想はちょっとなかったですね・・・海外のカンファレンスなどが中心になります。 動画サムネイルを使ってギャラリー的に表示しています。動画は、PHPやRubyなどのプログラミングやcss3、WordPressなどさまざま。 css3の角丸とボックスシャドウとか。 UIデザイナーさんのレクチャーとか。 jQueryとか。 まだ出来たばかりっぽいですが、数はそこそこありますので今後増えてくれることを期待。以下よりどうぞ。 ontwik
紙を折ったようなエフェクトを実装するチュートリアル | コリス
画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1
たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌
Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
CSS3グラデーション・角丸のジェネレーターをjQuery/CSS3/HTML5で作成するチュートリアル
jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ（Chrome, Safari）で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン（上のキャプチャ）、角丸（下のキャプチャ）のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
台州钾掖商务服务有限公司
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
角丸やシャドウ作るジェネレータ。CSS3 Generator
CSS3の各プロパティの値を少しずつ変えた見栄えが比較できるオンラインサービス -i2Style