HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
CSSで実装するハンバーガーメニュークリック時のエフェクト 10 - NxWorld
いずれも同じような動きだったり過去に紹介したものに少し動きを加えたレベルにはなりますが、ハンバーガーメニューをクリックしてクローズボタンへ変化する動きをCSSで実装したサンプル集です。 今回もメニュークリック時にJavaScriptを使って.activeというクラスが追加・削除する動きを実装想定になっています。 共通のHTML 紹介するサンプルはいずれも下記のようなHTMLを使用しており、クリック時にこのbutton要素に対して.activeというclassが付与されるという想定でCSSの実装コードを紹介していきます。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { display: inline-blo
【jQuery】スライダープラグイン「slick」実装サンプル集 | 125naroom / デザインするところ（会社）です。
よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by 125naroom (@125naroom) on CodePen. HTMLとjQueryはこちら <div class="sliderArea"> <div class="regular slider"> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div> <div><img src="https://125naroo
【2020年最新！コピペだけ！】おしゃれなハンバーガーメニュー【21個まとめ】
いまや、スマホ対応サイトにハンバーガーメニューは必須となりました。 しかし、いちいちゼロから作るのは面倒ですよね。 忙しい方のために、コピペで作れるハンバーガーメニューを21個まとめました。 7種類のボタンの動きと、メニューの出てくる動きが違うサンプルを用意しています。 「result」部分にあるハンバーガーメニューをクリックして、好きな動きの組み合わせを見つけてください！ コードをコピペすればそのまま使うことができます。 もちろんご自分好みにカスタマイズして使って頂いてもOKです。 1.基本のハンバーガーボタン まずは一番ベーシックなボタンの動きです。 コーポレートサイトなどにオススメです。 ふわっと出てくるメニュー See the Pen シンプル全画面 by webpaisen (@webpaisen) on CodePen. 上から出てくるメニュー See the Pen シンプル
レスポンシブでハンバーガーメニューになる固定サイドバー
Posted: 2017.09.21 / Category: HTML&CSS, javascript / Tag: jQuery 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span
See-SS
' sandbox="allow-same-origin" class="iframe__style--small-card" data-v-2fcdfb78> シンプルなフラットボタン
jquery.bxslider.jsを使ったサンプルいろいろ
jquery.bxslider.jsの設定方法を色々と試してみます。 基本的な使い方は、以前書いた記事「jquery.bxslider.jsの使い方やオプションなどのまとめ」をご確認ください。 特にオプション設定をしない場合 HTML <ul id="sample"> <li><img src="img/img01.jpg" /></li> <li><img src="img/img02.jpg" /></li> <li><img src="img/img03.jpg" /></li> <li><img src="img/img04.jpg" /></li> <li><img src="img/img05.jpg" /></li> </ul> JavaScript $(function() { $('#sample').bxSlider(); }); 特にオプション設定をしない場合のデモペ
CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選
コンテンツに注目を集めたいときに便利な、HTML/CSSを中心にデザインした最新ボタンエフェクト用スニペットをまとめてご紹介します。 すこし前までは実現が難しかったエフェクトも、CSS3をつかったテクニックを利用することでより手軽に実現できるようになっています。世界中のデザイナーが作成したボタンデザインを確認しながら、マイクロインタラクションなど最先端のデザイントレンドを、プロジェクトに取り入れてみてはいかがでしょう。 詳細は以下から。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックし、別ウィンドウを開きま
レイアウト・パーツで使える | Web制作者のためのSassの教科書 - 公式サポートサイト
一覧に戻る « 前 次 » 第5章 現場で使える実践Sassコーディング 5-3 レイアウト・パーツで使える clearfix を @extend で活用する $supportIE: true; // IE非対応の場合 false .clearfix { @if $supportIE { *zoom: 1; } &:after { content: ""; display: table; clear: both; } } .item { @extend .clearfix; background: #eee; .image { float: left; height: 100px; } .text { float: left; } } .clearfix, .item { *zoom: 1; } .clearfix:after, .item:after { content: ""; dis
プラグイン不要！多階層のモバイル向けドロップダウンメニューを作ってみた！| CSS・jQuery | WebLamps
こんにちは、Aroeです！ 「よし、新しいWebサイトを作ろう」と思って、朝からいろんなテーマ(最近はもっぱらWordpressばっかり使ってる)を探し始めて、気がついた時にはもう日が暮れてるってことがよくあるこの頃です。 最近はいっぱいあるんですよねぇ、テーマの種類が。観てるだけでワクワクします。(笑) そんなテーマ選びの中で、僕が最初に見てしまうのが「ナビゲーションメニュー」（グローバルメニュー）です。トップページや個別記事ページ、ほとんどどのページでも共通して表示される箇所ですからね〜、力を入れて作り込みたいところ。（時間があれば） モバイル対応でいい感じのドロップダウンが見つからない メニュー系のプラグインって、けっこう多種多様なのですが、PC表示の場合はよくても、モバイル表示時のデザインや挙動が「うーん・・・」って感じで納得のいかないものが多かったり、片手間なカスタマイズだとスタ
【ハンバーガーメニュー＆トグルニュー】クリックすると表示されるグローバルナビの実装方法
ハンバーガーメニューの実装方法 それでは実装方法を解説していきます。 HTML <header class="header"> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="">メニュー1</a></li> <li class="global-nav__item"><a href="">メニュー2</a></li> <li class="global-nav__item"><a href="">メニュー3</a></li> <li class="global-nav__item"><a href="">メニュー4</a></li> <li class="global-nav__item"><a href="">メニュー5</a></li> </ul>
【CSS】三角アイコンと矢印アイコンをつくる | 125naroom / デザインするところ（会社）です。
.arrow_s { position: relative; display: inline-block; padding-left: 12px; color: #333; text-decoration: none; } .arrow_s:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #333; position: absolute; top: 50%; left: 0; margin-top: -6px; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック | SPYWEB
https://3owebcreate.com/web/wordpress/wp_pager_css