<http://www.html5.jp/tag/elements/img.html>ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。iframeだと普通に動くな。早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。日本語早期アクセスより引用ということですから、完全にサポートされているわけではありません。日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。「はんなり明朝」とか好きなフォントですし、嬉しいですね!ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。Japanese漢字なしはんなり明朝こころ明朝ニクキュウニコモジひらがななしニクキュウせっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。よかったら見てみてくださいね。コメントを残すまずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。これ、だいたい間違いなく挫折します。その気になったのですから、Webって楽しいを体験してほしいのです。今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。今回は前置きが長いので、面倒な人はこちらから。挫折のわけ何せHTMLをたくさん掲載してある本はとても分厚いです。Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。HTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。今度はCSS辞典を買ってくるのでしょうか?CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。お手軽に作ってみようCSSフレームワークグリットシステムというものがWeb界を席巻してもうかなり経ちます。今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。BootstrapやFoundationなどといったところが世界的にもとても有名です。スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。CSSフレームワークは多くの人を助けてくれました。CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。(※自分の勉強がてら)Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。CDNを利用するCSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)GoogleやMicrosoftが公開しているCDNもあります。jsDelivrやcdnjsといったところもメジャーです。先ほど名前を挙げたBootstrapもCDNで利用できます。使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。今回利用したものフレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。Slickはjsdelivrからです。アイコンもWebサイトを作る上でとても重要な要素です。Awesomeというアイコンフォントを利用しましょう。Fontsを利用してみましょうか。Webページを作ろう上に挙げたものをhead内に読み込みます。href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">今回のページの内容あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。マップも入れましょう。SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。ここではBulumaの使い方の説明ではないので細かい事は説明しません。ドキュメントを見ながらレイアウトを作っていきます。カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。手なりでつくってこんな感じです。【DEMO】ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。HTMLの他にCSSとjQueryをちょっとだけ書きました。!important;}Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。false;});});jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。スムーススクロールは絶対に必要なものではありません。CDNやCSSフレームワークのデメリットこんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。メリットがあるのと同様デメリットもあるからです。CDNのデメリットまず第一に他の人のサーバとソースを利用しているということでしょう。これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。CSSフレームワークのデメリットこれはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。フレームワークの機能で利用していないものがたくさんあります。ある程度知識があれば、フレームワークなどを使わなくても再現できます。利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。コンマ何秒でも速く、ということを考えると大幅に無駄です。専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。CSS」というボタンを用意しました。HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。?ちょっとは違うサイトに見えますか?まとめこのようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。そのために我々のようなWeb制作者もいるわけですし。作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。自分で作ったものがブラウザに表示されるって楽しいんですよ。最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。制作現場まずはてっとり早くWebページを作ろう。今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。Javascript→なんか怖い。サンプルページはこちら。作っているうちに遊んでしまいました。最初に今回のお題です。(コードだけだけど・・・)ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。'50px',});}});});いまでは、このような使い方をすることが多いです。50px;}jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。jQueryを使うCSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。(セミコロン)」です。上記の例では初めに「.button」が「on」すると言っています。on()は、clickやmouseenterなどの動作の時に命令を発動させます。//2の2つの命令をしています。1では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。2は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。CSSのアニメーションについてCSSでアニメーションするには2通りの方法があります。1.transitionを使う方法と2.animationを使う方法です。transitionは自動ではスタートしません。サイト制作上、よく使うアニメーションはこちらを使うことが多いです。transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。animationはtransitionに比べ、より細かいアニメーションの設定ができます。キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。CSSアニメーションでの注意点CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。topの値が0から50pxにすることも50%にすることも5emにするのもOKです。margin-leftの値を0からautoにする、これはアウトです。transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。text-alignをleftからcenterにしてもアニメーションはしません。数値を扱うものしか使えない、とおぼえておいてください。先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。translateY(-50%);}発火これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。CSSのセレクタだけでは判定できないものも多くあります。お申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。いう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。クリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。function(){$('.target').addClass('active');});});また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。function(){$('.target').toggleClass('active');});});さまざまなジェネレーターやライブラリ自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。コメントを残す【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった!うまくいかなかった!こんにちは。今年の新潟は例年より雪が少ないみたいです。寒がりなので、はやく暖かくなるといいなぁ、コタツ欲しいなぁ、コタツで仕事したいぁと思うこの頃です。Microsoftサポートが打ち切られまして、CSSを書く人間としては一足先に春が来たのかもしれないなぁと頭の中がポカポカするわけですが、これまで古いIEさんに遠慮してできなかったことを、どんどんやっていかなきゃいけないわけです。サポート終了[過去記事]そんな中、実案件でついにFlexboxを使う機会があったので、喜びの舞を踊ったときのお話です。今回は失敗談になります。サムネイルの位置を切り替える年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか?さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。bxSliderとslickです。先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。slick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。href="slick.css">※追記slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。一応回避方法を考えてみましたのでコメントをご覧ください。スライダー部分のHTMLはこんな感じに。class="slick-prev"></div></div></div></div>スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。動作のためのJavascriptをこんな感じです。false}}]});});メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。サムネイルの方は、今回は4枚並ぶ形にしました。」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。slickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。見た目の方のCSSはこんなです。transparent;}}ちょっと長いですけど、基本的にはたいしたことしてないですね。メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を%で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100%にしています).slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。今回はコードばかりでいつも以上にとっつきにくいですね。追記(2016/04/25)サンプルその2も作ってみました。CSS」に触れてみたこんにちは、yasaiです。今年の新潟は例年以上に秋を通り過ぎて冬が来ちゃいそうです。寒いのは苦手なのです。今月は当ブログのネタはなんにしようかしら、今日の夕飯はなんにしようかしらと悩んでまして、夕飯を大根ときのこの味噌汁にすることは決めたすぐ決まったのですが、何を書くかはさっぱり。アウトプットって難しい。そんな中coliss様の記事で触ってみたいものを発見したので、今日はそちらを。そちらの記事はこちら。CSS」に触れてみましたよ、というお話です。SYSTEM」とプラスアルファ自分で使いやすくカスタマイズを追加したものを使っています。SYSTEM」の24カラムバージョンを多用しています。こちらはデザイナーさんとも話したうえで使っています。border-box;の威力に感動してた頃です。SYSTEM」のように使えそうなことflexboxを使っていることIE9+で対応しているらしいこと個別のsassファイルで切り分けられ、クラス名が他と重複しづらく他のcssへ干渉しないことflexboxを使ったレイアウトが今後主流になるのかなぁという感じですが、実案件ではIEへの対応(IE10ではベンダープレフィックス付き、IE9以下は非対応)や仕様変更が多くちょっと使うのが怖かったこともあって、使うのを少し敬遠してたところがあったのです。←ただの勉強不足のいいわけそんなときにcoliss様の記事を見て、IE9+なら良さそうだぞ!、ということでやる気になったのでした。試しにざっくりやってみた【DEMO】ドキュメントを見ながら写真おいて、テキスト入れて。基本的な使い方は自分の使いたい奴のクラスをどんどんつけていくパターンです。float+絶対配置やdisplay:table-cell;を使ったレイアウトの良いとこどりな感じで、flexboxを使ったレイアウトで、特徴的なのが「コンテンツを天地のセンター合わせ」と「コンテンツの並びをリバースできる」ってところですよね。可変する高さの「コンテンツの天地のセンター合わせ」に関してはCSS挫折の一つの要素だったんじゃないかと思っているので、flexboxが敷居を下げる一つのきっかけになったらいいな、と思っているのです。<p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。<p>無理矢理ボックスを天地のセンターにしたので変ですが。fx-col-center-s"><h2>近所の漁港</h2><p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。fx-col-center-s"><h2>日本海の夕日</h2><p>無理矢理ボックスを天地のセンターにしたので変ですが。</p></div></div>.fx-rowで行を指定し、その中に.fx-col-00-xでボックスを作ります。00の部分は比率になってます。xの部分はメディアクエリの切り替えのポイントです。1200)画像のボックスは.fx-top-center-xで上付きに、テキストは行に対して.fx-col-center-xを指定して「コンテンツの天地のセンター」にしています。<p>このボックスでは「文章」40%、「画像」30%を、センターにして配置しています。<p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。fx-col-40-s"><h2>晴れた雪の日</h2><p>このボックスでは「文章」40%、「画像」30%を、センターにして配置しています。fx-col-40-s"><h2>雪の日の空</h2><p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。alt=""></div></div></section>上のセクションが普通の順番「テキスト+画像」、下のセクションが逆順に「画像+テキスト」になります。違いは下のセクションでは.fx-rowに対して.fx-row-reverse-xを指定しているところですね。同じ内容で見た目だけ違うだけなので、html的には同じ並びになっていてコードの可読性が高くなりますね。あと、このセクションでは.fx-rowに対して.fx-row-center-xを指定しています。これは中のボックスのトータルの水平の配置の仕方です。:均等割り.fx-row-between-xと.fx-row-around-xの違いを言葉で説明できないので、こちらはドキュメントで確認してください。CSSでDEMO作ってみて思ったこと使い方は簡単に覚えていけそうです。基本的にはクラスを付与していくだけなので、どのクラスがどのようになっているのかさえ覚えてしまえば、どんどん組んでいけます。CSSにはリセット関係があらかじめ入っています。この辺りは、sassフォルダの中に分けて入っていたので、自分の制作環境に合わせて使えそうです。メディアクエリの切り替えのポイントなども「variables.scss」の中で定義しているので、こちらを編集したらOKそうです。scssファイルが同梱されているっていうのは、個人的に高感度ポイント高いです!気をつけなくてはならない点は、このフレームワークを使ってもflexboxの使い方(書き方)は覚えないですね、当たり前なんですけど。flexboxを使ったレイアウトの感触をつかむのにはとてもいいんだと思います。CSSを使う際にはまたデザイナーさん(ディレクターにも)と打ち合わせてお互いに何となくわかった状態で進めたほうがスピードアップにつながりそうですね。CSS」を案件に応じて使い分けていってもいいなぁと思っています。初めのさわりだけで、全然突っ込んだところがないんですが、今回は触ってみた感想ということで。コメントを残す「CSSだけでマウスオーバーでアニメーションしてくるキャプション」をやってみたこんにちは。Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。Rainbowさんでは、マウスオーバーするエリアを設けてやっておられましたが、僕のは画像の親ボックスにマウスオーバーしたら画像がスライドしてくる仕掛けです。href="">ボタンとか</a></p></div></div></div>親要素を.photo、その中に画像と、キャプション用、キャプションというよりいろいろコンテンツを使えるように.captionでマークアップします。CSS※sassで書いてます。こちらの方が見通しが良い気がするので。#fff;}}大まかにレイアウトの部分を抜粋しました。親要素.photoを「overflow:hidden;」にして、表示エリア以外は非表示にする。imgは親要素に対し100%にしたい。これは、画像要素の大きさのキャプションを表示しているわけではなく、親要素に対してのキャプション部分の大きさとしているため。上のCSSだと親要素よりも画像が小さかった場合にキャプション部分が画像からはみ出してしまいますね(汗)キャプション部分は絶対配置で配置し、「top:100%;」で親要素の表示エリアからはみ出させて非表示っぽく。0;</span>}親要素はマウスオーバーされたときに、transitionを使ってtopの値を0までアニメーションさせています。.captionのheightとhover時のtopの値を変更すれば、画像全体を覆わない高さのキャプション(帯っぽいやつ)など、応用はできそうです。今回はちょっと軽めだけどこの辺で。いうのやってるとCSSでいろいろ表現できるようになっていった覚えたてのころの気持ちが蘇りますね。sassで書いてしまったので、CSSのリンクも載せておきますね。コメントを残すCSSだけで実装するハンバーガーメニュー(暫定版...)こんにちは。野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。スポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。何となく自分向けの備忘録です。実装はHTMLとCSSだけ。Javascriptは使いません。href="">menu06</a></li></ul></div></nav>Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。CSSsassの記述はこうなりました。以下sassで記述します。center;}}}}}ちょっと長くなりましたが、やってることは順序は前後しますが1メニューの切り替え、2メニューがオンになったときのスタイル、3メニューのページに対する絶対配置です。visible;}}checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。セレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。2メニューがオンになったときのスタイルメニューがオンになったときには、メニューの内容がオーバーレイでページのセンターに表示される。メニューボタンの3本線が×マークになる。200vh;}}メニューの中身(ul要素)を画面中央にfixedし、そのafter疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。2.メニューボタンの3本線が×マークになる。center;}}}}3本線はlabel要素(.hamburger__btn)の疑似要素で中央に1本。その子要素spanの疑似要素で上下に引いています。メニューがオンになったときは中央の線を非表示にして子要素spanの線を45度回転させました。3メニューのページに対する絶対配置に関しては、そのままなので割愛します。チェックボックスがオーバーレイの上に来ないと切替が出来なくなってしまうのでご注意を。ハンバーガーメニューを使うにあたって今回制作した案件はPCサイズでもハンバーガーメニューを使うデザインだったのですが、ハンバーガーメニューからしかページ遷移ができないページの場合に、ちょっと使い勝手が悪く感じました。メニューの内容が見えているグローバルメニューと違って、1クリックしないとメニューの内容がわからない、移動できないっていうのは、使う側からするといささか不便なんだなぁと。視線がページのコンテンツを読むために上から下に流れっていって、そこからページ遷移のためにハンバーガーメニューを探すっていうのがいかんのかも。スマホの場合はコンテンツの終わりとハンバーガーメニューを同時に視界にとらえられるので、そこまで違和感ないんですけどね。ハンバーガーメニュー使うときは、コンテンツの中からページ遷移させるためのテキストリンクやボタンが見てくれる人のために必要なんだなと感じたのでした。最後にsassだけじゃなくてメニュー部分のCSSへ切り出したファイルもリンクしておきますね。