「CSS」カテゴリーアーカイブ

(158) display: gridで簡単に縦横センタリングする。

【1】やりたいことブロック要素内のテキストを、領域内の中央に表示したい。 div, section, p等のブロック要素の中に表示するテキストを、領域内の中央に表示したいのだ。つまり… 上下左右中央に表示… 続きを読む »

【1】やりたいこと Webページ上に表を表示する手段はいくつもあるが、 flex: grid を使うと非常に楽なのだとか。ぜひこれを使って楽をしてみたい。参考： MDN グリッドレイアウトの基本概念【2】やっ… 続きを読む »

【1】やりたいこと Webページ上で数字を並べると、Webブラウザによってはそれを電話番号と認識してハイパーリンクを自動生成してしまう。今回は iPad版 Safari でこれが発生していたため、これを封じることに… 続きを読む »

【1】やりたいこと <a>タグの上にマウスを置いた時に、その外枠の色を変えたい。このときに、外枠の色を 0.5秒かけてじんわりと変化させたい。【2】やってみる以下、Sassで書く。 3行目の trans… 続きを読む »

1. やりたいこと画面上の非矩形な領域をマウスホバーした時に、何らかの反応をさせたい。 2. やってみる方法1 : ベクタ画像データを使う下記コードの実装例はこちら。 https://www.dogrow.net/… 続きを読む »

1. やりたいこと文字色をグラデーションさせたい。画像を用意せず、CSSだけでこれを実現したい。 2. やってみる (1) シンプルに赤→青 (0度) 文字の下側の矩形領域は、文字背景に使っているグラデーションを確認… 続きを読む »

1. やりたいこと text-decoration: underline で下線を引くときに下線の太さと文字から下線までの距離を自由に変えたい。 2. やってみる簡単だった。 3. 参考情報こちらのサイトには… 続きを読む »

ToDo: 詳細は後日追記する。 1. 問題発生作成中のページをスマホで見ていたら意図せず水平スクロールしてしまった！原因を探ると… どうやら、長いURL文字列がブロック要素の右端を突き抜けて、親要素の… 続きを読む »

1. 問題発生 divタグを上下に並べて書いた。上側の divは白い背景で、中に画像を置いた。下側の divは黒い背景だ。すると… 両者の間に謎の余白が出現してしまった… この余白を消した… 続きを読む »

1. やりたいこと任意の要素だけ、スクロール可能だがスクロールバーは非表示にしたい。 2. やってみる CSSで実現できる。ここでは SCSSで記述する。現時点で当該機能は WEBブラウザ独自実装のため、WEB… 続きを読む »