From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../learn/css/howto/create_fancy_boxes/index.html | 305 +++++++++++++++++++++ .../learn/css/howto/generated_content/index.html | 88 ++++++ files/ja/learn/css/howto/index.html | 90 ++++++ 3 files changed, 483 insertions(+) create mode 100644 files/ja/learn/css/howto/create_fancy_boxes/index.html create mode 100644 files/ja/learn/css/howto/generated_content/index.html create mode 100644 files/ja/learn/css/howto/index.html (limited to 'files/ja/learn/css/howto') diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html new file mode 100644 index 0000000000..74d0b3b379 --- /dev/null +++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html @@ -0,0 +1,305 @@ +--- +title: 装飾的なボックスの作成 +slug: Learn/CSS/Howto/create_fancy_boxes +tags: + - Beginner + - CSS + - CodingScripting + - Learn +translation_of: Learn/CSS/Howto/create_fancy_boxes +--- +

CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。

+ +

実用的な側面に取り掛かる前に、CSS ボックスモデルに慣れていることを確認してください。 いくつかの CSS レイアウトの基本を熟知していることも賢明ですが、前提条件ではありません。

+ +

技術面では、装飾的なボックスの作成は、CSS の境界線と背景のプロパティの習得と、それらを特定のボックスに適用する方法についてのものです。 しかし、テクニックを超えてそれはまたあなたの創造性を解き放つことに関するすべてです。 それは1日で終わらないでしょうし、何人かのウェブ開発者はそれを楽しんで一生を過ごします。

+ +

私たちは多くの例を見ようとしていますが、可能な限り最も単純な HTML の部分、次の単純な要素に取り組むつもりです。

+ +
<div class="fancy">Hi! I want to be fancy.</div>
+ +

はい、それは HTML のごく一部ですが、その要素について何を調整できるのでしょうか？ 次のすべてです。

+ + + +

とても広い遊び場があります。 楽しく始めましょう。

+ +

ボックスモデルの調整

+ +

ボックスモデルだけで、単純な境界線の追加、四角形の作成など、基本的なことを行うことができます。 負の padding や負の margin、あるいはその両方を使用して、border-radius をボックスの実際のサイズよりも大きくすることによって、プロパティを限界にプッシュすると、面白くなり始めます。

+ +

円を作る

+ + + +

これはとてもシンプルでとても楽しいものです。 {{cssxref("border-radius")}} プロパティは、ボックスに適用される丸い角を作成するように作られていますが、半径のサイズがボックスの実際の幅と等しいかそれより大きい場合はどうなるでしょうか？

+ +
.fancy {
+  /* 円の中では、中央揃えのテキストは見栄えがよくなります。 */
+  text-align : center;
+
+  /* テキストが境界線に触れないようにしましょう。
+     テキストはまだ四角形の中を流れているので、
+     そのようにするときれいに見えて、
+     それが「本当の」円であるという感覚を与えます。 */
+  padding : 2em;
+
+  /* 境界線は円に見えるようになります。
+     背景は境界線の半径で切り取られるので、
+     背景を使用することもできます。 */
+  border : 0.5em solid black;
+
+  /* 正方形であることを確認しましょう。
+     正方形でない場合は、円ではなく楕円です。 ;) */
+  width  : 5em;
+  height : 5em;
+
+  /* そして正方形を円に変えましょう。 */
+  border-radius: 100%;
+}
+ +

はい、円ができます。

+ +

{{ EmbedLiveSample('Making_circles', '100%', '170') }}

+ +

Backgrounds

+ +

装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは background-* プロパティです。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。

+ +

いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。

+ + + + + +

さて、背景を楽しんでみましょう。

+ +
.fancy {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* 背景の積み重ねの一番下を、
+     霧のかかった灰色の単色にしましょう。 */
+  background-color: #E4E4D9;
+
+  /* カラーストリップエフェクトを作成するために、
+     線形グラデーションを重ね合わせます。
+     お気づきのとおり、
+     色のグラデーションは画像と見なされ、
+     そのように操作することができます。 */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}
+ +

{{ EmbedLiveSample('Backgrounds', '100%', '200') }}

+ +
+

グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、Lea Verou の CSS パターン（英語）を見てください。 こういったグラデーションの使用はかなり高くつきますが、パフォーマンス的に優れていることを忘れないでください。 グラデーションについてもっと知りたい場合は、気軽に専用記事にアクセスしてください。

