CSSをより深く理解する、プロパティの値に無効な値を設定する（IACVT）とどのように処理されているのかを解説

2024/04/18 12 users プロパティ カスタムプロパティ CSS キーワー 解説

CSSで無効な値、たとえばcolor: 20px;のようにcolorプロパティにカラー値以外を設定したり、background-colorにカラー値以外をカスタムプロパティで設定したりすると当然その値は反映されません。 CSSにおいて値の処理がどのように実行されているのかを紹介します。無効な値だけでなく、値の上書き、値の継承、キーワー... 続きを読む

blockquoteのcite属性を使って引用元をユーザーに明示する | かちびと.net

2019/08/23 12 users blockquote RGBa italic padding

Result blockquoteのcite属性に書いた引用元を表示する、というもの サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です css blockquote { padding: 20px 20px 20px 40px; overflow: auto; background-color: rgba(180, 180, 180, 0.5); border-radius: 2px; font-style: italic; } b... 続きを読む

marginとline-heightによる"真の余白"について考える | SimpleIsm

2015/06/09 73 users コーダー margin line-height 余白 1px

まだまだWeb制作においては、デザイナーがデザインしたものをコーダーがコーディングする、というような流れが多いように思う。 デザイナーは1pxにもこだわる人たちなので、コーダーもそれに応えるように、きちんとデザイン通りに表現する。 余白の指示書などがあるとありがたい。例えば、「ここは20px、ここは40px、ここは60px」というような具合。デザイナーによっては、余白がそれぞれバラバラだったりして... 続きを読む

CSSで作る見出しデザイン | Web’Notes

2014/02/14 413 users CSS 見出しデザイン relative bold SOLID

見出しはサイトの見た目を決める上で重要な箇所です。 印象的な見出しは、それだけでサイトを引き立ててくれます。 今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。 .heading1{ position:relative; padding-left:20px; border-bottom:2px solid #ccc; font-weight: bold; ... 続きを読む

TEST CORDING » Sass:共通のプロパティをまとめる様々な方法をCSSと比較してみた

2012/10/17 3087 users Sass Orange font-size color CSS

今回のエントリーでは、 Sass による共通のプロパティや設定をどうまとめるかについて書いてみます。結局どうやって書くのが安定しているのか？ ということを試行錯誤する際に参考にしてみてください。 CSS 元となるCSSソース div.container h1 { color: orange; font-size: 20px; } div.container ul { font-size: 20px... 続きを読む

はてブの糞すぎるレイアウトをとりあえずどうにかするusercss - いさぢちんメモ

2011/04/06 53 users いさぢちんメモ charset important はてブ

はてなブックマークのエントリーページを改良しました - はてなブックマーク日記 - 機能変更、お知らせなど一覧性云々はともかく、エントリページがとにかく見難いので。@charset "utf-8";/* Name: はてブ*/div#container {min-width:0px!important;}.curvebox-body {padding-right:20px!important;}d... 続きを読む