[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス
画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
CSSビギナーに気をつけてほしい5つのポイント | コリス
スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
