
Sponsored Link
CSS 角を丸くする
角を丸くする方法
共通 html
<div class="list">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
</ul>
</div>
基本 CSS
.list2 ul {
margin: 0; /* 余分なマージンを消す */
padding: 0;/* 余分なパディングを消す */
text-align: center;
}
.list2 ul li {
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0;/* liの高さを変えたい場合はこのpaddingを設定 */
}
.list2 ul li a {
display: block;
padding: 0 50px;/* ここで幅全体にリンクをつける事が出来る */
}
.list2 ul li a:hover {
background-color: #ccc;
}
基本 SCSS
.list2 ul {
margin: 0; /* 余分なマージンを消す */
padding: 0;/* 余分なパディングを消す */
text-align: center;
li {
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0;/* liの高さを変えたい場合はこのpaddingを設定 */
a {
display: block;
padding: 0 50px;/* ここで幅全体にリンクをつける事が出来る */
&:hover {
background-color: #ccc;
}
}
}
}
border-radius
Ex.1)四角を丸くする
.list2 ul li {
display: inline-block;
background-color: #f00;
padding: 10px;
margin: 10px;
/* ここで丸みを決める */
-moz-border-radius: 10px; /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px; /* CSS3 */
}
/* もしhover箇所も丸くする場合 */
.list2 ul li a:hover {
background-color: #ccc;
-moz-border-radius: 10px; /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px; /* CSS3 */
}
.list2 ul li {
display: inline-block;
background-color: #f00;
padding: 10px;
margin: 10px;
/* ここで丸みを決める */
-moz-border-radius: 10px; /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px; /* CSS3 */
/* もしhover箇所も丸くする場合 */
&:hover {
background-color: #ccc;
-moz-border-radius: 10px; /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px; /* CSS3 */
}
}
Ex.2)上だけを丸くする
.list2 ul li {
display: inline-block;
background-color: #f00;
padding: 10px;
margin: 10px;
/* 左から、左上・右上・右下・左下 */
-moz-border-radius: 10px 10px 0 0; /* 古いFirefox */
-webkit-border-radius: 10px 10px 0 0;/* 古いSafari,Chrome */
border-radius: 10px 10px 0 0; /* CSS3 */
}
例えば下だけ丸くする場合は、
border-radius: 0 0 10px 10px;
で指定すればいい。