疑似要素で "テカリ" の部分を作り、立体感のあるボタンをデザインしてみました。
HTML
補足
- span 要素に button クラスを付けて、ボタン風のデザインにします。
CSS
補足
- button クラスで span 要素をブロック化し、背景色や角丸、カーソルの形などを設定して、ボタン化しています。
- ボタンの上半分のテカっているところは、button クラスの疑似要素 :before を CSS でデザインして、 span 要素に重ねています。
2016年12月22日
疑似要素と CSS で立体感のあるボタンのデザイン
2016年12月15日
縦横比を維持したまま横幅いっぱいに画像を表示（但し、拡大表示はしない）
縦横比を維持したまま横幅いっぱいに画像を表示 では、元の画像の大きさに関係なく、横幅いっぱいに表示されます。そのため、縦長の画像をパソコンなどの横幅の広い画面に表示すると、巨大なボケた画像になってしまいます。
そこで、ウィンドウ幅が元の画像幅よりも大きい時は、横幅いっぱいまで広げないで元の画像の幅で表示する方法を考えました。
HTML
補足
- 元の画像幅以上に拡大表示させたくない時は、frame-img に加えて width-auto クラスも指定します。
CSS
補足
- frame-img クラスに加えて、上記 width-auto クラスの CSS を指定しておきます。
サンプル
関連記事
おすすめのフォントファミリー（font-family）の指定【2016年12月現在】
現時点のフォントファミリー（font-family）は、以下のように指定しています。OS のアップデートにより、標準でインストールされるフォントが変われば、当然見直しが必要となります。
CSS
補足
- 上記指定により、対応するフォントがあれば、上位のフォントが優先的に使用されます。
- 複数行に渡る日本語が読みやすいように、等幅に近いフォントを指定しています。
- ここで指定しているフォントは、おそらくスマートフォンやタブレットには存在しないので、ブラウザの標準フォントで表示されます。
2016年12月14日
横幅に収まらない長い文字列を指定した位置で折り返す
横幅に収まらない長い文字列を指定した位置で自動的に折り返す方法です。
HTML
補足
- 折り返したい部分の文字列を b タグで挟むと、横幅に収まらない時に、その位置で自動的に折り返されます。
- b タグには、次のような CSS を設定しています。
CSS
サンプル
「横幅に収まらない長い文字列を指定した位置で折り返す」のサンプル2016年12月13日
画像にキャプションを付ける
「縦横比を維持したまま横幅いっぱいに画像を表示」で表示された画像にキャプションを付けます。
HTML
補足
- em 要素にキャプションとして表示する文字列を指定します。
- キャプションを画像に重ねて表示する時は、 "frame-img" クラスを付けた span 要素の中に em 要素を置きます。
- キャプションを画像の下に表示する時は、 "frame-img" クラスを付けた span 要素の外に em 要素を置きます。
CSS
サンプル
「画像にキャプションを付ける」のサンプル縦横比を維持したまま横幅いっぱいに画像を表示
ウィンドウ幅が変わっても、縦横比を維持したまま横幅いっぱいに画像を表示します。
HTML
補足
- "frame-img" クラスを付けた span 要素の中に img 要素を置きます。
- "frame-img" クラスを付けた span 要素は CSS でブロック要素にしています。
CSS
補足
- 画像に枠線や余白を付けたい場合は、"frame-img" クラスの CSS に値を設定します。
サンプル
関連記事
2016年12月12日
ブロック要素の左上と右下に装飾文字を表示
ブロック要素（サンプルでは blockquote 要素）の左上と右下に任意の文字を装飾として表示します。
装飾文字を表示するブロック要素に "bracket" クラスを追加し、左上に表示する文字を "data-before" 属性 、右下に表示する文字を "data-after" 属性に指定します。
HTML
CSS
補足
- 装飾文字の大きさに合わせて、余白や表示位置の調整が必要です。
サンプル
2016年12月8日
ファビコンとホーム画面用のアイコン
ブラウザのタブやお気に入りのリストにアイコンが表示されるよう、head 内に、以下の３行を指定しています（３行目はスマートフォンやタブレットのホーム画面に追加した時に表示されるアイコン用）。
HTML
補足
- アイコンは "favicon.ico" と "apple-touch-icon.png" の２種類用意します。
- "favicon.ico" は 16×16px 、32×32px、48×48px の３つのサイズを含むマルチアイコンです。
- "apple-touch-icon.png" は 152×152px の PNG 形式の画像ファイルです。
- 必要なアイコンのサイズはブラウザや OS によって異なり、上記サイズでない場合、適当に拡大・縮小表示されるようです。そのため、アイコンの絵柄によっては、きれいに表示されない場合があります。
2016年12月6日
ビューポートとズーム操作の設定
スマートフォンやタブレット向けにビューポート（表示領域の大きさ）とズーム操作の設定をしています。
HTML
補足
下記設定により、表示領域の幅を端末画面の幅とし、ズーム操作を許可しています。
プロパティの初期値と変更点
| プロパティ | 初期値 | 設定 |
| width | 980 ? | device-width |
| height | 自動 | |
| initial-scale | ? | 1.0 |
| minimum-scale | 0.25 | 1.0 |
| maximum-scale | 1.6 | |
| user-scalable | yes |
また、iOS 端末の縦持ちと横持ちで文字サイズが自動調整されるのを防ぐため、下記スタイルを設定しています（サンプルでは common.css 内で指定）。
CSS
サンプル
2016年12月4日
リセット用 CSS ファイル
ブラウザ毎に異なるスタイルシートのデフォルト値を出来るだけ統一するため、HTML ファイルの head 内で、外部 CSS ファイル reset.css を 読み込んでいます。
HTML
補足
- 外部 CSS ファイル reset.css では HTML5 Doctor で紹介されている内容をベースに、必要に応じて追記・再定義しています。
- 同一サイト内の複数のページで使用するスタイルは、外部 CSS ファイル common.css に記述して、reset.css のあとに読み込んでいます。
- 単一ページだけに適用するスタイルは外部ファイルではなく、 style タグ内に直接記述しています。
reset.css の内容
2016年12月2日
HTML ファイルのテンプレート（スケルトン）
レイアウトや装飾を施していない骨組みだけのテンプレートです。
HTML
補足
- HTML5 + CSS3 + jQuery での記述を想定。
- HTML5 のセクショニング関連タグは未使用。
- スマートフォン・タブレット・パソコンでの閲覧を想定。
- 必要に応じて、下記外部ファイルを用意する。
- アイコンファイル：favicon.ico、apple-touch-icon.png
- CSS ファイル：reset.css、common.css
- jQuery ファイル：jQuery 本体、common.js
関連記事
サンプル
登録:
投稿
(
Atom
)