<p>こんにちは！岡崎です！<br>今回は実務などで使用するwebアプリ開発者が知るべき最低限のHTMLタグを紹介していきたいと思います！</p><h2 id="h4f1c94b5cd">注意書き</h2><ul><li>記事の内容は記載当時であることに注意してください．</li><li>フロントエンドエンジニアである場合は<code>detailsタグ</code><span style="color:#1b1b1b">や</span><code>dialogタグ</code><span style="color:#1b1b1b">, </span><code>articleタグ</code><span style="color:#1b1b1b">などのタグを理解し，セマンティックWEBを心掛けるべきですので，記事で触れるタグはもちろんですがそれ以外のタグについて知っておく必要があると筆者は考えています．</span></li><li>本記事では，<a href="https://www.w3.org/TR/wai-aria-1.2/" target="_blank" rel="noopener noreferrer">WAI-AREA</a>などについては触れないものとする</li></ul><h2 id="h8ee2171751">重要度（★★★）</h2><h3 id="hbcce64804e">h1 ~ h6タグ</h3><p>見出しに使用します．<br>原則コンテンツ構造的に不自然にならないように使用しましょう．</p><pre><code>h1
├ h2
└ h2
&nbsp; ├ h3
&nbsp; ├ h3
&nbsp; └ h3</code></pre><h4 id="h698f6d872c">h1</h4><p>ロゴやサービス名などに使われることとが多い．<br>ページのタイトルということでブログなどの大見出しにも使用されることがある．<br>※正解はないのでコーディングする人のこだわりや思想によって使用場所が異なります．</p><h4 id="h7eef1ce917">自分の思想</h4><blockquote>h1は原則ヘッダーなどに存在するロゴに使用しています．<br>ブログの記事ページなど，内容がタイトルとして表すことができる場合はブログのタイトルにも使用していたりします．<br>HTMLの使用では複数配置することは可能ですが，原則1ページに1つがベストプラクティスとされています．<br>スクリーンリーダーを使用するユーザーにとって大見出しが複数ある場合混乱を招いてしまう場合があるので事情がない場合は1つにしたほうが良いでしょう．</blockquote><h3 id="heea0674248">pタグ</h3><p>文字を挿入する際に使用します．<br>段落を意味することが多いです．</p><h3 id="hf1a0551da1">aタグ</h3><p>押下するとページ遷移するリンクを生成することができます．<br><code>href属性</code>にURL，<code>target属性</code>を指定することによってタブに暗黙的な名称を付けたり新規タブで開くことができる．</p><pre><code>&lt;a href="https://" target="_blank"&gt;リンク&lt;/a&gt;</code></pre><h4 id="h3304772cd9">aタグを使用するメリット</h4><p>aタグを使用することでスクリーンリーダーを使用しているユーザーに遷移するリンクというのが伝えることができる．<br><code>Tabキー</code>でフォーカスができ，<code>Enterキー</code>で遷移することができるためアクセシビリティを考慮した実装を自前でする必要がなくなる．</p><h3 id="h43708af002">buttonタグ</h3><p>押下すると動作するボタンを生成することができます．<br>ユーザーが押せるボタンは原則<code>buttonタグ</code>で作成してください．（単純にアクセシビリティやユーザービリティが良くなり，ユーザー体験が向上します．）<br>※押せないボタンを実装する場合は<code>disable属性</code>を付与するだけで実装するべきものが減る<br>特定の条件下で<code>type</code>を指定しなかった場合は<code>submit</code>が付与されたりするのでそれを避けるために<code>type属性</code>をつけるのを癖づけましょう．<br><a href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md" target="_blank" rel="noopener noreferrer">reactのルールではtype属性を指定しないとエラーが出たりします．</a></p><pre><code>&lt;button type="button"&gt;ボタン&lt;/button&gt;</code></pre><h4 id="h6d3d968be0">aタグを使用せずに全てbuttonタグで実装しても良いのでは？</h4><p>画面遷移を<code>buttonタグ</code>でしてしまうとスクリーンリーダーを使用しているユーザーは想像しづらくなってしまうため使用方法によってタグを考える必要があります．</p><h3 id="h347cfa40ab">imgタグ</h3><p>画像を埋め込むことができるタグです．<br><code>src属性</code>に画像のパス，<code>alt属性</code>には画像が見えない人でもわかる文字を挿入してください．<br>また，ただのアイコンの場合でも<code>alt属性</code>は空文字だけでも指定するようにしてください．</p><pre><code>&lt;img src="画像のパス" alt="画像を説明する文章" /&gt;</code></pre><h4 id="h52bdbbfc31">alt属性の使用上の注意</h4><p>alt属性に文字を指定することで，画像が表示できなかった場合やスクリーンリーダーを使用した場合に画像の代わりに表示することができます．<br>空文字を指定することで画像に意味がないことを明示的に示すことができる．<br>また，スクリーンリーダーを使用した場合に読み上げを飛ばすことができる．</p><h3 id="h374983f2a5">divタグ</h3><p>レイアウトを取るために使用します．</p><h3 id="hb3864da3e2">spanタグ</h3><p>文字列の中で特定の位置にスタイルを当てたい場合に使用します．</p><pre><code>&lt;p&gt;〇〇を導入後、CVRが&lt;span&gt;30%向上&lt;/span&gt;しました！&lt;/p&gt;</code></pre><h2 id="h18f29d2271">重要度（★★）</h2><h3 id="h7ba8a4160a">formタグ</h3><p>小要素に<code>input</code>や<code>textarea</code>などの要素がある場合，submitすることでURL先に情報を送信する．<br><code>Enterキー</code>で送信されたり，<code>button[type=submit]</code>を使用することで<code>action</code>先にページリクエスト（リダイレクト）が行われる．<br>近年のwebアプリではrestful apiを用意しjsonを取得，フロントエンドに反映するパターンが多いため，その場合はeventを取得しpreventDefault()でデフォルトの挙動を無効化することが多いです．<br>※<code>php</code>や<code>rails</code><span style="color:#4d5156">などのviewファイルを</span><code>HTML</code><span style="color:#4d5156">直書きしている場合を除きます</span></p><pre><code>document.querySelector('form').addEventListener('submit', (event) =&gt; {
	event.preventDefault();
})</code></pre><h3 id="hc47193e1ed">inputタグ</h3><p>ユーザーが入力できる要素を生成します．<br>type属性をにinputの種類を指定することで数字だけのキーボードが出るようにしたりできます．<br>required属性を付与することで，入力がされていない場合のバリデーションをブラウザ単位でサポートすることができます．<br>placeholder属性に文字を入れることで入力前に薄く表示される文字を設定することができます．積極的に使用しましょう．</p><pre><code>&lt;input type="range" id="volume" name="volume" min="0" max="11" required /&gt;</code></pre><h3 id="h3a2f2dfffc">textareaタグ</h3><p>ユーザーが複数入力できる要素を生成します．<br>基本的にはinputタグと変わりありません．</p><h2 id="h03561720b8">重要度（★）</h2><h3 id="h75ffbda894">labelタグ</h3><p><code>inputタグ</code>や<code>textareaタグ</code>，<code>selectタグ</code>などの操作対象のタイトル?ラベル?に使用します．<br>pタグではなくlabelタグを使用することで文字をタップした場合のfocusの挙動が操作対象の要素に移るため，単純に使いやすくなり使用を推奨しています．</p><pre><code>&lt;label htmlfor="inputName"&gt;名前：&lt;/label&gt;
&lt;input id="inputName" /&gt;</code></pre><h3 id="hf18691eb29">brタグ</h3><p>改行することができます．</p><pre><code>初めまして，&lt;br /&gt;〇〇です．</code></pre><h2 id="hfa6daccb2d">セマンティックwebを意識する場合に知っておいたほうが良いタグ</h2><h3 id="h3be89268d1">セマンティックwebとは</h3><blockquote><span style="color:#000000">Webページに記述された内容について、それが何を意味するかを表す「情報についての情報」（</span><a style="color:#3344ff;background-color:#fcfcfa" href="https://e-words.jp/w/%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF.html" target="_blank" rel="noopener noreferrer"><strong>メタデータ</strong></a><span style="color:#000000">）を一定の規則に従って付加し、コンピュータシステムによる自律的な情報の収集や加工を可能にする構想。</span><br>セマンティックWebとは - 意味をわかりやすく - IT用語辞典 e-Words ( https://e-words.jp/w/セマンティックWeb.html )</blockquote><p>e-Wordsさんから引用しました．<br>要は単にHTMLを書くだけではなく，意味付けを意識したコーディングを意識することで<a href="https://gmotech.jp/semlabo/seo/blog/crawler_measures/" target="_blank" rel="noopener noreferrer">クローラー</a>にも認識されやすいことからSEO的にも良く，スクリーンリーダーの読み上げが変わる場合があるのでアクセシビリティ的にもより良い実装をすることができます．</p><h3 id="hdf68ac8090">headerタグ, mainタグ, footerタグ</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/95428dec5b6547248a64003da3cd1240/image.png" alt=""></p><h3 id="h9cc1cae3d7">navタグ</h3><p>ナビゲーションに使います．<br>例：ヘッダーのナビゲーションリンクやパンクズリストに使用します．</p><pre><code>&lt;nav class="crumbs"&gt;
&nbsp; &nbsp; &lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;Bikes&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;BMX&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;Jump Bike 3000&lt;/li&gt;
&nbsp; &nbsp; &lt;/ol&gt;
&lt;/nav&gt;</code></pre><h3 id="h614ce0e5a1">sectionタグ</h3><p>文章の見出しと本文を囲うタグとして使用します．</p><h3 id="hb6dddde4c7"><span style="color:#1b1b1b">detailsタグ</span></h3><p><code>detailsタグ</code>は<code>summaryタグ</code>と合わせて使用します．<br>アコーディオンメニューを作成する際にjavascriptを使用し作成することが多いですが，javascriptで作成してしまうとスクリーンリーダーの挙動が実装頼りになってしまいますがdetailsタグを使用することで正しく読み上げが行われます．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/07b822e89e36432396562383b4e22981/image.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>以上よく使う / 知っておいたほうが良いタグを紹介しました！<br>他にも<code>articleタグ</code>や<code>figureタグ</code>，<code>tableタグ</code>などさまざまなタグがありますが必要に応じて調べて使用するくらいの認識で大丈夫だと思います！<br>また，フロントエンドエンジニアとして仕事をしていく場合は一度<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLのタグ一覧</a>を確認してみてもいいかもしれません！<br>読んでいただきありがとうございました！</p>

WEB開発者が知るべき最低限のHTMLタグ一覧

<p>はじめまして！岡崎です！<br>今回は scss の環境を作っていきたいと思います！<br>最近 scss の勉強を始めた方の参考になればと思います！<br></p><h1 id="h8a175a9b0e">前提</h1><p>nodejs がインストールされていて、バージョンが 12.2.0 以上であること<br></p><h2 id="h601f62cead">確認方法</h2><p>(mac の場合)<br>ターミナル.app を開いて下記コマンドを貼り付けて Enter を押す</p><pre><code>node -v</code></pre><p><br><br></p><h1 id="hf3dfab0e74">環境の作り方</h1><h2 id="h978c72287c">ターミナルで作業したい場所に移動し、プロジェクトを作成するコマンドを実行する</h2><p>今回は desktop に作りたいと思います！<br>下記コマンドをターミナルに貼り付けて実行してください！</p><pre><code>cd ~/Desktop/ &amp;&amp; npm create vite@latest</code></pre><p><br>実行するとプロジェクト名を聞かれるので好きな名前にしましょう！（英数字のみ）<br>今回は<code>scss-sandbox</code>という名前にします！</p><pre><code>Project name: scss-sandbox</code></pre><p><br>次は framework を使用するか聞かれますが、今回は使用しないのでそのまま Enter で ok です。<br></p><pre><code>Select a framework: vanilla</code></pre><p><br>次は TypeScript を使用するか聞かれますが、そのまま Enter で ok です。<br></p><pre><code>Select a variant: vanilla</code></pre><p><br>実行し終わった場合下記の文字が表示されていると思います！<br></p><pre><code>Scaffolding project in /Users/hogehoge/Desktop/scss-sandbox...

Done. Now run:

  cd scss-sandbox
  npm install
  npm run dev</code></pre><p><br></p><h2 id="h3b5e740131">node_modules をインストールする</h2><p>先ほど表示されたコマンドを 2 つ実行していきます。<br><br><code>change dir</code>&nbsp;コマンドでファイルに移動します。</p><pre><code>cd scss-sandbox</code></pre><p><br>下記コマンドにて<code>node_modules</code>をインストールします。<br><code>npm install</code>&nbsp;は&nbsp;<code>npm i</code>&nbsp;でも大丈夫です。</p><pre><code>npm install</code></pre><p><br></p><h2 id="hd2a4daf23e">scss と autoprefixer をインストールする</h2><pre><code>npm i -D sass autoprefixer</code></pre><p><br></p><h2 id="hc1b93f4675">設定ファイルを作成する</h2><p><code>index.html</code>がある階層に<code>vite.config.js</code>ファイルを作成する<br>下記のコードを貼り付ける</p><pre><code>import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
  },
});</code></pre><p><br><br></p><h2 id="had72373fae">css ファイルを scss ファイルに書き換える</h2><p><code>style.css</code>から<code>style.scss</code>に名前を書き換え、ファイルの中身を下記に上書きする<br></p><pre><code>html {
  background: #38bdf8;
  h1 {
    text-align: center;
    color: white;
  }
}</code></pre><p><br><code>main.js</code>の中身を下記の 1 行だけにする<br></p><pre><code>import './style.scss';</code></pre><p><br></p><h2 id="h1def57324a"><code>index.html</code>&nbsp;の内容を変更する</h2><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="favicon.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Vite App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;初めての環境構築！&lt;/h1&gt;
    &lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p><br></p><h2 id="h2e6fe9756e">実際にローカルで確認してみる</h2><pre><code>npm run dev</code></pre><p><br><code>http://localhost:3000/</code>にアクセスしてみる<br><br>正しく表示されてたら完成〜！！<br><a style="color:#0f83fd" href="https://github.com/study-okazaki/scss-sandbox" target="_blank" rel="noopener noreferrer">途中でつまづいた場合はこちらのコードを参考にしてください</a><br></p><h2 id="h27246eb200">今後開発をする場合</h2><p>ターミナルで作業フォルダに移動(vscode 内蔵のターミナルの場合は不要)<br></p><pre><code>cd ~/Desktop/scss-sandbox</code></pre><p><br></p><h3 id="h01c9670962">開発用サーバーを立ち上げる</h3><pre><code>npm run dev</code></pre><p><br>停止する場合は&nbsp;<code>Control</code>&nbsp;+&nbsp;<code>c</code><br></p><h3 id="hebf71de885">本番用ファイルを作成する</h3><p>dist フォルダの下にファイルサイズが小さくなった html, css, js ファイルが生成されます<br></p><pre><code>npm run build</code></pre><p><br></p><h1 id="h9be0c3393d">おわりに</h1><p>いかがだったでしょうか！<br>この記事が誰かの参考になれば幸いです！</p>

