コード用div装飾をcssに追加してみた

photo credit: Aleksandar Urošević via photopin cc

記事の中にHTMLやCSSなど、コードを記述することがたまにあります。
blockquoteタグなどを使うことが多かったのですが、コード用の装飾をCSSに作ってみました。

どんな装飾にするか

以前、AppHTMLのテンプレートを紹介する記事でコードを紹介する時に、div styleタグを使って装飾していました。

WEBLOG: AppHtmlブックマークレットメーカーのテンプレートを公開します

今回はこちらで使った装飾を、CSSに落とし込んでみようと思います。

CSSコードの作成

前回の記事で使用したHTMLコードは、以下の通りです。

<div style="border-style: solid ; border-width: 1px; padding: 20px; position: relative; top:0px; left:20px; border-color: #97A395; background-color: #EAEDE6; width: 460px; border-radius: 10px;"><code>&lt;span class=&quot;appIcon&quot;&gt;&lt;a href=&quot;${url}&quot; target=&quot;itunes_store&quot;&gt;&lt;img class=&quot;appIconImg&quot; height=&quot;100&quot; src=&quot;${icon100url}&quot; style=&quot;border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;&quot;&gt;&lt;/a&gt;&lt;/span&gt;&lt;span class=&quot;appName&quot;&gt;&lt;strong&gt;&lt;a href=&quot;${url}&quot; target=&quot;itunes_store&quot;&gt;${name}&lt;/a&gt;&lt;/strong&gt;&lt;/span&gt;&lt;span class=&quot;badgeS&quot; style=&quot;display:inline-block; margin:4px&quot;&gt;${badgeS}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;appPrice&quot;&gt;価格: ${price}(記事公開時)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;appSize&quot;&gt;サイズ: ${appsize}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;appCategory&quot;&gt;カテゴリ: ${category}&lt;/span&gt;&lt;br&gt;&lt;br style=&quot;clear:both;&quot;&gt;</code></div>

赤字で表示した箇所が装飾付きのdivタグです。
この内容をCSSに落とし込みdivタグのclass指定で、いつでも表示されるようにします。

CSSDesk - Online CSS Sandbox
CSSのシミュレーター？

CSS記述のチェックには、CSSDeckというWebサービスを使いました。

左カラム上段にHTML、下段にCSSを記述するとリアルタイムで右カラムに結果が表示されます。
CSS記述のテストするとき便利です。

完成したのが、以下の通り。

blockquote {
margin:10px;
border-left:solid 1px #333;
padding:5px;
color:#333;
width:auto;
}

.code {
border-style: solid ;
border-width: 1px;
padding: 20px;
position: relative;
border-color: #97A395;
background-color: #EAEDE6;
width: 440px;
border-radius: 10px 　　　　　・・・ここを追加
}

/* 投稿者 */
.posted{
font-size: 80%;
color: #333;
text-align: right;
margin-top:10px;
margin-bottom:5px;
padding:3px 3px 3px 5px;
}

見ての通り、dev styleタグ内の記述を、.codeクラスで指定しただけです。

改めて見てみると横幅に問題があったので、positionとwidthの指定で調整しています。

まとめ

今回の変更でHTMLやCSSのことを色々調べてみて、デザイン変更の奥深さを知りました。
自分好みに作り上げていくか、既存のテンプレートで済ますか、考え方は人それぞれだとは思いますが、あーでもないこーでもないと言いながら悩んで最後に納得の行くものができれば、やはりうれしいものです。

気になった問題点をその都度改善していけば、自分のスキルとして身につくし、ブログ自体も良くなるし愛着が湧いてきますね。