12月
3

点線を使ã£ãŸä¸‹ç·šã‚’引ã„ã¦ãƒŽãƒ¼ãƒˆã®ã‚ˆã†ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹CSS

By admin  //  デザイン  //  No Comments
本æ¥ã€ãƒªãƒ•ァレンスよりã“ã†ã„ã£ãŸã‚‚ã®ã®æ–¹ãŒèª­ã‚“ã§ã„ã¦æ¥½ã—ã„ã¨æ€ã†ã—書ãã»ã†ã‚‚書ã甲æ–ãŒã‚る。
ã•ã¦ã€CSSã ã‘ã§ã‚‚ãれã„ãªãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã§ãã¾ã™ã€‚
今回ã¯ä¸‹ç·šã‚’点線ã«ã—ã¦ãƒŽãƒ¼ãƒˆã®ã‚ˆã†ãªæ„Ÿã˜ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹ãŸã‚ã®CSSを紹介ã—ã¾ã™ã€‚
å…¨ã難ã—ã„ã‚‚ã®ã§ã¯ãªãã€CSSã®borderã¨ã„ã†ãƒ—ロパティを使ã†ã ã‘ã®ç°¡å˜ãªæ–¹æ³•ã§ã™ã€‚

点線を使ã£ãŸä¸‹ç·šã‚’引ã„ã¦ãƒŽãƒ¼ãƒˆã®ã‚ˆã†ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹

使ã†CSSã¯border-bottom。
下線ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’dottedã‚„dashedã«ã™ã‚‹ã ã‘ã§ã™ã€‚
dottedã¯ç‚¹ç·šã§è¡¨ç¾ã•れã€dashedã¯å°‘ã—æ¨ªé•·ã®ç‚¹ç·šã§è¡¨ç¾ã—ã¾ã™ã€‚
※詳ã—ãã¯æž ç·šã®ã‚¹ã‚¿ã‚¤ãƒ«ã€å¤ªã•ã€è‰²ã‚’ã¾ã¨ã‚ã¦æŒ‡å®šã™ã‚‹”border”プロパティ
ã¾ãšã¯ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã¯ã“ã®ã‚ˆã†ã«æŒ‡å®šã—ã¾ã™ã€‚
/*スタイル1*/
div.note1
{
border-bottom:1px dotted #666666;
}
/*スタイル2*/
div.note2
{
border-bottom:1px dashed #666666;
}
スタイル1
<div class="note1">コンテンツ1</div>
<div class="note1">コンテンツ2</div>
<div class="note1">コンテンツ3</div>
<div class="note1">コンテンツ4</div>
<div class="note1">コンテンツ5</div>

スタイル2
<div class="note2">コンテンツ1</div>
<div class="note2">コンテンツ2</div>
<div class="note2">コンテンツ3</div>
<div class="note2">コンテンツ4</div>
<div class="note2">コンテンツ5</div>
ã“れらを実際ã«ãƒ–ラウザã§ç¾ã™ã¨ã“ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚
スタイル1
コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5


スタイル2
コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
ç°¡å˜ã§ã™ãŒã€ã“ã†ã„ã£ãŸç´°ã‹ã„部分ãŒãƒ‡ã‚¶ã‚¤ãƒ³ã‚’å·¦å³ã—ã¾ã™ã€‚
シンプルã ã‘れã©ä½¿ãˆã‚‹CSSデザインã§ã™ã€‚
例ãˆã°ã“ã‚“ãªæ„Ÿã˜ã§ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã«ä½¿ã£ã¦ã¿ã‚‹ã¨ã„ã†æ‰‹ã‚‚ã‚りã¾ã™ã€‚
メニュー1
メニュー2
メニュー3
メニュー4
メニュー5
ãŠã„ã—ãã†ãªé£Ÿäº‹ã®å†™çœŸ

Leave a comment

↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“

人気ã®è¨˜äº‹