+
+ +

疑似要素

+ +

1つのボックスを装飾するときに、自分自身が制限されていることに気付き、さらに素晴らしい装飾を作成するためにもっとボックスを追加したいと思うかもしれません。 ほとんどの場合、これは独自の装飾の目的で HTML 要素を追加することによって DOM を汚染することにつながります。 たとえそれが必要であっても、それはやや悪い習慣と考えられています。 そのような落とし穴を回避するための1つの解決策は、CSS 疑似要素を使用することです。

+ +

雲

+ + + +

ボックスを雲に変える例を見てみましょう。

+ +
.fancy {
+  text-align: center;
+
+  /* 以前に円を作るために使用したのと同じトリックです。 */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* 雲の「耳」のための場所を空けます。 */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* それで、私たちは雲の底を平らにしたいので、
+     実際に一周していません。
+     この例を気軽に微調整して、
+     底が平らでない雲にしてください。 ;) */
+  border-radius: 100% 100% 0 0;
+}
+
+/* これらは、::before 疑似要素と ::after 疑似要素
+   の両方に適用される共通のスタイルです。 */
+.fancy::before,
+.fancy::after {
+  /* これは、たとえ値が空の文字列であっても、
+     疑似要素の表示を許可するために必要です。 */
+  content: '';
+
+  /* 擬似要素をボックスの左右に配置しますが、
+     常に一番下に配置します。 */
+  position: absolute;
+  bottom  : 0;
+
+  /* これにより、疑似要素は、何が起こっても
+     ボックスのコンテンツの下になります。 */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.fancy::before {
+  /* これは雲の左耳の大きさです。 */
+  width  : 125px;
+  height : 125px;
+
+  /* 少し左に動かします。 */
+  left    : -80px;
+
+  /* 雲の底が平らに保たれるようにするには、
+     左耳の正方形の右下角を作る必要があります。 */
+  border-bottom-right-radius: 0;
+}
+
+.fancy::after {
+  /* これは右耳の雲の大きさです。 */
+  width  : 100px;
+  height : 100px;
+
+  /* 少し右に動かします。 */
+  right   : -60px;
+
+  /* 雲の底が平らに保たれるようにするには、
+     右耳の正方形の左下角を作る必要があります。 */
+  border-bottom-left-radius: 0;
+}
+ +

{{ EmbedLiveSample('A_cloud', '100%', '160') }}

+ +

ブロッククォート

+ +

擬似要素を使用するより実用的な例は、HTML の {{HTMLElement('blockquote')}} 要素のための素晴らしいフォーマットを構築することです。 それでは、少し異なる HTML スニペットを使った例を見てみましょう（デザインのローカライゼーションもどのように処理するかを見る機会を提供してくれます）。

+ +
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
+<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
+ +

それで、これが装飾です。

+ +
blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}
+ +

{{ EmbedLiveSample('Blockquote', '100%', '300') }}

+ +

すべて一緒に、他

+ +

ですから、これらすべてを混ぜ合わせると素晴らしいエフェクトを生み出すことができます。 ある時点で、そのようなボックス装飾を達成することは、CSS プロパティの設計と技術的使用の両方において、創造性の問題です。 このようにすることで、この例のようにボックスを生き生きとさせることができる錯視を作成することが可能です。

+ + + +

部分的なドロップシャドウ・エフェクトを作りましょう。 {{cssxref("box-shadow")}} プロパティを使用すると、内部光と平らなドロップシャドウ・エフェクトを作成できますが、ちょっとした追加作業で、擬似要素と {{cssxref("transform")}} プロパティを使用してより自然なジオメトリを作成することが可能になります。

+ +
.fancy {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.fancy::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}
+ +

{{ EmbedLiveSample('All_together_and_more', '100%', '100') }}

+ +

次は何ですか？

+ +

多くの点で、装飾的なボックスを作ることは主に背景の中に色と画像を追加することなので、色と画像の管理を掘り下げる価値があるかもしれません。 また、装飾的なボックス自体がより大きなレイアウトの一部でなければ、それ自体はまったく役に立ちません。 まだチェックしていないのであれば、レイアウトの基本を見てください。

+ +
 
