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

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

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

[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック | コリス

2014/06/26 74 users コリス Flexbox カラム CSS アニメーション

リスト要素で実装した複数のカラムを水平に配置し、各カラムをホバーすると滑らかなアニメーションで伸縮させるflexboxを使ったスタイルシートのテクニックを紹介します。 Flexbox outdatedbrowser.com style UI デモはモダンブラウザでご覧ください、IEは10+で。 デモ 各カラムをホバーすると、そのカラムの領域がアニメーションで広くなります。 2番目にホバーすると、2... 続きを読む

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

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

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

[CSS]アニメーションで細かい動きを加えたカード状のドロップダウンのデモがかなりかっこいい | コリス

2013/07/23 96 users コリス ポパー CSS アニメーションgif アニメーション

上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"... 続きを読む

[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はリスト要素を使い、非常にシンプ... 続きを読む

[CSS]ホバーで子がハイライト、家系図のようなツリーを実装するスタイルシート -CSS3 Family Tree | コリス

2012/07/16 62 users コリス ポパー TREE CSS 家系図

[CSS]ホバーで子がハイライト、家系図のようなツリーを実装するスタイルシート -CSS3 Family Tree 子孫のみハイライト CSS3 Family Treeの実装 HTML ツリーはリスト要素で、各アイテムの親子関係はリストの入れ子で実装します。 <div class="tree"> <ul> <li><a href="#">親</a> <ul> <li><a href="#">子</... 続きを読む

[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>... 続きを読む

[JS]複数のエレメントをターンテーブルのようにぐるぐる回すスクリプト -Roundabout | コリス

2012/03/15 92 users Roundabout learn コリス エレメント デモ

デモ：Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></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="#"... 続きを読む

これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス

2012/01/18 89 users コリス NAV Container ナビゲーション Opera

デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む

[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 各画像をリスト要素で配置します。 続きを読む

リスト要素の一部をアニメーションで表示・非表示させるスクリプト

2011/06/09 85 users スクリプト アニメーション jQuery less 一部

長いリストを省スペースに設置するのに便利なリストの一部を非表示にし、隠したアイテムをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 非表示にするアイテムの数は設定が可能で、デモでは七つのアイテムを配置したリスト要素の初期状態では3アイテムだけ表示し、「more」をクリックするとすべてのアイテムが表示されます。 また、全アイテムを表示した状態で、「less」をクリックすると... 続きを読む

[JS]リストで実装したアイテムにページ機能をつけるスクリプト -Ono List Pager | コリス

2011/05/29 68 users コリス jQuery インターフェイス スクリプト 矢印キー

リスト要素で実装したアイテムをアニメーションでスライドするさまざまなインターフェイスのページ機能付きパネルにするjQueryのプラグインを紹介します。 最もベーシックなデモです。 パネルがアニメーションでスライドし、キーボードの矢印キーの操作にも対応しています。 HTML 各パネルはシンプルなリスト要素で実装されています。 ... 続きを読む

[JS]スロットマシンのようなアニメーションが楽しいナビゲーションを実装するチュートリアル | コリス

2011/05/24 55 users スロットマシン コリス チュートリアル ナビゲーション マウス

デモではナビゲーションの各ラベルをマウスでホバーすると、スロットマシンのアニメーションを楽しめます。 ナビゲーションの実装 HTML シンプルなリスト要素で実装します。 Marcofolio.net 続きを読む

[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><... 続きを読む