 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今号のデザイン道場は、スタイルシートで矢印付きメニューを作る方法をご紹介します。
 |
|
 |
 |
HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。
●HTML
<a href="#" class="arrow">矢印付きメニュー</a>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
●矢印色
border-top: 2px solid #000000;
border-right: 2px solid #000000;
●文字色
color: #000000;
●スタイルシート
.arrow{
position: relative;
display: inline-block;
padding: 0px 0px 0px 16px;
color: #000000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before{
position: absolute;
top: 0;
bottom: 0;
left: 3px;
margin: auto;
content: "";
vertical-align: middle;
width: 8px;
height: 8px;
border-top: 2px solid #000000;
border-right: 2px solid #000000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.