チェックマークのついた囲い枠 | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


最近、囲い枠をお探しの方から、私のブログにお越しになる方が多いような気がします(笑)

・・・で、みなさん・・・
なんか・・・
パワーアップしているような気がするのは、私だけでしょうか・・・(笑)

今回は、記事内の囲い枠でも、チェックマークのついた囲い枠をご紹介いたしますね。

チェック チェック項目その1
チェック チェック項目その2
チェック チェック項目その3
チェック チェック項目その4
チェック チェック項目その5

こちら↓のHTMLソースを、「HTML表示」or「HTMLタグ」でコピペして、中の文字「チェック項目その〇」を書き換えてくださいね。

<div style="padding:10px; border-radius: 10px; border: 2px dotted #ff0000;"><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その1<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その2<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その3<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その4<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その5</div>



さらに、枠に影をつけたいのであれば、「width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓(ただし、IE8以前だと影は見えませんのでご注意を)

一応、影付きのパターンものせておきますね^^!

チェック チェック項目その1
チェック チェック項目その2
チェック チェック項目その3
チェック チェック項目その4
チェック チェック項目その5



<div style="padding:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;"><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その1<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その2<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その3<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その4<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その5</div>


よかったら、チェックしてもらいたい記事を書くときにでも、お使いくださ~~い^^!


ちなみに・・・
この

チェック 

新エディタの右欄の「装飾」タブ内の「みんなの絵文字」(みなさんが作った絵文字)で、「チェック」と検索すると出てきます。


川上雄大のワンポイントレッスン

この使用したチェックマークは

cyber-systemsさんが作った絵文字を使っております^^!

みなさんも、「絵文字を描く」を押して、作ることができますので!!

川上雄大のワンポイントレッスン



<参考>
コメントにて、「具体的にどのように使うのですか~?」
といったご質問いただいております^^;

それは、こちらの方の記事をご覧になってくださいませ↓↓↓

ふえるさんから
*** 使用例 *** チェックマークのついた囲い枠を使ってみよう

ネット集客コンサルタントの武藤正隆さんから
札幌雪まつりは2月5~2月11日まで開催です。




以上、ワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大