diff --git a/files/ja/learn/css/howto/generated_content/index.html b/files/ja/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..add931f8d9 --- /dev/null +++ b/files/ja/learn/css/howto/generated_content/index.html @@ -0,0 +1,88 @@ +--- +title: Content +slug: Learn/CSS/Howto/Generated_content +tags: + - CSS + - 'CSS:Getting_Started' + - Getting_Started +translation_of: Learn/CSS/Howto/Generated_content +--- +
{{CSSTutorialTOC}}
+ +
{{previousPage("/ja/docs/CSS/Getting_Started/Color", "Color")}} これは CSS Getting Startedチュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。
+ +

コンテンツについて

+ +

CSS の重要な利点のひとつが、文書の体裁（style）と内容（コンテンツ）を切り離しやすくすることです。それでも、あるコンテンツを文書ではなく、スタイルシートに含めたほうがわかりやすいことがあります。

+ +

スタイルシートではテキストや画像から成るコンテンツを記述できます。コンテンツと文書の構造に強い関連があるとき、コンテンツをスタイルシート内に記述します。

+ +
+
さらに詳しく
+ +

スタイルシートでコンテンツを記述すると、面倒な話が生まれる可能性があります。例えば、文書の複数の言語版をスタイルシートを共有して作ることがあるかもしれません。これは、スタイルシートの部分的に訳すときには、その一部を別々のファイルにわけるとともに、適切な言語版の文書とリンクされるよう編集しなければならない、ということです。

+ +

この混乱は、コンテンツがすべての言語や文化で利用できる記号や画像で記述されていれば発生しません。

+ +

スタイルシート内に記述されたコンテンツは、DOMの一部にはなりません。

+
+ +

テキストコンテンツ

+ +

CSS で要素の前または後ろにテキストコンテンツを挿入できます。このためには、ルールを作って {{cssxref(":before")}} または {{cssxref(":after")}} をそのセレクタに追加します。宣言部分には、specify the {{cssxref("content")}} プロパティと、その値としてテキストコンテンツを記述します。

+ +
+
例 +

HTML

+ +
A text where I need to <span class="ref">something</span>
+ +

CSS

+ +
.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference ";
+}
+ +

結果

+ +

{{ EmbedLiveSample('Text_content', 600, 30) }}h3

+
+
+ +
+
さらに詳しく
+ +

スタイルシートの文字セットのデフォルトは UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定できます。CSS Specification の 4.4 CSS style sheet representation をご覧ください。

+ +

文字を、バックスペースによるエスケープ機構を使って記述することもできます。例えば、\265B はチェスの黒クイーンの記号 ♛ です。詳しくは、Referring to characters not represented in a character encoding と CSS Specification の Characters and case をご覧ください。

+
+ +

画像コンテンツ

+ +

要素の前や後ろに画像を追加するには、{{cssxref("content")}} プロパティの値として画像ファイルの URL を記述します。

+ +
+
例
+ +

このルールは glossary を持つすべてのリンクの後ろに、空白文字とアイコンを追加します:

+ +

HTML

+ +
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
+ +

CSS

+ +
a.glossary::after {
+   content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif");
+}
+ +

結果

+ +

{{ EmbedLiveSample('Image_content', 600, 40) }}

+
+ +

次は何?

+ +
{{nextPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} スタイルシートでコンテンツを追加し、リストの項目に印をつけることがよくあります。次の章では リスト要素のスタイル記述 について述べます。
diff --git a/files/ja/learn/css/howto/index.html b/files/ja/learn/css/howto/index.html new file mode 100644 index 0000000000..2ecbac3e25 --- /dev/null +++ b/files/ja/learn/css/howto/index.html @@ -0,0 +1,90 @@ +--- +title: CSS を使ってよくある問題を解決する +slug: Learn/CSS/Howto +tags: + - Beginner + - CSS + - Learn +translation_of: Learn/CSS/Howto +--- +
{{LearnSidebar}}
+ +

以下のリンクは CSS で解決できるよくある問題の解決法です。

+ +

よくある使用例

+ +
+
+

基本

+ + + +

CSS とテキスト

+ + +
+ +
+

ボックスとレイアウト

+ + +
+
+ +

まれで高度なテクニック

+ +

CSS ではとても高度なデザインテクニックも利用できます。これらの記事は、複雑な使用例を解き明かします。

+ +

一般的

+ + + +

高度なエフェクト

+ + + +

レイアウト

+ + + +

関連情報

+ +

CSS FAQ — さまざまなトピック: デバッグからセレクタの使い方まで。

-- cgit v1.2.3-54-g00ecf