QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

角丸の枠編

角が丸い枠を画像を使用しないでCSSだけで作成します。２つのサンプルを用意しましたが、２つともCSSは少し違いますが同じ方法で角丸を実現しています。
これは、結構複雑なCSSなのでプラグインにしたほうが使いやすそうですね。気が向いたらプラグインでも作成します。

◆注意
枠内には利用できないおまじないも一部あります。また、たまに一部が欠けたりする場合もありますので、自己責任でお使いください。

サンプル１

コード

#beforescript{{
<style type="text/css">
   /* Snazzy Borders - http://www.cssplay.co.uk/boxes/snazzy.html */
   #xsnazzy { background:transparent; margin:1em; padding:0; }
   #xsnazzy .h, #xsnazzy p { margin:0; padding:10px 15px; line-height:2em; }
   #xsnazzy .h { font-size:1.5em; color:#60c8d8; padding-bottom:0; font-weight:bold; }
   #xsnazzy .xtop, #xsnazzy .xbottom {display:block; background:transparent; font-size:1px; }
   #xsnazzy b { display:block; overflow:hidden; }
   #xsnazzy .xb1, #xsnazzy .xb2, #xsnazzy .xb3 {height:1px; }
   #xsnazzy .xb2, #xsnazzy .xb3, #xsnazzy .xb4 {background:#f2f9fd; border-left:1px solid #c8ebf9; border-right:1px solid #c8ebf9; }
   #xsnazzy .xb1 { margin:0 5px; background:#c8ebf9; }
   #xsnazzy .xb2 { margin:0 3px; border-width:0 2px; }
   #xsnazzy .xb3 { margin:0 2px; }
   #xsnazzy .xb4 { height:2px; margin:0 1px; }
   #xsnazzy .xboxcontent { display:block; background:#f2f9fd; border:0 solid #c8ebf9; border-width:0 1px; }
</style>
}}

#html2(<div id="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><div class="xboxcontent">)
&size(24){''角丸の枠''};は使いたい人がけっこう多いのではと思っています。
どうですか？
&color(,yellow){''角丸の枠内にはおまじないが利用できます。''};
QHMの特徴
-HTMLの知識は不要
HTMLをまったく知らなくてもホームページが作成できます。ブログ感覚で作成できます。
-QHMはサーバにインストール
ホームページビルダーなどと違い、QHMはサーバにインストールします。インターネットに接続できればどのパソコンからでも更新できます。WindowsやMacから利用できます。

こんな感じで利用できます。
#html2(</div><b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div>)

サンプル２

コード

#beforescript{{
<style type="text/css">
#container2{
margin: 0 10%;
background: lightblue;
}
b.rtop, b.rbottom{
display:block;
background: white;
}
b.rtop b, b.rbottom b{
display:block;
height: 2px;
overflow: hidden;
background: lightblue;
}
b.rtop b.r4, b.rbottom b.r4{
margin: 0 1px;
height: 2px;
}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
p{padding: 10px;}
h1{padding: 10px;}
</style>
}}

#html2(<div id="container2"><b class="rtop"><b class="r1"></b><b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>)
&size(24){''角丸の枠''};は使いたい人がけっこう多いのではと思っています。
どうですか？
&color(,yellow){''角丸の枠内にはおまじないが利用できます。''};
QHMの特徴
-HTMLの知識は不要
HTMLをまったく知らなくてもホームページが作成できます。ブログ感覚で作成できます。
-QHMはサーバにインストール
ホームページビルダーなどと違い、QHMはサーバにインストールします。インターネットに接続できればどのパソコンからでも更新できます。WindowsやMacから利用できます。

こんな感じで利用できます。
#html2(<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>)

おまけ 角丸BOXのプラグイン作成中

box2というプラグインを作成してみました。
角丸のBOXは以下のパラーメタを指定します。
まだサイズ指定ができていませんが、色の指定はできます。
サイズ指定ができないので、このDIVの外でサイズ指定した枠を設定します。

あんれ？　色が変わらない変わらない？？？？？？　なぜ？

#box2(枠線の色,背景色){{
(ここに情報)
横幅は、%またはpxの指定を行う予定です。
}}

#html2(<div style="width:300px;">)
#box2(#ffff99,#ffffcc){{
''これは#box2です''
-これは#box2です

 :省略

}} 
と入力しています。
#html2(</div>)

ご意見箱

皆様のご意見をお待ちします。

当ページは役に立ちましたか？