CSSでGoogle Material Designのアイコンを利用する

2018年5月31日現在のGoogle Material Designのアイコンサイトには、&#xから続く文字コードはなくなっています。 そのため、そのままアイコン名を入力すれば表示されるようです。 例: div…

Read more

CSS : テーブルにhoverで縦横ハイライトする

CSSだけでテーブルの列(縦)もハイライトさせる サンプルはこちら。 See the Pen Cross Highlight Table by Kazuyoshi Goto (@KazuyoshiGoto) on Cod…

Read more

WordPress : レンダリングをブロックしている JavaScript/CSSへの対策

プラグインを使わないレンダリングブロック対策を紹介 WordPressサイト高速化のため「PageSpeed Insights」で診断して表示される、「レンダリングをブロックしている JavaScript/CSS」に困っ…

Read more

CSS : レスポンシブ対応の横スクロールするテーブルを作る

横長のテーブルをスマホなど狭い範囲で表示すると下の画像のように縦長になります。 これを回避してテーブル内で横スクロールを発生させることができます。以下サンプル。 See the Pen Responsive Table …

Read more

CSS : メディアクエリを使わずレスポンシブ幅に対応する

メディアクエリの記述を使わず、最もコンパクトにレスポンシブな幅指定する方法。 .hoge { width: 90vw; //スマホ時の幅 max-width: 800px; //PC表示時の幅 }  width: 90v…

Read more

レガシーなプロジェクトのJavascriptとCSSに対してwebpackを使う

レガシーなのでCSSは純粋なCSSとして出力したい ExtractTextPluginを使います。 module: { loaders: [{ test: /\.scss$/, loader: ExtractTextPl…

Read more

flexboxで要素を真ん中に寄せて並べる

justify-content: center;とjustify-content: space-between;を指定する場合の例 デモはこちら CSS .flex1 { display: flex; display: …

Read more

CSS:background指定をまとめる場合の注意

.bg { background-color: rgba(0, 0, 0, 0.3); background-image: url(“../img/bg.jpg”); background-repeat: no-repe…

Read more

Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。…

Read more

CSS:rgba指定を使わずに背景画像を透過する

<div class=”bgimage”>というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため…

Read more

CSSでテキスト選択中の背景色と文字色を変更する

::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #…

Read more

IE11とWindowsEdge用CSSハック

IE11 @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .クラス名 {     セレクタ } } Windows Edge @supports (-m…

Read more

スマホでのスクロールがスムーズではないときに設定するCSS

webページをスマートフォンで開いたときに、表示はおかしくないのにスクロールが遅いというか突っかかるような感じがするときは、以下のCSSをまずは設定してみるといいようです。 html { -webkit-overflow…

Read more

CSSだけでSVGをアニメーションさせる

こんにちは、ゴトーです。 ロゴにSVGアニメーションを利用しているサイトを最近たまに見るので、試したところJSを使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きましたが、この…

Read more

Webページを印刷するときの余白をCSSで設定する

webページを印刷する際指定しないと結構大きな余白がとられてしまいますので、余白なしに設定したい場合などは以下のように設定します。 @page { margin: 0; } ただし、印刷時の動作はブラウザによって大きく異…

Read more