<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

レッスン_サンプル

## 2. コーディングルールの確認と準備

**[各種準備ファイルのダウンロードはこちら](https://www.notion.so/if-tech/b8eea75554f0453fac0f5dba6d1f0946)**

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


### ディレクトリ構造
  - 任意の場所に新しいフォルダを作成しフォルダ名を`Taro’sScenery`としてください。
  -   `Taro’sScenery`フォルダ内に`index.html`を作成してください。
 -   `Taro’sScenery`フォルダ内に`css`フォルダを作成し、その中に`style.css`を作成してください。
  -  `Taro’sScenery`フォルダ内に`image`フォルダを作成し、その中に画像データを配置してください。
次のリンクより画像素材をダウンロードできます。

~~~

Taro’sScenery/
├ index.html
├ css/
|  └ style.css
└ image/
　　├ about.png
　　├ works1.png
　　├ works2.png
　　└ works3.png

~~~


### パスの記述方法
~~~html
<img src="image/***.png" alt="..." />
~~~
相対パスを使用します。


### メディアクエリ

~~~css
.header__title {
  font-size: 40px;
}
@media screen and (max-width:768px) {
 .header__title{  
   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>Taro's Scenery</title>
    
    <meta name="description" content="フォトグラファーの山田太郎です" />
    
    <meta name="format-detection" content="telephone=no" />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
    />
    
    <link rel="stylesheet" href="style.css" />
  </head>
    <body>
    ...
    </body>
</html>
~~~


### CSSの雛形を作る
~~~css
/**
 * 共通部品
 *
 * @format
 */

html {
  font-family: Inter;
  color: #333;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

a:hover {
    opacity: 0.8;
}
/* ここから記述します。 */
~~~

2. コーディングルールの確認と準備