CSS よくわかる、CSSでn個目系を指定する擬似クラスの解説
CSSでn個目系を指定する機会は多いのに、出てくるたびにググってる気がしたので、備忘録としてまとめました。
n個目系擬似クラスの種類
要素の何番めかを指定する擬似クラス（ここでは勝手に「n個目系」と呼びます）には、以下の種類が...
CSS
CSS 
CSS コピペでOK！画像を使わずCSSで三角形をつくる方法×2
以前なら三角形は画像一択でしたが、単純な三角はCSSで表現が可能です。三角形のジェネレーターも存在しますが、今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。
1.塗りつぶしの三角形
まずは、塗りつぶしの...
CSS 画像下揃えでテキストを回り込ませる方法
ある日、支給されたデザインを確認したときに画像とテキストが下揃えになったテキスト回り込みに出会いました。普通floatでテキストを回り込ませると上の図のように、画像が浮くことでそこにテキストが回り込み、画像の高さ分を超えたテキストは幅いっ...
CSS エリアの比率を変えずに可変させる方法
レスポンシブ対応に必須の、エリアの縦横比を維持したまま可変させる場合の計算方法を紹介します。
今回は、一般的な写真サイズ（L版）と同じ比率のエリアにいらすとやさんからお借りした正方形の風景イラストをエリアいっぱいに表示させたいと思い...
CSS CSSで画像をトリミングする
画像を使い回したいけど、場所によって比率が異なるときなど、CSSで画像トリミングができると便利です。
今回は、背景画像の場合と、imgタグの場合のトリミング方法をまとめました。
元画像はこちら（hamarikyu.jpg）
...
CSS liタグを複数列で縦並びさせたいとき、超絶簡単な方法があった！
liタグを、縦並びで、複数カラムで表示したいときの方法です。言葉だけではうまく伝えられないので、さっそく紹介していきます。
方法1、2とも、HTMLは共通です。山のラインナップの偏りはスルーしてください。。
【方法1】...
CSS aタグをリンクさせたくないとき、CSSで解決できる
とりあえずリンクは設置するけれど、期日が来るまでリンクを無効にしたいときのための良い方法がありました。
CSSの「pointer-events」で設定
HTML
CSS
プレビュー
リンクしな...
CSS iOSでスクロールバーが出ない時の対処法
スクロールさせるレイアウトの場合、
高さを固定してはみ出した分は
HTML
CSS
とすればスクロールバーが表示される仕組みです。
ところがタッチデバイスの場合はスクロールバーが表示されず
...
CSS 文章の改行位置をbrタグ以外で設定する方法
一時期、brタグ以外で改行したくて、方法を探していました。あまり使いどころないかもしれませんが、カンタンだったので紹介します。
疑似要素を使って改行
文章の改行位置をbrタグ以外で設定するには、spanタグに擬似要素を設定して...
CSS tableタグに関するあれこれ備忘録【応用編】
tableタグを使う機会が多々あるので、以前tableタグに関する基本あれこれ備忘録という記事を書きました。
今回は更に応用編として、（自分的に）新しい小ワザをまとめました。
※2018年2月8日に追記しまし...