メニューを左からスライド・イン

メニューを画面の左からスライド・インさせる方法を紹介します。

HTML

補足

• show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。

jQuery

補足

• show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
• リサイズ（または回転）時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。

CSS

補足

• メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
• スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。

サンプル

「メニューを左からスライド・イン」のサンプル

非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】に表示

非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】で表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• HTML は通常のモードと同じです。jQuery 側で表示モードを変えています。

jQuery

補足

• モーダル・ウィンドウを表示する前にクラス DIALOG を付加しています。それ以外は通常モードと同じです

CSS

補足

• クラス DIALOG が付いたモーダル・ウィンドウのコンテナのスタイルを定義しています。
• コンテナをダイアログ風の大きさにして、それがモーダル・ウィンドウの中央に表示されるようにしています。

サンプル

「非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】に表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• div id="data-youtube" 内に埋め込みコードを記述し、次に２点を変更します。
• 埋め込みコードの "src" を "data-src" に変更します。
• 埋め込みコードに src="about:blank" を追加します。
• 尚、div id="data-youtube" は CSS で非表示にしています。

jQuery

補足

• div id="load-data-youtube" がクリックされたら、モーダル・ウィンドウにクラス YOUTUBE を付加します。
• div id="data-youtube" 内の埋め込みコードをモーダル・ウィンドウのコンテナにコピーします。
• コピーした埋め込みコードの data-src の値を src の値にセットします（ここで初めて YouTube 動画のデータがロードされます）。続いて、モーダル・ウィンドウを表示します。

CSS

補足

• クラス YOUTUBE が付加されたモーダル・ウィンドウのコンテナは、背景が透過されるように設定しています。また、スクロール・バーが表示されてしまうので overflow: hidden を設定しています。
• コンテナ内にコピーされた iframe の幅と高さは、コンテナと同じ大きさになるように 100% を設定しています。
• あらかじめ埋め込みコードを記述した div id="data-youtube" は非表示にしています。

サンプル

「YouTube 動画をモーダル・ウィンドウに表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• HTML に関してはモーダル・ウィンドウを用意する以外、特にすることはありません。

jQuery

補足

• 画像がクリックされたら、モーダル・ウィンドウにクラス IMAGE を付加します。
• 続いて、コンテナ内に span class="IMG を作成し、その背景画像にクリックした画像のファイル名を設定します。最後にモーダル・ウィンドウを表示します。

CSS

補足

• クラス IMAGE が付加されたモーダル・ウィンドウは、背景が透過されるように設定しています。
• span class="IMG" はブロック要素化しコンテナと同じ大きさにして、背景画像が比率を保ったまま最大表示されるよう contain を指定しています。

サンプル

「クリックした画像をモーダル・ウィンドウに表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

非表示にしておいた div 要素をモーダル・ウィンドウに表示

あらかじめ非表示にしておいた div 要素をモーダル・ウィンドウに表示する方法を紹介します。

HTML

補足

• モーダル・ウィンドウ div id="MODAL-WINDOW" を用意し、非表示にしておきます。
• モーダル・ウィンドウに表示する内容を div id="data-div" 内に記述して、非表示にしておきます。

jQuery

補足

• #load-data-div がクリックされたら、モーダル・ウィンドウのコンテナに表示する内容をコピーし、モーダル・ウィンドウを表示します。
• モーダル・ウィンドウの閉じるボタンがクリックされたら、モーダル・ウィンドウを非表示にし、コンテナ内にコピーしたデータを空にします。
• 最後にモーダル・ウィンドウに付加されたクラスを削除します（このサンプルではクラスを付加していないので、削除する意味はありません）。

CSS

補足

• モーダル・ウィンドウ関連のスタイルを定義しています。
• iOS でコンテナのスクロール・バーが表示されないので、表示されるよう定義しています。
• モーダル・ウィンドウとコンテナに表示する内容は非表示にしています。

サンプル

「非表示にしておいた div 要素をモーダル・ウィンドウに表示」のサンプル

YouTube 動画の遅延読み込み

スクロールして YouTube 動画がウィンドウ内に入った時に、逐次ロードする方法を紹介します。「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」の遅延読み込み版です。

HTML

補足

• YouTube 動画の埋め込みコードを一部書き換えます。
• src="…" を data-src="…" に変更し、src="about:blank" を追加します。
• src="about:blank" なので、HTML のロード時に YouTube 動画は読み込まれません。

jQuery

補足

• YouTube 動画がウィンドウ内に入ったら data-src の値を src に上書きしています。

CSS

補足

• CSS は「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」と同じコードです。

サンプル

「YouTube 動画の遅延読み込み」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに YouTube 動画を表示

縦横比を維持したまま横幅いっぱいに YouTube 動画を表示

縦横比を維持したまま横幅いっぱいに YouTube 動画を表示する方法を紹介します。

HTML

補足

• YouTube 動画の埋め込みコードを二重の div 要素内に記述します（外側の div 要素には frame-youtube クラスを付ける）。
• YouTube 動画の埋め込みコードは書き換えずに、そのまま div 要素内に貼り付ける。
• 埋め込みコードの width とheight の値は無視されるので、気にしなくて良い。

CSS

補足

• 将来、YouTube 動画の仕様が変わったら padding-bottom: 56.25% や padding-top: 30px の値が変わるかも知れません。

サンプル

「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに画像を表示

body 要素にデバイスを識別するクラスを付加

ウィンドウ幅に応じて、デバイスを識別するクラスを body 要素に付加する方法を紹介します。付加された識別クラスを元に、デバイス毎に異なるスタイルを CSS で指定できるようになります。

HTML

jQuery

補足

