[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ページングのユーザビリティを あげたいけど、オートタイプは 嫌だ、と言う方にオススメの jQueryプラグインがありました。 選択肢の一つに如何でしょう。 タブのような感覚でページ移動が出来ます。ページ数の多いサイトはユーザビリティとしても取り入れたいですね。
複数のJavaScriptファイルを簡単にマージできるオンラインサービス「JMerge」
ウェブサイトのパフォーマンスを向上させるテクニックの1つに、HTTPリクエスト数を減らす方法があります。 複数のJavaScriptファイルを1つにまとめるのもその1つですが、複数のファイルを1つにまとめる作業はちょっと面倒です。 が、本エントリーで紹介するオンラインサービス「JMerge」を利用すれば、ウェブサイトで利用している複数のJavaScriptファイルを簡単にマージすることができます。 JMerge ページ内にマージしたくないJavaScriptファイルがある場合も、簡単に除外できます。 使い方 フォームの「URL:」に、ウェブサイトのURLを入力して「Continue」をクリック。 ウェブサイトで使われているJavaScriptファイルを上から順番に検索し、一覧として表示します。ここに表示されているファイルがマージ候補になります。 表示されたURLをクリックすれば、マージした
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
ダイアログボックスを美しくみせる「jQuery Alert Dialogs」を使ってみる
どうしてもOSに依存してしまうアラートボックスやダイアログボックス。しかし、それをきれいに見せてくれる「jQuery Alert Dialogs」というのがある。仕事で、ダイアログボックスを変えたいとの要望があったようで、これを使ってみることにしたので、メモ代わりにエントリー。 基本的な使い方 基本的にカスタマイズ無しで使う場合は以下のように設定をして利用する。 ■JSを読み込む <link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.ui.draggable.js"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/
jQuery Nivo Slider サンプル ::: Webデザインレシピ
http://solidstate.jp/ContentsDisplay/floatingBox/script_60.html
Downloads | CSS-Tricks