初めてのwebサイト作成

🌹レッスン25🌹

画像を使ったリストの作成方法をご紹介します!


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

1. 画像を使ったリストの作成方法

今回は、画像を使ったリストの作成方法について解説します。

まず、リストに使用する画像を用意します。

文字の大きさに合わせて20px前後の大きさで、pngまたはgif形式で保存します。

例えばオートシェープや図形機能を使ってこんな風に描いてもいいですね!

ペイントのオートシェープは、レッスン3の動画で詳しく紹介しています。

Excelの図形描画は、レッスン22で紹介しています。




 1-1 CSSの指定方法

リストマークに画像を指定するには、

list-style-image:url(画像ファイルのurl)で指定します。

今までに作ったファイルを編集して、桃色のコードを入力してね!


【HTML】


<body>
<ul>
<li>none(マークを表示しない)</li>
<li>disc(黒丸)</li>
<li>circle(白丸)</li>
<li>square(四角)</li>
<li>decimal(1から始まる数字)</li>
<li>decimal-leading-zero(0から始まる数字)</li>
<li>lower-roman(小文字のローマ字)</li>
<li>upper-roman(大文字のローマ字)</li>
<li>lower-greek(小文字のギリシャ文字)</li>
<li>lower-slpha(小文字のアルファベット)</li>
<li>cjk-ideographic(漢数字一二三)</li>
<li>hiragana(あいうえお順)</li>
<li>katakana(カタカナアイウオエオ順)</li>
<li>hiragana-iroha(ひらがなのいろは順)</li>
</ul>
</body>

【CSS】


ul{	
	list-style-image: url(img/ribon.png);
	}

🌼ブラウザで確認してみましょう!





 1-2 画像の背景を透明にする方法

画像の背景を透明にすると、なお見栄えが良くなりますね!

エクセルやパワーポイントでも背景の削除は、出来ることには出来るのですが、、、

写真の背景は簡単にできますが、図形の背景を削除するのは、ものすごく手間や時間がかかりました。

今回はパワーポイントでのやり方を紹介しますね!

  1. パワーポイントを開いて、メニューから挿入➡画像

  2. 背景の削除➡変更を保持


  3. 背景が削除された画像のコーナーをドラッグアンドドロップして文字の大きさ位まで小さくします。

  4. 画像の上で、右クリック➡図として保存

  5. pngまたはgif形式で保存します。

🌼図形の場合は、WEB上で無料で背景を透明にしてくれるサイトがあるので、その方がおすすめです!

「PEKO-STEP」というサイトリンク貼っておきます。

 「PEKO-STEP」https://www.peko-step.com/tool/alphachannel.html

ご利用の際は、注意事項を読んでね!

無料で、こんな大変なことをわずかな時間でやってくれるので、いつも私はありがとうの代わりに広告をクリックします。

その広告がいくらかわからないけど、こちらは何の負担もなく、サイト運営者さんに寄付できるからいいシステムですよねー💡

それでは、CSSの url(img*****.png) を変更して、ブラウザで確認してみましょう!

桃色のコードを入力してね!


【CSS】


ul{	
	list-style-image: url(img/sizuku.png);
	}


上手く表示されましたか?


★まとめ

いかがでしたか?

箇条書きのリストマークは、画像を使うと無限大です。

今回は、ユーザーが読みやすく、そのwebページを魅力的に見せる✨テクニックです。

ポイントは、リストマークに使用する画像と、文字の大きさを同じくらいにすると違和感がなくなります。

次回レッスン26は、「表の作成の指定方法」をアップロードする予定です!

See you again Take care (^.^/)))~~~bye!!



Ads by Google

TOP