知っておくと便利!ちょっとのコードで書ける役立つcssの小技集

知っておくと便利!ちょっとのコードで書ける役立つcssの小技集

今回は、現場で常に使うわけではないけど、知っておくと便利で使える簡単なCSSのコードを紹介します。文字に装飾したりとかが多めです。

Ads

リンクテキストをタップした時の色を変更

a{
-webkit-tap-highlight-color: #FF0
}

これで、iOSでタップしたときの色を変更できます。

-webkit-tap-highlight-color:rgba(0,0,0,0);

ちなみに、上記のように書くとハイライトカラーを無効化できます。Androidだと無効化は同じ記述でできるみたいですが、ハイライトカラーを変更することが出来ないみたいですね。どうしてもやりたい場合はjQueryでごにょごにょするしかなさそうです。

ブロック要素をpre化して、半角英数字を入力するとボックス要素をはみ出す現象にも対応

.hoge{
white-space:pre-line;
word-wrap: break-word;
}

これ結構使う機会多いんですよね〜。管理画面で投稿して、ユーザー側に表示って時に使ったりとか。覚えておくと便利。

テキストを選択する時の色を変更

::selection {
  background-color: #cf9;
  color: #000;
}

/* Firefox */
::-moz-selection {
  background-color: #cf9;
  color: #000;
}

対応ブラウザはChrome、Safari、Firefox、Opera、IE9+です。業務ではあまり使う機会はないかもな〜

蛍光ペンで線を引いたような効果

.hoge{
  background: linear-gradient(transparent 40%, #ff9 40%); 
}

インライン要素にクラスで適用って感じですね。

長いテキストを「…」で省略する

.hoge{
  width: 320px;
  height:40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

番号リストの表現を変更

li {
  list-style: none;
  counter-increment : chapter;
}
li:before {
  content : "第" counter(chapter) "問";
  padding-right: 10px;
} 

当ブログのサイドメニューのランキングもこれで表示しています。これは便利ですよ〜

テキストリンクのエフェクト

a{
  color: #03c;
  transition: 0.5s;
}
a:hover {
  color: #3cf;
}

まさに小技。ぼわーんってテキストの色が変わります。

先頭の文字を大きく

.hoge:first-letter {
  float: left; 
  color: #693;
  font-size: 55px;
  line-height: 50px;
  padding-right: 8px;
}

DTPでもよく見かけるアレですね。CSSだけで簡単に表現できちゃいます。

cssで正円形

.hoge{
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;/* 50%でもOK */
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #999;/* 円の色 */
}

きれいな正円はこれで完璧!!

背景画像をブラウザいっぱいに表示する

body {
  background: url(background-photo.jpg) center center cover no-repeat fixed;
}
@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

よく見かけるやつですね。以外に簡単に実装できます。

まとめ

今回は、僕がストックしているcssのコードをいくつか紹介しました。結構使えるものがあるんじゃないかな〜と思います。困ったときにぜひぜひ使ってみてくださいね〜。

いいなと思ったらシェアお願いします

同じタグで検索

同じカテゴリーの記事

Ads
ページの先頭へ