CSS3 数値を演算で演算して指定する widthやleftなど100%で書きたいもののそこから10ピクセル引いた値を使いたいときなど、意外とコーディングするときに発生します。 そんなときは以下のように指定することができます。 [[width : calc(100% - 10px) ;]] こう指定するとこで100%の幅から固定で10px差し引いた横幅になりま... 2019-08-07 20:59:19
CSS3 震える表現 画像や文字がアニメーションすると、どうしても見てしまいます。 縦と横それぞれに揺らす表現は以前紹介しました。 縦と横の動きを混ぜることで、シャッフ... 2019-07-29 05:10:08
CSS 印刷のときに非表示 ウェブページを印刷するときに、表示する要素を出し分けます。 使い所はそんなにないのですが、印刷する時に一部の画像や要素を非表示にしたい場合のCSSのサンプルです。 画像の高さを維持して、画像だけ真っ白にする場合... 2019-07-28 16:45:54
CSS floatとheightとtopの50% CSSでfloatを使うとよく、高さを指定する部分で謎にハマってしまうことがあります。 そもそもこういう風にfloatは使わないよ、と言われてしまいそうですが、... 2019-08-07 17:50:50
CSS3 ウィンドウサイズ変更でアニメーション ウィンドウのサイズが変わった時にアニメーションでレイアウトを変えたいときに使う表現です。 MediaQueryを使ってウィンドウサイズによってレスポンシブに変... 2019-07-29 05:49:53
CSS positonのabsoluteとrelative cssのpositionのabsoluteやrelativeはよく使うわりに、使わないと忘れて混同しがちです。 staticはデフォルト値で、fixedはインパクトが強くて忘れないし、ど... 2019-08-07 16:59:43
CSS 吹き出し CSSのみで吹き出し(バルーン)を作るサンプルです。 SVGで作る方法もありますが、CSSなので比較的とっかかりやすい印象です。 また、画像を作成する手間... 2019-08-07 00:08:50
CSS 初めてのCSS CSSとは HTMLのページにおいて、色や背景、画像や罫線などデザイン的な要素の表現をする時に使用します。 前提として、HTMLの基本的な知識が必要です。 高度... 2019-08-07 00:02:55
CSS 覚えておくと便利なセレクタ 要素内の最初の子要素 [[要素名:first-child {color:white;}]] 要素内の2番目の子要素(CSS3) [[要素名:nth-of-type(2) {color:white;}]] 要素内の最... 2019-08-06 23:02:41
CSS3 陰影 外側に影をつける [[ box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 10p... 2019-08-05 23:06:06