ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

css

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

css

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

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

css

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

表示を確認しながらスタイル設定ができるツールCSS Explorer

css

CSS Explorerは表示を確認しながらスタイルの微調整ができる便利なツールです。 border-radiusとかbox-shadowとか、どのくらいの値にしたらどのくらい変化するのかって最初の頃はイメージしづらいと思うんですが、このツールがあれば余裕です。 CSS Explorer…

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

css

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

1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法

css

FontAwesomeは絵文字のようなウェブフォントです。 画像ではなくテキストとして表示されるので、色やサイズをテキストと同じようにcssで設定できます。 ←標準 ←小さくしたり ←大きくしたり色を変えたり FontAwesomeの導入方法 FontAwesomeはダウンロードして…

コピペでOKプラグインなし!押したくなる…かもしれないシェアボタン

css

アイキャッチ画像を背景に使ったシェアボタンボックスを作ってみました。 イメージ画像 シェアボタンの作り方 HTML FontAwesomeを既に導入している方はそのままコピペでOKです。 FontAwesomeの導入がまだの方はこちらの記事に導入方法を書いてるので、参考に…

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

css

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

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

css

object-fitプロパティを使うと、cssのみで画像の縮小や切り抜きができるようになります。 object-fitプロパティ object-fitプロパティで指定できる値は5つあります。 こちらの150×180の画像を200×100のスペースに表示すると次のようになります。 object-fit:…

スクロールしても固定表示されるサイドバーで誤作動が1番少なかったのはこれ!

css

サイドバーを固定する方法を色々なサイトで調べて試してみたのですが、そのほとんどが何かしら誤作動するものばかりでした。 途中でサイドバーが消えてしまったり、サイドバーの横位置がずれたり幅が変わってしまったり、固定する範囲がおかしくなったり。 …

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

css

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

マカロンカラーの色見本

css

マカロンカラーの色見本 色とりどりのマカロンをイメージした色のコード一覧です。 ポップなイメージに仕上げたい方におすすめです。 カラーコード一覧 ミント #8FD2ED ブルーベリー #BAA0CA カシス #D580A6 フランボワーズ #E88E9F オレンジ #F6BA94 マンゴ…

ミルクペイントっぽい色見本

css

ターナーのミルクペイントをご存知でしょうか。 アンティークな風合いが手軽に出せる、DIY女子に大人気のペンキだそうです。 出展:RoomClip くすんだ感じの風合いがとても素敵です。 今回はこのミルクペイントっぽい色のコードを一覧にしてみました。 ミル…

cssコピペで作るマスキングテープ風ボックス(飾り枠)

css

マスキングテープで貼られたメモ帳のようなボックス(飾り枠)をcssコピペだけで導入する方法です。 テープ上に表示される文字も自由に変更できます。 またテープの色やメモの背景色もcssで簡単に変えることができますよ。 コードの書き方 css .mastebox { pos…

おしゃれなサイトを作る!まずは3か所変えてみよう

css

サイトのデザインをおしゃれに変えたいなと思っている方に、まずはここを変えるだけでかなり雰囲気がかわりますよという提案です。 WordPressの有料テーマを使わなくてもかわいいサイトは作れます♪ カスタマイズを楽しみたい人はシンプルなSTINGER8がおすす…

GoogleAdsenseの黄色い背景色を消す

css

GoogleAdsenseのインフィード広告を設定したページを開くと、広告が表示されるスペースが一瞬薄い黄色で表示される現象が… それだけならまだいいのですが、広告の画像サイズによっては広告表示後も画像の周りが薄い黄色になってしまう現象が起こりました。 …