<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

Streamlit

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

サンプルコース

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

レッスン_サンプル

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

## ディレクトリ構造

- 任意の場所に新しいフォルダを作成しフォルダ名を`Gnamgnam`としてください。
- `Gnamgnam`フォルダ内に`index.html`を作成してください。
- `Gnamgnam`フォルダ内に`css`フォルダを作成し、その中に下記ファイルを作成してください。
  - style.scss
  - style.css
- `Gnamgnam`フォルダ内に`image`フォルダを作成し、その中に画像データを配置してください。

```
Gnamgnam/
├ index.html
├ css/
│　├style.css
│　├style.scss
└ image/
　　├ logo.png
　　├ fv.png
　　├ concept.png
　　├ menu01.png
　　├ menu02.png
　　├ menu03.png
　　├ fixed_bg.png
　　├ shop.png
　　├ reservation.png
　　└ favicon.ico
```

## パスの記述方法

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

相対パスを使用します。
- 絶対パスとは<br>
ルートディレクトリから完全に指定するパス。<br>
例: https://www.example.com/images/logo.png (ウェブ)
- 相対パスとは<br>
現在のディレクトリからの位置を基準に指定するパス。<br>
例: ../images/logo.png (親ディレクトリのimageフォルダ内のファイル)

## メディアクエリ

```css~style
.header__title {
  font-size: 40px;

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

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

## スタイリング

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

## HTMLの雛形を作る

```html~index
<!DOCTYPE html>
<html lang="ja">

<head>
  
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  
  <title>Gnam gnam</title>
  
  <meta name="description" content="Gnam gnamは新宿にある本格イタリアンのお店です。" />
  
  <meta name="format-detection" content="telephone=no" />
  
  <link rel="icon" href="images/favicon.ico">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  
  <link rel="stylesheet" href="css/style.css" />
  
  <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=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap" rel="stylesheet">
</head>

<body>
  ...
</body>

</html>

```

## SCSSの雛形を作る

```scss~style
/*******************************
Webサイト全体の指定
*******************************/
html {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  letter-spacing: 0.08em;
  line-height: 1.5;
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  display: block;
}

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

```

3. コーディングルールの確認と準備（レストラン）