<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

Django

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

サンプルコース

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

レッスン_サンプル

## 指示書
- 全体
  - セクショニングタグを有効的に使用します。
  - コンテンツの横幅`.wrapper`は`1080px`で、左右の余白は`100px`で固定します。
 - 横並びにするプロパティは`display:flex;`を使用し、要素の間隔には`gap`プロパティを使用します。
- ヘッダー
  - 横並びにするプロパティを使用してください。
- ファーストビュー
  - タイトルは上下左右中央に配置します。
- newsセクション
  - pickupの画像の最大幅は640pxにしてください。
  - 下段は、横並びにするプロパティを使用してください。
- specialセクション
  - pickupの画像の最大幅は640pxにしてください。
  - 下段は、横並びにするプロパティを使用してください。
  -最後に「その他の記事はこちら」というリンクを設置してください。
- categoryセクション
  - 6つの四角形には、リンクをつけてください。
- popularityセクション
  - 記事のリンクは、日付とタイトルの全体につけてください。
- postセクション
  - Xはこちらのサイトより埋め込みしたいタイムラインのリンク[**こちら**](https://help.x.com/ja/using-x/embed-x-feed)の手順よりタグを発行できます。（Embedded Postを選択）
  - Xは埋め込みで、高さは262pxにしてください。
- フッター
  - 横並びにするプロパティを使用してください。
- スマホレスポンシブ
  - ブレークポイントは、PCの場合は1024px以下、タブレットの場合は768px以下、スマホの場合は480px以下で切り替わるようにしてください。
メディアクエリを使用して、該当箇所が縦方向になるように調整してください。

## 変数の指定
~~~scss
$breakpoints: (
  'sp': 'screen and (max-width: 480px)',
  'tab': 'screen and (max-width: 768px)',
  'pc': 'screen and (max-width: 1024px)',
) !default;

@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
~~~
- SCSSの変数を使用して、**メディアクエリ**を簡単に呼び出せるようにしましょう。

## 共通パーツの指定
~~~html
<div class="news__heading u-sectionHeading">
                <h2 class="u-sectionTitle">最新のお知らせ</h2>
　　・・・
</div>
~~~

~~~scss
/*******************************
共通パーツの指定
*******************************/
.u-wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

.u-sectionHeading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.u-sectionTitle {
  font-weight: 500;
  font-size: 32px;

  @include mq(tab) {
    font-size: 24px;
  }
}
~~~
- 例として、共通パーツである`.u-wrapper`に最大幅と`margin: 0 auto;`を指定しています。
- この下に続けて、他の共通パーツのスタイリングを記述しましょう。

4. コーディング（ブログ）

3. 4. コーディング（ブログ）