Merge pull request #146 from silverskyvicto/translate-ja/3-terrarium
translate 3-terrarium into japanesepull/148/head
Jen Looper
4 years ago
committed by
GitHub
commit
9ccd6e3f2d
@ -0,0 +1,231 @@
|
||||
# テラリウムプロジェクト その1: HTML 入門
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
|
||||
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML を「ドレスアップ」し、JavaScript が HTML に命を吹き込むとすれば、HTML は Web アプリケーションの本体となります。HTML の構文は、「head」、「body」、「footer」タグを含むため、この考えを反映しています。
|
||||
|
||||
このレッスンでは、HTML を使ってバーチャルテラリウムのインターフェースの「骨格」をレイアウトします。タイトルと3つのカラムがあります。右と左のカラムにはドラッグ可能な植物を配置し、中央のエリアには実際のガラス張りのテラリウムを配置します。このレッスンが終わる頃には、列の中に植物が見えるようになると思いますが、インターフェースが少し変な感じになっているかもしれません。
|
||||
|
||||
### タスク
|
||||
|
||||
コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。
|
||||
|
||||
|
||||
|
||||
もしくは
|
||||
|
||||
git bash 上でこれらのコマンドを使用します。
|
||||
* `mkdir terrarium`
|
||||
* `cd terrarium`
|
||||
* `touch index.html`
|
||||
* `code index.html` または `nano index.html`
|
||||
|
||||
> index.html ファイルはブラウザに対して、それがフォルダ内のデフォルトファイルであることを示します。`https://anysite.com/test` のような URL は、`test` というフォルダを含むフォルダ構造を用いて構築され、その中に `index.html` が含まれているかもしれません。
|
||||
|
||||
---
|
||||
|
||||
## DocType と html タグ
|
||||
|
||||
HTML ファイルの最初の行は、その doctype です。ファイルの一番上にこの行が必要なのは少し意外ですが、これはブラウザが現在の HTML 仕様に従った標準モードでページをレンダリングする必要があることを古いブラウザに伝えています。
|
||||
|
||||
> ヒント: VS Code では、タグの上にカーソルを置くと MDN リファレンスガイドからタグの使用に関する情報を得ることができます。
|
||||
|
||||
2行目は `<html>` タグのオープニングタグであり、それに続くのがクロージングタグ `</html>` です。これらのタグはインターフェイスのルート要素です。
|
||||
|
||||
### タスク
|
||||
|
||||
これらの行を `index.html` ファイルの先頭に追加します。
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html></html>
|
||||
```
|
||||
|
||||
✅ DocType をクエリ文字列で設定することで決定できるモードがいくつかあります。[Quirks モードと Standards モード](https://developer.mozilla.org/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)です。これらのモードは、現在では通常使用されていない本当に古いブラウザ (Netscape Navigator 4 と Internet Explorer 5) をサポートしていました。標準の doctype 宣言に固執することができます。
|
||||
|
||||
---
|
||||
|
||||
## ドキュメントの 'head'
|
||||
|
||||
HTML ドキュメントの 'head' 領域には、Web ページに関する重要な情報が含まれており、[メタデータ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)としても知られています。私たちの場合、このページがレンダリングされるために送信される Web サーバーに、以下の4つのことを伝えます。
|
||||
|
||||
- ページタイトル
|
||||
- 次を含むページのメタデータ:
|
||||
- 'character set' で、ページで使われている文字エンコーディングを表します
|
||||
- IE=edge ブラウザがサポートされていることを示す `x-ua-compatible` などのブラウザ情報
|
||||
- viewport が読み込まれたときにどのように振る舞うかについての情報を提供します。viewport の初期スケールを 1 に設定すると、ページが最初に読み込まれたときのズームレベルを制御します
|
||||
|
||||
### タスク
|
||||
|
||||
ドキュメントに 'head' ブロックを `<html>` の開始タグと終了タグの間に追加します。
|
||||
|
||||
```html
|
||||
<head>
|
||||
<title>Welcome to my Virtual Terrarium</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
```
|
||||
|
||||
✅ このように viewport の meta タグを設定するとどうなるでしょうか: `<meta name="viewport" content="width=600">`? [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。
|
||||
|
||||
---
|
||||
|
||||
## ドキュメントの `body`
|
||||
|
||||
### HTML タグ
|
||||
|
||||
HTML では、.html ファイルにタグを追加して Web ページの要素を作成します。それぞれのタグには通常、次のような開閉タグがあります。段落を示す `<p>hello</p>` のように。`<html>` タグペアの中に `<body>` タグのセットを追加して、インターフェイスのボディを作成します。
|
||||
|
||||
### タスク
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Welcome to my Virtual Terrarium</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
これで、ページの構築を始めることができます。通常は `<div>` タグを使ってページ内の個別の要素を作成します。ここでは画像を含む一連の `<div>` 要素を作成します。
|
||||
|
||||
### 画像
|
||||
|
||||
閉じタグを必要としない html タグの一つに `<img>` タグがあります。なぜなら、ページがアイテムをレンダリングするために必要なすべての情報を含む `src` 要素を持っているからです。
|
||||
|
||||
アプリ内に `images` というフォルダを作成し、その中に[ソースコードフォルダ](../solution/images)内のすべての画像を追加します (植物の画像が14枚あります)。
|
||||
|
||||
### タスク
|
||||
|
||||
これらの植物の画像を `<body></body>` タグの間の2つのカラムに追加します。
|
||||
|
||||
```html
|
||||
<div id="page">
|
||||
<div id="left-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> 注: Span と Div。Div は「ブロック」要素とみなされ、Span は「インライン」要素とみなされます。これらの Div を Spans に変換するとどうなるでしょうか。
|
||||
|
||||
このマークアップで、植物が画面に表示されるようになりました。まだ CSS を使ったスタイリングがされていないので、かなり見栄えが悪いのですが、これは次のレッスンで行います。
|
||||
|
||||
それぞれの画像には、画像が見えなくてもレンダリングできなくても表示される alt テキストがあります。これはアクセシビリティのために重要な属性です。アクセシビリティについては、今後のレッスンで詳しく説明します。今のところ、alt 属性は、何らかの理由でユーザーが画像を見ることができない場合 (接続速度が遅い、src 属性のエラー、ユーザーがスクリーンリーダーを使用している場合) に、画像の代替情報を提供することを覚えておいてください。
|
||||
|
||||
✅ それぞれの画像に同じ alt タグが付いていることに気付きましたか？これは良い習慣ですか？なぜですか、それともなぜですか? このコードを改善できますか?
|
||||
|
||||
---
|
||||
|
||||
## セマンティックマークアップ
|
||||
|
||||
一般的に、HTML を書くときには、意味のある「セマンティックス」を使うことが望ましいとされています。これはどういう意味でしょうか? それは、HTML タグを使用して、データやインタラクションの種類を表すために設計されていることを意味します。例えば、ページのメインタイトルテキストには `<h1>` タグを使うべきです。
|
||||
|
||||
`<body>` の開始タグのすぐ下に次の行を追加します。
|
||||
|
||||
```html
|
||||
<h1>My Terrarium</h1>
|
||||
```
|
||||
|
||||
ヘッダーを `<h1>` としたり、順序のないリストを `<ul>` とするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートするのに役立ちます。一般的に、ボタンは `<button>` と書き、リストは `<li>` と書くべきです。特別なスタイルの `<span>` 要素とクリックハンドラを使ってボタンを模擬することは可能ですが、障害のあるユーザにとっては、ボタンがページ上のどこにあるかを判断し、要素がボタンとして表示されている場合にそれと対話するための技術を使った方が良いでしょう。このため、できるだけセマンティックマークアップを使うようにしてください。
|
||||
|
||||
✅ スクリーンリーダーと[それがどのようにウェブページと相互作用するか](https://www.youtube.com/watch?v=OUDV1gqs9GA)を見てみましょう。意味のないマークアップがあると、なぜユーザーをイライラさせてしまうのかわかりますか?
|
||||
|
||||
## テラリウム
|
||||
|
||||
このインターフェイスの最後の部分では、テラリウムを作成するためのマークアップを作成します。
|
||||
|
||||
### タスク
|
||||
|
||||
このマークアップを最後の `</div>` タグの上に追加します。
|
||||
|
||||
```html
|
||||
<div id="terrarium">
|
||||
<div class="jar-top"></div>
|
||||
<div class="jar-walls">
|
||||
<div class="jar-glossy-long"></div>
|
||||
<div class="jar-glossy-short"></div>
|
||||
</div>
|
||||
<div class="dirt"></div>
|
||||
<div class="jar-bottom"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
✅ このマークアップを画面に追加したにもかかわらず、何も表示されません。なぜでしょうか?
|
||||
|
||||
---
|
||||
|
||||
## チャレンジ
|
||||
|
||||
HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつかありますが、[これらのタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)のような非推奨のタグをマークアップに使うべきではありません。それでも、古い `<marquee>` タグを使って h1 タイトルを水平方向にスクロールさせることはできますか？(もしそうする場合は、後から削除することを忘れないでください)
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか？将来的にはどのようなタグが導入されるかもしれませんか？
|
||||
|
||||
Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall) で詳しく解説しています。
|
||||
|
||||
|
||||
## 課題
|
||||
|
||||
[HTML の練習: ブログのモックアップを構築する](assignment.ja.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# HTML の練習: ブログのモックアップを構築する
|
||||
|
||||
## 説明書
|
||||
|
||||
個人的な Web サイトをデザインしたり、再デザインしたりしていると想像してみてください。サイトのグラフィカルなマークアップを作成し、サイトの様々な要素を構築するために使用する HTML マークアップを書き留めてください。紙に書いてスキャンしてもいいですし、お好みのソフトウェアを使ってもいいですが、HTML マークアップを手でコーディングして確認してください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| | ブログのレイアウトは、少なくとも10個のマークアップ要素が表示された状態で視覚的に表現されます。 | ブログのレイアウトは、マークアップの要素を5つほど表示して視覚的に表現する | ブログのレイアウトは、最大でも3つのマークアップ要素が表示された状態で視覚的に表現されます。 |
|
||||
@ -0,0 +1,264 @@
|
||||
# テラリウムプロジェクト その2: CSS 入門
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
|
||||
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
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 を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。
|
||||
|
||||
### 前提条件
|
||||
|
||||
テラリウムの HTML が完成し、スタイリングの準備が整っています。
|
||||
|
||||
### タスク
|
||||
|
||||
テラリウムのフォルダに `style.css` というファイルを作成します。そのファイルを `<head>` セクションにインポートしてください。
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## カスケード
|
||||
|
||||
カスケーディングスタイルシートは、スタイルの適用がその優先度によって導かれるように、スタイルが「カスケード」するという考えを取り入れています。Web サイトの作者によってセットされたスタイルはブラウザによってセットされたそれらより優先されます。「インライン」にセットされたスタイルは外部スタイルシートにセットされたものより優先されます。
|
||||
|
||||
### タスク
|
||||
|
||||
インラインスタイル "color: red" を `<h1>` タグに追加します。
|
||||
|
||||
```HTML
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
次に、以下のコードを `style.css` ファイルに追加します。
|
||||
|
||||
```CSS
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Web アプリではどの色が表示されますか? なぜですか? スタイルを上書きする方法を見つけることはできますか? いつ、またはなぜそうしたくないのですか？
|
||||
|
||||
---
|
||||
|
||||
## 継承
|
||||
|
||||
スタイルは、先祖のスタイルから子孫へと継承され、入れ子になった要素は親のスタイルを継承するようになっています。
|
||||
|
||||
### タスク
|
||||
|
||||
body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。
|
||||
|
||||
|
||||
|
||||
✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか?
|
||||
|
||||
---
|
||||
|
||||
## CSS セレクタ
|
||||
|
||||
### タグ
|
||||
|
||||
これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3a241d;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。
|
||||
|
||||
### 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 が与えられます。スタイルを設定するには、`#` を使用します。
|
||||
|
||||
```
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
ここでは、これらのコンテナを画面の左端と右端に絶対的な位置に配置し、それらが小さなモバイル画面のためにスケーリングできるように、それらの幅にパーセンテージを使用しています。
|
||||
|
||||
✅ このコードはかなり繰り返されているので、"DRY" (Don't Repeat Yourself) ではありません。マークアップを変更し、CSS をリファクタリングする必要があるでしょう。
|
||||
|
||||
```html
|
||||
<div id="left-container" class="container"></div>
|
||||
```
|
||||
|
||||
### クラス
|
||||
|
||||
上の例では、画面上の2つのユニークな要素にスタイルを設定しました。画面上の多くの要素にスタイルを適用したい場合は、CSS クラスを使用することができます。これを実行して、左右のコンテナに植物をレイアウトします。
|
||||
|
||||
HTML マークアップの各植物には、id とクラスの組み合わせがあることに注目してください。ここでの id は、テラリウムの植物の配置を操作するために後で追加する JavaScript によって使用されます。クラスはすべての植物にスタイルを与えています。
|
||||
|
||||
```html
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
以下を `style.css` ファイルに追加します。
|
||||
|
||||
```css
|
||||
.plant-holder {
|
||||
position: relative;
|
||||
height: 13%;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
max-width: 150%;
|
||||
max-height: 150%;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
このスニペットで注目すべきは、相対位置と絶対位置が混在していることです。高さをパーセンテージで処理する方法を見てみましょう。
|
||||
|
||||
プラントホルダーの高さを 13% に設定します。これは、すべての植物がスクロールせずに各垂直コンテナに表示されるようにするための良い数字です。
|
||||
|
||||
植物ホルダーを左に移動するように設定すると、植物がその容器の中でより中央に位置するようになります。画像は、それらをよりドラッグしやすいように、大量の透明な背景を持っているので、画面上でより良くフィットするように左に押される必要があります。
|
||||
|
||||
次に、植物自体には 150% の最大幅が与えられています。これにより、ブラウザのスケールダウンに合わせて植物を縮小することができます。ブラウザのサイズを変更してみてください。
|
||||
|
||||
また、注目すべきは、(植物が容器の上に座ってテラリウムの中に座っているように見えるように) 要素の相対的な高度を制御する z-index の使用です。
|
||||
|
||||
✅ なぜ、植物のホルダーと植物の CSS セレクターの両方が必要なのでしょうか？
|
||||
|
||||
## CSS ポジショニング
|
||||
|
||||
位置のプロパティ (静的位置、相対位置、固定位置、絶対位置、スティッキー位置があります) を混ぜるのは少し厄介ですが、適切に行うと、ページ上の要素をうまくコントロールすることができます。
|
||||
|
||||
絶対的な位置にある要素は、最も近い位置にある祖先からの相対的な位置に配置され、存在しない場合は、ドキュメントの本文に従って配置されます。
|
||||
|
||||
相対的に配置された要素は、CSS の指示に基づいて初期位置から離れた位置に配置されます。
|
||||
|
||||
今回のサンプルでは、`plant-holder` は相対的に配置された要素であり、絶対的に配置されたコンテナの中に配置されている。その結果、サイドバーのコンテナは左右に固定され、植物ホルダーは入れ子になってサイドバー内で調整され、植物を縦に並べるためのスペースが与えられています。
|
||||
|
||||
> 次のレッスンで説明するように、`plant` 自体も絶対位置を持っており、ドラッグ可能にするために必要です。
|
||||
|
||||
✅ サイドコンテナとプランターホルダーの配置の種類を入れ替えて実験してみてください。どうなるでしょうか?
|
||||
|
||||
## CSS レイアウト
|
||||
|
||||
ここでは、学んだことを活かして、CSS を使ってテラリウムを作っていきます。
|
||||
|
||||
まず、CSS を使って `.terarium` div の子要素を丸みを帯びた四角形にします。
|
||||
|
||||
```css
|
||||
.jar-walls {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
background: #d1e1df;
|
||||
border-radius: 10%;
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 20%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-top {
|
||||
width: 50%;
|
||||
height: 5%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 80.5%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-bottom {
|
||||
width: 50%;
|
||||
height: 1%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dirt {
|
||||
width: 58%;
|
||||
height: 5%;
|
||||
background: #3a241d;
|
||||
position: absolute;
|
||||
border-radius: 0 0 4rem 4rem;
|
||||
bottom: 1%;
|
||||
left: 21%;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
ここでは `border-radius` にもパーセンテージを使用していることに注意してください。ブラウザを縮小すると、瓶のコーナーも拡大縮小されているのがわかります。また、ジャー要素の幅と高さのパーセンテージと、各要素がビューポートの下部に固定されていることにも注目してください。
|
||||
|
||||
✅ 瓶の色と不透明度を変えてみてください。どうなりましたか？なぜですか？
|
||||
|
||||
---
|
||||
|
||||
## 🚀チャレンジ
|
||||
|
||||
瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。
|
||||
|
||||
|
||||
|
||||
レクチャー後クイズを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
CSS は一見簡単そうに見えますが、アプリをすべてのブラウザとすべての画面サイズに完全に対応させようとすると、多くの課題があります。CSS グリッド と Flexbox は、この作業をもう少し構造化し、より信頼性の高いものにするために開発されたツールです。[Flexbox Froggy](https://flexboxfroggy.com/) と [Grid Garden](https://codepip.com/games/grid-garden/) をプレイして、これらのツールについて学びましょう。
|
||||
|
||||
## 課題
|
||||
|
||||
[CSS リファクタリング](assignment.ja.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# CSS リファクタリング
|
||||
|
||||
## 説明
|
||||
|
||||
Flexbox または CSS グリッドを使ってテラリウムのスタイルを変更し、いくつかのブラウザでテストしたことを示すためにスクリーンショットを撮影してください。マークアップを変更する必要があるかもしれないので、リファクタリングのためにアートを配置した新しいバージョンのアプリを作成してください。要素をドラッグ可能にすることは気にしないで、今のところは HTML と CSS をリファクタリングするだけです。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Flexbox や CSS グリッドを使ってテラリウムのスタイルを完全に変更したものを紹介します。 | いくつかの要素のスタイルを変更します。 | テラリウムのリスタイルに失敗します。 |
|
||||
@ -0,0 +1,11 @@
|
||||
# DOM をもう少し使いこなす
|
||||
|
||||
## 説明書
|
||||
|
||||
DOM 要素を「採用」することで、もう少し DOM を研究してみましょう。MSDN の [DOM インターフェイス一覧](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)にアクセスして、一つ選びます。それが Web 上の Web サイトで使われているのを Web 上で見つけて、それがどのように使われているかの説明を書きます。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||
| | 段落書きを例に挙げて紹介します。 | 例示せずに、段落書きを提示 | 書き込みはありません。 |
|
||||
@ -0,0 +1,33 @@
|
||||
# マイテラリウム: JavaScript を使った HTML・CSS・DOM 操作を学ぶプロジェクト 🌵🌱
|
||||
|
||||
ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。
|
||||
|
||||
|
||||
|
||||
# レッスン
|
||||
|
||||
1. [HTML 入門](./1-intro-to-html/README.md)
|
||||
2. [CSS 入門](./2-intro-to-css/README.md)
|
||||
3. [DOM と JS Closures の紹介](./3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
## クレジット
|
||||
|
||||
Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
CSS で作ったテラリウムは、Jakub Mandra のガラス瓶 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) にインスパイアされています。
|
||||
|
||||
アートワークは [Jen Looper](http://jenlooper.com) が Procreate を使って手書きで描いたものです。
|
||||
|
||||
## テラリウムのデプロイ
|
||||
|
||||
Azure Static Web Apps を使ってテラリウムをデプロイしたり、ウェブに公開したりすることができます。
|
||||
|
||||
1. このリポジトリをフォークします
|
||||
|
||||
2. このボタンを押します
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
|
||||
|
||||
3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。
|
||||
|
||||
|
||||
Loading…
Reference in new issue