CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
[CSS]Flexboxでハンバーガーメニューを作ろう
プラグインやフレームワークを使わずにレスポンシブ対応のナビゲーションが作れないかとここ1年半ほどずっと考えていました。制作現場では時間の制約などの関係でプラグインの導入が現実的だと思うのですが、せっかく勉強しているので、今回はFlexboxを使ってレスポンシブ対応のナビゲーションメニューを作ってみました。 実装手順 手順は以下です。 マークアップ Flexboxで並べる ブレイクポイントでレイアウトを切り替える スクリプトを書く ハンバーガーメニューを作る 実際に作ってみましょう 初めてハンバーガーメニューを実装する場合、訳が分からなくなるかもしれませんが、テンプレートのようなものなので、この際覚えておきましょう。 1.マークアップ よく見かけるロゴとメニューが横並びのレイアウトの文書構造を書いていきます。 <header> <nav> <h1>Panda Custom</h1> <ul>
![[CSS]Flexboxでハンバーガーメニューを作ろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e7edafafb3d5462be7930e6fe85905760fda054/height=288;version=1;width=512/http%3A%2F%2Fpilgrim-guild.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fflexbox.png)
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
nth-childのカッコの中にプラスを使うのが地味に便利 | Travelogue
地味に便利なCSS3のセレクタの話。 使い慣れてないとあまりよく考えず別々のclassを割り当てたりしがちですが、使い慣れてくるととってもスマートにコーディングできてなんだか嬉しい。 例えばnth-child()。これ自体は前からよく使ってましたが、カッコの中にはただの数字をいれたり、evenやoddを入れたり、あとは3nみたいに倍数で指定したりという使い方でだいたい終わってました。 HTMLは普通にulのliで並べます。ulにはclearfixを指定しますがこれの説明は省略。 <ul id="list1" class="cf"> <li><img src="thumb.jpg" alt=""><p>てきすとてきすと</p></li> <li><img src="thumb.jpg" alt=""><p>てきすとてきすと</p></li> <li><img src="thumb.jpg"
Modern Slide In - Sequence.js Theme
Release Date August 9th 2015Latest Update August 9th 2015Theme Version2.0.0 Sequence.js Version What is the purpose of the Recommended Sequence.js Version?The recommended Sequence.js version this theme is packaged with. Other versions may work but may not have been fully tested.2.0.0 License GPLv3RepoGitHub Tags grayhorizontallightminimalproductsslider FeaturesOn mobile devices, the product image
ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
CSS3を使った超クールなホバーエフェクトのサンプル集:phpspot開発日誌
Ultimate image hover effects using css3 - Usingcss3 CSS3を使った超クールなホバーエフェクトのサンプル集 3Dエフェクト等を活用した様々なエフェクトが多数収録されています。実用的なものから、インパクト重視の場合に使えそうなエフェクトがあるため、便利に使えそうです 関連エントリ 次世代のCSSホバーエフェクト全部のせ「iHover」 CSS3でホバーエフェクトをこれでもかというぐらい集めたサンプル集 CSSホバーエフェクトの30のネタ帳 BootstrapのDropdownメニューをホバーで開くように出来るプラグイン「bootstrap-hover-dropdown」 アンカーにホバーすると全画面でGIFアニメーションが再生される「GifLinks」
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
Selectors Level 3
Selectors Level 3 W3C Recommendation 06 November 2018 This version: https://www.w3.org/TR/2018/REC-selectors-3-20181106/ Latest version: https://www.w3.org/TR/selectors-3/ Previous version: https://www.w3.org/TR/2018/PR-selectors-3-20180911/ Latest version of Selectors: https://www.w3.org/TR/selectors/ Editor's Draft https://drafts.csswg.org/selectors-3/ Feedback: File an issue on GitHub Editors:
CSS セレクタに関するおさらい 2 | WWW WATCH
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
CSS3セレクタ nth-of-typeとnth-childの違い | HALAWATA.NET
CSS4セレクタ (Selectors Level 4) の新機能 CSS4セレクタ (Selectors Level 4)が公開されていました。$selector記法とか新機能が色々追加されてます。 それにしてもCSS3セレクタもしっかり使いこなしていないのにもうCSS4セレクタかよ、って気もするので、これを機にCSS3のセレクタでわかりにくい部分をまとめておきたいと思います。 nth-of-typeの使い方 CSS3では多くのセレクタが加えられました。 CSS3対応のCSSセレクタ一覧 – CSSデザインノート この中で使う機会が多そうなのが、nth-of-type、nth-childだと思います。 工夫次第でいろいろな場面に応用できそうなnth-of-type、nth-childですが、使い分けには注意が必要です。 解説には、nth-of-type(n)は兄弟関係にある n 番目の
:nth-child() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
nth-child() 疑似クラスを試してみる | d-spica
nth-child() 疑似クラスを試してみる 2008-05-26 0 0 XHTML/CSS CSS, nth-child CSS3で定義される nth-child() 疑似クラス。これが使えるようになると，HTMLファイル，CSSファイルのメンテナスが楽になるだろうな...と思うのです。 どんな具合か，ちょっと試してみました。 nth-child() 疑似クラスとは 英文ですが，詳細は以下から。W3Cの Working Draft（草案）ですので，今後変更されることがあるかもしれません。 Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class その要素が何番目の子要素かによって，該当するものにだけ，CSSをあてることができます。 たとえば，セレクタにul li:nth-child(2n)，または
HTML5＆CSS3で作成されたレスポンシブかつフリーなテンプレートが入手できる「HTML5 Up」:phpspot開発日誌
HTML5 Up! Responsive HTML5 and CSS3 Site Templates HTML5＆CSS3で作成されたレスポンシブかつフリーなテンプレートが入手できる「HTML5 Up」 サイトを高速に構築するのにテンプレートを使う方法がありますが、そのテンプレートが最初からレスポンシブ対応していたら楽ですね そうしたテンプレートを探してフリーでダウンロード出来るので探す際の参考にしてみても良さそう 関連エントリ フリーでフレッシュ＆美しいHTML5＋CSS3テンプレート５０ フリーでHTML5ベースのリッチな管理画面テンプレート HTML5を使った超クールなフリーのWordPressテーマ集35 最初からレスポンシブなCSSデザインのHTMLテンプレート３５
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
角丸やシャドウ作るジェネレータ。CSS3 Generator
Grad3
[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
