css

記事ランキングの順位マークをcssのみで実装する

2018/01/29   css

サイドバーによく配置される人気記事ランキング。順位のマークを付けるとわかりやすく、見た目もよくなります。 下記の画像のような順位マークはcssのみで実装できるので、その方法を紹介します。 ランキングマ …

ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!

2018/01/24   css

画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。でもこの%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。 そんなときに使 …

クリックで表示・非表示の切り替えができるボックスをcssのみで実装する

2018/01/11   css

目次やアコーディオンメニューなどでよく見る、クリックしたら表示されるコンテンツをcssのみで実装する方法の紹介です。 ネタバレを隠したりするのにも使えます。 クリックで表示切替ボックスの実装方法 デモ …

cssのクラスは複数設定できる!よく使うクラスを登録して使いまわそう

2017/12/30   css

WordPressを使い始めたとき、クラス指定のところにあるスペースは一体なんだ?と思ったことがあります。 調べてみると、スペースで区切ることで複数のスタイルを指定できるということらしい。 同じスタイ …

floatより簡単、きれいに横並びレイアウトできるdisplay:tableについて

2017/12/28   css

横並びレイアウトを作るものとして、tableやfloat以外にdisplay:tableというのがあるのを最近知りました。 floatだとディスプレイサイズを変えた時のレイアウト崩れが厄介だったりしま …

cssのみで画像の縮小や切り抜きができるobject-fitプロパティ

2017/12/27   css

object-fitプロパティを使うと、cssのみで画像の縮小や切り抜きができるようになります。 object-fitプロパティ object-fitプロパティで指定できる値は5つあります。 こちらの …

サーティワンアイスクリームみたいな色見本

2017/12/09   css

カラフルポップなサーティワンのアイスクリーム。 にぎやかな配色を探している方におすすめです。 サーティワン風色見本 定番フレーバーのカラーコード 定番のフレーバーをイメージしてカラーコードを集めました …

Copyright© ニケッチャニッキ , 2017-2018 All Rights Reserved.