HTML&CSS
要素の中身が空の時に、スタイルを適応する（:empty）
要素の中身が何もない時だけスタイルを適応したい場合、中身が空なので、何も表示のしようがありません。ましてや、静的サイトでは永遠に空なので、そんな所にスタイルを適応しようとも思いませんよね？空の要素にはクラスを指定して、ブロック要素化したりすれば良いだけです。 しかし、少しプログラミングができるようになったり、WordpressなどのCMSを使用している場合には、空の要素を作成する可能性があります。 中身が空の時だけ反応する擬似セレクタ（:empty） まず、以下のサンプルを見...
CSSで要素にclass指定が無い時を指定する
通常、CSSを記述する場合、classを付けると思います。しかし、逆にclassがない時はどうでしょうか？ プログラムのif文では『○○に一致する時』『○○に一致しない時』がそれぞれ作れるのだから、きっとCSSにもそういうやつあるだろう ありました！ クラス指定がない場合を指定できる疑似クラス『:not([class])』 疑似クラスの:notはCSS3で追加されました。要素:not([条件])で、その条件に一致しない時を指定できます。 以下の記述で、クラスが何も指定されてい...
HTMLのimg要素をアスペクト比を固定して表示する方法
HTMLで画像を表示する時、サイズを調整すると思いますが、画像を並べて表示する時、width: 100%;だけでは元画像のサイズによって、高さがバラバラになってしまいます。 お知らせなどで、このようなレイアウトは良くありますが、width:100%;だけだとガタガタになってしまいますよね。しかし、heightを固定してしまうと、画像が縦に引き伸ばされて表示されてしまいます。 今回はこの画像の表示サイズを調整する技をご紹介します。 画像のアスペクト比を固定して表示する調整のやり...
CSSで疑似要素（::beforeと::after）を使いこなせば、新しい世界が見える
疑似要素（::beforeと::after）って使いこなせていますか？疑似要素はそれぞれの要素についてる『ボーナス』みたいな物です。疑似要素を上手に使いこなすことで、コーダーとして、１つステージが上がります。それでは、疑似要素で一体何が出来るのか紹介していきましょう。この記事を読み終わる頃には、疑似要素に対して『可能性しか感じなくなっているはず』です。 CSSの疑似要素（::beforeと::after）の基本的な使い方 疑似要素の::beforeと::afterですが、基本...
まだCSS使ってるの？SASS/SCSSでスタイルシートを構造化しよう
私はWEB制作会社に転職した際、一番最初に思ったことは『CSSぐちゃぐちゃやん！』でした。これには様々な原因があると思います。 社内のルールが作られていなかったCSSの汚染が考慮されていなかった当時の担当者のCSSの習熟度が低かったCSSのエラーを検出できないエディタを利用していた長期運用する中で、徐々に混迷を極めていった しかし、そもそもCSSってぐちゃぐちゃになりやすい、汚染されやすい構造になっていますよね。私はとにかくこの状況から早く脱出したかった。人が作ったぐちゃぐち...
画像を使わず、CSSだけで矢印を作る方法
ホームページでよく見かけるボタンには、文字の横に矢印が付いていることがありますよね？この矢印、画像ではなくCSSで作ることができるんです。 矢印を画像ではなく、CSSで作るメリット 「画像を使えば簡単じゃないか！」と思うかもしれませんが、CSSで矢印を作るメリットはたくさんあります。 レスポンシブデザインに対応できる CSSで記述すれば、文字や矢印の大きさはそのまま、画面幅に合わせてサイズが変わるボタンを作れます。まぁ、ボタン全体ではなく、矢印の所だけ画像にしたら同じようにな...
マウスを重ねた所以外をhoverで動かしたい
例えば、記事リンクにマウスを重ねた時、一部の文字色を変えたいとか、そういう時です。サンプルを見てもらうのが手っ取り早いでしょう。 子要素のスタイルを変化させる場合 See the Pen hover時、子要素を変化 by Uilou (@uilou754) on CodePen. hoverが発生した要素ではなく、hoverが発生した要素の子要素を変化させるパターンです。これは簡単なので、最初に子要素から説明していくことにしました。 重要なのはCSSの.link:hover ...
border-radiusで子要素がはみ出す時はoverflow:hidden;
CSSのborder-radiusを使う時、ボタンや画像の角を丸くすることもあれば、中にいろいろ要素の詰まったカードの角を丸くしたいことありますよね。全ての要素が中央部に密集していればいいのですが、ちょっと背景を塗り替えたり、縁にぴったりくっついた見出しをデザインしたい時、親要素にborder-radiusを指定していても、子要素がはみ出してしまうんですよね。 親要素にborder-radiusを付けても子要素がはみ出る 以下のサンプルを見てください。 See the Pen...
nth-childより、nth-of-typeを使おう
CSS設定してて、なんか思い通りにならない。nth-childが違う所を参照するんだけど！ってことないですか？nth-childは【同じタグ】ではなく【同じ親要素を持つタグ】に反応します。そのため、兄弟要素に違うタグが混じっていても、そいつもカウントしちゃうわけです。それって、ちょっと使いにくいですよね。同じタグだけで取りたい時は、nth-of-typeがオススメです！ nth-childは参照先がずれる See the Pen nth-child test by Uilou...
CSSだけで『流れ』を綺麗にレスポンシブに表現したい
ワークフローや流れの説明をCSSで作る時、まだ画像で作っていませんか？画像だと拡大縮小した時にボケるし、文字がどんどん小さくなっていって、潰れて読めなくなってしまいますよね。 そんな時に、CSSを使ってレスポンシブに表現する方法があります。 ワークフローにはリスト（ul, ol）を使おう 今回作るのは、以下のような画面幅が変わると、それに合わせて線が伸びるワークフローです。 See the Pen レスポンシブワークフロー by Uilou (@uilou754) on Co...