<iframe>

<button>

チャレンジ_入門編_テンプレ

チャレンジ_実践編_テンプレ

reactテスト

ターミナル問題テスト

CONSOLE問題テスト

テストのテスト

reactjsxテスト

vue3テスト

vue2テスト

vue3.2テスト

typescript

vueモジュール

Processなし課題

CSSテスト確認

リンクのテスト

sass

scss

隠しファイルテスト

rust

python

ViewZone

分割代入

比較演算子(JavaScript)

オブジェクト{}

変数定義(JavaScript)

console.log

QuizSample

express

echo

katex_sample

Markdown確認challenge1

border

Markdown確認challenge2

wordpress

ファイルロゴチェック

react退避(イベントオブジェクトに型をつけてみよう)

配列操作/forEach

テンプレートリテラル

JavaScript退避

java

deno

rustパーサ

実践チャレンジ用テスト

実践Lessonサンプル

JavaScriptテストサンプル

テストのテスト3

phpApache

http-server

コーディングなし

pythonLib

sandbox-react-js

sandbox-react-ts

sandbox-vue-js

sandbox-vue-ts

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

サンプルコース

サンプルレッスングループ

レッスン_サンプル

## 指示書
- 全体
  - セクショニングタグを有効的に使用します。
  - Concept、Menu、Shopセクションのコンテンツ幅は共通（1000px)です。
- ヘッダー
  - 上部に固定します。
  - リンクをホバーすると文字が薄くなるようにしてください。
- ファーストビュー
  - 背景画像を指定してください。
  - タイトルは絶対位置を指定して配置します。
- Conceptセクション
  - 横並びにするプロパティを使用してください。
- Menuセクション
  - 横並びにしたあと、階段状のレイアウトにしてください。
  - メニュー写真左上の数字は、疑似要素を使用して表示します。
- 背景写真
  - PCで見たときのみ、写真が動かないように固定表示してください。
- Shopセクション
  - 店舗情報欄は定義リストで実装してください。
- 予約ボタン
  - 画像を絶対配置で表示してください。
- スマホレスポンシブ
  - ブレークポイントは768px以下からです。
メディアクエリを使用して、該当箇所が縦方向になるように調整してください。
- 変数
  - 今回の中級編から、Sass(scss)を導入します。変数を使って配色と文字の大きさを一元管理してみましょう。

## 変数の指定
~~~scss~style
/*******************************
変数の指定
*******************************/
$mainColor: #f9f5ed;
$baseColor: #fff;
$accentColor: #83776a;
$fontSizeSmall: 14px;
$fontSizeMedium: 20px;
$fontSizeLarge: 32px;
~~~
- scssの変数で、**配色**と**文字の大きさ**の指定を簡単に呼び出せるようにします。

## 共通パーツの指定
~~~html~index
 <section id="concept" class="concept">
      <div class="u-container">
　　・・・
      </div>
</section>
~~~

~~~scss~style
/*******************************
共通パーツの指定
*******************************/
.u-container {
  max-width: 1000px;
  padding: 80px 40px;
  margin: 0 auto;

  @media screen and (max-width: 768px) {
    max-width: 460px;
    padding: 80px 30px;
  }
}
~~~
- 例として、共通パーツである`.u-container`に最大幅と左右の余白を指定しています。
- この下に続けて、他の共通パーツのスタイリングを記述しましょう。

## 他セクションのマークアップとスタイリング
引き続き、他セクションをマークアップとスタイリングを進めていきましょう。

4.コーディング（レストラン）

4. 4.コーディング（レストラン）