日本語訳ファイルの修正

This commit is contained in:
ナモすけ
2021-02-08 20:57:17 +09:00
parent 2517d5cf16
commit 535f3e2a1c
28 changed files with 151 additions and 74 deletions

View File

@@ -1,6 +1,6 @@
# テラリウムプロジェクト その2: CSS 入門
![Introduction to CSS](images/webdev101-css.png)
![Introduction to CSS](../images/webdev101-css.png)
> 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 から継承されています。
![inherited font](images/1.png)
![inherited font](../images/1.png)
✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか?
@@ -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` は反射光のように見えるようにスタイリングします。このようになります。
![finished terrarium](./images/terrarium-final.png)
![finished terrarium](../images/terrarium-final.png)
レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)