マガジンのカバー画像

Webデザイン実装例

4
運営しているクリエイター

記事一覧

HTML と  CSS だけで複数絵文字の羅列を 1 行に収める

まず結果を見たい人向けソースコードとサンプル
(HTML 編集が可能なブログサービスでの利用を想定しているため, CSS ではなく HTML の style 属性を使用している.)

作りたいもの (要件)- 複数の絵文字を連打したい.
- デスクトップでもモバイルでも 1 行で表示したい. (変に改行させたくない.)

実装解説まず <p> (<div> でも良い) の中に複数の絵文字を連打する

もっとみる
HTML と CSS だけで要素のアスペクト比を固定する

HTML と CSS だけで要素のアスペクト比を固定する

まず結果を見たい人向けソースコードとサンプル

作りたいもの (要件)

- 要素のアスペクト比を指定したい (具体的な px 値を使わずに).

実装解説
HTML は非常にシンプル. ポイントは, アスペクト比を固定した要素 (この HTML では id が ratio_16-9 の <div> 要素) に小要素は 1 つのみ入れること.

<div id="ratio_16-9"> {なに

もっとみる
HTML と CSS だけで見出しにアイコンを付ける

HTML と CSS だけで見出しにアイコンを付ける

まず結果を見たい人向けソースコードとサンプル

作りたいもの (要件)
- <h1> とか <h2> とかの左に画像でアイコンを挿入したい.
- アイコンがない見出しも使うことがある (全ての見出しにアイコンを付けるわけではない) のでそのへんは柔軟にしたい.

実装解説HTML にはアイコンあり見出しとアイコンなし見出しを用意した.
ポイントは, アイコンありの際には見出し文のところを直打ちでは

もっとみる
HTML と CSS だけでヘッダにぶら下げ目次を作る

HTML と CSS だけでヘッダにぶら下げ目次を作る

まず結果を見たい人向けソースコードとサンプル

作りたいもの (要件)- ページの上部に常駐するヘッダに各ページへのリンクを含む目次を作りたい.
- 目次はカテゴリごとに分類して, 子ページへのリンクを一覧にしたい.
- カテゴリにマウスカーソルをホバーするか, タップすると子ページの一覧がぶら下がって出てくる.

実装解説HTML は非常にシンプル.

<header> <!-- ヘッダそのもの

もっとみる