CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
スマホ向けサイトで多階層メニューを実現するjQuery slimMenu ｜ フリーフードファイター兼SE社長活動日記 | 株式会社ジーティーアイ
スマホ向けというよりレスポンシブな感じ。 多階層メニューってこんなに多階層！！！ で、これが画面横サイズ縮めていくと・・・・ こうなっちゃう！ あー、これいいですね！ こういうのって日本語メニューになっていないとイマイチイメージが湧いてこないので、日本語サンプル作ってみました。 ↓ jQuery slimeMenu 日本語でメニュー作ったサンプル んー、文字数によってメニュー幅違ってカタカタしちゃう感じがある。 このあたりはCSSで調整が必要っぽい。 で、この多階層メニューを実現している部分のソースです。 <ul class="slimmenu"> <li> <a href="#">ホーム</a> </li> <li> <a href="#">プロジェクト</a> <ul> <li> <a href="#">大婚活PJ</a> <ul> <li><a href="#">お嫁サンバ</a><
レスポンシブメニューを作成できるjQueryプラグイン｢MeanMenu｣
サイトをPC・タブレット・スマートフォンなどの端末に対応するためにナビゲーションメニューをレスポンシブ対応しました。その時採用したjQueryプラグイン｢MeanMenu｣をご紹介します。 必要なファイルと詳細はコチラ 下記リンク先からJavaScriptファイルやその他ファイルをダウンロードして下さい。 MeanMenu MeanMenuのデモサイトはコチラ ダウンロードファイルの使用方法 ナビゲーションメニューの表示に必要なコードは非常にシンプルです。 header <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>MeanMe
レスポンシブにも対応したドロップダウン FlexNav
「FlexNav」は、クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト（入れ子構造）のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
FlexNav – Jason Weaver
A jQuery plugin for responsive menus FlexNav 1.3.3 jQuery plugin is no longer supported. I have plans to make a non-jQuery version 2 soon.
Horizontal Drop-Down Menu | Codrops
A responsive horizontal drop-down menu inspired by the Microsoft.com menu. This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens. The HTML <nav id="cbp-hrmenu" class="cbp-hrmenu"> <ul> <li> <a href="#">Products</a> <div class="cbp-hrsub">
スマホサイト制作に役立つ スライドメニュー 【mmenu】使い方 jQueryプラグイン | Glow-Factory
今回は、スマホサイト制作時に役に立つスライドメニューを実装出来るjQueryプラグイン【mmenu】の使い方のご紹介です。 どんなスライドメニューかといいますと、指定したメニューが左右からスライドして表示されるメニューを実装出来ます。 gmailのアプリをインストールされている方はピンと来るかもしれません。 利用も簡単に実装出来ますし、オススメしたいポイントが指定したナビ要素を自動的にCSSでスタイルしてくれます。 さらにメニューのサブメニューも自動でドロップダウンのようなスタイルも実装してくれます。 また、指定のCSSを読み込みオプションを指定すればナビのスタイルのテーマも変更が可能となってます。 上記の用にこちらのjQueryプラグインは、特定のCSSを読み込みオプションを指定すれば、エフェクトの追加やスタイルのテーマの追加が出来ます。 デモサイトも下記にご用意しておりますので、ご参考
jqueryで現在地（カレント）にclassを指定します。 - CodingMania
現在地にclassをつけるので、CSSで現在地表示ができます。 ヘッダーで、jquery.jsと後述のcurrent.jsを読み込んでいます。 単純にbodyタグに指定したidとナビゲーションのclass名が同じならclassにcurrentを追加します。 IDの場所は変更できます。 これでDWのテンプレにも使えます。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/current.js"></script> [current.js]JavaScript // Globalnav cur
簡単！ヘッダーナビ等、現在アクセス中のページリンクにマウスオン効果をかける方法 | Stronghold Archive
どうもこんばんは。今回のtipsは【ヘッダーナビ等、現在アクセス中のページリンクをマウスオン状態にする方法】に関してです。かなり簡単に実装できますのでお試しいただければ幸いです。（2013年10月1日更新：jQueryで少し短めにしました) 絶対パスでの指定 コードもシンプルです。リンク内のURLと現在アクセス中のページのURLが一致したいる場合のみ【ON】というクラスを追加しています。リンクのつなげ方によって記述も変わってきますので、絶対パスでのハイライト方法と2種類のJSを用意しています。 CSS #menu a{color: #777} #menu a.on{color: #000} HTML <ul id="menu" class="cf"> <li><a href="http://abc.com/index.html">home</a></li> <li><a href="htt
【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
GoogleMapはほとんどのサイトに設置してあって、スマートフォンからでも簡単に見れて分かりやすい。 埋め込みはiframeを使うのでレスポンシブに適用させるためにはレスポンシブ用のCSSが必要です。 新しいGoogleMapを埋め込んでみよう！ トップページにいって、表示したい住所を打ち込み、右下の「地図を共有/埋め込む」をクリック 「地図を埋め込む」のタブをクリックして、iframeコードをコピーしてサイトの表示したい場所に埋め込むだけ GoogleMapをレスポンシブサイトに対応させてみよう！ まずdivでiframeを囲みます。 HTML <div class="ggmap">iframeのコピーしたコード</div> CSS .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; heigh
「float」で親要素の高さがなくなってしまったときは親要素に「float」【CSS】
#wrapper { margin: auto; width: 800px; background-color: gray; } #main { background-color: yellow; } #nav { float: left; width: 250px; height: 300px; background-color: pink; } #cont { float: right; width: 550px; height: 500px; background-color: skyblue; } #footer { clear: both; } □ デザイン ここで実は反映されていない色（ボックス）があるのに気づくと思います。 それぞれfloatで左右に振ったnavとcontentを囲んだmainです。 ここに、バックグランドとしてyellowを設定していますが、これが出てきてい
レスポンシブWebデザインでブラウザの幅を狭めた時にメニューをアコーディオンにする方法
ブラウザサイズによってナビゲーションを変えいたい レスポンシブWebデザインはブラウザの幅によってレイアウトを変更できます。 その時にメインナビゲーションも押しやすい様に変更しますが、縦にズラーっと並んでしまうとスクロールする時にコンテンツにたどり着くまでに無駄に長くなってしまいます。 ブラウザサイズによってナビゲーションがアコーディオンの様に収まりがよくなると使いやすいかと思います。
【Labs】jQueryでスムーズスクロール
a要素のhrefの最初の文字が「#」で始まる内部リンクをスムーズにスクロールさせます。 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> HTML <a href="#hoge">Go to hoge</a><!--リンク元--> <div id="hoge">hoge</div><!--リンク先--> JavaScript $(function() { //移動するスクリプト $('a[href^="#"]').click(function() { var href= $(this).attr('href'); var target = $(
iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Drop-Down Navigation: Responsive and Touch-Friendly by Osvaldas Valutis
atomfile.cgi - Google 検索