chore(i18n,learn): processed translations (#45555)
This commit is contained in:
camperbot
GitHub
@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
|||||||
|
|
||||||
La propiedad `box-shadow` aplica una o más sombras a un elemento.
|
La propiedad `box-shadow` aplica una o más sombras a un elemento.
|
||||||
|
|
||||||
La propiedad `box-shadow` toma valores para
|
La propiedad `box-shadow` toma los siguientes valores, en orden:
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>offset-x</code> (qué tan lejos extender la sombra horizontalmente desde el elemento),</li>
|
<li><code>offset-x</code> (qué tan lejos extender la sombra horizontalmente desde el elemento)</li>
|
||||||
<li><code>offset-y</code> (qué tan lejos extender la sombra verticalmente desde el elemento),</li>
|
<li><code>offset-y</code> (qué tan lejos extender la sombra verticalmente desde el elemento)</li>
|
||||||
<li><code>blur-radius</code>,</li>
|
<li><code>blur-radius</code></li>
|
||||||
<li><code>spread-radius</code> y</li>
|
<li><code>spread-radius</code></li>
|
||||||
<li><code>color</code>, en ese orden.</li>
|
<li><code>color</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
Los valores `blur-radius` y `spread-radius` son opcionales.
|
Los valores `blur-radius` y `spread-radius` son opcionales.
|
||||||
|
|||||||
@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Los colores tienen varias características tales como el matiz, la saturación y la ligereza. CSS3 introdujo la propiedad `hsl()` como una forma alternativa de elegir un color indicando directamente estas características.
|
Los colores tienen varias características tales como el matiz, la saturación y la ligereza. CSS3 introdujo la función `hsl()` como una forma alternativa para elegir un color declarando directamente estas características.
|
||||||
|
|
||||||
Se suele pensar que **Hue** es el "color". Si imaginas un espectro de colores con un rojo en la izquierda que se torna verde en el medio y azul en la derecha, el tono es donde cabe un color a lo largo de esta línea. En `hsl()`, el tono usa un concepto de círculo cromático en lugar del espectro, donde el ángulo del color en el círculo se da como un valor entre 0 y 360.
|
Se suele pensar que **Hue** es el "color". Si imaginas un espectro de colores con un rojo en la izquierda que se torna verde en el medio y azul en la derecha, el tono es donde cabe un color a lo largo de esta línea. En `hsl()`, el tono usa un concepto de círculo cromático en lugar del espectro, donde el ángulo del color en el círculo se da como un valor entre 0 y 360.
|
||||||
|
|
||||||
@ -27,19 +27,19 @@ Cambia el `background-color` de cada elemento `div` sobre la base de los nombres
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Tu código debe usar la propiedad `hsl()` para declarar el color `green`.
|
Tu código debe usar la función `hsl()` para declarar el color `green`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
Tu código debe usar la propiedad `hsl()` para declarar el color `cyan`.
|
Tu código debe usar la función `hsl()` para declarar el color `cyan`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
Tu código debe usar la propiedad `hsl()` para declarar el color `blue`.
|
Tu código debe usar la función `hsl()` para declarar el color `blue`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
|
|||||||
@ -15,11 +15,11 @@ Crearás un objeto redondo y transparente con una sombra nítida que está liger
|
|||||||
|
|
||||||
Para crear un objeto redondo, la propiedad `border-radius` se le debe asignar un valor de 50%.
|
Para crear un objeto redondo, la propiedad `border-radius` se le debe asignar un valor de 50%.
|
||||||
|
|
||||||
Puede que recuerdes de un desafío anterior que la propiedad `box-shadow` toma valores para `offset-x`, `offset-y`, `blur-radius`, `spread-radius` y un valor para el color, en ese orden. Los valores `blur-radius` y `spread-radius` son opcionales.
|
Puede que recuerdes de un desafío anterior que la propiedad `box-shadow` toma valores para `offset-x`, `offset-y`, `blur-radius`, `spread-radius` y un valor para el `color`, en ese orden. Los valores `blur-radius` y `spread-radius` son opcionales.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Manipula el elemento cuadrado en el editor para crear la figura de luna. Primero, cambia el `background-color` a `transparent`, luego establece la propiedad `border-radius` en 50% para hacer la forma circular. Finalmente, cambia la propiedad `box-shadow` para asignar `offset-x` a 25px, `offset-y` a 10px, `blur-radius` a 0, `spread-radius` a 0 y el color a `blue`.
|
Manipula el elemento cuadrado en el editor para crear la figura de luna. Primero, cambia el `background-color` a `transparent`, luego establece la propiedad `border-radius` en 50% para hacer la forma circular. Finalmente, cambia la propiedad `box-shadow` para establecer el `offset-x` a 25px, el `offset-y` a 10px, `blur-radius` a 0, `spread-radius` a 0, y `color` a `blue`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -35,7 +35,7 @@ El valor de la propiedad `border-radius` debe establecerse como `50%`.
|
|||||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
El valor de la propiedad `box-shadow` debe establecerse en 25px para `offset-x`, 10px para `offset-y`, 0 para `blur-radius`, 0 para `spread-radius` y finalmente `blue` para el color.
|
El valor de la propiedad `box-shadow` debe ser fijado a 25px para `offset-x`, 10px para `offset-y`, 0 para `blur-radius`, 0 para `spread-radius`, y finalmente `blue` para el `color`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: 5e46f7e5ac417301a38fb929
|
id: 5e46f7e5ac417301a38fb929
|
||||||
title: Demographic Data Analyzer
|
title: Analizador de Datos Demográficos
|
||||||
challengeType: 10
|
challengeType: 10
|
||||||
forumTopicId: 462367
|
forumTopicId: 462367
|
||||||
dashedName: demographic-data-analyzer
|
dashedName: demographic-data-analyzer
|
||||||
@ -8,17 +8,62 @@ dashedName: demographic-data-analyzer
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
In this challenge you must analyze demographic data using Pandas. You are given a dataset of demographic data that was extracted from the 1994 Census database.
|
Trabajarás [este proyecto utilizando nuestro código inicial Replit](https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer).
|
||||||
|
|
||||||
You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer).
|
Todavía estamos desarrollando la parte interactiva del currículo de Python. Por el momento, aquí hay algunos videos en el canal de YouTube de freeCodeCamp.org que te enseñaran todo lo que necesitas saber para completar este proyecto:
|
||||||
|
|
||||||
After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below.
|
- [Curso de vídeo de Python para todos](https://www.freecodecamp.org/news/python-for-everybody/) (14 horas)
|
||||||
|
- [Curso de vídeo para aprender Python](https://www.freecodecamp.org/news/learn-python-video-course/) (10 horas)
|
||||||
|
|
||||||
We are still developing the interactive instructional part of the data analysis with Python curriculum. For now, you will have to use other resources to learn how to pass this challenge.
|
# --instructions--
|
||||||
|
|
||||||
|
En este desafío debe analizar los datos demográficos usando Pandas. Se le da un conjunto de datos demográficos que fueron extraidos de la base de datos del censo de 1994. Aquí hay un ejemplo de cómo se debería ver:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
| | age | workclass | fnlwgt | education | education-num | marital-status | occupation | relationship | race | sex | capital-gain | capital-loss | hours-per-week | native-country | salary |
|
||||||
|
|---:|------:|:-----------------|---------:|:------------|----------------:|:-------------------|:------------------|:---------------|:-------|:-------|---------------:|---------------:|-----------------:|:-----------------|:---------|
|
||||||
|
| 0 | 39 | State-gov | 77516 | Bachelors | 13 | Never-married | Adm-clerical | Not-in-family | White | Male | 2174 | 0 | 40 | United-States | <=50K |
|
||||||
|
| 1 | 50 | Self-emp-not-inc | 83311 | Bachelors | 13 | Married-civ-spouse | Exec-managerial | Husband | White | Male | 0 | 0 | 13 | United-States | <=50K |
|
||||||
|
| 2 | 38 | Private | 215646 | HS-grad | 9 | Divorced | Handlers-cleaners | Not-in-family | White | Male | 0 | 0 | 40 | United-States | <=50K |
|
||||||
|
| 3 | 53 | Private | 234721 | 11th | 7 | Married-civ-spouse | Handlers-cleaners | Husband | Black | Male | 0 | 0 | 40 | United-States | <=50K |
|
||||||
|
| 4 | 28 | Private | 338409 | Bachelors | 13 | Married-civ-spouse | Prof-specialty | Wife | Black | Female | 0 | 0 | 40 | Cuba | <=50K |
|
||||||
|
```
|
||||||
|
|
||||||
|
Debes usar Pandas para responder a las siguientes preguntas:
|
||||||
|
|
||||||
|
- ¿Cuántas personas de cada raza están representadas en este dataset? Esta debería ser una Pandas series con nombres de raza como las etiquetas de índice. (columna `race`)
|
||||||
|
- ¿Cuál es la edad promedio de los hombres?
|
||||||
|
- ¿Cuál es el porcentaje de personas que tienen un grado de licenciatura?
|
||||||
|
- ¿Que porcentaje de personas con una educación avanzada (`Bachelors`, `Masters` o `Doctorate`) generan mas de 50k?
|
||||||
|
- ¿Que porcentaje de personas sin una educación avanzada generan mas de 50k?
|
||||||
|
- ¿Cuál es el mínimo número de horas que una persona trabaja por semana?
|
||||||
|
- ¿Qué porcentaje de personas que trabajan el minimo de horas por semana tienen un salario de mas de 50k?
|
||||||
|
- ¿Qué país tiene el mas alto porcentaje de personjas que ganan >50k y cual es ese porcentaje?
|
||||||
|
- Identifica la ocupacion mas popular de aquellos que ganan >50k en India.
|
||||||
|
|
||||||
|
Utilice el código de inicio en el archivo `demographic_data_analyzer`. Actualice el código para que todas las variables definidas como "None" se establezcan al cálculo o código apropiado. Redondea todos los decimales a la décima más cercana.
|
||||||
|
|
||||||
|
Las pruebas unitarias están escritas para ti en `test_module.py`.
|
||||||
|
|
||||||
|
## Desarrollo
|
||||||
|
|
||||||
|
Para el desarrollo, puedes utilizar `main.py` para probar tus funciones. Haz clic en el botón "run" y se ejecutará `main.py`.
|
||||||
|
|
||||||
|
## Pruebas
|
||||||
|
|
||||||
|
Importamos las pruebas de `test_module.py` a `main.py` para tu conveniencia. Las pruebas se ejecutarán automáticamente cada vez que presiones el botón "run".
|
||||||
|
|
||||||
|
## Envío
|
||||||
|
|
||||||
|
Copia el enlace de tu proyecto y envíalo a freeCodeCamp.
|
||||||
|
|
||||||
|
## Fuente de datos
|
||||||
|
|
||||||
|
Dua, D. y Graff, C. (2019). [UCI Machine Learning Repository](http://archive.ics.uci.edu/ml). Irvine, CA: University of California, School of Information and Computer Science.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
It should pass all Python tests.
|
Debería pasar todas las pruebas de Python.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: 5e4f5c4b570f7e3a4949899f
|
id: 5e4f5c4b570f7e3a4949899f
|
||||||
title: Sea Level Predictor
|
title: Pronosticador del nivel del mar
|
||||||
challengeType: 10
|
challengeType: 10
|
||||||
forumTopicId: 462370
|
forumTopicId: 462370
|
||||||
dashedName: sea-level-predictor
|
dashedName: sea-level-predictor
|
||||||
@ -8,17 +8,48 @@ dashedName: sea-level-predictor
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
In this project, you will analyze a dataset of the global average sea level change since 1880. You will use the data to predict the sea level change through year 2050.
|
Estarás [trabajando en este proyecto con nuestro código inicial de Replit](https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor).
|
||||||
|
|
||||||
You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor).
|
Todavía estamos desarrollando la parte interactiva del currículo de Python. Por ahora, aquí hay algunos videos en el canal de YouTube de freeCodeCamp.org que te enseñaran todo lo que necesitas saber para completar este proyecto:
|
||||||
|
|
||||||
After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below.
|
- [Python para Todos Curso en Video](https://www.freecodecamp.org/news/python-for-everybody/) (14 horas)
|
||||||
|
- [Aprende Python Curso en Video](https://www.freecodecamp.org/news/learn-python-video-course/) (10 horas)
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Analizará un conjunto de datos sobre el cambio del nivel medio del mar a nivel mundial desde 1880. Utilizarás los datos para predecir el cambio del nivel del mar hasta el año 2050.
|
||||||
|
|
||||||
|
Utiliza los datos para completar las siguientes tareas:
|
||||||
|
|
||||||
|
- Utiliza Pandas para importar los datos de `epa-sea-level.csv`.
|
||||||
|
- Usa matplotlib para crear un diagrama de dispersión usando la columna "Year" como el eje x y la columna "CSIRO Adjusted Sea Level" como el eje y.
|
||||||
|
- Usa la función `linregress` de `scipy.stats` para obtener la pendiente e intersección con el eje y de la línea de mejor encaje. Dibuja la línea de mejor encaje sobre el diagrama de dispersión. Haz que la línea pase por el año 2050 para predecir el aumento del nivel del mar en ese año.
|
||||||
|
- Traza una nueva línea de mejor encaje utilizando datos del año 2000 hasta el año más reciente del conjunto de datos. Haz que la línea pase también por el año 2050 para predecir la subida del nivel del mar en 2050 si el ritmo de subida continúa como desde el año 2000.
|
||||||
|
- La etiqueta del eje x debe ser "Year", la etiqueta del eje y debe ser "Sea Level (inches)", y el título debe ser "Rise in Sea Level".
|
||||||
|
|
||||||
|
Las pruebas unitarias están escritas para en `test_module.py`.
|
||||||
|
|
||||||
|
El boilerplate también incluye los comandos para guardar y devolver la imagen.
|
||||||
|
|
||||||
|
## Desarrollo
|
||||||
|
|
||||||
|
Para el desarrollo, puedes utilizar `main.py` para probar tus funciones. Haz clic en el botón "run" y se ejecutará `main.py`.
|
||||||
|
|
||||||
|
## Pruebas
|
||||||
|
|
||||||
|
Importamos las pruebas de `test_module.py` a `main.py` para tu conveniencia. Las pruebas se ejecutarán automáticamente cada vez que pulses el botón "run".
|
||||||
|
|
||||||
|
## Envío
|
||||||
|
|
||||||
|
Copia el enlace de tu proyecto y envíalo a freeCodeCamp.
|
||||||
|
|
||||||
|
## Fuente de datos
|
||||||
|
[Global Average Absolute Sea Level Change](https://datahub.io/core/sea-level-rise), 1880-2014 de la Agencia de Protección Ambiental de los Estados Unidos utilizando datos de CSIRO, 2015; NOAA, 2015.
|
||||||
|
|
||||||
We are still developing the interactive instructional part of the data analysis with Python curriculum. For now, you will have to use other resources to learn how to pass this challenge.
|
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
It should pass all Python tests.
|
Debería pasar todas las pruebas de Python.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|
||||||
|
|||||||
@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
|||||||
|
|
||||||
`box-shadow` プロパティは要素に 1 つ以上の影をつけます。
|
`box-shadow` プロパティは要素に 1 つ以上の影をつけます。
|
||||||
|
|
||||||
`box-shadow` プロパティは以下の値をとります。
|
`box-shadow` プロパティは以下の値をこの順で取ります。
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>offset-x</code> (要素から水平方向に影を押しやる距離),</li>
|
<li><code>offset-x</code> (要素から水平方向に影を押しやる距離)</li>
|
||||||
<li><code>offset-y</code> (要素から垂直方向に影を押しやる距離),</li>
|
<li><code>offset-y</code> (要素から垂直方向に影を押しやる距離)</li>
|
||||||
<li><code>blur-radius</code> (ぼかしの半径),</li>
|
<li><code>blur-radius</code></li>
|
||||||
<li><code>spread-radius</code> (影の広がりの半径) と</li>
|
<li><code>spread-radius</code></li>
|
||||||
<li><code>color</code> を、この順で。</li>
|
<li><code>color</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
`blur-radius` と `spread-radius` の値は省略可能です。
|
`blur-radius` と `spread-radius` の値は省略可能です。
|
||||||
@ -33,7 +33,7 @@ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
要素に `thumbnail` の ID が追加されました。 このセレクターと、上記で例示した CSS の値を使用して、カードに `box-shadow` を追加してください。
|
要素に `thumbnail` の id が追加されました。 このセレクターと、上記で例示した CSS の値を使用して、カードに `box-shadow` を追加してください。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
色は色相、彩度、明度など、いくつかの特性を持っています。 CSS3 はこれらの特性を直接指定して色を選択する方法として `hsl()` プロパティを導入しました。
|
色は色相、彩度、明度など、いくつかの特性を持っています。 CSS3 はこれらの特性を直接指定して色を選択する方法として `hsl()` 関数を導入しました。
|
||||||
|
|
||||||
**Hue** (色相) は一般的に人々が「色」と考えるものです。 左端が赤から始まり、真ん中が緑、右端が青の色のスペクトルを思い浮かべた時、ある色がこの線のどこに位置するかを表すのが色相です。 `hsl()` では、色相はスペクトルの代わりに色相環の概念を使用し、円上のその色の角度が 0 から 360 の間の値として与えられます。
|
**Hue** (色相) は一般的に人々が「色」と考えるものです。 左端が赤から始まり、真ん中が緑、右端が青の色のスペクトルを思い浮かべた時、ある色がこの線のどこに位置するかを表すのが色相です。 `hsl()` では、色相はスペクトルの代わりに色相環の概念を使用し、円上のその色の角度が 0 から 360 の間の値として与えられます。
|
||||||
|
|
||||||
@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`hsl()` プロパティを使って、`green` の色を宣言してください。
|
`hsl()` 関数を使って、`green` の色を宣言してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
`hsl()` プロパティを使って、`cyan` の色を宣言してください。
|
`hsl()` 関数を使って、`cyan` の色を宣言してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
`hsl()` プロパティを使って、`blue` の色を宣言してください。
|
`hsl()` 関数を使って、`blue` の色を宣言してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
|
|||||||
@ -15,11 +15,11 @@ dashedName: create-a-graphic-using-css
|
|||||||
|
|
||||||
丸いオブジェクトを作るには、`border-radius` プロパティが 50% に設定される必要があります。
|
丸いオブジェクトを作るには、`border-radius` プロパティが 50% に設定される必要があります。
|
||||||
|
|
||||||
以前のチャレンジで学んだことを覚えているかもしれませんが、`box-shadow` プロパティは `offset-x`, `offset-y`, `blur-radius`, `spread-radius` そして色の値を、この順番で取ります。 `blur-radius` と `spread-radius` の値は省略可能です。
|
以前のチャレンジで学んだことを覚えているかもしれませんが、`box-shadow` プロパティは `offset-x`, `offset-y`, `blur-radius`, `spread-radius` そして `color` の値を、この順番で取ります。 `blur-radius` と `spread-radius` の値は省略可能です。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
エディタに表示されている正方形の要素を操作して、月の形を作りましょう。 まず `background-color` を `transparent` に変更し、次に `border-radius` プロパティを 50% に設定し、円の形を作ります。 最後に、`box-shadow` プロパティを変更して `offset-x` を 25px、`offset-y` を 10px、`blur-radius` を 0、`spread-radius` を 0、色を `blue` に設定してください。
|
エディタに表示されている正方形の要素を操作して、月の形を作りましょう。 まず `background-color` を `transparent` に変更し、次に `border-radius` プロパティを 50% に設定し、円の形を作ります。 最後に、`box-shadow` プロパティを変更して `offset-x` を 25px、`offset-y` を 10px、`blur-radius` を 0、`spread-radius` を 0、`color` を `blue` に設定してください。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -35,7 +35,7 @@ assert(code.match(/background-color:\s*?transparent;/gi));
|
|||||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
`box-shadow` プロパティの値は `offset-x` が 25px、`offset-y` が 10px、`blur-radius` が 0、`spread-radius` が 0、最後に色が `blue` に設定されている必要があります。
|
`box-shadow` プロパティの値は `offset-x` が 25px、`offset-y` が 10px、`blur-radius` が 0、`spread-radius` が 0、最後に `color` が `blue` に設定されている必要があります。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
|||||||
@ -28,15 +28,15 @@ dashedName: create-a-more-complex-shape-using-css-and-html
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
画面に表示されている要素をハート形に変換しましょう。 `heart::after` セレクターで、`background-color` を `pink` に、`border-radius` を 50% に変更してください。
|
画面に表示されている要素をハート形に変換しましょう。 `.heart::after` セレクターで、`background-color` を `pink` に、`border-radius` を 50% に変更してください。
|
||||||
|
|
||||||
次に、クラス `heart` (`heart` のみ) の要素に対し、`transform` プロパティを入力します。 `rotate()` 関数を -45deg を指定して使用してください。
|
次に、クラス `heart` (`heart` のみ) の要素に対し、`transform` プロパティを入力します。 `rotate()` 関数を -45deg を指定して使用してください。
|
||||||
|
|
||||||
最後に、`heart::before` セレクターの中で `content` プロパティを空文字列に設定してください。
|
最後に、`.heart::before` セレクターの中で `content` プロパティを空文字列に設定してください。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`heart::after` セレクターの `background-color` プロパティは `pink` である必要があります。
|
`.heart::after` セレクターの `background-color` プロパティは `pink` である必要があります。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||||
@ -45,7 +45,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
`heart::after` セレクターの `border-radius` は 50% である必要があります。
|
`.heart::after` セレクターの `border-radius` は 50% である必要があります。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||||
@ -57,7 +57,7 @@ assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
|||||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
`heart::before` セレクターの `content` は空文字列である必要があります。
|
`.heart::before` セレクターの `content` は空文字列である必要があります。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||||
|
|||||||
@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
|||||||
|
|
||||||
前回の課題では、アニメーションの変更を記述した `ease-out` キーワードについて説明しました。このキーワードは、最初にスピードを上げ、アニメーションの終わりにスローダウンします。 右側に `ease-out` キーワード (青色の要素用) と `linear` キーワード (赤色の要素用) の違いを示します。 `ease-out` キーワードと同様のアニメーションの動きは、カスタム三次ベジェ曲線関数を使用することで実現できます。
|
前回の課題では、アニメーションの変更を記述した `ease-out` キーワードについて説明しました。このキーワードは、最初にスピードを上げ、アニメーションの終わりにスローダウンします。 右側に `ease-out` キーワード (青色の要素用) と `linear` キーワード (赤色の要素用) の違いを示します。 `ease-out` キーワードと同様のアニメーションの動きは、カスタム三次ベジェ曲線関数を使用することで実現できます。
|
||||||
|
|
||||||
一般的に、`p1` と `p2` のアンカーポイントを変更すると異なるベジェ曲線が作成され、時間の経過と共にアニメーションがどのように進むかを制御します。 以下は、ease-out スタイルを模倣する値を使用したベジェ曲線の例です。
|
一般的に、`p1` と `p2` のアンカーポイントを変更すると異なるベジェ曲線が作成され、時間の経過と共にアニメーションがどのように進むかを制御します。 以下は、`ease-out` スタイルを模倣する値を使用したベジェ曲線の例です。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||||
|
|||||||
@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
|
|||||||
|
|
||||||
`:root` で変数を作成すると、その変数の値がページ全体に設定されます。
|
`:root` で変数を作成すると、その変数の値がページ全体に設定されます。
|
||||||
|
|
||||||
これらの変数を特定の要素内で再度設定して上書きすることができます。
|
これらの変数を特定のセレクター内で再度設定して上書きすることができます。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,7 @@ CSS 変数を作成するには、2 つのハイフンで始まる名前を付
|
|||||||
--penguin-skin: gray;
|
--penguin-skin: gray;
|
||||||
```
|
```
|
||||||
|
|
||||||
これで `--penguin-skin` という名前の変数が作成され、`gray` の値が代入されます。 今では CSS の他の場所でその変数を使用して、他の要素の値を gray に変更できるようになりました。
|
これで `--penguin-skin` という名前の変数が作成され、`gray` の値が代入されます。 CSS の他の場所でこの変数を使用して、他のプロパティの値を gray に変更できます。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
|||||||
@ -77,7 +77,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
`h1` 要素は、`body` 要素から緑の文字色を継承しているはずです。
|
`h1` 要素は、`body` 要素から文字色 `green` を継承しているはずです。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||||
|
|||||||
@ -27,7 +27,7 @@ class="class1 class2"
|
|||||||
|
|
||||||
**注:** HTML 要素にクラスを並べる順番は関係ありません。
|
**注:** HTML 要素にクラスを並べる順番は関係ありません。
|
||||||
|
|
||||||
しかし、`<style>` セクション内での `class` 宣言の順番が重要になります。 2 番目の宣言は常に最初の宣言よりも優先されます。 `.blue-text` は 2 番目に宣言されているため、`.pink-text` の属性をオーバーライドします。
|
しかし、`<style>` セクション内での `class` 宣言の順番が重要になります。 2 番目の宣言は常に最初の宣言よりも優先されます。 `.blue-text` は2番目に宣言されているため、 `.pink-text` の属性をオーバーライドします。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,7 @@ CSS 変数は、メディアクエリの使い方をシンプルにできます
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
`media query` の `:root` セレクターの中で、`--penguin-size` を再定義して値が `200px` となるように変更してください。 また、`--penguin-skin` も再定義し、`black` の値を設定してください。 その後、プレビューの表示サイズを変更して、この変更が動作していることを確認してください。
|
メディアクエリの `:root` セレクターの中で、`--penguin-size` を再定義して値が `200px` となるように変更してください。 また、`--penguin-skin` も再定義し、`black` の値を設定してください。 その後、プレビューの表示サイズを変更して、この変更が動作していることを確認してください。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
|||||||
@ -29,7 +29,7 @@ dashedName: use-abbreviated-hex-code
|
|||||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
赤を指定するために、16 進数コード `#FF0000` の代わりに短縮形の `hex code` を使用してください。
|
赤を指定するために、16 進数コード `#FF0000` の代わりに短縮形の 16 進数コードを使用してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||||
@ -41,7 +41,7 @@ assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
|||||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
緑を指定するために、16 進数コード `#00FF00` の代わりに短縮形の `hex code` を使用してください。
|
緑を指定するために、16 進数コード `#00FF00` の代わりに短縮形の 16 進数コードを使用してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||||
@ -53,7 +53,7 @@ assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
|||||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||||
```
|
```
|
||||||
|
|
||||||
シアンを指定するために、16 進数コード `#00FFFF` の代わりに短縮形の `hex code` を使用してください。
|
シアンを指定するために、16 進数コード `#00FFFF` の代わりに短縮形の 16 進数コードを使用してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||||
@ -65,7 +65,7 @@ assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
|||||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||||
```
|
```
|
||||||
|
|
||||||
フューシャを指定するために、16 進数コード `#FF00FF` の代わりに短縮形の `hex code` を使用してください。
|
フューシャを指定するために、16 進数コード `#FF00FF` の代わりに短縮形の 16 進数コードを使用してください。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||||
|
|||||||
@ -27,13 +27,13 @@ body {
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`body` 要素は background-color を黒に設定されている必要があります。
|
`body` 要素は `background-color` を黒に設定されている必要があります。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
`black` という単語の代わりに、黒を表す `hex code` (16 進数コード) を使用します。
|
`black` という単語の代わりに、黒を表す 16 進数コードを使用します。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
|||||||
@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
|||||||
|
|
||||||
`checked` 属性を使用して、チェックボックスやラジオボタンをデフォルトで選択された状態にすることができます。
|
`checked` 属性を使用して、チェックボックスやラジオボタンをデフォルトで選択された状態にすることができます。
|
||||||
|
|
||||||
そのためには、`checked` という単語を input 要素の内部に追加します。 例:
|
そのためには、`checked` という単語を `input` 要素の内部に追加します。 例:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<input type="radio" name="test-name" checked>
|
<input type="radio" name="test-name" checked>
|
||||||
|
|||||||
@ -43,7 +43,7 @@ assert($('p').length === 0);
|
|||||||
assert(code.match(/[^fc]-->/g).length > 1);
|
assert(code.match(/[^fc]-->/g).length > 1);
|
||||||
```
|
```
|
||||||
|
|
||||||
コード内の `h1` `h2` または `p` の順序を変更してはいけません。
|
コード内の `h1`、`h2`、または `p` 要素の順序を変更してはいけません。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
|||||||
@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
CSS の flexbox には、フレックスアイテムを複数の行 (または列) に分割する機能があります。 デフォルトでは、フレックスコンテナはすべてのフレックスアイテムが1つに収まるように格納します。 例えば、行はすべて1行になります。
|
CSS の flexbox には、フレックスコンテナを複数の行 (または列) に分割する機能があります。 デフォルトでは、フレックスコンテナはすべてのフレックスアイテムが1つに収まるように格納します。 例えば、行はすべて1行になります。
|
||||||
|
|
||||||
しかし、`flex-wrap` プロパティを使用することでアイテムを折り返すように CSS に指示できます。 これにより、はみ出したアイテムは新しい行または列に移動します。 折り返す際のブレークポイントは、アイテムのサイズとコンテナのサイズによって決まります。
|
しかし、`flex-wrap` プロパティを使用することでアイテムを折り返すように CSS に指示できます。 これにより、はみ出したアイテムは新しい行または列に移動します。 折り返す際のブレークポイントは、アイテムのサイズとコンテナのサイズによって決まります。
|
||||||
|
|
||||||
|
|||||||
@ -17,7 +17,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
これにより、`item1` クラスを `header` という名前のエリアに移動させることができます。 この場合、行全体が header エリアと名付けられているため、アイテムは一番上の行全体を使用します。
|
これにより、`item1` クラスを `header` という名前のエリアに移動させることができます。 この場合、行全体が `header` エリアと名付けられているため、アイテムは一番上の行全体を使用します。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
|||||||
@ -31,7 +31,7 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`container` クラスは幅が `1fr, 100px, and 2fr` の 3 列を生成する `grid-template-columns` プロパティを持つ必要があります。
|
`container` クラスは幅が `1fr`、`100px`、`2fr` の 3 列を生成する `grid-template-columns` プロパティを持つ必要があります。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
|||||||
Reference in New Issue
Block a user