目次
- はじめに
- 目次を囲み線で囲んでみる。
- まとめ
[はじめに]
こんにちは、Rickyです。
前回で学んだ目次を付けてみました。
あと、見出しの文字を大きくしてみました。
目次は<h2>タグ、リストは<h3>タグを使用しています。
良い。GOODです。なんか急にブログっぽくなってきました。
ちょっとしたことで雰囲気がぐっと変わりますね。
しかし、ここで満足する私ではありません。次のステップに進みましょう。
またまた、ほかのブロガーさんを参考にすべくネットサーフィンを繰り返していると・・・気づきました。目次を線で囲んでるではありませんか。
うむ、かっこいい。こなれた感じがします。よし採用！
さあ、Let`sTry
［目次を囲み線で囲んでみる。］
さて、いざやろうとしてもやり方はさっぱりわかりません。
ググりましょう・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
分かりました。（はやっ！）
さて今日は
目次
・〇〇〇〇〇〇
・〇〇〇〇〇〇
・〇〇〇〇〇〇
を線で囲んでみましょう。
やり方はHTMLを駆使します。（なんかカッコいい）
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲み線の中に入る部分
</div>
↑のコードを活用します。（偉そうに言ってますがググっただけです。てへっ）
そうすると・・・・・なんということでしょう
目次
・〇〇〇〇〇〇
・〇〇〇〇〇〇
・〇〇〇〇〇〇
きたーーーーーーーー！！！
いいですね。すごくいいですね。
よしさらに詳しく見ていきましょう。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲み線の中に入る部分
</div>
赤色の数字を変えると線の太さが変更できるようです。
やってみましょう。
数字を１０にしてっと・・・・・・・・・・
目次
・〇〇〇〇〇〇
・〇〇〇〇〇〇
・〇〇〇〇〇〇
ふっ太い！太すぎました。
まあ、変化は分かりやすくていいですね。
さあ、次に行きましょう。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲み線の中に入る部分
</div>
青色の文字を変更することで囲み線の種類を変更できるようです。
- solid 実線
- dotted 点線
やってみましょう。
文字ををdottedにしてっと・・・・・・・・・・
目次
・〇〇〇〇〇〇
・〇〇〇〇〇〇
・〇〇〇〇〇〇
点線やでーーー！！やったやでーー！！
いやー楽しい。
よし、次です。
次は色です。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲み線の中に入る部分
</div>
緑の部分を変えれば色が変わります。
ちなみに
- #006400 darkgreen
- #000000 black
- #ff00000 red
- #00ffff aqua etc
といった具合にめちゃくちゃ大量に色設定ができます。
詳しくは「HTMLカラーコード」でググってみてください。
さあ、やっていきましょう。
目次
・〇〇〇〇〇〇
・〇〇〇〇〇〇
・〇〇〇〇〇〇
おーーー変わってる。
やりました。私やりましたよ。だれか褒めて。
なんかすごくうれしい気分です。
[まとめ]
いやー今回は充実してました。
目次を囲むだけですごいこなれた感が出てきそうです。なによりたったこれだけですがすごく面白かったです。
だんだんとカッコいいブログを作れる気がしてきました。
少しづつですがやってやろうじゃないですか。なんか今すごくやる気です。（今だけです。）
この記事が何かのお役に立てれば幸いです。
それでは失礼します。