5分で簡単にscssの環境を作成する

<p>はじめまして！岡崎です。<br>今回は、入学までプログラミングが全くできなかった私が当時勉強したこと、そして今の自分ならすることをまとめてみました！<br>最近勉強を始めた方の参考になればと思います！<br>※技能五輪全国大会という、24 歳以下が出場できるフロントエンド・バックエンド・CMS のモジュールがある全国大会で 2 位獲りました。力試しで出場したので力を入れて対策をしていた感じではないです。<br></p><h1 id="h8d027c8ed3">はじめに</h1><p>プログラミングの勉強は基本的にしんどいです。<br>わからないことばかりで、楽しくない時間やしんどくなる時期がたくさんくると思います。<br>広告でよく見る、<br><code>web のプログラミングは簡単で稼ぎやすい</code><br>というのはプログラミングが簡単という意味ではなく、<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/04e15308b7aa4fbf812139e6ca2346aa/8507a99e71db8e43cf171d37.png" alt=""><br>という意味です。<br><strong>簡単だと思って勉強を始めると心が折れる</strong>と思います。<br>ですが、時間をかけて根気よく向き合うことができれば誰でもある程度は書けるようになると思うので頑張りましょう！<br>外部との通信が出来るようになると一気に作れるものの幅が広がり、楽しくなってくるのでひとまずの目標は通信でデータを取ってきて便利なアプリを作ってみることで良いと思います！</p><h2 id="h24622a49d2">勉強をする上で意識しておきたいこと</h2><p>プログラミングは暗記する必要はないので、暗記をしようと思わないでください！<br>覚えるしかないものもありますが、100%覚える必要は全くありません！<br>色々触ってみることが成長への一番の近道だと思います！<br>色々なプログラミング言語を触るよりかは、何か 1 つに絞って習得した方が絶対に良いです！<br>書き方が変わるだけで本質的にはどの言語を使っても変わらないので、とりあえず 1 つの言語をがんばりましょう！<br>お金を払うことを躊躇しないでください！<br>知識は力です。無料のコンテンツでも勉強はできると思いますが、最初のうちは体型的に学べる書籍などで勉強するのが良いと思います。</p><h2 id="h451be01e23">勉強した順番</h2><ol><li>HTML, CSS</li><li>JavaScript</li><li>vue / react + typescript</li></ol><h2 id="ha080a2565a">HTML, CSS</h2><p>まず初めに<a style="color:#0f83fd" href="https://prog-8.com/courses/html" target="_blank" rel="noopener noreferrer">プロゲート</a>の HTML, CSS のコースを 2 周しました。（途中から有料会員になる必要があります。）<br>1 周目はヒントやスライドを振り返りながらなんとなくで進めてゆき、2 周目はできるだけヒントを見ずにスライドを中心に進めてゆきました。<br>なんとなく流れが掴めたら&nbsp;<a style="color:#0f83fd" href="https://www.udemy.com/courses/search/?src=ukw&amp;q=html+css" target="_blank" rel="noopener noreferrer">udemy</a>&nbsp;にて html, css の内容があるコースを購入し進めるのが良いと思います。<br>自分は CodeMafia 様の<a style="color:#0f83fd" href="https://www.udemy.com/course/front-dev-tutorial/" target="_blank" rel="noopener noreferrer">こちらのコース</a>を購入し進めました。<br>勉強中、プロパティの仕様などを確認したい場合が出てきた場合は検索エンジンにて、「プロパティ名 mdn」と検索し勉強することをお勧めします。<br>mdn は firefox の会社が作成している説明書みたいなものです。他のサイトよりも信頼できる情報源なので web 関連の調べ物をする場合は積極的に使用しました</p><ul><li><a style="color:#0f83fd" href="https://prog-8.com/courses/html" target="_blank" rel="noopener noreferrer">プロゲート - HTML</a></li><li><a style="color:#0f83fd" href="https://www.udemy.com/course/front-dev-tutorial/" target="_blank" rel="noopener noreferrer">【JavaScript＆CSS】ガチで学びたい人のための WEB 開発徹底実践（フロントエンド編）</a></li></ul><h2 id="hd148c32f21">JavaScript</h2><p>HTML, CSS がなんとなく書けるようになったら、HTML, CSS と同様にプロゲートにて JavaScript のコースを 2 周しました。<br>様々なサイトやサービスを使ってみた結果一番プロゲートが楽しく、わかりやすかったです。<br>そして udemy にて&nbsp;<a style="color:#0f83fd" href="https://prog-8.com/courses/es6" target="_blank" rel="noopener noreferrer">JavaScript</a>&nbsp;のコースを購入し進めました。私の場合は前回購入したコースの中に JavaScript が含まれていたのでそちらを使用し、学習を進めました。<br>コースの中でわからない用語が都度都度出てきたので調べて理解していました。<br>udemy を進めながら、<a style="color:#0f83fd" href="https://jsprimer.net/" target="_blank" rel="noopener noreferrer">jsprimer</a>&nbsp;で概要の復習をしていました。</p><ul><li><a style="color:#0f83fd" href="https://prog-8.com/courses/es6" target="_blank" rel="noopener noreferrer">プロゲート - JavaScript</a></li><li><a style="color:#0f83fd" href="https://jsprimer.net/" target="_blank" rel="noopener noreferrer">jsprimer</a></li></ul><h2 id="hf8817f2c20">vue / react + typescript</h2><p>HTML / CSS / JavaScript でいろいろ作れるようになった方は vue や react を勉強してみると仮想 DOM の概念に感動すると思います。<br>フロントエンドエンジニアとして働くことを想定している場合は、vue か react どちらか好きな方を触ることを強くお勧めします！<br></p><h1 id="h9be0c3393d">おわりに</h1><p>勉強で何をしたらいいのか分からなくなった時は&nbsp;<a style="color:#0f83fd" href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">roadmap</a>&nbsp;などを参考にしてみると良いかもしれません！<br>そして一通りフロントを触ったあとは、サーバーサイドや linux の基礎など自分の興味のままに勉強していきましょう〜！<br>いろいろな勉強方法がある中、この記事がどなたかの参考になれば幸いです！<br>それではよいエンジニアライフを！</p>

