CSSデザインサンプルCSSレイアウトで作成するホームページ CSSホームページ作成入門 CSS入門 CSSデザインサンプル サンプルソースで覚えるCSSテクニック商用利用可！無料CSSテンプレート配布
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
まるで雑誌みたいな段組のカラムレイアウト | 指で覚えるHTML5
マルチカラムレイアウトを使うとまるで雑誌や新聞のようにコンテンツを段組で表示できます。 また、自動的に段組できる点はスマホやタブレットなどのデバイスにも有用ですね。 カラム数、幅を決める まずは段組の数を決めましょう。 方法はカラム数を決めるcolumn-countかcolumn-widthです。 column-count:数値 カラム数を手動で設定します。カラム数は絶対変更されず、拡大、縮小します。 column-width:20em/300px 1つのカラム幅の「目安」を設定します。あくまで「目安」なのでカラム数はブラウザサイズに依存し、拡大、縮小します。 .column_01{ background:#fff; padding:10px; -webkit-column-count:3; -moz-column-count:3; } WEBデザイナーよし男の冒険 OK、ぼくよし男。よく
CSS3だけで折りたたみ表示 | スターフィールド株式会社
スマートフォンやタブレットPC用のWebサイトを作るときに、 場所を節約するために、コンテンツを折りたたんで表示することが度々あります、 通常は折りたたみ表示をするとき、JavaScriptなどを使って実装するのですが、 スマートフォンやタブレットPCなどではCSS3に対応しているため、 JavaScriptを使わずに、CSS3のみで折りたたみ表示を実装することができます。 参考：「『スマートフォンサイトのためのHTML5+CSS3』 エ・ビスコム・テック・ラボ著」 ↓こちらがそのデモです。 DEMO 方法 今回ポイントになるのが、擬似クラスの「:target」セレクタです。 メニュー部分に設置したリンクで指定したIDの要素に適用することができます。 メニューにIDのリンクを、折りたたむ要素の親要素に:targetをあてることで、実装していきます。 HTML <section id=
CSS3で簡単！ スマホ向けWebページのスクロールを激派手にできるstroll.jsとは
CSS3で簡単！ スマホ向けWebページのスクロールを激派手にできるstroll.jsとは：HTML5アプリ作ろうぜ！（9）（1/2 ページ） オープンソースのJavaScriptライブラリ「stroll.js」について、概要と使い方を紹介します。CSS3のアニメーションを駆使しているので動きが軽く、スマホ向けWebページのスクロールに派手なエフェクトを簡単に追加できます。 最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するのは「stroll.js」です。 CSS3のアニメーションを駆使するstroll.jsとは stroll.jsはオープンソース（ライセンスMIT）のスマートフォン用スクロールライブラリ（JavaScr
CSSアニメーションの応用事例 - ワザノバ | wazanova
http://css-tricks.com/css-animation-tricks/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 Zach SaucierがCSSアニメーションを駆使したテクニックを披露しています。 #1) Jump to another state mid-animation CSS animationで、微妙に数値の違う二つのkeyframe（例えば、.001%）を利用して、propertyを新しい値に即ジャンプする方法。 CSSコード @keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off / 50.001% { opacity: 0.4; } / Keep off state for a short perio
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのAからZを学べる映像チュートリアル『A to Z CSS』 | 100SHIKI
Diet Style ～女性のダイエットライフをもっと楽しく♪～
HTML5 & CSS3 Tools and Tutorials
https://infinityforest.net/home/archives/574