HTML&CSS jQuery Mobile1.4でスマホサイト作成３〜開閉式コンテンツとPOPアップ
完成例サンプル
リストをうまく利用することで小さなモバイル画面で情報を見やすく整理することができます。
リストビューの作成
リストの作成はul要素にdata-role="listview"属性を付加します。a要素でリンク設定すると...
HTML&CSS
HTML&CSS HTML&CSS jQuery Mobile1.4でスマホサイト作成２〜ボタンの作成
完成例サンプル
リンクボタンの作成
リンクボタンの作成は簡単です。a要素にclass="ui-btn"というクラスを指定するだけです。
リンクボタンの作成は旧バージョンから1.4になってから大きく変更されていますので注意してくださ...
HTML&CSS jQuery Mobile1.4でスマホサイト作成１〜文書構造作成
jQuery Mobileのバージョン1.4では、従来バージョンから変更があります。1.4に対応した記述方法を学習します。
jQuery Mobileの準備
モバイルページサンプル
meta要素にviewportの設定を記述します...
HTML&CSS HTML5〜コンテンツモデル
HTML5におけるコンテンツモデルとは、ある要素の中に何を含めることができるかを定義したものです。
例えば次のようなHTMLがあったなら、コンテンツモデルから正しい書き方かどうか判断できます。
div要素のカテゴリはフローコンテンツ...
HTML&CSS :nth-child()の使い方を極める〜CSS3疑似クラス
:nth-child() 擬似クラスについて
:nth-child() 擬似クラスの仕様として、W3CのRecommendation仕様書（日本語訳）には以下のように記されています。
6.6.5.2. :nth-child() 擬似...
HTML&CSS 包含ブロックについて
包含ブロックとは
２０１７年２月２６日
「widthやmarginなどのサイズの設定次第で包含ブロックとなる親要素を飛び出す（オーバーフローする）ことも可能です」
を追加しました。
ボックスモデルは次の図で表すことができます。
...
HTML&CSS CSS ボックスモデルについて解説
ボックスモデルとは
どの要素も四角い領域を生成します。この四角い領域を「ボックス」といいます。ボックスを作成する要素はブロックレベル要素に限りません。インライン要素もボックスを作成しますがその表示方法が少しブロック要素と異なるところがポイ...
HTML&CSS z-indexの使い方〜詳説
z-indexは要素の重なり順を変更することができる便利なプロパティですが、思わぬところで落とし穴があります。
z-indexの値を変更しても重なり順を変更できずに困った経験がないでしょうか。その原因は正しい仕組みを理解していないためです...
HTML&CSS flex レイアウト詳説〜Flex Box Layout
レイアウト作成のためのCSS
CSS2.1 にて定義されているレイアウトモードは次の４つです。
文書を配置するために設計されたブロックレイアウト
テキストを配置するために設計された行内レイアウト
表を作成するためのt...
HTML&CSS background設定解説〜CSS3
backgroundプロパティ〜CSS3
複数の背景画像による多層化
CSS3 では、ボックスの背景は，複数の 層 （ layer ）を持てます。複数の background-image の値は カンマで区切って区別します。 注目すべき...