初心者がフロントエンドエンジニアとして全国2位になれた勉強法

<h2 id="hd0e9724409">HTML</h2><p>headタグの中に以下を記載します。ただ、VScodeでファイルを作った際に<strong>html:5</strong>を打つと、これは自動で出てきます。ReactやVueにもデフォルトで記載がありますね。</p><pre><code>// index.html

&lt;meta name=”viewport” content=”width=device-width, initial-scale=1.0″&gt;</code></pre><h2 id="h20b4c98e2a">CSS</h2><pre><code>// common.css

@media screen and (min-width: 481px) {
/* PC向けスタイル */
}
@media screen and (max-width: 480px) {
/* スマートフォン向けスタイル */
}</code></pre><p><strong>min-width: 481px</strong>というのは<strong>最低481pxのデバイスに適用されるよ</strong>という意味です。minという言葉が使われているので若干分かりづらいですが、481px以上のデバイスであれば自動的にこちらが適用されます。例えば<strong>min-width: 481px</strong>と記載してPCとスマホを分けた場合、同じタッチ操作のデバイスでありながら、iPadはこちらに含まれます。<br>逆に<strong>max-width: 480px</strong>は<strong>480px以下のデバイスに適用されるよ</strong>という意味。大体のスマホはこれにあたるのではないでしょうか。</p><h3 id="h45f7c23f14">画面サイズを複数指定するときの注意点</h3><p>min-widthは<strong>小さいものから大きいものに</strong>、<br>max-widthは<strong>大きいものから小さいものに</strong>向かって指定していかなければいけません。</p><pre><code>// common.css

