[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;
![[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/dba8baab2483c01e8847e7d49e2ec8f98db95ffb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072501.png)
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="search rounded" placeholder="Search..."></span> <span><input type="text" class="search square"><input type="button" value="Search"></span> </form> </div> <div class="dark"> <form> <span><input type="text"
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル
How to create animated tooltips with CSS3 [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。 Demo 4 最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。 実装 HTML ツールチップはリスト要素で、各アイテムはa要素で実装されています。 <ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble
facebookのタイムラインをjQueryとCSSで作るチュートリアル:phpspot開発日誌
Facebook Timeline Design using JQuery and CSS. facebookのタイムラインをjQueryとCSSで作るチュートリアル。 facebookのタイムラインをみて感動した者です。あのUIを見て自分も作ってみたいけどどうやってるんだろうって言う方もおられると思いますが、そんなタイムラインを実際に作っちゃおうというチュートリアルです. ここまでの応用力があればなんでも考えたUIは作れそうなので、勉強しておくとよいかも 実際のデモページ - 良い感じです 優れたUIが利便性を高めてユーザを集めるというところをfacebookが実証していますが、こうした先進的なUIを作れるようになりたいものですね 関連エントリ jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル HTML5＆CSS3をフルに活用したスライドショー実装ライ
[CSS]ウェブページのメニューにCSS3を使ってワンランクかっこよくするチュートリアル
Demo 3 背景のカラーがアイテムごとに異なります。 実装 HTML メニューはリスト要素で実装されており、二つのspan要素を内包したa要素とimg要素がアイテムに含まれています。 <ul class="mh-menu"> <li> <a href="#"> <span>Art Director</span> <span>Henry James</span> </a> <img src="images/1.jpg" alt="image01"/> </li> <!-- ... --> </ul> CSS Demo 1では、「.mh-menu li」には背景カラーとして「rgba(255,255,255, 0.8)」が割り当てられています。ホバー時にはこれが淡いブルー「rgba(225,239,240, 0.4)」になります。 .mh-menu li:hover a{ backgroun
[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の実装は、少しずつキャプチャと
斜めのラインを使うスタイルシートのチュートリアル | コリス
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
[CSS]Adobeのサイトのあのかっこいいヘッダバーを実装するチュートリアル
ホバーエフェクトのキャプチャ HTML マークアップは非常にシンプルで、内部にリンクを配置したただの見出しです。 <div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div> CSS ヘッダの基本となるスタイルで、a要素の左にborderでホワイトの領域を設定します。 .module h2 { background: #ccc; padding: 0 0 0 10px; font-size: 16px; /* Thickness of the bar more easily achieved with line-height since padding would push link inward. */ line-height: 2; } .module h2 a
メンテナンス中
ただいまメンテナンス中です。 （The server is now under maintenance） ご迷惑をお掛けいたしまして、大変申し訳ございません。 メンテナンス作業が終了次第、サービスを再開いたします。 今しばらくお待ちいただきますよう、よろしくお願い申し上げます。
[CSS]CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル
アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 Blur Menu with CSS3 Transitions [ad#ad-2] 7つのデモ 7つのデモの実装 7つのデモ デモは7種類あり、共通するアイデアはホバーしている時に他のアイテムをブラーでぼんやりとさせ、そのアイテム自体を強調することです。 デモページ 対応ブラウザは、Chrome, Safari, Firefox, Operaです。 IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。 7つのデモの実装 HTML メニューはすべてリスト要素で実装しており、固定幅を指定します。 <ul class="bmenu"> <li><a href="#">About</a></li> <li><a href="#
[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
[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ
キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。 Enhance Your Sites with CSS3 Animations デモページ [ad#ad-2] 下記は各ポイントの意訳です。 CSS3アニメーションとは アニメーションでドロップダウンするヘッダ 透過PNGを使ったカラーアニメーション 回転するローディングのアニメーション フォームのエラーをアニメーションで強調 フォームのエラーをアニメーションで強調:その2 CSS3アニメーションとは CSS3アニメーションはエレメントに異なる見た目を順に適用するステータスから構成されています。これらのステータスを定義するにはキーフレームを使って、アニメーションの持続時間をセットします。インターバルはパーセントを使って定義し、それぞれにCSSのスタイルを指
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSボタン作成チュートリアル＆テクニック集１３:phpspot開発日誌