高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
IEやEdgeにもobject-fitを対応させる方法
以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。 そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。 そこで問題になるのがInternet Explorer（以下IE）とEdgeです。 object-fit-imagesを使用して対応する 先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。 まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。 HTML まずはjQueryの呼び出しの後に、ライブラリを呼び出します。 このライブラリは「dist」フォルダの中に格納されています。 <script
モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」 – bl6.jp
Simple HTML Menuは、モバイルにもピッタリなレスポンシブに対応したシンプルなメニューを実装することができます。PCでは水平メニューとして、モバイル版では垂直の開閉式メニューとして機能します。 以下、Simple HTML Menuの実際のデモページになります。 デモ デモでは画面上部の右側にメニューが水平に並んでいます（PCからの閲覧の場合）。レスポンシブにも対応しているので、ブラウザの幅を縮小していくとメニューがモバイル版に切り替わります。 モバイル版のメニューでは、ハンバーガーアイコンと「Menu」と書かれた文字のみが表示されます。ここをクリックすると、メニューが垂直にスライドダウンで開かれます。 メニューが開かれた状態になると、ハンバーガーアイコンが「×」のアイコンに変化します。再度この場所をクリックすると、今度はメニューがスライドアップで閉じられ、それと同時に「×」の
横長の表をスマホでうまく表示する方法 - 西沢直木のIT講座
ホームページに表を入れることもありますが、次のような横長の表になることもあります。PCでは普通に表示されるので違和感はないかもしれませんが、問題はスマホ表示です。 よくある横長の表（PCでは問題ない） 参考までに、使用したHTMLは次のとおりです。 <table id="table01"> <tbody> <tr> <th>コース名</th> <th>開催日</th> <th>時間</th> <th>基本料金</th> <th>担当講師</th> <th>教室</th> </tr> <tr> <td>ホームページ作成講座</td> <td>月曜日～金曜日</td> <td>3時間</td> <td>6,000円</td> <td>西沢直木</td> <td>新宿</td> </tr> <tr> <td>SEO講座</td> <td>土曜日・日曜日</td> <td>1時間</td> <td
知らなきゃ損！パソコン上でホームページのモバイルでの見え方を爆速でチェックする方法
2015年4月に実施された、モバイルフレンドリーアップデート。 Googleは、2016年5月に再度モバイルフレンドリーアップデートの影響力を高めるアルゴリズムの更新があるとアナウンスしています。 Continuing to make the web more mobile friendly｜Official Google Webmaster Central Blog このアップデートにより、モバイルでも見やすいページが検索結果でさらに多く表示されるようになります。 モバイルフレンドリーなホームページには特に影響は出ないものの、モバイル対応していないホームページはGoogleの検索結果で順位が下がってしまうおそれがあります。 今回は、パソコンで見ているホームページがモバイル対応しているかどうか、一瞬で分かる方法をご紹介します。 モバイルフレンドリーかを確認するためにその都度URLを転送する
画像や動画をLightboxのように実装できる「JK Responsive Youtube Video and Image Gallery」 – bl6.jp
JK Responsive Youtube Video and Image Galleryは画像や動画をLightboxのように実装することができます。レスポンシブ対応なので、さまざまなデバイスから最適なサイズで見れるのがいいですね。 そのほか、キャプションを表示したりキーボードやスワイプ操作にも対応しています。 JK Responsive Youtube Video and Image Galleryのダウンロードや使い方の詳細は以下になります。実際のデモも用意されています。 JK Responsive Youtube Video and Image Gallery 画像や動画を単品で表示させれることはもちろん、複数のアイテムをグループにして表示させることも可能です。また、キーボードやスワイプでの前後移動にも対応しているので、PCやスマホでの操作性にも優れています。 画像や動画のサムネイ
デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） - Design Color
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
レスポンシブWEBデザイン用ナビゲーション＆メニューのベストパターン16 | co-jin
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブWEBデザインに関連するさまざまなパーツが類型化・体系化されてきています。 今回ご紹介するナビゲーション＆メニューについても、ある程度、メジャーなパターンというものが出来上がってきています。 そこで今回は、レスポンシブWEBデザインのナビゲーション＆メニューのベストパターンをご紹介します。 多くのものはjQueryを使って簡単にだれでも実装できるものばかりです。 SlickNav ウインドウ幅が指定サイズ以下になると、メニューアイコンに変化して右上に表示されるタイプです。 多階層にも対応していていたり、アニメーションで動きもつけられます。 ie7以上に対応。 詳しい実装方法がサイトにのっているのでわかりやすいです。 SlickNav FlexNav 指定サイズ以下になると、メニューバーのみが表示
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
[jQuery]簡単に設置できるレスポンシブ対応のナビゲーションメニューjQueryプラグイン – Naver | STUDIO BENKEI
最近注文が増えてきたレスポンシブ対応。 ナビゲーションをどう対応するかよく迷います…。 そんなレスポンシブ用ナビゲーションメニューの選択肢の一つとして、簡単に実装できるNaverの紹介です。 ■必要ファイル jQuery Naver – GitHub ■サンプル ウインドウを縮めるとメニューが閉じられます。 今回のサンプルで使用しているナビゲーションのHTMLです。 html <nav id="navre"> <a href="#">home</a> <a href="#">facebook</a> <a href="#">twitter</a> <a href="#">g+</a> <a href="#">rss</a> <a href="#">Contact</a> </nav> ナビゲーションメニューにスタイルを入れます。 メディアクエリを使って幅が740px以下の時にフロートを解除
レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」 – bl6.jp
Greedy Navigationはレスポンシブ対応でメニューのアイテム数がわかりやすいナビゲーションを実装できます。ハンバーガーアイコンに切り替わったときに、ブラウザサイズに連動して表示されるアイテム数も切り替わっていきます。 言葉では伝えづらいので、まずはデモをご覧ください。 デモ PCで表示させた場合、ブラウザサイズを縮小していくと、それに合わせてハンバーガーアイコンのところにアイテム数が表示されます。この数のぶんだけドロップダウンメニューに表示されます。 縮小すればするほどアイテム数が増えていきます。ドロップダウンメニューにどのくらいの項目が存在するのか瞬時にわかるのでとても便利ですね。 たくさんナビゲーションメニューがあるときなんかに活躍してくれそうです。 というわけで、ユーザーにも優しいレスポンシブ対応のナビゲーションメニューを実装したい方は、ぜひチェックされてみてはいかがでし
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね
画像のRetina対応に便利なツールやアプリ、ライブラリ色々 | バンクーバーのうぇぶ屋
相変わらずWEB屋にとっては面倒くさいRetina対応…。@2x、@3x、解像度に合わせて毎回画像を作るのも、正直面倒くさいですよね。個人的には何か根本から解決してくれるような仕組みや対策が出てこないかなと、相変わらず他力本願でお待ちしています。 とはいっても、現時点で出来る限りの対応はしなくてはならないので、今日は僕が知っている画像作成時のRetina対応を少し便利にするツールやアプリ（一部使い方？）等をご紹介させて頂ければと思います。 Retini @3xサイズの画像をドラックするだけで、@2x、通常サイズと一瞬でコンバートしてくれるシンプルなアプリケーション。こっちのWEBメディアの運営してる会社で働いてる人が教えてくれました。意外と知ってれば使えるタイミングがありそうなので共有。 Retinaize it ツールというわけじゃ無いかもですが、PhotoshopでRetina解像度の
レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」 – bl6.jp
jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグインです。サクサク動作して操作感も非常によく、モバイルフレンドリーなカルーセルを実装したい方には最適です。 以下はjCiderの実際のデモになります。 デモ 左右に設置された矢印と下部のナビゲーションからスライド切り替えさせることができます。 マークアップをはじめ、使い方がとてもシンプルなので実装しやすいのも嬉しいですね。 また、オプションも豊富に用意されており、looping、fading、easing、autoplay、slideDuration、controls、paginationなど、さまざまな設定が可能です。 カスタマイズして使いたい場合にもピッタリです。 といわけで、レスポンシブ対応のシンプルなカルーセルを実装した方は、ぜひチェックしてみてはいかがでしょうか。 jCider
進行中のデザインをクライアントも私もあれこれコメントつけあいながら確認できるサービス
クライアントさんに進行中のデザインを確認してもらうとき、どーしてます？ メールで画像を送る。確認してもらったあと、修正の要望をまたメールで返信してもらう。やっぱりこれが一番多いのかな。で、互いにうまく理解しあえない箇所は電話で詰めるという感じで。 本当は、クライアントさんもデザイナーさんも肩を並べて確認しあえたらベストなんですけどね。横で一緒にデザインを眺めながら、「ここをこういうふうに」「いやここはこういう意図があったもんで」なんて言い合いっこしながら進められれば、意思の疎通に苦しむことは、少なくなるでしょう。同じ箇所に対して、「ちょっとよくわかんないんだけど」とか、なんどもメールやメッセージのやりとりをすることからも解放されます。 でも、そんなに毎度顔を合わせた確認作業ができるわけなくて。クライアントさんも忙しいでしょう。もちろんボクも。そもそもネットと電話の回線だけで案件を進めるとい
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
webnonotes.com - webnonotes リソースおよび情報
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] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法
プラグインなどで実装した非レスポンシブなギャラリーでも、シンプルなものの場合は CSS やライブラリのコードに少し手を加えるだけでレスポンシブ対応にできることもあります。しかし、凝ったエフェクトのギャラリーをレスポンシブ対応にしたい場合、どこをどうしたらいいのかプラグインのコードを読むだけで大変です…。 少し力技になってしまいますが、凝ったエフェクトのギャラリーを jQuery を使って簡単にレスポンシブにする方法を思いついたので、記事にしてみました。 ヒントになったのは少し前に話題になったこちらの記事「これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング」 サンプルデモ だいぶ以前に Rhinoslider（シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider）というプラグインをご紹介しました
![[jQuery] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/1bc31d5328616d15d300228a5bd78f6f80142471/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2015%2F05%2FResponsive.jpg)
Webサイトを様々なデバイスに対応させる為の軽量なjQueryプラグイン・「Restive.JS」
Restive.JSはWebサイトを様々なデバイスに対応させるためのスクリプトです。デバイスを検出してbody要素にclassを加える、任意のサイズでブレークポイントを作成する、任意のDOM要素のみにclassを付与する等をシンプルなコードで出来るみたいですね。ライセンスはMITとの事です。 Restive.JS
【新人向け】簡単にできた！Webサイトでよくみる技術のまとめ
4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