/* NG例 */
@media screen and (min-width: 700px) {
/* 本当はこっちを当てたい */
}
@media screen and (min-width: 481px) {
/* こっちにも当てはまるので適用されてしまう */
}
@media screen and (max-width: 480px) {
/* 本当はこっちを当てたい */
}
@media screen and (max-width: 700px) {
/* こっちにも当てはまるので適用されてしまう */
}</code></pre><p>というのも、CSSは上から読み込まれるので、せっかく指定しても下に書いたものが上書きをしてしまうのです。<br>ここを適当に書いていて暫くハマった記憶があります。</p><h2 id="hd148c32f21">JavaScript</h2><p>JSは指定方法が2つあります。まずは僕が個人的に使う方から。</p><h2 id="ha842f805f3">CSSと同じように画面サイズから指定する</h2><pre><code>// common.js

function switchByWidth(){
  if (window.matchMedia('(max-width: 480px)').matches) {
    // スマートフォン向け処理
  } else if (window.matchMedia('(min-width:481px)').matches) {
    // PC向け処理
  }
}
// ロードとリサイズの両方で同じ処理を付与
window.onload = switchByWidth;
window.onresize = switchByWidth;</code></pre><p>JSはif文で指示をパスすることができるので、CSSとは逆に<br>min-widthは<strong>大きいものから小さいものに</strong>、<br>max-widthは<strong>小さいものから大きいものに</strong><br>向かって書いて、elesで飛ばしていくことが無難なようです。<br>そもそも、JSでデバイスではなく画面サイズごとに指示をする場面はあまり出てきませんが…。<br>CSSが画面サイズで判断をしている都合上、処理に互換性を持たせる意味でこちらをよく用います。<br>画面をリロードしたときと、PCなどで画面幅を変更したときに同じ処理を与えなければなりませんので、<br>画面処理を関数に入れて下2行で呼び出しています。</p><h2 id="h20b239ccbc">JavaScriptでuseragentを取得して切り替える</h2><pre><code>// common.js

