はじめに CSSにはcontentというプロパティがあります。 沢山のWebデザイン入門のような本やサイトで、装飾として紹介されています。たとえば、h1タグに適用して、おしゃれなラベルを実現したり、タグの前に記号を入れてちょっとオシャレにできたりします。::beforeや::afterなどの擬似要素と一緒に使うことが多いと思います。サイトをオシャレに、カッコよくするテクニックとしては全然使ってOKだと思います。 ただし、文字列は入れないでください。 例えば,
![【CSS】contentで文字列入れるのだけはやめてください - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/be56b3744a0cfb41ea877b8dbae50d79a196d886/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwQ1NTJUUzJTgwJTkxY29udGVudCVFMyU4MSVBNyVFNiU5NiU4NyVFNSVBRCU5NyVFNSU4OCU5NyVFNSU4NSVBNSVFMyU4MiU4QyVFMyU4MiU4QiVFMyU4MSVBRSVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBRiVFMyU4MiU4NCVFMyU4MiU4MSVFMyU4MSVBNiVFMyU4MSU4RiVFMyU4MSVBMCVFMyU4MSU5NSVFMyU4MSU4NCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9NzQ0NzU0MWFhNTc2MmUyZWI5MWYzMTAxNzUyNDc5NDY%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwbXVfdG9tb3lhJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iNjM3NzMwYjI5YWIzOTYxOGY1MTc4MDBiMzM2YzMyZg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D6ce8b1f7fd402c9b3e858e1251428b96)
「ベルベットのような優しいピーチトーンで、すべてを包み込み、心、体、魂を豊かにする」と説明されています。多様な感性を受け入れたり、実際に人と会ってつながりたいという願望を表すような、優しさやぬくもりを感じる色ですね! 色の具体的な数値は以下の通り: PANTONE:13-1023 Peach Fuzz カラーコード:#FFBE98 RGB:R255, G190, B152 グッズも販売されています 「Peach Fuzz」カラーのグッズいろいろ!お気に入りの色で生活環境を彩ってみては? スニーカー US$89〜|購入する ホワイトティー(茶葉) US$38|購入する マグカップ US$30|購入する ノート US$20|購入する キーチェーン US$12|購入する その他、公式サイトでは様々なグッズが紹介されています。閲覧しているだけでワクワクしちゃいますね! 「Peach Fuzz」のよ
2023年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです! これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 無料版で使ってみたらいい感じだったので、有料版を購入しました。 かもめ明朝 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 築地二号系で昭和初期に作られたであろう金属活字にインスパイアされて作成されたフォント。ひらがな・カタカナ・約物、漢字は4文字だけ収録されています。 フリーフォントのダウンロードは、サイドバーの「無料ダウンロード」から。 202
CSSのこの機能を待っていた人も多いと思います! CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く