トップページへ
GoogleService
メニュー
サイト内検索
お問合わせ
[初めてのｗｅｂサイト作成 レッスン25]🌹レッスン25🌹
画像を使ったリストの作成方法をご紹介します！
🌻パソコンのブラウザはGoogle Chromeを使用しています。
1. 画像を使ったリストの作成方法
今回は、画像を使ったリストの作成方法について解説します。
まず、リストに使用する画像を用意します。
文字の大きさに合わせて20ｐｘ前後の大きさで、ｐｎｇまたはｇｉｆ形式で保存します。
例えばオートシェープや図形機能を使ってこんな風に描いてもいいですね！
ペイントのオートシェープは、レッスン３の動画で詳しく紹介しています。
Excelの図形描画は、レッスン22で紹介しています。
特にこだわりがなければ、近年ではフリー画像のサイトも多いので活用すれば時間の短縮になりますよ。
1-1 ＣＳＳの指定方法
リストマークに画像を指定するには、
ｌｉｓｔ－ｓｔｙｌｅ－ｉｍａｇｅ：ｕｒｌ（画像ファイルのｕｒｌ）で指定します。
今までに作ったファイルを編集して、桃色のコードを入力してね！
【ＨＴＭＬ】
<body>
<ul>
<li>ｎｏｎｅ（マークを表示しない）</li>
<li>ｄｉｓｃ（黒丸）</li>
<li>ｃｉｒｃｌｅ（白丸）</li>
<li>ｓｑｕａｒｅ（四角）</li>
<li>ｄｅｃｉｍａｌ（１から始まる数字）</li>
<li>ｄｅｃｉｍａｌ-ｌｅａｄｉｎｇ-ｚｅｒｏ（０から始まる数字）</li>
<li>ｌｏｗｅｒ－ｒｏｍａｎ（小文字のローマ字）</li>
<li>ｕｐｐｅｒ－ｒｏｍａｎ（大文字のローマ字）</li>
<li>ｌｏｗｅｒ－ｇｒｅｅｋ（小文字のギリシャ文字）</li>
<li>ｌｏｗｅｒ－ｓｌｐｈａ（小文字のアルファベット）</li>
<li>ｃｊｋ－ｉｄｅｏｇｒａｐｈｉｃ（漢数字一二三）</li>
<li>ｈｉｒａｇａｎａ（あいうえお順）</li>
<li>ｋａｔａｋａｎａ（カタカナアイウオエオ順）</li>
<li>ｈｉｒａｇａｎａ－ｉｒｏｈａ（ひらがなのいろは順）</li>
</ul>
</body>
【ＣＳＳ】
ul{
list-style-image: url(img/ribon.png);
}
🌼ブラウザで確認してみましょう！
1-2 画像の背景を透明にする方法
画像の背景を透明にすると、なお見栄えが良くなりますね！
エクセルやパワーポイントでも背景の削除は、出来ることには出来るのですが、、、
写真の背景は簡単にできますが、図形の背景を削除するのは、ものすごく手間や時間がかかりました。
やはり、フォトショップなどの画像編集の専用ソフトを使った方が早いしキレイです✨
私は最近透過するだけの為に「ＧＩＭＰ」をインストールしました。
「ＧＩＭＰ」はフリーなので、無料でダウンロードでき、オフラインでじっくり作業ができます。
1からデザインしたりするにはイラストレーターなどのデザイン専用ソフトを使った方が早いしキレイです✨
「Ｉｎｋｅｓｋａｐｅ」もフリーなので、無料でダウンロードでき、オフラインでじっくり作業ができます。
またはじめから透過済みの画像をpng形式でダウンロードできるフリー素材サイトもありますので活用してみても良いですね！
今回はパワーポイントでのやり方を紹介しますね！
パワーポイントを開いて、メニューから挿入➡画像
背景の削除➡変更を保持
背景が削除された画像のコーナーをドラッグアンドドロップして文字の大きさ位まで小さくします。
画像の上で、右クリック➡図として保存
ｐｎｇまたはｇｉｆ形式で保存します。
🌼オリジナルの画像の場合は、ＷＥＢ上で無料で背景を透明にしてくれるサイトがあるので、そちらも活用しても良いかもしれません。
「PEKO-STEP」というサイトリンク貼っておきます。
「PEKO-STEP」https://www.peko-step.com/tool/alphachannel.html
ご利用の際は、注意事項を読んでね！
無料で、こんな大変なことをわずかな時間でやってくれるので、いつも私はありがとうの代わりに広告をクリックします。
その広告がいくらかわからないけど、こちらは何の負担もなく、サイト運営者さんに寄付できるからいいシステムですよねー💡
ポニーフックの画像はひとまず置いといてー
私は、しずくの画像の背景を透明にしてもらいました。
それでは、ＣＳＳの url(img*****.png) を変更して、上書き保存したらブラウザで確認してみましょう！
桃色のコードを入力してね！
【ＣＳＳ】
ul{
list-style-image: url(img/sizuku.png);
}
上手く表示されたかな？
★まとめ
いかがでしたか？
箇条書きのリストマークは、画像を使うと無限大です。
今回は、ユーザーが読みやすく、そのｗｅｂページを魅力的に見せる✨テクニックです。
ポイントは、リストマークに使用する画像と、文字の大きさを同じくらいにすると違和感がなくなります。
次回レッスン26は、「表の作成の指定方法」をアップロードする予定です！
See you again Take care
(^.^/)))~~~bye!!
TOP