こんにちは。博士のプログラミング教室 Candy かわの ゆか です。
前回はアメブロで見出しに飾りつけする方法について紹介しました。
今回は、記事の一部を枠で囲いたいなぁという時、素敵な飾り枠をつけられる方法をまとめてみようと思います。
今日のテーマは「コピペで簡単！アメブロの記事にかわいい枠をつけてみよう！」です。
基本形
まずは簡単に四角い枠で囲ってみましょう。
見た目はこんな感じ。
ここに文章を書きます。少し太めの黒い枠で囲っただけです。シンプルですね。
HTMLはこのようになります。
<div style="padding: 0.5em 1em; margin: 2em 0; font-weight: bold; border: solid 2px #000000;">
<p style="margin: 0; padding: 0;">
ここに文章を書きます。少し太めの黒い枠で囲っただけです。シンプルですね。
</p>
</div>少し可愛くしてみましょう
見た目はこんな感じ。
ここに文章を書きます。囲み線を波線にしました。ちょっと可愛らしいですね。
HTMLはこのようになります。
<div style="padding: 0.5em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 2px #5b8bd0;">
<p style="margin: 0; padding: 0;">
ここに文章を書きます。囲み線を波線にしました。ちょっと可愛らしいですね。
</p>
</div>さらにもう少し工夫
見た目はこんな感じ。
ここに文章を書きます。布を縫い付けてあるような雰囲気です。ちょっとおしゃれな感じになりました。
HTMLはこのようになります。
<div style="padding: 0.2em 0.5em; margin: 2em 0; background: #b4e8b4; box-shadow: 0px 0px 0px 10px #b4e8b4; border: dashed 2px white;">
<p style="margin: 0; padding: 0;">
ここに文章を書きます。布を縫い付けてあるような雰囲気です。ちょっとおしゃれな感じになりました。
</p>
</div>さらにさらに角を丸くしてみます
ここに文章を書きます。角を丸くして、可愛らしさアップ。色も変更すると雰囲気も変わりますね。
HTMLはこのようになります。
<div style="padding: 0.2em 0.5em; margin: 2em 0; color: #565656; background: #ffe2ea; box-shadow: 0px 0px 0px 10px #ffe2ea; border: dashed 2px #ff89c3; border-radius: 8px;">
<p style="margin: 0; padding: 0;">
ここに文章を書きます。角を丸くして、可愛らしさアップ。色も変更すると雰囲気も変わりますね。
</p>
</div>まとめ
今回は、文章を囲いたい時のカワイイ枠線の作り方を紹介しました。いかがでしたか？
今回使ったタグは「divタグ」と「pタグ」です。
divタグはHTMLの要素を一つのまとまりにグループ化するときに使います。pタグは「段落」を意味します。今日紹介した枠内に、段落が複数ある場合は、pタグを複数使うことができます。
箇条書きにする場合は、pタグの代わりに、「ulタグ」や「olタグ」を使いましょう。
箇条書きの例。見た目はこんな感じ。
- divタグ：HTMLの要素をグループ化するためのタグ
- pタグ：段落を示すタグ。段落ごとにpタグで囲います。
- ulタグ：順序のない箇条書きを表します。要素は「liタグ」を使います。
- olタグ：順序のある箇条書きを表します。番号付きで箇条書きしたい時に使います。要素は「liタグ」です。
HTMLはこのようになります。
<div style="padding: 0.2em 0.5em; margin: 2em 0; color: #565656; background: #ffe2ea; box-shadow: 0px 0px 0px 10px #ffe2ea; border: dashed 2px #ff89c3; border-radius: 8px;">
<ul style="margin: 0; padding: 0 1em;">
<li>divタグ：HTMLの要素をグループ化するためのタグ</li>
<li>pタグ：段落を示すタグ。段落ごとにpタグで囲います。</li>
<li>ulタグ：順序のない箇条書きを表します。要素は「liタグ」を使います。</li>
<li>olタグ：順序のある箇条書きを表します。番号付きで箇条書きしたい時に使います。要素は「liタグ」です。</li>
</ul>
</div>今回ご紹介した以外にも、枠の作り方は色々あります。参考となるサイトもたくさん。他にも探して使ってみてください。
Yuka Life 