if( /^Mozilla/5.0 ((iPhone;|iPad;|iPod;|Linux; U; Android|Linux; Android)/i.test(navigator.userAgent) ) {
  // スマートフォン向け処理
}else{
  // PC向け処理
}</code></pre><blockquote>ユーザーエージェントを取得し、iOSの端末とAndroidの端末であるかをチェックして処理を分けています。<br>スマホ用ブラウザとPC用ブラウザではtouch関係のイベントでプロパティの構造が異なる場合があるため、その処理をきっちり分けてエラーを避ける目的では有効です。 しかし、一般的なレスポンシブではブラウザ幅を参照して画面を切り替えるのが主流ですので、こちらの手法の場合は画面とJavaScriptの処理に整合性がなくなってしまう場合があります。</blockquote><p>参考サイト：https://www.site-convert.com/archives/1451</p>

一目でわかるレスポンシブデザイン実装方法【HTML/CSS/JavaScript】

<p><span style="color:#222222">前回、HTML・CSS・JSの基礎知識を紹介しましたが、今回はCSSの書き方を詳しく解説したいと思います。</span><br></p><h2 id="ha6114dee00">CSS ができること</h2><p>外見です！！！！！CSSは、Webサイトの見た目を美しくするものです。<br>CSS ではHTMLを記載した内容の外見が変えることができます。<br>例えば：<br>ー<strong>文字と文字の間隔</strong>（padding / margin）<br>ー<strong>文字と背景の色</strong>（color / background-color）<br>ー<strong>動画・アニメーション</strong>（animation）<br><a href="https://developer.mozilla.org/ja/docs/Web/CSS" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/CSS</a><br><strong style="color:#222222">もっと詳しく知りたい場合は、こちらをご参考ください</strong><br></p><h2 id="h4a3079365d">CSS の構造</h2><pre><code>セレクタ{
プロパティ:値;
}

例：
p {
 color: red;
}
//HTMLの中のpタグは文字の色が全部赤色に変える</code></pre><p>pタグ（セレクタ）の中のcolor文字色（プロパティ）をred（値）にする。<br><br><strong>クラス名・ID名を指定</strong></p><pre><code>//HTML
&lt;div id="aaa"&gt;
 &lt;p&gt;子の段落です&lt;/p&gt;    //aaaの子の段落
 &lt;div class="bbb"&gt;
   &lt;p&gt;子孫の段落です&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;


//CSS
#aaa,
.bbbb {
 color: blue;
} </code></pre><p>.　＝　クラス名<br>例としては.aaaaのクラス名を指定します。<br><br>＃　＝　ID名<br>#bbbbのID名を指定します。<br><br><strong>また、子孫セレクタの指定も可能です。</strong>子孫セレクタとは、親要素の中の要素のことを指します。子のすべての要素を「子孫」と言います。以下のようにid="aaa"は親要素で、#aaaの中のpタグは子要素です。</p><pre><code>//HTML
&lt;div id="aaa"&gt;
 &lt;p&gt;子の段落です&lt;/p&gt;    //aaaの子の段落
 &lt;div class="bbb"&gt;
   &lt;p&gt;子孫の段落です&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;

//CSS
#aaa p{
 color: blue;
} </code></pre><p><span style="color:#222222">まずは#aaaです。pはid名「aaa」内のすべてのpタグが対象になります。</span></p><pre><code>//HTML
&lt;div id="aaa"&gt;
 &lt;p&gt;子の段落です&lt;/p&gt;    //aaaの子の段落
 &lt;div class="bbb"&gt;
   &lt;p&gt;子孫の段落です&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;

//CSS
.bbb &gt; p{
 color: blue;
} </code></pre><p><span style="color:#222222">.bbb &gt; pはclass名「bbb」の中のpタグのみが対象になります。d名「aaa」内のpタグは入りません。</span></p><pre><code>*{
 margin: 0;
 padding: 0;
}</code></pre><p>最後＊は全部という意味で、すべての要素が対象になります。CSSの初期設定によく使われます。</p><p style="text-align:center"><br></p><p style="text-align:center"><strong style="color:#222222">次はJSの書き方について紹介します！！</strong></p>

CSSの書き方

<h3 id="h0ae0ffe383">HTML・CSS・JavaScriptの関係</h3><p>サイトを作るにはこの３つの関係を覚える必要があります。</p><ul><li>HTMLはサイトの<strong>基本的構造を記述</strong></li><li>CSSはサイトの<strong>表示やレイアウトなどを制御</strong></li><li>JavaScriptは<strong>各要素の動作を制御</strong></li></ul><p>簡単に言えば:</p><ul><li>HTMLは<strong>骨格</strong></li><li>CSSは<strong>外見</strong></li><li>JavaScriptは<strong>動作</strong></li></ul><p><br></p><h3 id="h7019529581">実際の書き方</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7521b0e3ee8b4951a1033898cada2785/HTML.webp" alt=""></p><h3 id="h5bb40017b8">HTMLの構造</h3><p>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt;&lt;/body&gt; &lt;/html&gt; 開始タグ&lt;&gt;と終了タグ &lt;/ &gt;があり、最後は終了タグで閉じます。 headの中は、titleやmetaなどの隠れた情報があります。<br><span style="color:#ffffff">&lt;head&gt;</span></p><pre><code>    &lt;meta charset&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta name="format-dtection" content="telephone=no"&gt;
    &lt;meta name="keyword" content=""&gt;
    &lt;meta name="descripion" content="ここに説明文を設定"&gt;
    &lt;meta name="twitter:card" content="summary"&gt;
    &lt;meta name="twitter:site" content="@twitteraccount"&gt;
    &lt;meta property="og:site_name" content="サイト名"&gt;
    &lt;meta property="og:title" content="サイトタイトル"&gt;
    &lt;meta property="og:description" content="サイト説明文"&gt;
    &lt;meta property="og:url" content="https://www.hogehoge.com"&gt;
    &lt;meta property="og:image" content="https://www.hogehoge.com./hoge.jpg"&gt;
    &lt;meta property="og:image:type" content="image/jpeg"&gt;
    &lt;meta property="og:image:width" content="600"&gt;
    &lt;meta property="og:image:height" content="400"&gt;
    &lt;meta property="og:type" content="website"&gt;
    &lt;link rel="shortcut icon" href="http://www.hoge.hoge/favicon.ico" type="image/vnd.microsoft.icon"&gt;
    &lt;link rel="apple-touch-icon" href="http://www.hoge.hoge/logo.png"&gt;
    &lt;link rel="stylesheet" href="css/sample09.css"&gt;　
    &lt;title&gt;タイトル&lt;/title&gt;
  &lt;/head&gt;</code></pre><p><a href="https://web-camp.io/magazine/archives/6869" target="_blank" rel="noopener noreferrer">https://web-camp.io/magazine/archives/6869</a><br><span style="color:#222222">bodyの中は、内容が表示される部分のことです。</span><br></p><h3 id="h2cb3745315">HTML に CSS と JavaScript を追加する</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/fab580f4c9cd49f9b868ffa3fadf4156/HTMLTOCSS.webp" alt=""></p><h3 id="h233599169c">外部CSSの読み込み方</h3><pre><code>&lt;head&gt;
　　　　　　　　&lt;link rel="stylesheet" href="sample.css"&gt;
&lt;/head&gt;</code></pre><h3 id="h24bb901a2a">外部JavaScriptの読み込み方</h3><pre><code>&lt;body&gt;
    &lt;script type="text/javascript" src="techAcademy.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre><p><span style="color:#222222">HTML内にJavaScriptを直接埋め込む方法もありますが、</span><br><span style="color:#222222">あまり使う機会がないです。</span><br><span style="color:#222222">書き方は以下の通りです。</span></p><pre><code>&lt;script&gt;
  "JavaScriptのコードはこっち書く"
&lt;/script&gt;</code></pre><p><br></p><h3 style="text-align:center" id="h54c273dc1c">次回はCSSの書き方を紹介します！！<br>お楽しみに</h3><p><br></p>

WEB開発者が知るべき最低限のHTMLタグ一覧

5分で簡単にscssの環境を作成する

初心者がフロントエンドエンジニアとして全国2位になれた勉強法

一目でわかるレスポンシブデザイン実装方法【HTML/CSS/JavaScript】

CSSの書き方

フロントエンドエンジニアの基礎知識