mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-31 02:20:14 +02:00
日本語訳ファイルの修正
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# テラリウムプロジェクト その2: CSS 入門
|
||||
|
||||

|
||||

|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レッスン前の小テスト
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
CSS (カスケードスタイルシート) は、Web 開発の重要な問題である、Web サイトの見栄えを良くする方法を解決します。また、CSS を使用してレスポンシブ ウェブ デザイン (RWD) を作成することもできます。CSS の仕様には、アプリケーションの洗練されたインタラクションを可能にするアニメーションや変換が含まれています。CSS Working Group は現在の CSS 仕様の維持を支援しており、[World Wide Web Consortium のサイト](https://www.w3.org/Style/CSS/members) でその活動を追うことができます。
|
||||
|
||||
> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](caniuse.com) に相談して実装を確認してください。
|
||||
> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](https://caniuse.com) を参照して実装を確認してください。
|
||||
|
||||
このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。
|
||||
|
||||
@@ -37,13 +37,13 @@ CSS (カスケードスタイルシート) は、Web 開発の重要な問題で
|
||||
|
||||
インラインスタイル "color: red" を `<h1>` タグに追加します。
|
||||
|
||||
```HTML
|
||||
```html
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
次に、以下のコードを `style.css` ファイルに追加します。
|
||||
|
||||
```CSS
|
||||
```css
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
@@ -61,7 +61,7 @@ h1 {
|
||||
|
||||
body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。
|
||||
|
||||
```
|
||||
```css
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
@@ -69,7 +69,7 @@ body {
|
||||
|
||||
ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。
|
||||
|
||||

|
||||

|
||||
|
||||
✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか?
|
||||
|
||||
@@ -81,7 +81,7 @@ body {
|
||||
|
||||
これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。
|
||||
|
||||
```
|
||||
```css
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
@@ -94,12 +94,11 @@ h1 {
|
||||
|
||||
このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。
|
||||
|
||||
### Id
|
||||
### id
|
||||
|
||||
Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`:
|
||||
左と右のコンテナをレイアウトするためのスタイルを追加します。左のコンテナと右のコンテナは1つしかないので、マークアップでは id が与えられます。スタイルを設定するには、`#` を使用します。
|
||||
|
||||
```
|
||||
```css
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
@@ -247,7 +246,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが
|
||||
|
||||
瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。
|
||||
|
||||

|
||||

|
||||
|
||||
レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
|
Reference in New Issue
Block a user