CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips | コリス

2015/11/04 581 users カンマ区切り コリス デバイス テクニック CSS

リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsは前回紹介した時（紹介記事）から倍近く量が増えているので、改めて全項目を紹介します。 CSS Pr... 続きを読む

[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック | コリス

2014/03/10 210 users コリス 黒丸 CSS ネガティブマージン 四角

中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。 対応ブラウザはIE8+で、ネガティブマージンは使用しません。 Align Lists Flush Left ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。 まずは、マークアップから。 HTML ulもolもシンプルな... 続きを読む

[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス

2013/04/10 112 users img要素 デフォルト 共通 実装 HTML

画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切... 続きを読む

[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ | コリス

2013/03/07 189 users コリス inline-block display CSS 欠点

リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: po... 続きを読む

[CSS]非常に少ないコードで実装されたCSS3のアコーディオン型スライダー | コリス

2012/08/16 107 users シンプ コリス CSS スライド 実装

JavaScript無しで、HTMLとCSSを使って非常にシンプルな実装をしたアコーディオン型スライダーを紹介します。 Make an Accordian Style Slider in CSS3 アコーディオンはCSS3アニメーションで滑らかに開閉し、スライドの数を減らしても増やしても動作します。 見た目だけではなく、非常に機能的なつくりです。 HTML HTMLはリスト要素を使い、非常にシンプ... 続きを読む

[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション | コリス

2012/04/05 152 users NAV セマンティック Button コリス チュートリアル

デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li>... 続きを読む

[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス

2012/01/24 547 users コリス Opera class ul要素 Safari

デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE8+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><... 続きを読む

[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu | コリス

2012/01/18 100 users コリス スクリプト ナビゲーション Timing サークル状

デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#"... 続きを読む

[JS]div要素やリスト要素を折りたたんで配置するWAI-ARIA遵守のスクリプト -jQuery Collapse | コリス

2012/01/16 112 users コリス Chrom div要素 スクリプト jQuery

実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。 jQuery Collapseの特徴 jQuery Collapseのデモ jQuery Collapseの使い方 jQuery Collapseの特徴 軽量 約600バイトの軽量スクリプト。 クロスブラウザ対応 IE6+, Firefox3+, chrom... 続きを読む

[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル | コリス

2012/01/12 375 users コリス lorem Ipsum Opera チュートリアル

下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="s... 続きを読む

[JS]リスト要素で簡単に実装できるニュースティッカー -jQuery News Ticker | コリス

2011/11/06 123 users ニュースティッカー jQuery コリス href link

アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。 IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。 jQuery News Tickerの実装 jQuery News Tickerの実装 外部ファイル スタイルシートとスクリプトを外部ファイルとして指定します。 <link href="styles/ticker-style... 続きを読む

[CSS]シンプルなHTMLでタブを角丸にするチュートリアル（イラスト付き） | コリス

2011/09/06 113 users active コリス TWO チュートリアル CSS

シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a ... 続きを読む

[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D | コリス

2011/07/07 214 users パララックス コリス 奥行き スクリプト デモ

パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 続きを読む

[JS]スムーズなアニメーションで開閉するアコーディオンのスクリプト -Accordion Image Menu | コリス

2011/03/10 100 users コリス jQuery アコーディオン title スクリプト

画像を使って、スムーズなアニメーションで開閉するアコーディオンメニューを実装するjQueryのプラグインを紹介します。Accordion Image Menuの実装HTML各パネルはリスト要素で実装されています。title 1 続きを読む

[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート | コリス

2010/12/14 280 users コリス Notes CSS 付箋紙 実装

付箋紙はどんな背景にも適用できます。 デモ 画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装 上記の当サイトに設置したデモのコードを紹介します。 リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Note... 続きを読む

[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル | コリス

2010/12/02 138 users コリス チュートリアル a href CSS HTML

HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロ... 続きを読む

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル | コリス

2010/11/03 601 users コリス 色相 class チュートリアル CSS

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><... 続きを読む

[CSS]リスト要素を使用したスタイルシートの5つのトリック | コリス

2009/08/03 256 users コリス CSS トリック スタイルシート 5つ

demo HTML Lorem ipsum dolor ... elit. Aliquam ... eu risus. Vestibulum ... neque. Lorem ipsum dolor ... elit. Aliquam ... eu risus. Vestibulum ... neque. ol{ font-family: Georgia, sans-serif; font-sty... 続きを読む

[JS]滑らかにスライドするナビゲーションを実装するチュートリアル | コリス

2009/07/29 190 users コリス overflow チュートリアル Hidden デモ

滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマ... 続きを読む

[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス | コリス

2009/05/19 302 users コリス ベストプラクティス CSS

実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's an [...] 続きを読む

[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb | コリス

2009/02/17 233 users レベ コリス アニメーション 既存 スクリプト

jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベ... 続きを読む

[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート | コリス

2009/02/11 241 users アロー コリス グラデーション CSS パンくず

グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 Simple scalable CSS based breadcrumbs demo パンくずはリスト要素で実装されており、日本語の使用も可能です。 パンくずのHTML Home Main section Sub section Sub sub section T... 続きを読む

[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu | コリス

2008/12/10 256 users Opera Safari Firefox Chrome コリス

Styled Menuから、IE6/7, Firefox, Opera, Safari, Chromeに対応した、フリーのナビゲーションを紹介します。 Styled Menu ナビゲーションはリスト要素で実装されており、ラベルを日本語に変更するなどカスタマイズも可能です。 続きを読む

HTMLのリスト要素を視覚的に階層表示する「StyleMap」:phpspot開発日誌

2006/11/08 102 users Boston Developer process 階層

Scott Jehl, Designer/Developer, Boston, MA | Process: StyleMap: Visual Sitemap If you've ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedio... 続きを読む