ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。, 以下で紹介しているサンプルで使用しているHTMLは、すべてLorem ipsumのようなシンプルなa要素を使用した想定になっています。, ホバーするとテキスト下でアンダーラインが上からフェードインしてくるタイプのアニメーションで、実装にはCSSを下記をのように記述します。, 先ほどとは逆に、ホバーするとテキスト下でアンダーラインが下からフェードインしてくるタイプのアニメーションで、実装にはCSSを下記をのように記述します。, ホバーするとアンダーラインが左から右に引かれる形で表示され、ホバーが外れるとまた左に戻っていくタイプのアニメーションで、実装にはCSSを下記をのように記述します。, こちらは先ほどとは逆に、ホバーするとアンダーラインが右から左に引かれる形で表示され、ホバーが外れるとまた右に戻っていくタイプのアニメーションで、実装にはCSSを下記をのように記述します。, ホバーすると左から右にラインが引かれる形で表示されますが、こちらはホバーが外れた場合に左に戻らず右に向かって非表示になるというタイプのアニメーションです。実装にはCSSを下記をのように記述します。, こちらは先ほどとは逆で、ホバーすると右から左にラインが引かれる形で表示され、ホバーが外れた場合に右に戻らず左に向かって非表示になるというタイプのエアニメーションです。実装にはCSSを下記をのように記述します。, ホバーすると中央から左右に向かってラインが引かれるタイプのアニメーションで、実装にはCSSを下記をのように記述します。, 上で全7種類のアンダーラインアニメーションを紹介してきましたが、以下はこれらを必要に応じて簡単に使用できるようにしたmixinになります。こういったアニメーションなどは大体サイト内で揃えることが多いですが、たまに場所によって少し動きを変えたいときがあるので、そういったときに便利かと思います。, 全体的に条件分岐多めで冗長な感じになってますが、上で紹介した7種類のアンダーラインアニメーションを上記mixinで簡単に利用できるようになり、アニメーション指定に利用するものとして下記4つの引数があります。それぞれに特定の値を指定することで使用したいアニメーションを呼び出すことができ、主に$typeと$dirで指定された値と条件分岐を使って出力内容が変わるようになっています。, それぞれの引数について説明すると、ひとつ目の$typeはアニメーションのタイプを指定するもので、上で紹介した「Fade Top」と「Fade Bottom」がfade、それ以外の「Left to Right」~「Center」までがslideという形で大きく分類しており、初期値はfadeを指定しています。, ふたつ目の$dirではアニメーションの方向を指定し、ここは$typeで指定した値によって指定できるものが異なります。$typeでfadeを指定した場合はtopかbottomを、$typeでslideを指定した場合はleft-right, left-in-right, right-left, right-in-left, centerのいずれかを指定します。$dirの初期値はnullを設定しており、もし指定されなかった場合はデフォルトの動きとして$typeをfadeにしていれば「Fade Top」が、$typeをslideにしていれば「Center」が適用されるような形にしてあります。また、間違った指定(例えばfadeでleft-rightを指定するなど)をした場合でも、何も指定されなかったときと同じようにデフォルトの動きが適用されます。, みっつ目の$weightはラインウェイトを指定(初期値は2px)するもので、ここで指定した値は単純にラインの太さのために使用するだけでなく表示位置の調整などにも利用しています。, 最後の$colorについては、そのままラインカラーを指定(初期値は#000)するものになります。, 実際にmixinを使用する場合は、それぞれ下記のように記述していきます。下記はすべて$weightと$colorの指定は省略したものになりますので、必要であれば例えば@include hover-underline('fade', 'top', 4px, #aaa);のような形で追記してください。, ※「Fade Top」は@include hover-underline;、「Center」は@include hover-underline('slide');でも呼び出せます。, 以下はこのmixinを用いて指定しているデモで、CodePenなので実際の表示確認するだけでなくちょっとコードを変更して試すこともできます。, 以上、ホバー時のアンダーラインアニメーションの実装サンプルとそれらを簡単に呼び出すためのmixinの紹介でした。mixinに関しては条件分岐多めだったりでもっとスマートに書けそうな感じがすごいので、もっと良い感じに書ける方法をご存知の方は是非教えてください。, ちなみに、ここで紹介してきたものはすべてアンダーラインのみという形でしたが、疑似要素を増やすことで上下にラインを表示させたり、それぞれ違う方向からラインを引くといったことも可能になります。以前にもこのようなエフェクトの実装方法を紹介しており、ここで紹介しているものとはtransformの使い方などが若干異なりますが、それらの実装方法については以下を参考にしてみてください。, サイト制作のスタイル設定を効率的に行うことができるリセットCSSとノーマライズCSSのまとめ.
  • メニュー
  • display: inline !important; } //]]>, 今回はホームページ・ブログの重要な要素、横並びメニュー10選をご紹介します。 img.wp-smiley, ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、Sassのmixinを用いて実装する方法も併せて紹介します。 } Close the search window, please press close button or esc key. vertical-align: -0.1em !important; width: 1em !important; [CDATA[ 線を引くようなアニメーション よくグローバルメニューなどにマウスオーバーするとその要素に下線がアニメーション表示されるのを見かけます。ちょっとしたアニメーションがあるだけで、気持ちおしゃれに見えるから不思議。ということで、HTMLとCSSでの下線アニメーションをまとめてお … CSSでフッターのメニューを横並びにしてデザインしてみました。CSSで実現したいことはメニューリストを横並びではなく、メニュー自体を横並びにするフッターのメニューです。 ulやolタグでマークアップしたリスト形式のメニューは縦に並びますが、CSSでフッターのメニューを横並びの3 … ウェブサイトにおいてユーザーが特に操作する機会の多い部分、ナビゲーションメニュー。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。今回は HTML と CSS で実装できるさまざまなナビゲーションメニュー用コードスニペット … (a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings); img.emoji { Copyright© padding: 0 !important; if (screen_res!=" x "){document.cookie = "wassup_screen_resfbb098f4298f71dc85ec6035970c5ea4=" + encodeURIComponent(screen_res)+ "; path=/; domain=" + document.domain;} !function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o CSSで見た目を変更し、ページのテーマ(雰囲気)に合わせたメニューにすることでよりユーザーが使いやすいページを作ることができます。 window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.e-sanwa.co.jp\/sbs\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.3.6"}}; },
      All rights reserved. htmlとcssだけでできる下線装飾の見出し15選です。 見出し次第で、記事の読みやすさは大きく変わります。 おもに、下線をデザインするだけのシンプルな見出しのみです。 色は好みで変えていただければ、かまいません。 メニューに下線をだすcss(ホバー時)はこれ で結論からいきまして、 メニューにホバーした時に、 下線を引く方法それは、 :セレクタに対して:hover(ホバー)を 指定して、{}のなかにborder-bottomをつけるだけです。 参考例.menu if(screen_res==" x ") screen_res=screen.availWidth+" x "+screen.availHeight; margin-right:10px; chamlog , if(screen_res==" x ") screen_res=window.screen.width+" x "+window.screen.height;
    • メニュー
    • ほんの少しの工夫で見やすく、使いやすくすることができるので、様々なアイデアで是非自分だけの素敵なメニューをデザインしてみてくださいね。, 次回の「初心者のためのCSS」はアコーディオンメニューをご紹介します。お楽しみに!, 「クレーム」「苦情」と聞いて皆様は何を想像しますか? 電話を取って名乗った瞬間自分が悪いわけではないのに、一方的に感情的に怒鳴られたり、延々と文句を言われたり・・・ プラスのイメージを持つ方は少ないかもしれません。 一方 …続きを読む, 表計算ソフトのExcelは非常に便利なソフトですね。数字の計算からグラフ・抽出まで簡単な操作で出来ます。こんな便利なソフトですが、複雑な計算をさせたり、多くの条件で分けて計算をする際には、さすがに標準の数式では限界があり …続きを読む, 気持ちよく会話が出来る人は、周りにひとが集まってきますね。それは、必ずしもアナウンサーのように発音や滑舌がよいからではないし、タレントのように面白い話題が豊富だからというものでもありません。 なぜでしょうか。 基本的には …続きを読む, 新入社員の皆さまも、もうだいぶ職場になれたころでしょうか?もしかしたら、職場にとけ込むことが、精一杯で、まだまだ自分ひとりでは業務を遂行することが難しいという方の方が多いかもしれません。 正直なところ、新入社員に対して  …続きを読む. box-shadow: none !important;
    • メニュー
    • , どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …, どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …, あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …, どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …, どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …, どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …, どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …, どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …, どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …, どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …, どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …, どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …, どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …, どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …, どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …, 大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。, youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。. CSSの中でも覚えるとかなりデザインを操れるようになる「border」についてです。「border」では「線の種類」「線の幅」「線の色」を変更できます。その上、上下左右を別々に指定できるので便利ですよー! © 2020 一般社団法人サンワビジネススクール. CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法. li { //メニュー 2020 All Rights Reserved. height: 1em !important; var screen_res = screen.width + " x " + screen.height; function wassup_get_screenres(){ HTMLとCSSをそのまま張り付けて簡単にメニューを作成できますので是非お試しください。, 今回はよく見るメニューの中から10種類を選んでご紹介してみました。 } display:inline-block; li:hover {