CSS

CSS

よくわかる、CSSでn個目系を指定する擬似クラスの解説

CSSでn個目系を指定する機会は多いのに、出てくるたびにググってる気がしたので、備忘録としてまとめました。 n個目系擬似クラスの種類 要素の何番めかを指定する擬似クラス(ここでは勝手に「n個目系」と呼びます)には、以下の種類が...
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日に追記しまし...
スポンサーリンク
タイトルとURLをコピーしました