HTML&CSS
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...
【CSS設計】BEMで汚染が発生しにくい差分スタイル
CSSを触っていると「このスタイルの色違いが欲しいな」とか「同じ色で角丸になれば良いのに」って思うことありますよね？そういう時、安易に色名だけのクラスを作りがちですが、そういう単純な名前だと他のクラスと名前がかぶってしまうことがあるんですよね。しかも、複数人で編集している時はなおさらです。 CSSの汚染発生例 でも、例えば以下の実装をした時は容易にCSSの汚染（意図していない場所のスタイルに影響を与えること）が発生します。 See the Pen CSS汚染01 by Uil...