HTMLのウェブページのアクセシビリティについて考えてて、ふと疑問に思ったことをメモしとく。 どうしても改行したい ページの大きさの都合でどうしても強制改行したい場合がある。固有名なんかの途中でさえ改行したい場合がある。 春<br>日部 旧中<br>山道 これには大きな問題がある。 文節でもない箇所で区切られるので検索できない。 音声読み上げ式ユーザーエージェントはまるで正しく発音できない。 <br>を無いことにはできないものか？ 実際にはそこにある<br>を無いことにはできないんだろか。 検索性の問題はともかく、音声読み上げ式ユーザーエージェントで実際にはどうなるかはわからないど、悪あがきとしてこんなコードにを考えてみた。 春<br style="speak:none">日部 旧中<br style="speak:none">山道 …とはいっても、これで「はる・にちぶ」とか「きゅうなか・やまみち」とか読み上げられるのを回避できるような気はしないけど…。実際のところどうなんだろ。というか、視覚的レイアウト効果をもたらすだけで意味の句切れにも、音声読み上げの支障にもならないような、任意位置での強制改行はできるんだろか…。
HTMLのウェブページのアクセシビリティについて考えてて、ふと疑問に思ったことをメモしとく。
ページの大きさの都合でどうしても強制改行したい場合がある。固有名なんかの途中でさえ改行したい場合がある。
春<br>日部
旧中<br>山道
これには大きな問題がある。
<br>
実際にはそこにある<br>を無いことにはできないんだろか。
検索性の問題はともかく、音声読み上げ式ユーザーエージェントで実際にはどうなるかはわからないど、悪あがきとしてこんなコードにを考えてみた。
春<br style="speak:none">日部
旧中<br style="speak:none">山道
…とはいっても、これで「はる・にちぶ」とか「きゅうなか・やまみち」とか読み上げられるのを回避できるような気はしないけど…。実際のところどうなんだろ。というか、視覚的レイアウト効果をもたらすだけで意味の句切れにも、音声読み上げの支障にもならないような、任意位置での強制改行はできるんだろか…。
こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。 【実験】max-widthがmin-widthよりも小さいとどうなるのか？ タイトルの通りです。APIの公式解説サイトはこちらです。 試してみました。 どうやら、この矛盾した設定をした場合はmin-widthが優先されるようです。（MacのChromeで確認） この記事が参考になれば幸いです。 終わりに Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/
こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。
タイトルの通りです。APIの公式解説サイトはこちらです。 試してみました。 どうやら、この矛盾した設定をした場合はmin-widthが優先されるようです。（MacのChromeで確認）
この記事が参考になれば幸いです。
Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/
この2週間で撮ってきたHTML, CSS, JavaScript(基本文法, フロントエンド, バックエンド)の解説動画全てを以下の記事にまとめました^^ https://tsuyopon.xyz/learning-contents/web-dev-movie-list/ 動画本数 動画リスト数と解説動画本数は以下のとおりです。 動画リスト : 21本 解説動画本数 : 129本 解説動画の合計時間 : 14時間20分45秒 一般公開している動画なので誰でも無料で観れます！ Webエンジニアを目指している方、参考にどうぞ！ https://tsuyopon.xyz/learning-contents/web-dev-movie-list/
この2週間で撮ってきたHTML, CSS, JavaScript(基本文法, フロントエンド, バックエンド)の解説動画全てを以下の記事にまとめました^^
https://tsuyopon.xyz/learning-contents/web-dev-movie-list/
動画リスト数と解説動画本数は以下のとおりです。
一般公開している動画なので誰でも無料で観れます！ Webエンジニアを目指している方、参考にどうぞ！
未来電子テクノロジーでインターンをしているerika_zです。 プログラミングの学習を始めて約１ヶ月半が経ちました。 HTMLとCSSで作成していた、簡易的な逆求人サイトがおおよそ完成しました。 少し修正して、GitHubにあげようとしている段階です！ 逆求人サイトでSNSの埋め込みをした際に驚いたことがありました。 それは、SNSのロゴを使用するにはたくさんの条件があることです。 そこで今回は、主要なSNSのロゴを使用する際の条件について書きたいと思います。 はじめに プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。 SNSごとのロゴを使用する条件 Twitter ・ロゴの色は青、または白（画像の上に配置する場合は必ず白） ・丸や四角で囲まれたロゴも使用できる。ただし、ロゴには囲みがないものが望ましい ・影をつけることは禁止 ・ロゴの外枠だけでの使用は禁止 ・ロゴにデザインを加えることは禁止 ＜参照サイト＞ https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2_0.pdf Facebook ・アイコンとして単体または他のソーシャルアイコンと一緒に使用でできる（サイズは隣接するアイコンと同じ大きさにする） ・「ｆ」のロゴは、アニメーションで動かしてはいけない ・ロゴにデザインを加えることは禁止 ・色は正しい青色または、白黒のみ ＜参照サイト＞ https://ja.facebookbrand.com/assets/%E3%80%8Cf%E3%80%8D%E3%83%AD%E3%82%B4/?audience=landing Instagram ・ロゴの4方向全部に、最低ロゴの半分の幅の空白部分を作る ・1辺の幅が29px以上 ・ロゴを変形させることは禁止 ・白のロゴの背景には、単色を使用する ＜参照サイト＞ https://en.instagram-brand.com/assets/icons まとめ 主要なSNSのロゴを使用する際の条件についてご紹介しました。 みなさんそれぞれの条件に合った方法で使用していましたか？ サイトを作る際には、SNSの埋め込みは必要な工程でしょう。 しかし、定められているルールは守る必要があります。 ご紹介できていない条件もありますし、それそれのSNSによって条件が異なるためしっかり確認しましょう。
未来電子テクノロジーでインターンをしているerika_zです。
プログラミングの学習を始めて約１ヶ月半が経ちました。 HTMLとCSSで作成していた、簡易的な逆求人サイトがおおよそ完成しました。 少し修正して、GitHubにあげようとしている段階です！
逆求人サイトでSNSの埋め込みをした際に驚いたことがありました。 それは、SNSのロゴを使用するにはたくさんの条件があることです。
そこで今回は、主要なSNSのロゴを使用する際の条件について書きたいと思います。
プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。
・ロゴの色は青、または白（画像の上に配置する場合は必ず白） ・丸や四角で囲まれたロゴも使用できる。ただし、ロゴには囲みがないものが望ましい ・影をつけることは禁止 ・ロゴの外枠だけでの使用は禁止 ・ロゴにデザインを加えることは禁止
＜参照サイト＞ https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2_0.pdf
・アイコンとして単体または他のソーシャルアイコンと一緒に使用でできる（サイズは隣接するアイコンと同じ大きさにする） ・「ｆ」のロゴは、アニメーションで動かしてはいけない ・ロゴにデザインを加えることは禁止 ・色は正しい青色または、白黒のみ
＜参照サイト＞ https://ja.facebookbrand.com/assets/%E3%80%8Cf%E3%80%8D%E3%83%AD%E3%82%B4/?audience=landing
・ロゴの4方向全部に、最低ロゴの半分の幅の空白部分を作る ・1辺の幅が29px以上 ・ロゴを変形させることは禁止 ・白のロゴの背景には、単色を使用する
＜参照サイト＞ https://en.instagram-brand.com/assets/icons
主要なSNSのロゴを使用する際の条件についてご紹介しました。
みなさんそれぞれの条件に合った方法で使用していましたか？
サイトを作る際には、SNSの埋め込みは必要な工程でしょう。 しかし、定められているルールは守る必要があります。 ご紹介できていない条件もありますし、それそれのSNSによって条件が異なるためしっかり確認しましょう。
はじめに webアプリを作成中のこと、 formの入力チェックを行うと、入力した文字が 改行されない？？？ 改行されずに途中で文字が切れてしまいました。 調べてみると半角英数字のみの文章だと改行されないことがあるとかなんとか。 一文字でも日本語とか全角が混じると改行してくれるんですけどね。 対処法 対処法として wordwrap: break-word; [overflow-wrap: break-word;(CSS3の場合)］ または word-break: break-all; これをCSSで打ち込めばOKです！ 実際に打ち込んでみると、 見事に改行してくれました！！ 参考にしたサイト⬇︎ https://w3g.jp/blog/confusing_word-break_word-wrap
webアプリを作成中のこと、 formの入力チェックを行うと、入力した文字が
改行されない？？？ 改行されずに途中で文字が切れてしまいました。
調べてみると半角英数字のみの文章だと改行されないことがあるとかなんとか。 一文字でも日本語とか全角が混じると改行してくれるんですけどね。
対処法として wordwrap: break-word; [overflow-wrap: break-word;(CSS3の場合)］ または word-break: break-all; これをCSSで打ち込めばOKです！
実際に打ち込んでみると、
見事に改行してくれました！！
参考にしたサイト⬇︎ https://w3g.jp/blog/confusing_word-break_word-wrap
はじめに 最近、ずっとほったらかしにしてきたCSSでデザインの勉強。webデザイナーになりたいわけではないので将来どこかweb系に就職して使うかは分からないが、最低限の知識はいるだろうと思って最近サンプルを作っている。入社すぐはフロントサイドとか担当させてもらった時とかに活用できそう。 今回4種類のホバー型ドロップダウンメニューを作成。左からItem1,2,3,4。以下コードの掲載と解説。 まずItemの解説をする前にhtmlと共通のcssを以下に記載しておく。なお、こちらには今回の趣旨であるドロップダウンメニューに関するコードだけ記載している。全体のコードはGitHubにあげておく。 html <body> <ul class="sub2"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> <ul class="sub3"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> <div class="sub4_box"></div> <ul class="sub4"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> <header> <section id="title">Title</section> <ul class="menu_bar"> <li class="menu_items"> item1 <div class="underbar"> <ul class="sub1"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> </div> </li> <li class="menu_items"> item2 <div class="underbar"></div> </li> <li class="menu_items"> item3 <div class="underbar"></div> </li> <li class="menu_items"> item4 <div class="underbar"></div> </li> </ul> </header> </body> css header{ z-index: 3; /*下からmain,menu,headerの順番*/ position: relative; position: fixed; /*header固定*/ top: 0; left: 0; height: 120px; width: 100%; background-color: #696969; } ul{ z-index: 2; /*下からmain,menu,headerの順番*/ padding: 0; /*左のpadding削除*/ list-style: none; /*デフォルトのちょぼ消す*/ } a{ display: block; font-size: 0.8em; text-transform: uppercase; letter-spacing: .2em; } ul.menu_bar{ height: 40px; padding: 0; /*左のpadding削除*/ padding-top: 10px; margin: 0; display: flex; justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/ } underbarクラス これは各Itemの下に引いてあるアンダーバーであり、わざわざ各Itemとは別の要素で用意した。この理由は、Itemにborder-bottomを設定した場合にドロップダウンメニューとItemに隙間を開けないようにすると、Itemのborder-bottomとドロップダウンメニューの上部が重なり見栄えが悪くなるから。 Item1 こちらはシンプルなドロップダウンメニュー。メニューの幅はItem1の要素と同じで、表示するときに少し下がりながらfadeinしてくる感じ。 css ul.sub1{ position: absolute; visibility: hidden; /*hover前は非表示*/ opacity: 0; /*透明*/ top: 0; left: 0; width: 100%; background: white; transition: all 0.5s; -webkit-transition: all 0.5s; } ul.sub1 > li > a{ padding: 10px 10px; } .menu_items:nth-child(1):hover > div > ul.sub1{ top: 10px; visibility: visible; /*表示*/ opacity: 1; } hoverの謎 たぶんこれが一番王道のドロップダウンメニューかな？正直これを作っててなんでItemからhoverが外れてドロップダウンメニューにカーソルが写ってもドロップダウンメニューが消えないのかはよくわかっていない。どういう仕組みか分かる方いればご教授願います。 Item2 このドロップダウンメニューもよくwebサイトで見かけるような気がする。 css ul.sub2{ position: absolute; /*横幅をheaderと同じにするためheaderの子要素*/ display: flex; /*横並び*/ justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/ width: 100%; height: 100px; top: 20px; /*画面外*/ left: 0; margin: 0; /*headerとsub2との隙間をなくす*/ background-color: white; } ul.sub2 > li > a{ padding: 30px 40px; } jquery $('header > ul > li:eq(1)').hover(function(){ //hoverした時 $('.sub2').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); },function(){ //hoverが解除された時 //これはitem2からmouseleaveした直後の数回取得する $(':hover').each(function(){ //headerとitem2の間にundefinedがあるため if ($(this).attr('class') != undefined){ if ($(this).attr('class') != 'sub2'){ $('.sub2').css({'transform': 'translate3d(0, 0, 0)'}); } } }); }); $('.sub2').on('mouseleave',function(){ //transformの上書き $('.sub2').css({'transform': 'translate3d(0, 0, 0)'}); }); jsとcssでのインデックスの扱い Item1のcssで書いているように、要素を数えるときcssでは1から始まる。jsは0から始まる。 ドロップダウンメニューの収納 今回Item2,3,4で同じ手法でドロップダウンメニューを収納している。遠回りなやり方かもしれないが他に方法が思いつかなかったのでもっと調べる必要あり。具体的にはjqueryの$(':hover')のところであるが、カーソルがItemから外れた瞬間のカーソルがhoverしている要素がドロップダウンメニュー上であればそのまま表示、それ以外であれば収納、といった感じ。またドロップダウンメニューにはmouseleaveで収納するようになっているため、カーソルがItemかドロップダウンメニューから離れると収納する。 Item3 こちらの他と違う点はドロップダウンメニューの表示・収納時に他の画面も全て動く点。cssに関してはItem2の時と(クラス名がsub3と言う点以外)全く同じなので省略。 jquery $('header > ul > li:eq(2)').hover(function(){ //hoverした時 $('.sub3').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); $('main').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); },function(){ //hoverが解除された時 //これはitem3からmouseleaveした直後の数回取得する $(':hover').each(function(){ //headerとitem3の間にundefinedがあるため if ($(this).attr('class') != undefined){ if ($(this).attr('class') != 'sub3'){ $('.sub3').css({'transform': 'translate3d(0, 0, 0)'}); //mainが動くとz-indexが一番大きくなるため固定してitem1,2が後ろにいかないようにする $('main').css({ 'transform': 'translate3d(0, 0, 0)', 'z-index': '1' }); } } }); }); $('.sub3').on('mouseleave',function(){ //transformの上書き $('.sub3').css({'transform': 'translate3d(0, 0, 0)'}); $('main').css({ 'transform': 'translate3d(0, 0, 0)', 'z-index': '1' }); }); z-indexの謎 ここでも正直なぜか理解していないことが発生。それはmainをtranslateで動かした後なぜかmainが画面最上部に表示されてしまうということ。よってz-indexを再設定しないと、Item3のドロップダウンメニューを表示させた後、Item1や2のドロップダウンメニューがmainの後ろ側にいってしまう。ドロップダウンメニューは動かしてもz-index変わらんのになぜ？これも分かる方いれば是非ご教授ください。 Item4 こちらはアニメーションを効かせて見栄えを工夫したもの。 css ul.sub4{ position: absolute; /*横幅をheaderと同じにするためheaderの子要素*/ display: flex; /*横並び*/ justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/ width: 100%; height: 90px; /*sub4_boxよりも小さくすることでmouseleaveを正常に効かせる*/ top: 20px; /*画面外*/ left: 0; margin: 0; /*headerとsub2との隙間をなくす*/ } .sub4_box{ z-index: 2; /*下からmain,menu,headerの順番*/ position: absolute; /*横幅をheaderと同じにするためheaderの子要素*/ width: 100%; height: 100px; top: 20px; /*画面外*/ left: 0; background-color: white; } .sub4_box + ul > li > a{ padding: 30px 40px; } jquery $('header > ul > li:eq(3)').hover(function(){ //hoverした時 $('.sub4_box').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); let time = 0.4; for (let i=0; i<3; i++){ $('body > ul:eq(2) > li:eq('+i+')').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all '+time+'s', '-webkit-transition': 'all '+time+'s' }); time += 0.3; } },function(){ //hoverが解除された時 //これはitem2からmouseleaveした直後の数回取得する $(':hover').each(function(){ //headerとitem2の間にundefinedがあるため if ($(this).attr('class') != undefined){ if ($(this).attr('class') != 'sub4'){ for (let i=0; i<3; i++){ $('body > ul:eq(2) > li:eq('+i+')').css({ //transformの設定 'transform': 'translate3d(0, 0, 0)' }); } //listが動くのを待つため0.3秒遅らせる setTimeout(function(){ $('.sub4_box').css({'transform': 'translate3d(0, 0, 0)'}); },300); } } }); }); $('.sub4_box').on('mouseleave',function(){ //transformの上書き for (let i=0; i<3; i++){ $('body > ul:eq(2) > li:eq('+i+')').css({'transform': 'translate3d(0, 0, 0)'}); } setTimeout(function(){ $('.sub4_box').css({'transform': 'translate3d(0, 0, 0)'}); },300); }); 特に難しいことはしていない。強いて言うなら初めてsetTimeout()メソッド使ったくらい。 最後に 今回はドロップダウンメニューを作ってみた。ブロック要素の扱いにだいぶ慣れてきた気がする。あとはいろんなwebサイト参考にしておしゃれなデザインができるようになりたい。
最近、ずっとほったらかしにしてきたCSSでデザインの勉強。webデザイナーになりたいわけではないので将来どこかweb系に就職して使うかは分からないが、最低限の知識はいるだろうと思って最近サンプルを作っている。入社すぐはフロントサイドとか担当させてもらった時とかに活用できそう。 今回4種類のホバー型ドロップダウンメニューを作成。左からItem1,2,3,4。以下コードの掲載と解説。
まずItemの解説をする前にhtmlと共通のcssを以下に記載しておく。なお、こちらには今回の趣旨であるドロップダウンメニューに関するコードだけ記載している。全体のコードはGitHubにあげておく。
<body> <ul class="sub2"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> <ul class="sub3"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> <div class="sub4_box"></div> <ul class="sub4"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> <header> <section id="title">Title</section> <ul class="menu_bar"> <li class="menu_items"> item1 <div class="underbar"> <ul class="sub1"> <li><a href="#">Sub-menu01</a></li> <li><a href="#">Sub-menu02</a></li> <li><a href="#">Sub-menu03</a></li> </ul> </div> </li> <li class="menu_items"> item2 <div class="underbar"></div> </li> <li class="menu_items"> item3 <div class="underbar"></div> </li> <li class="menu_items"> item4 <div class="underbar"></div> </li> </ul> </header> </body>
header{ z-index: 3; /*下からmain,menu,headerの順番*/ position: relative; position: fixed; /*header固定*/ top: 0; left: 0; height: 120px; width: 100%; background-color: #696969; } ul{ z-index: 2; /*下からmain,menu,headerの順番*/ padding: 0; /*左のpadding削除*/ list-style: none; /*デフォルトのちょぼ消す*/ } a{ display: block; font-size: 0.8em; text-transform: uppercase; letter-spacing: .2em; } ul.menu_bar{ height: 40px; padding: 0; /*左のpadding削除*/ padding-top: 10px; margin: 0; display: flex; justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/ }
これは各Itemの下に引いてあるアンダーバーであり、わざわざ各Itemとは別の要素で用意した。この理由は、Itemにborder-bottomを設定した場合にドロップダウンメニューとItemに隙間を開けないようにすると、Itemのborder-bottomとドロップダウンメニューの上部が重なり見栄えが悪くなるから。
こちらはシンプルなドロップダウンメニュー。メニューの幅はItem1の要素と同じで、表示するときに少し下がりながらfadeinしてくる感じ。
ul.sub1{ position: absolute; visibility: hidden; /*hover前は非表示*/ opacity: 0; /*透明*/ top: 0; left: 0; width: 100%; background: white; transition: all 0.5s; -webkit-transition: all 0.5s; } ul.sub1 > li > a{ padding: 10px 10px; } .menu_items:nth-child(1):hover > div > ul.sub1{ top: 10px; visibility: visible; /*表示*/ opacity: 1; }
たぶんこれが一番王道のドロップダウンメニューかな？正直これを作っててなんでItemからhoverが外れてドロップダウンメニューにカーソルが写ってもドロップダウンメニューが消えないのかはよくわかっていない。どういう仕組みか分かる方いればご教授願います。
このドロップダウンメニューもよくwebサイトで見かけるような気がする。
ul.sub2{ position: absolute; /*横幅をheaderと同じにするためheaderの子要素*/ display: flex; /*横並び*/ justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/ width: 100%; height: 100px; top: 20px; /*画面外*/ left: 0; margin: 0; /*headerとsub2との隙間をなくす*/ background-color: white; } ul.sub2 > li > a{ padding: 30px 40px; }
$('header > ul > li:eq(1)').hover(function(){ //hoverした時 $('.sub2').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); },function(){ //hoverが解除された時 //これはitem2からmouseleaveした直後の数回取得する $(':hover').each(function(){ //headerとitem2の間にundefinedがあるため if ($(this).attr('class') != undefined){ if ($(this).attr('class') != 'sub2'){ $('.sub2').css({'transform': 'translate3d(0, 0, 0)'}); } } }); }); $('.sub2').on('mouseleave',function(){ //transformの上書き $('.sub2').css({'transform': 'translate3d(0, 0, 0)'}); });
Item1のcssで書いているように、要素を数えるときcssでは1から始まる。jsは0から始まる。
今回Item2,3,4で同じ手法でドロップダウンメニューを収納している。遠回りなやり方かもしれないが他に方法が思いつかなかったのでもっと調べる必要あり。具体的にはjqueryの$(':hover')のところであるが、カーソルがItemから外れた瞬間のカーソルがhoverしている要素がドロップダウンメニュー上であればそのまま表示、それ以外であれば収納、といった感じ。またドロップダウンメニューにはmouseleaveで収納するようになっているため、カーソルがItemかドロップダウンメニューから離れると収納する。
こちらの他と違う点はドロップダウンメニューの表示・収納時に他の画面も全て動く点。cssに関してはItem2の時と(クラス名がsub3と言う点以外)全く同じなので省略。
$('header > ul > li:eq(2)').hover(function(){ //hoverした時 $('.sub3').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); $('main').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); },function(){ //hoverが解除された時 //これはitem3からmouseleaveした直後の数回取得する $(':hover').each(function(){ //headerとitem3の間にundefinedがあるため if ($(this).attr('class') != undefined){ if ($(this).attr('class') != 'sub3'){ $('.sub3').css({'transform': 'translate3d(0, 0, 0)'}); //mainが動くとz-indexが一番大きくなるため固定してitem1,2が後ろにいかないようにする $('main').css({ 'transform': 'translate3d(0, 0, 0)', 'z-index': '1' }); } } }); }); $('.sub3').on('mouseleave',function(){ //transformの上書き $('.sub3').css({'transform': 'translate3d(0, 0, 0)'}); $('main').css({ 'transform': 'translate3d(0, 0, 0)', 'z-index': '1' }); });
ここでも正直なぜか理解していないことが発生。それはmainをtranslateで動かした後なぜかmainが画面最上部に表示されてしまうということ。よってz-indexを再設定しないと、Item3のドロップダウンメニューを表示させた後、Item1や2のドロップダウンメニューがmainの後ろ側にいってしまう。ドロップダウンメニューは動かしてもz-index変わらんのになぜ？これも分かる方いれば是非ご教授ください。
こちらはアニメーションを効かせて見栄えを工夫したもの。
ul.sub4{ position: absolute; /*横幅をheaderと同じにするためheaderの子要素*/ display: flex; /*横並び*/ justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/ width: 100%; height: 90px; /*sub4_boxよりも小さくすることでmouseleaveを正常に効かせる*/ top: 20px; /*画面外*/ left: 0; margin: 0; /*headerとsub2との隙間をなくす*/ } .sub4_box{ z-index: 2; /*下からmain,menu,headerの順番*/ position: absolute; /*横幅をheaderと同じにするためheaderの子要素*/ width: 100%; height: 100px; top: 20px; /*画面外*/ left: 0; background-color: white; } .sub4_box + ul > li > a{ padding: 30px 40px; }
$('header > ul > li:eq(3)').hover(function(){ //hoverした時 $('.sub4_box').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all 0.2s', '-webkit-transition': 'all 0.2s' }); let time = 0.4; for (let i=0; i<3; i++){ $('body > ul:eq(2) > li:eq('+i+')').css({ //transformの設定 'transform': 'translate3d(0, 100px, 0)', 'transition': 'all '+time+'s', '-webkit-transition': 'all '+time+'s' }); time += 0.3; } },function(){ //hoverが解除された時 //これはitem2からmouseleaveした直後の数回取得する $(':hover').each(function(){ //headerとitem2の間にundefinedがあるため if ($(this).attr('class') != undefined){ if ($(this).attr('class') != 'sub4'){ for (let i=0; i<3; i++){ $('body > ul:eq(2) > li:eq('+i+')').css({ //transformの設定 'transform': 'translate3d(0, 0, 0)' }); } //listが動くのを待つため0.3秒遅らせる setTimeout(function(){ $('.sub4_box').css({'transform': 'translate3d(0, 0, 0)'}); },300); } } }); }); $('.sub4_box').on('mouseleave',function(){ //transformの上書き for (let i=0; i<3; i++){ $('body > ul:eq(2) > li:eq('+i+')').css({'transform': 'translate3d(0, 0, 0)'}); } setTimeout(function(){ $('.sub4_box').css({'transform': 'translate3d(0, 0, 0)'}); },300); });
特に難しいことはしていない。強いて言うなら初めてsetTimeout()メソッド使ったくらい。
今回はドロップダウンメニューを作ってみた。ブロック要素の扱いにだいぶ慣れてきた気がする。あとはいろんなwebサイト参考にしておしゃれなデザインができるようになりたい。
