スポンサーリンク
スポンサーリンク

アイコンとサムネイルを表示する

各項目のレイアウトを設定する

<li>の中には、色々なレイアウトを設定できます。いずれもHTMLタグと属性を追加するだけで大丈夫です。

<li>の中のレイアウト
・文字列のレイアウト
 <p>とか<h1>を<li>内に作成

・アイコンとサムネイル
 項目の左端に画像を表示

・バルーン内の文字列を表示(次回の記事で書きます。)
 小さい楕円の囲み内に文字列を表示する(位置は文字列の右隣)

・分割して表示
 2つのリンクにより右端を分割

ちなみに<li>内に表示する文字列のレイアウトには下記の表のタグや属性を利用する。これらはCSSにより自動的に文字の大きさや表示位置が決まります。

<li>内のタグに対応したCSSの設定
タグ、属性 CSS設定
<h1>~<h6> font-size:16pxとかいろいろ
<p>、<dl> font-size:12pxとかいろいろ
class=”ui-li-aslide” text-align:rightほか

・アイコンとサムネイル
<li>タグ内には、画像アイコンやサムネイルを設置できます。これらはどれも<p>の前に作成することで
項目の左側に置くことができます。以下の表はこれらの最大サイズや作成するHTMLタグです。

画像の設定
種類 最大画像サイズ HTMLタグ 説明
アイコン 16ピクセル四方 <img class=”ui-li-icon”> レイアウトにより位置の微調整が必要
サムネイル 80ピクセル四方 <img> 最初の1つだけがサムネイルに設定される

アイコンは<li>タグ内にある<img class=”ui-li-icon”>で表します。iconの大きさは最大16px四方に調整され、アイコンを配置するときは、レイアウトにより位置の微調整が必要になることがあります。

サムネイルは、<li>内にある初めの<img>で表します。サムネイルのときは、アイコンの大きさは最大80px四方に調整される。ですが、このタグにclass=”ui-li-icon”を設定してしまうと動作がうまくいかないです。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました