[B! CSS][webデザイン] kamomewa_kamomeのブックマーク

kamomewa_kamome id:kamomewa_kamome

CSSとwebデザインに関するkamomewa_kamomeのブックマーク (29)

CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツからお好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。掲載しているコードについて当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。また掲載している
kamomewa_kamome 2023/05/28
css

webデザイン

あとで読む
リンク
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ先日、ついにWii UとSplatoonをゲットしました。そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。また、来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
kamomewa_kamome 2016/03/01
CSS

jquery

Webデザイン
リンク
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
kamomewa_kamome 2015/10/05
CSS

Webデザイン
リンク
スマホ向けサイトで多階層メニューを実現する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><
kamomewa_kamome 2015/09/20
css

webデザイン
リンク
レスポンシブメニューを作成できる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
kamomewa_kamome 2015/09/19
webデザイン

css

jQuery
リンク
レスポンシブにも対応したドロップダウン 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="
kamomewa_kamome 2015/09/19
css

webデザイン
リンク
Drop-Down Navigation: Responsive and Touch-Friendly by Osvaldas Valutis
2013-04-02
kamomewa_kamome 2015/09/15
レスポンシブ css メニュー

css

webデザイン
リンク
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.
kamomewa_kamome 2015/09/15
CSS

webデザイン
リンク
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 it em 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">
kamomewa_kamome 2015/09/15
webデザイン

CSS
リンク
スマホサイト制作に役立つスライドメニュー【mmenu】使い方 jQueryプラグイン | Glow-Factory
今回は、スマホサイト制作時に役に立つスライドメニューを実装出来るjQueryプラグイン【mmenu】の使い方のご紹介です。どんなスライドメニューかといいますと、指定したメニューが左右からスライドして表示されるメニューを実装出来ます。 gmailのアプリをインストールされている方はピンと来るかもしれません。利用も簡単に実装出来ますし、オススメしたいポイントが指定したナビ要素を自動的にCSSでスタイルしてくれます。さらにメニューのサブメニューも自動でドロップダウンのようなスタイルも実装してくれます。また、指定のCSSを読み込みオプションを指定すればナビのスタイルのテーマも変更が可能となってます。上記の用にこちらのjQueryプラグインは、特定のCSSを読み込みオプションを指定すれば、エフェクトの追加やスタイルのテーマの追加が出来ます。デモサイトも下記にご用意しておりますので、ご参考
kamomewa_kamome 2015/05/17
CSS

webデザイン

スマートフォン
リンク
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.google apis.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
kamomewa_kamome 2015/04/27
javascript

CSS

webデザイン
リンク
簡単！ヘッダーナビ等、現在アクセス中のページリンクにマウスオン効果をかける方法 | 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
kamomewa_kamome 2015/04/27
CSS

jQuery

javascript

webデザイン
リンク
【Labs】jQueryでスムーズスクロール
a要素のhrefの最初の文字が「#」で始まる内部リンクをスムーズにスクロールさせます。 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。 <script src="https://ajax.google apis.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 = $(
kamomewa_kamome 2014/12/01
jquery

css

webデザイン
リンク
レスポンシブに対応した簡単メニュー – mororeco
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。サンプルを用意しましたのでまずは確認してみてください。ウィンドウサイズを小さくしてみたり広げてみたりすると、２列になり、メニュータブにと変化するようにしてあります。デモサンプルそれでは、作り方を見ていきましょう。 1.HTMLを記述 <nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="#">Navi1</a></li> <li><a href="#">Navi2</a></li> <li><a href="#">Navi3</a></li> <li><a href="
kamomewa_kamome 2014/11/14
レスポンシブ

CSS

Webデザイン
リンク
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。エンジニア速報は Twitter の@commteで配信しています。もくじ動き１．ジオメトリック背景２．フルスクリーンでスライドさせる３．ドロアー風ライトボックス４．動画を再生するタイプ３つスクロール５．スクロールでクロスフェード６．スクロールで奥行きを表現７．スクロールで分割画像８．APNG ９．Google 画像検索風ライトボックス１０．トイカメラ風のフィルターポップアップ１１．おしゃれなアラート１２．
kamomewa_kamome 2014/10/14
jquery

CSS

webデザイン
リンク
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
kamomewa_kamome 2014/02/22
CSS

webデザイン
リンク
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから約26年間、多くの方々に支えていただき、運営を続けてまいりました。転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、今後も、IT/Web業界やクリエイティブ
kamomewa_kamome 2014/01/20
Webデザイン

CSS
リンク
IEでもそこそこできる！CSSで作る画像のようなボタン
#button { width:320px; color:#e4eef8; background:#337fcc; font-size:28px; font-weight:bold; text-shadow:0 -1px 1px #143352; text-align:center; display:block; text-decoration:none; border:1px solid #225588; padding:12px 0 8px 0; border-radius:12px; background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5
kamomewa_kamome 2012/10/15
CSS

Webデザイン
リンク
[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。
集中連載「使える CSS テクニック」も第 9 回になりました。今回は CSS だけで画像ギャラリーを作ります。画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li> <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li> <li><a id="photo03" href="#slide"><em><i
kamomewa_kamome 2012/07/29
CSS

webデザイン
リンク
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォンスマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！スマートフォンサイト用小技集　目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせてCSSを変えるリンクテ
kamomewa_kamome 2012/07/27
webデザイン

css

スマートフォン
リンク
1 2 次のページ