カテゴリー: CSS

【拡大する】などのアンカー付きの文章に対して出来れば【】なしでCSSのみで装飾したい場合、cssのcontentタグです。

<span class=”kakko”>拡大する</span>

.kakko {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left:1em;
}
.kakko::before,
.kakko::after {
position: absolute;
content: ”;
width: 20px;
height: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kakko::before {
top: 0;
left: 0;
content:”【”;
}
.kakko::after {
top: 0;
left: 5em;
content:”】”;
}

レスポンシブサイト制作の際に角丸ボタンの配置がPCサイトではabsoluteで右上に設定しているのに、スマホサイトではabsoluteで下部中央だったのでちょっと悩みました。

そこでスマホサイトの角丸ボタンのCSS設定したメモ。

 #news_link {position:absolute; top:auto; right:0; bottom:30px; left:0; width:100%; text-align:center;}

#news_link a {     border-radius: 40px 40px 40px 40px;    display: block;    border: 1px solid #999;    width: 200px;    padding: 7px 0;    text-align: center;    font-size: 15px; margin:0 auto;}

ここでのミソは右と左のabsoluteが0であること（もちろん上下の中央をとりたいならtopとbottomを0にする）。
そしてmargin:autoをとっていること。

個人的にはあまり使うことない手法だったので、へ～と思った次第でした。
transform: translateで画面中央に配置するやり方もありますヨ。

背景色をrgbaで指定すると透過度合いも調節できます。

rgbaとは

rgbはWEBデザイナーならよく眼にする色の三要素　RGB（レッド・グリーン・ブルー）。

aはalpha（アルファ）透過具合の調整できる濃度。

background-color:rgba(110,36,0,0.5);

0.5＝透過具合50％
透過具合はこの数字が大きくなると透過されなくなるよ。
1は透過0％。0は透過100％。

地味によく使うのでメモ。

.kadomaru {
-webkit-border-radius: 5px;/* for Safari and Chrome */
-moz-border-radius: 5px; /* for Firefox */
-o-border-radius: 5px; /* for opera */
border-radius: 5px;
}

ブラウザ対応状況

Safari・Chrome・Firefox・operaに対応（IEは11から対応）

http://caniuse.com/#search=border-radius

コピペするだけでtableの装飾が出来るように置いておきます。
th部分だけ背景色がグレーです。

.table01 {
border-collapse: collapse;
margin-bottom:20px;
width:100%;
}
.table01 th,.table01 td {
padding: 10px;
border: 1px solid #ccc;
}
.table01 th {
font-weight: bold;
background:#ecebea;
}