• このサンプルでは、ロード時とリサイズ時にウィンドウ幅をチェックして、 600px 未満なら "SMP"、960px 未満なら "TAB"、それ以上なら "PC" というクラスを body 要素に追加しています。

CSS

補足

• このサンプルでは、body 要素に付加されているクラスによって、表示される li 要素とその背景が変わるよう CSS を設定しています。

サンプル

「body 要素にデバイスを識別するクラスを付加」のサンプル

li 要素を inline-block 化して横並びにする

li 要素を inline-block 化することで、li 要素を横並びにする方法について紹介します。text-align で li 要素の左・右・中央揃ができます。

HTML

補足

• inline-block 化したい ul 要素に "inline-block" クラスを付けます。

CSS

補足

• 単純に inline-block 化すると li 要素間にギャップができるので、ul 要素の font-size を一旦 0 にして、li 要素で再定義しています。
• 必要に応じで、text-align と vertical-align で li 要素のレイアウトを指定します。

サンプル

「li 要素を inline-block 化して横並びにする」のサンプル

ブロック要素の左右端に括弧を表示

ブロック要素の左右端に括弧を表示する方法を紹介します（レスポンシブ対応）。

HTML

補足

• 括弧を付けたいブロック要素（サンプルでは blockquote ）に bracket クラスを付けます。丸括弧にしたい場合は、radius クラスも合わせてつけます。

CSS

補足

• 括弧の色や大きさ、余白などを設定しています。

サンプル

「ブロック要素の左右端に括弧を表示」のサンプル

関連記事

• ブロック要素の左上と右下に装飾文字を表示

高さの異なるブロック要素をタイル状に隙間なく並べる

高さの異なるブロック要素を左上から右下へタイル状に隙間なく並べる方法を紹介します。

HTML

補足

• サンプルでは "album" という id 名を付けた div 要素内に、並べ替える元のリストを記述しています。

jQuery

補足

• function masonry(s, n) という関数で並べ替えます。引数の s には、元のリストを包む div 要素の id 名を指定し、引数の n には並べ替え後のカラム数を指定します。
• この関数では、引数で指定されたカラム数分の新しいリストを作成し、それを横並びにしたあと、各リストの中へ元リストの項目をコピーしながら振り分けています（元のリストは CSS で非表示にしています）。
• サンプルではウィンドウ幅を変えると、カラム数が変わるように指定しています。

CSS

補足

• jQuery の処理で並び変わる前に、一瞬元のリストが縦一列に表示されてしまうので、 CSS で非表示にしています。

サンプル

「高さの異なるブロック要素をタイル状に隙間なく並べる」のサンプル

画像の縦横比を維持したまま正方形内に表示

長方形の画像を縦横比を維持したまま正方形内に表示する方法を紹介します。

HTML

補足

• まず、「縦横比を維持したまま横幅いっぱいに画像を表示」で紹介した方法で画像を表示します。
• 次に画像を含むブロック要素（サンプルでは table 要素）に img-contain または img-cover クラスを付けます。

jQuery

補足

• img-contain または img-cover クラス内の .frame-img クラスを探し、その子要素の img 要素を非表示にしています。
• 次に img 要素に指定されている画像の url を .frame-img クラスの background-image に設定しています。

CSS

補足

• .frame-img クラスを正方形にするため、padding-top: 100% を指定しています。
• 画像を正方形内に、どう表示するかは、background-size の contain と cover で切り替えています。

サンプル

「画像の縦横比を維持したまま正方形内に表示」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに画像を表示

１行に収まらない長い文字列の文末を折り返さず "…" で表示

１行に収まらない長い文字列の文末を折り返さず "…" で表示する方法を紹介します。

HTML

補足

• 長い文字列を折り返したくない場合は、ブロック要素に text-tail-cut クラスを付けます。

CSS

サンプル

「１行に収まらない長い文字列の文末を折り返さず "…" で表示」のサンプル

ノート風の罫線を CSS で表示

ノート風の罫線を、画像を使わずに CSS で表示する方法を紹介します。

HTML

補足

• notebook-border クラスを付けたブロック要素の背景に罫線が表示されます。

CSS

補足

• repeating-linear-gradient で罫線を表示しています。
• font-size × line-height が１行の高さになります（サンプルでは 24px ）。
• repeating-linear-gradient で、透明色（サンプルでは rgba(255,255,255,0) の部分）と１ドットの罫線（サンプルでは #ccc の部分）を交互に表示しています。
• 従って font-size と line-height がサンプルと異なる時は、指定する値の調整が必要です（ 23px と 24px の部分）。
• 加えて p 要素の下マージンの値も罫線に重ならないよう変更してください（ 24px の部分）。

サンプル

「ノート風の罫線を CSS で表示」のサンプル

横幅に収まらない長い文字列を指定した位置で折り返す

横幅に収まらない長い文字列を指定した位置で自動的に折り返す方法です。

HTML

補足

• 折り返したい部分の文字列を b タグで挟むと、横幅に収まらない時に、その位置で自動的に折り返されます。
• b タグには、次のような CSS を設定しています。

CSS

サンプル

「横幅に収まらない長い文字列を指定した位置で折り返す」のサンプル

縦横比を維持したまま横幅いっぱいに画像を表示

ウィンドウ幅が変わっても、縦横比を維持したまま横幅いっぱいに画像を表示します。

HTML

補足

• "frame-img" クラスを付けた span 要素の中に img 要素を置きます。
• "frame-img" クラスを付けた span 要素は CSS でブロック要素にしています。

CSS

補足

• 画像に枠線や余白を付けたい場合は、"frame-img" クラスの CSS に値を設定します。

サンプル

「縦横比を維持したまま横幅いっぱいに画像を表示」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに画像を表示（但し、拡大表示はしない）