jQueryでアコーディオンメニューを作る | Hack
表示サンプルはこちら http://jsdo.it/goto_jp/xBHt 以前CSSだけで動くものを紹介しましたが、古いブラウザ対応ならjQueryを使った方が安定することも多く、AndroidだとCSS3のアニメーションが固くJavaScriptで動作させた方がスムーズなケースもあるため紹介します。 HTML <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="accordion"> <ul> <li> <span class="toggle">子項目ありメニュー</span> <ul> <li><a href="#">子項目</a></li> <li><a href="#">子項目</a></li> <li><a href="#">子項目</a
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
画像圧縮サイト／TinyPNG
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
『CSSだけで文字列を省略して「・・・」を付けて表示する方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ javascriptやphpを使わずに CSSだけで文字列を省略して「・・・」を付けて表示 させるテクニックを発見 前からできる感じだったが、つい最近知りました。 FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 どうやるかというと text-overflow: ellipsis; を使う。 ellipsis は、はみ出した部分の最後に「・・・」を付け足す。 ちなみに clip は、何もつけません。 text-overflow: ellipsis; だけだと上手くいかないので やり方としては、 横幅(width)、w
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS 棒グラフ | Shinta's Site
グラフ幅を % 指定できる棒グラフを CSS作ってみます。 divタグでグラフの表示領域、spanタグで棒グラフを指定 <div class="graph"> <span class="bar" style="width: 36%;">36%</span> </div> グラフの表示領域に対してスタイルを設定 .graph { position: relative; /* IE is dumb */ width: 300px; border: 1px solid #207870; padding: 2px; } 棒グラフに対してスタイルを設定 .graph .bar { display: block; position: relative; background: #409890; text-align: center; color: #f0ffff; height: 2em; line-
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
digitalskill.jp
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
jQueryでロールオーバーのスクリプトを組んでみた - Wataame Frog
ちょっと仕事の状況が落ち着いたので、以前より興味のあったjQueryを真面目にやってみようということで、色々と試しておりました。 で、まずは「何か使えるものを作ってみよう」ということで、マウスオーバーしたら画像が入れ替わるスクリプトを組んでみました。 最終的に作りたかったのは、マウスオーバーで画像を切り替える際にパラパラさせるのではなく、フェードイン、フェードアウトをしながらふんわり変化するスクリプト。通称、ふんわりロールオーバー。 そこに行きつくために経た段階通りに記事を書いてみましたので、「jQueryなんてよくわからないよ！」なんて方もひと通り読んでみれば少しは理解できるかもです。 toogie自身も javascript は苦手でしたが、徐々にですが理解できてきています。眺めるだけでなく書くことは大切ですね、やはり。 あとは慣れ。 習うより慣れろとはよく言ったものですね･･･。 <
マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかも | 日刊ウェブログ式
jQueryとCSSで、ボタンがゆっくりと切り替わるチュートリアルです。とても簡単にできる上に、実用面での使い勝手も良いかもしれません。 まずは、こちらのデモをご覧ください Demo マウスオーバーでゆっくり画像が切り替わるのがお分かり頂けると思います。jQueryでシンプルに動かしています。 使用するには、以下のサイトからスクリプトやコードをダウンロードしてください。 Link もうそこにやり方が書いてありますが、一応チュートリアルです。 既存のブログなどに使用する場合は、 以下のコードを「head」内に書き込みます。 <link href="style.css" rel="stylesheet" type="text/css" /> CSSに以下の記述を追加 .button2{ background:url("images/download.png") 0 -45px; height:
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
スマホで同じ幅3つのボックスをビューポートいっぱいに並列させたい
え、なんのことやらと思うようなエントリータイトルですが、以下のスクリーンショットのような状態を作りたいときです。 ちなみにviewportの指定は「<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />」の、ピンチイン殺してるやつです。 左から青赤黄色のボーダーがビューポート幅にあわせて同じ幅でぴっちりとおさまっています。 IE6脳でコーディングしてしまうとfloatで横並びにしてそれぞれの幅に「33%」「34%」「33%」を指定しておこうかとか考えがちですが、これだと右隅に余白ができてしまいます。 HTMLとCSSは以下となります。 <ul> <li><a href="#">あ</a></li> <li><a href="#"
html5mediaでIE6,7,8でもHTML5で動画再生 – CamCam
これまでPCサイトでの動画再生といえばFLVが主流。 がしかし、iPhone iPadではFlash非対応で再生できない。ジョブズも時代はHTML5だと頑なにFlashを拒否してたのは周知の通り。 そんなこんなで時代の流れは脱Flashへと向かう中、アタクシ自身もかなり以前からFlash嫌いだったこともあって、Webでの動画再生はHTML5でやりたい。 そうなると次なる問題は、Flash以上にいかんともしがたい IE6,7,8 HTML5をまったく理解しないアホブラウザどもだ。 IEを抹殺しない限り地球に平和は訪れないとすら思える。 しかし時代はあっさりこの問題もクリアしてしまった。 html5media HTML5 video and audio tags in all major browsers これで、IE6-8でも問題なくHTML5のvideoタグを使って動画を再生できる。 ダウ
プラグイン不要！たった数行でdiv要素にｊQueryLightBoxを実装する
プラグイン不要！たった数行でdiv要素にjQueryLightBoxを実装する 久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ！ DEMO jQuery あらかじめhead内にjQueryの読み込みだけはして下さいね。 $(document).ready(function(){ //show-panelボタンをクリックしたらLightBoxを表示する $("a#show-panel").click(function(){ $("#BlackWindow, #lightbox-panel").fadeIn(300);/*表示速度は数値を調整*/ }) //CloseボタンをクリックしたらLightBoxを閉じる $("a#close-panel
IE6/IE7/IE8/IE9/IE10/&モダンブラウザ CSSハックまとめ｜ホームページ制作 印刷物作成 デザイン事務所｜エイビッツ
〒360-0854 埼玉県熊谷市 玉井南1丁目 TEL：048-594-8880 （平日10:00～18:00 土日祝祭休） E-Mail info@aveit.biz 2013/10/24 以前にもIE6～9とモダンブラウザによるCSSハックの記事を書きましたが、単体で使う分にはハックが効いても、同時に数種類ハックをかけると機能しない場合がありました。 通常、ハックを使うコーディングは極力避けているのですが、あるASPカート内である一か所に必要に迫られて1px単位のしゅうせいが必要だった案件で出くわした摩訶不思議な体験をメモしておきます。 尚、IE9/IE10に関しては実機、IE6～8に関してはIETesterでの検証となっています。 Macでの検証はしておりません。 以前のコラム↓↓↓ IE6/IE7/IE8/IE9 CSSハックまとめ → モダンブラウザ CSSハックまとめ → IE
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
参考になるWEBサイトデザイン集｜デザネタ
クリックアクション スキンケア事業サイト カッコイイ/シンプル/フラットデザイン/ ［カラフル：多色 ］ 535 views more...
コメント欄を設置したった（Facebookコメントプラグインの使い方） - mmiyajix
Facebookのコメントプラグインを設置したのでメモ。 最近はブログなんかでも、コメント欄を自前で用意せずに外部のTwitterやFacebookなどのサービスを活用しているのをちらほら見かけます。今回はその流れにのってみようかと思います。 まあ下記アドレスからコードを生成するだけなんですが。http://developers.facebook.com/docs/reference/plugins/comments/ このコード中の fb:comments タグの href 要素に埋め込みたい先（どのページに対してのコメントなのか）のURLを指定する必要があります。自動でカレントページを指定してくれるわけではないので、こちらで指定しなければいけないんですが、HTML生成の段階でいちいち指定するなんてそんなの面倒ことするわけないですよね？ javascriptで適当に書き換えましょう。まず
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
表示はしたくないけどSelectタグの機能(ドラムロール)を使いたい場合 - Nobody is perfect.
Androidのことも踏まえ追記しました 例えばiPhoneなどで独自Selectorを作りたい場合があると思います。 そういうときどうしたらいいかを考えてみました。 フォーカスを当てるには以下の条件をクリアする必要があります。 表示されている状態(display:"")であること なおかつユーザーのイベントにフックしなければいけない ex. clickイベント ここから追記 どうも上記方法ではAndroidでは対応できない。 大変困った…が hiroki先生に「透明にしてみればいいじゃん」と言われたのでやってみた。 できた！ うまくしたのボタン的な要素の上に来るようにCSSを頑張れば怖い物無しになりそうだ。
備忘一覧
クロスブラウザのためのHTML/CSSのテクニック集 フッターの背景をコンテンツが少ない時でも下まで表示させる 『CSSバグ辞典スレッド』の要約の要約 borderの値を、solidとdottedを同時に指定すると、dashedになる [CSS]いろいろな問題を解決する1行のスタイルシート集 floatした際に背景が消える件(IE編) Web制作:カテゴリー記事一覧 br要素に「display:block;」!? 変える必要のない設定、指定する意味のない設定はおこなう必要はありません。 余計な設定をおこなうことで、トラブルを招く危険性があります。 例えば、インライン要素をデフォルトで「display:block;」にする必要性はありません。 「display:block;」にする必要性がある部分のみ「display:block;」にするのが本来の指定方法といえるでしょう。 また、ブロック要
IE7でpage-break-beforeが効かない : 開発メモ
2009年09月02日 Permalink Comments(1) TrackBack(0) Windows IE7でpage-break-beforeが効かない IE6では改ページされるのに、IE7でpage-break-beforを指定しているのに改ページされないときがある。 いろいろ試した結果、page-break-beforeを指定しているブロックがページをまたいでいるときに改ページされないようである。 改ページできるパターン（ブロックＢにpage-break-before） 改ページ処理前 改ページ結果 ┏━━━━━┓┏━━━━━┓ ┃┌Ａ─┐ ┃┃┌Ａ─┐ ┃ ┃└──┘ ┃┃└──┘ ┃ ┃┌Ｂ─┐ ┃┃ ┃ ┃└──┘ ┃┃ ┃ ┗━━━━━┛┗━━━━━┛ ┏━━━━━┓ ┃┌Ｂ─┐ ┃ ┃└──┘ ┃ ┃ ┃ ┃ ┃ ┗━━━━━┛ 改ペ
fancyBox
Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea
fadeIn / fadeOut するコンテントスライダーを自作する | DriftwoodJP
div スライダーともいうよう。 プラグインを使ったところ、ぶつかるところがありました。 bxSlider: レスポンシブコンテントスライダー | deadwood利用したい機能が限られていたので、チュートリアル見ながら自作した方が良いかもと探して、こちらで勉強しました。 jQueryで自作する時の考え方：スライドショーの作り方ソースHTML でスライド用の画像を並べておき、div で囲んでおく。 <div id="slideshow" class="slideshow"> <p class="boxes box1"><img src="/img/photo-01.jpg" alt="photo 1"></p> <p class="boxes"><img src="/img/photo-02.png" alt="photo 2"></p> <p class="boxes"><img src
| サイドメニューが下まで行ったらそこで固定するJS（jQuery）神戸ホームページ制作センター
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
jQuery – メニューをスクロールに付随させてみる | 1：n – DETELU Blog
最近国内のサイトでもちょくちょく目にするようになった「スクロールに付随するメニュー（「ユニクロ 特集／+J FINAL COLLECTION | MEN – ユニクロオンラインストア[store.uniqlo.com]」のページの少し下の方にあるメニュー一覧のような動きになるもの 2011年12月2日時点）」を実装してみます。 この実装はすごく簡単で、スクロール位置と固定する要素の位置を比べ、スタイルを書き換えるだけです。 jQuery メニューをスクロールに付随させてみるサンプル（headerFixedBoxを固定） jQuery メニューをスクロールに付随させてみるサンプル（asideFixedBoxを固定） サイドバーに固定要素を置く場合は、フッターにかぶってしまうことがあると思うので、それを回避するように条件を加えてみました。 $(function(){ floatBox("#he
【jQuery】ヘッダーを最上部に固定！｜合同会社チームサンタ
先日USJでハリーポッターのアトラクションがオープンしましたねぇ 私も早く行きたくてフォイフォイしてます。 さて、最近時間を見つけては使いそうなjQueryを集めていましたが、 今回はそんな中から割と使うことの多い「headerを上部に固定」するjQueryをご紹介。 常にheaderを表示させておきたい！ 縦に長いページの場合、画面がスクロールしてしまうとheader部分が隠れてしまい スクロールバーや「TOPへ戻る」のボタンで一度一番上まで戻る・・・なんて事が あるかと思います。（まぁ大体footerにもメニューがありますが） そんな時、常に最上部にheaderがあればサクッとページ遷移できますね。 サンプルソース ってことで、まずはjQuery部分から。 あらかじめjQuery本体は読み込ませておいてください。 <script src="//ajax.googleapis.com/a
スクロールしても固定表示されるヘッダーを実装する | FSFIELD Labs
JavaScript スクロールしても固定表示されるヘッダーを実装する グローバルナビなどが配置されているヘッダ部分を、スクロールしても固定表示されるようにする方法を紹介します。jQueryを使います。 最近増えてきた表現ですね。ナビゲーション部分が常に表示できるようになるので便利ですが、常に表示されるということはその分コンテンツ部分が狭くなるというわけで、デザインする際はその点を計算する必要がありそうです。 スマホでやると挙動がうっとうしかったので、やらないか、更なる改良が必要と感じました。 格納するファイル jquery.js 記述の仕方 HTMLの記述 <div id="navigation"> <ul> <li><a href="/">お知らせ</a></li> <li><a href="/">会社案内</a></li> <li><a href="/">Web開発室</a></
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
フルスクリーンでコンテンツをスクロール遷移する「fullPage.js」
フルスクリーン画面でスクロールによるコンテンツ遷移と併せて、横にスライドする形式を実装できる「fullPage.js」をご紹介します。 まずは、サンプルをご確認ください。 DEMO それでは見ていきましょう。 1.ファイル一式をダウンロード 「fullPage.js」のサイトにアクセスしてファイル一式をダウンロードします。 fullPage.js: Create Beautiful Fullscreen Scrolling Websites ダウンロードファイルの中には、下図のようなファイルが入っています。 その中で、実際に利用するのは以下の4つになります。 jquery.fullPage.css jquery.easings.min.js jquery.slimscroll.min.js jquery.fullPage.js 2.jQuery本体とファイルを読み込む JavaScript
3D効果のあるフォトギャラリーを実現するAngularJS
Part1-1 どちらも今ことにこの圧迫学においてののためを尽さたない。 どうしても今を説明痛ははたしてそうしたお話でたくらいをもっがいるたらでも内談ありですなて、どうにはありうななかっなら。 Part1-2 どちらも今ことにこの圧迫学においてののためを尽さたない。 どうしても今を説明痛ははたしてそうしたお話でたくらいをもっがいるたらでも内談ありですなて、どうにはありうななかっなら。
jqueryで作るスライドするプルアップメニュー（プルダウンメニュー）
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき ただスライドするだけのプルアップメニューが欲しかったんだけど、 人様が公開してる様な高機能なjsを使うのもな～って事で、 プログラム6行でできるプルアップ（まぁプルダウンでもいいんだけどｗ）メニュー まぁ6行っていってもjquery使ってるんだけどね。 あっ、解説なんかイランからとっととサンプル見せろ！って人は DEMO ↑どうぞ。 6行でできるスライドするプルアップメニュー（プルダウンメニュー）のコード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric
jQuery ドロップダウンメニュー | 私的雑録
$(function () { $('span').click(function() { if ($(this).attr('class') == 'selected') { // メニュー非表示 $(this).removeClass('selected').next('ul').slideUp('fast'); } else { // 表示しているメニューを閉じる $('span').removeClass('selected'); $('ul').hide(); // メニュー表示 $(this).addClass('selected').next('ul').slideDown('fast'); } }); // マウスカーソルがメニュー上/メニュー外 $('span,ul').hover(function(){ over_flg = true; }, function(){ ov
レスポンシブのブレイクポイントを設定する前に知っておくべきこと
Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営ができると思います。 そこで、レスポンシブウェブデザインで最初にブレイクポイントを決めるのは矛盾していますよね。 モバイルファーストで考えて、大画面ブラウザに見やすいポイントを設定する方法が一般的です。 とは言っても、世の中の増え続ける大画面スマホやタブレットの主流を押さえておくことは重要です。 では設計を行う前に将来性を考えて指定すべきブレイクポイントを考えてみます。
無料で使えるHTMLメールのテンプレート いろいろ！ - 酒と泪とRubyとRailsと
無料のHTMLメールのテンプレートを探してみたところ、いろいろ見つかったので忘備録で書いておきます。今風のレスポンシブなデザインやスマホ、タブレットに対応したHTMLテンプレートもありました！ 03/24 『Antwort | Responsive Layouts for Email』を追加 100種類以上のデザインの素敵なメールテンプレート 100種類以上のカッコいいデザインのテンプレートが揃っています。正直言ってここだけでもお腹いっぱいになりそうです＾＾ このサイトはテンプレートの配布以外にも、ブラウザからメールテンプレートを制作することが出来るツールが無料で使えます。 ZURB レスポンシブなテンプレート Maka-Veli .comさんのサイトで紹介されていたZURBのレスポンシブデザインの5種類のテンプレートです。レスポンシブのメールを作る時のベースにもってこいです！ Antw
レスポンシブ対応のHTMLメール用のシンプルなテンプレート（テキスト形式にも対応）
Responsive HTML Email Templateの使い方 使い方は簡単です。 「email.html」を使って、HTMLメールを作成します。 作成が完了したら、CSSをインラインにします。 これで、完了です。 CSSをインラインにする時は、下記のツールが便利です。 HTMLメール用のコードの完成 コードの下には、テキスト形式のメールでの表示も確認できます。 見出しの天地に罫線が自動で入るんですね、面白い！ Responsive HTML Email Template HTMLメールのベースとなるテンプレートです。 ※使用する際は、CSSをインラインにします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
HTMLメールの表示確認サービス「Litmus」を使ってみた | シナジーマーケティング公式ブログ
Litmusは、さまざまなメールクライアント（メーラー、Webメール）とデバイスでHTMLメールの表示確認ができるオンラインサービスです。HTMLメールは、ユーザーの表示環境が多岐に渡るため表示確認がとても大変！「PCなのか、携帯なのか」「メーラーなのか、Webメールなのか」「OutlookなのかThunderbirdなのか」「MacなのかWindowsなのか」…と、その表示環境の多様さは制作者を悩ませる種となっています。 そこで役に立つのが、一度にHTMLメールの表示を確認できるツール「Litmus」です。Litmusのサイトには大手メール配信サービス「MailChimp」やクーポン共同購入サイト「GROUPON」からも信用されています、と書いてありますが、実際の使い勝手はどうでしょうか？簡単に使い方をまとめてみました。 1. テスト用メールアドレスにHTMLメールを送信 ログインすると
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。
$(function(){ $('#slider1').bxSlider({ auto:true, speed:1000, pause:500 }); }); <div id="slider1"> <div><img src="images/new1.jpg"></div> <div><img src="images/new2.jpg"></div> <div><img src="images/new3.jpg"></div> </div> $(function(){ $('#slider2').bxSlider({ auto:true, speed:1000, mode: 'fade', captions: true }); }); <div id="slider2"> <div><img src="images/new1.jpg" title="captions"></div> <di
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
いいかおまえら。スマートフォンWeb制作する前に読んどけよ。 - ドブログ[Do-Blog]
finefinefine.jp
公海555000kk线路检测—首页（欢迎您）
http://www.hp-stylelink.com/news/2013/09/20130918.php
覚えておいて損はない、CSSのみで画像を円形や三角形に切り抜く方法
emiac-works.com