Web Design Leaves

レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。 HTML の構造は以下のようなもの。 CSS は以下のようなもの（関連部分抜粋） #header の幅は 100% に指定してあるのに、いくつかのページのみスマホのサイズでヘッダーの右側に余白ができる。よく見るとヘッダー部分のみではなく全体に余白ができてい…

続きを読む

画像ファイルを前もって読み込んでおくプリロードに関する個人的なメモ。 ロールオーバーなどにより画像を表示する場合、切り替える画像のロードに時間がかかり、画像がちらつくことがあるので、それらの画像ファイルを前もって読み込んでおく方法。 目次 基本的な構文 jQuery で前もって読み込んでおく画像ファイルを以下のように記述するだけ。 または、 これにより画像が…

続きを読む

ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれる jQuery プラグイン Masonry の使い方や設定に関する個人的なメモ。 Lazy Load や Magnific Popup も一緒に使ってみた。 ★ CSS Grid + JavaScript で Masonry レイアウト も御覧ください（こちらの方が新しい情報です）。 この時点での…

続きを読む

スクロールに応じて、画像データを遅延読込する jQuery プラグイン Lazy Load の設定と使い方に関する個人的なメモ。 Lazy Load プラグイン ページに含まれる画像のデータの読み込みを遅らせる（後から読み込ませる）ことにより、ロード時間を短縮することができるプラグイン。ビューポート（ブラウザの表示領域/画面）外の画像はユーザーがスクロールす…

続きを読む

position: fixed を使ってメニューを固定する際に気をつける点などの個人的なメモ。 結論から言うと、メニュー（ナビゲーション）の高さを指定し忘れるとメニュー以降に出現するリンク要素（ハイパーリンク）のリンクがクリックできなく（リンクが効かなく）なったり、ブラウザ上の文字（テキスト）を選択しようとしても選択できなくなってしまう。 関連ページ：「レス…

続きを読む

HTML5 文書の構造や新しい要素に関する個人的なメモ。 参考： 「入門 HTML5（オライリー）」 「TAG index Webサイト」 「HTML5のセクションで“文書構造”を理解する atmarkIT」 目次 DOCTYPE HTML5 の DOCTYPE は以下のようになる。 DOCTYPE は HTML ファイルの最初の行に存在する必要がある。 そ…

続きを読む

HTML5 の機能を検出する方法の個人的なメモ。 参考：「入門 HTML5（オライリー）」 目次 Modernizr Modernizr は HTML5 と CSS3 の機能のサポートを検出してくれる JavaScript ライブラリ。（これを利用するのが一番簡単だと思う） Modernizr は読み込まれると、Modernizr という名前の JavaSc…

続きを読む

いつからから不明だが、気が付くといくつかのページの表示が恐ろしく時間がかかる（1分以上）ようになっていた。 結果的には「Debug Bar」と「Debug-Bar-Extender」というプラグインを使って切り分けたところ原因を特定できたけど、遠回りをしてしまった感もないではない。 取りあえずやってみたことをメモ。 注意事項：プラグインのインストールの前には…

続きを読む

Modernizr の基本的な使い方に関する個人的なメモ。 Modernizr は、ユーザーのブラウザがどのような機能をサポートしているかを検出（テスト）し、その結果に基づき html 要素に特定のクラスを付与したり、Modernizr という名前のグローバルオブジェクトを生成しそのプロパティに各機能に関する情報を格納する JavaScript ライブラリ。…

続きを読む

レスポンシブ対応で多機能なスライダープラグイン Slider Revolution (Version 4.5 SkyWood) の使い方等に関するメモ。 価格：$12 ダウンロード（販売元）：codecanyon Slider Revolution のダウンロード（購入）とインストールに関しては以下のページをご参照ください。 関連ページ：Slider Rev…

続きを読む