<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サイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

サンプルコース

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

レッスン_サンプル

サンプルコードはここで紹介するコーディングルールに従っています。
**コーディングルールには正解はありません**。人それぞれな部分も多くありますが、まずはシンプルなルールをこちらで設定しています。

### ディレクトリ構造
- 任意の場所に新しいフォルダを作成しフォルダ名を`cocoro`としてください。
- `cocoro`フォルダ内に`index.html`を作成してください。
- `cocoro`フォルダ内に`css`フォルダを作成し、その中に下記ファイルを作成してください。
  - style.scss
  - style.css
- `cocoro`フォルダ内に`image`フォルダを作成し、その中に画像データを配置してください。
<br />

**※DLしていただいたスターターフォルダを使用していただいてもOKです。**

```
cocoro/
├ index.html
├ css/
　　├style.css
　　├style.scss
└ image/
　　├ arrow.svg
　　├ fv.png
　　├ category-search.png
　　├ category1.png
　　├ category2.png
　　├ category3.png
　　├ category4.png
　　├ category5.png
　　├ category6.png
　　├ favicon.ico
 ├ firstView-pc.png
 ├ firstView-sp.png
　　├ logo.svg
　　├ news-pickup.png
 ├ news1.png
 ├ news2.png
　　├ special-pickup.png
　　├ special1.png
 ├ special2.png
 └ x.svg
```


## パスの記述方法

```html
<img src="image/***.png" alt="..." />
```

相対パスを使用します。

## メディアクエリ
```css
.header__title {
  font-size: 40px;

  @media screen and (max-width: 768px) {
    font-size: 24px;
  }
}
```

メディアクエリはデスクトップファーストで記述します。また、セレクタ毎に並べて記述する事により、**見やすく保守性が高いコード**になります。

## スタイリング
スタイリングを指定する場合は、クラス名をつけるようにしてください。**スタイリングのために、idは使用しない**ことが推奨されております。

## HTMLの雛形を作る
```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    
    <meta charset="utf-8" />
    
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    
    <title>cocoro雑貨店</title>
    
    <meta name="description" content="こころに優しいひとときを" />
    
    <meta name="format-detection" content="telephone=no" />
    
    <link rel="icon" href="image/favicon.ico">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap" rel="stylesheet">
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
    />
    
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
  ...
  </body>
</html>
```

## SCSSの雛形を作る

```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;
  }
}

/* 共通部品 */
html {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #382710;
  background-color: #fcfaf2;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* ここから記述します。 */
```

SCSSをはじめて使う方は、下記リンクからVS codeの拡張機能をインストールしてください。
- **[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass)**

3. コーディングルールの確認と準備(ブログ)

3. 3. コーディングルールの確認と準備(ブログ)