[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動画でも解説しています。動画派の
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
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)，または
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
