<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>こんにちは！木下です。今回はデザイナーとして「つくる」以外にも必要なことである、<strong>普段心がけて習慣にしていること</strong>を紹介します！<br></p><blockquote>目次<br>-外編-<br>街中のポスターやお店のパンフレット、看板などの「デザイン物」を意識して探す。<br>服やインテリアなどを店頭で見て、模様や形を観察する。<br>お店に集まる人を(ちょっとだけ)観察する。</blockquote><p><br><strong>1.街中のポスターやお店のパンフレット、看板などの「デザイン物」を意識して探す。</strong><br>意識してデザイン物を探してみると、デザインって実はさまざまな場所・意図で使われている、<strong>必要不可欠なもの</strong>だと気づくことができます。通学・通勤中には駅に貼ってあるポスターや、電車の吊り広告、お店のポスターやイベント告知など…デザインは、<strong>お店のブランドを伝えるもの</strong>になる、と言っても過言ではありません。<br>意識せずとも「思わず目に入る」ポスターやチラシを見つけたら、それは<strong>「人の目を引くことができた」優秀なデザイン</strong>。街中のデザイン物から学べることはたくさんあります。外出中でもデザイン物を意識的に見て「なぜこのデザインなのか？」「なぜ目を惹くのか？」を考えたり、気に入ったパンフレットやチラシは貰って帰ったりして学ぶ姿勢を忘れずに。真似して作ってみるのも良い練習になります◎<br><br><strong>2.服やインテリアなどを店頭で見て、模様や形を観察する。</strong><br>世に出ているデザイン物は、**「認められて」**出ているものです。しかし、私たちが認められるデザインを作るには、インプットとアウトプットが必要です。服やインテリアは、webデザインとは関係なさそうと思われるかもしれませんが、デザインは知識と感性も必要です。<strong>インプットをすることでデザインの引き出しも増えていきます</strong>。<br>「この模様可愛い。」を「Illustratorで表現できるかな？」に。<br>「こういう部屋に住みたいな〜」を「こういう部屋をつくる！」というふうに<br>意識を変えて、とにかく「つくりたいもの」をインプットすることを忘れずに！<br><br><strong>3.お店に集まる人を(ちょっとだけ)観察する。</strong><br>テーマ、コンセプト、ターゲットをきちんと設定して作られているお店が多い中、実際どういう人がこのお店に来るんだろう？とお客さんの性別や年代を考察したり、ターゲットに合ったお店なのか？を店内の雰囲気や商品を見て考えると、企画やデザインを考える際のいい刺激になります◎お客さんのことをあまりジロジロ見過ぎないように気をつけてください！！<br>この記事が少しでも参考になれば嬉しいです。最後まで読んでくださりありがとうございました！</p>

「つくる」だけじゃない！デザイナーとして習慣にするべきこと(その2)

<p>こんにちは！木下です。今回はデザイナーとして「つくる」以外にも必要なことである、<strong>普段心がけて習慣にしていること</strong>を紹介します！<br></p><blockquote>目次<br>-家編-<br>スマホアプリやゲームアプリ、サイトなどのレイアウトを観察する。<br>デザイン集などの本を読む。<br>家に届くチラシを捨てる前に一読する。</blockquote><p><br><strong>1.スマホアプリやゲームアプリ、サイトなどのレイアウトを観察する。</strong><br><strong>ただ使用するだけではなく</strong>、「ページ遷移の順番」「テーマカラー」「装飾」などの<strong>使用感やデザインをじっくり観察し、</strong>「なぜこの順番になっているのか？」「なぜこの色が多く使用されているのか？」「なぜこういった装飾が使われているのか？」と、「なぜ？」の部分を自分なりの答えを考えることで、記憶が定着しレイアウトやデザインを考える際の材料になります。<br>「なぜ？」の答えはさまざまで、デザインには正解がないですが、気になりすぎる場合はデザイナー仲間や頼れる先輩・先生と話し合うことも大切です！<br><br><strong>2.デザイン集などの本を読む。</strong><br>〇〇の作り方！などのハウツー本もおすすめですが、昔流行ったファッション集や外国のパッケージデザイン集など、<strong>デザイン集をじーっと眺める</strong>こともおすすめします。いろいろなデザインを頭にインプットすることは大切なので、この模様かっこいいな〜とか、こういうデザインいいな〜とか、とにかく「つくりたいもの」を増やす時間をとりましょう！手を動かすのはそれからでも構わないと思います◎女性ファッション誌を読むこともおすすめです！レイアウトが1ページごとに違っているため良い刺激になります。<br><br><strong>3.家に届くチラシを捨てる前に一読する。</strong><br>チラシって、ほとんどすぐ捨てることが多いと思うのですが、中にはしっかりとしたレイアウトでつくられているものもあります。チラシはポスターと違って手にとって見れるため、ほとんどのチラシが<strong>情報量が多い</strong>です。情報量が多いものをどうやってレイアウトしているのか？なんの情報が一番大きく表示されているか？など情報の優先順位を見定める練習にもなるので、一度じっくり読んでみることをおすすめします！<br><br>次回は外出時に心がけることを紹介します！<br>この記事が少しでも参考になれば嬉しいです。最後まで読んでくださりありがとうございました！</p>

「つくる」だけじゃない！デザイナーとして習慣にするべきこと(その1)

<p>こんにちは！岡崎です！<br>今回は自分がよくお世話になっているアプリを紹介していきます！<br></p><h1 id="h8a175a9b0e">前提</h1><p>M1 MacBook Pro Monterey の環境動作確認をしています．<br>CPUの種類やOSのバージョンに注意してください！<br></p><h2 id="h0da998c1ad">便利系アプリ</h2><h3 id="hccb8d767fc"><a style="color:#0f83fd" href="https://www.raycast.com/" target="_blank" rel="noopener noreferrer">Raycast</a></h3><p>高機能ランチャーアプリです．<br>※ランチャーアプリとは，Macでよく使う機能を素早く簡単に表示（操作）するためのアプリです。<br>macではSpotlightという表示アプリが搭載されています．<br>自分は元々<code>Alfred4</code>というランチャーアプリをRaycastに乗り換えました．<br>Raycastに機能があり，削除したアプリ<br><a style="color:#0f83fd" href="https://clipy-app.com/" target="_blank" rel="noopener noreferrer"><strong>Clipy</strong></a><br><a style="color:#0f83fd" href="https://apps.apple.com/us/app/hotkey-app/id975890633" target="_blank" rel="noopener noreferrer"><strong>HotKey App</strong></a><br><a style="color:#0f83fd" href="https://rectangleapp.com/" target="_blank" rel="noopener noreferrer"><strong>Rectangle</strong></a><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c410899a16d54c7cb27bc4b451c1ecef/718ef4b32262-20220802.png" alt=""></p><h3 id="h6e16ae5859"><a style="color:#0f83fd" href="https://github.com/exelban/stats" target="_blank" rel="noopener noreferrer">Stats</a></h3><p>メニューバーにCPUやメモリの使用率などを表示することができます<br>豊富なカスタマイズができて，後n時間で充電が切れるとかの表示もできます．<br><strong>RunCatから乗り換えました</strong><br>※走るキャラクターが幅をとって邪魔だと感じたので移行しました．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/431051b74c1e492999484ee75647b484/683c4c8ad60a-20220802.png" alt=""></p><h3 id="h46b038749e"><a style="color:#0f83fd" href="https://marta.sh/" target="_blank" rel="noopener noreferrer">Marta</a></h3><p>Finderを使いやすく機能をカスタマイズしたものです．<br>表示しているディレクトリでターミナルがすぐに開けたり，コピーペーストなどの機能が優秀で慣れると戻れないです．<br><strong>※自分はFinderを殺して使用しているのでその点でも採用しています．</strong><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/d85bde7c0e1b4c6a85101e45c17bc7db/5f5fbeb22fb5-20220802.png" alt=""></p><h3 id="hcada6bf03a"><a style="color:#0f83fd" href="https://ticktick.com/" target="_blank" rel="noopener noreferrer">TickTick</a></h3><p>タスク管理アプリです．<br>・googleカレンダーと連携できる<br>・ショートカットで気軽にタスクが追加できる<br>というのがメリットです．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/522c84d700d44d2bb785fc5c760cea1f/856500f3622e-20220802.png" alt=""></p><h3 id="h027d64fb34"><a style="color:#0f83fd" href="https://1password.com/jp/" target="_blank" rel="noopener noreferrer">1Password</a></h3><p>パスワード管理アプリです．<br>1つにまとめてます．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7e87dd4c3e3f4fdda39c2665107512dc/82c97fb6b746-20220802.png" alt=""></p><h3 id="h0e2eb9062f"><a style="color:#0f83fd" href="https://apps.apple.com/jp/app/hidden-bar/id1452453066" target="_blank" rel="noopener noreferrer">Hidden Bar</a></h3><p>menubarのアイコンが多くて気が散るので隠してます．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/314c37a995dd45408e60042ba5f2089f/8ea1bea4a58f3d7f64a55c586bd99eb4.gif" alt=""></p><h3 id="hde36dff145"><a style="color:#0f83fd" href="https://apps.apple.com/jp/app/screennote/id1258500140" target="_blank" rel="noopener noreferrer">ScreenNote</a></h3><p>画面上にお絵描きできます．<br>画面共有して説明する時に重宝しています．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3a8a73d7f73845798814f3ffe98e8f65/c241172be1b5-20220802.png" alt=""></p><h3 id="ha7bbb287b6"><a style="color:#0f83fd" href="https://pilotmoon.com/scrollreverser/" target="_blank" rel="noopener noreferrer">Scroll Reverser</a></h3><p>マウスのスクロール方向を反転させることができます．</p><h3 id="h748fe9aa97"><a style="color:#0f83fd" href="https://karabiner-elements.pqrs.org/" target="_blank" rel="noopener noreferrer">karabiner-elements</a></h3><p>キーボードをカスタマイズすることができます．<br>US配列のキーボードを使用する方は特に便利かも</p><h3 id="hb7d7942e2b"><a style="color:#0f83fd" href="https://folivora.ai/keyboardcleantool" target="_blank" rel="noopener noreferrer">KeyboardCleanTool</a></h3><p>キーボードを掃除したい時に便利</p><h3 id="h21f8a58c4c"><a style="color:#0f83fd" href="https://justgetflux.com/" target="_blank" rel="noopener noreferrer">Flux</a></h3><p>時間によって画面の温度を調整してくれるアプリ</p><h3 id="hf8711b2134"><a style="color:#0f83fd" href="https://dynalist.io/download" target="_blank" rel="noopener noreferrer">Dynalist</a></h3><p>文章構成や機能要件を決める時に1番使ってるアウトラインメモアプリ？<br>これなしでは生きていけない<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/8cfa8678ae7746bc91144dcc266e22e6/50bbaf1d01fe-20220802.png" alt=""></p><h3 id="h80863edccd"><a style="color:#0f83fd" href="https://freemacsoft.net/appcleaner/" target="_blank" rel="noopener noreferrer">AppCleaner</a></h3><p>アプリを削除した時に関連するログなども一緒にを削除してくれるイイヤツ</p><h3 id="h60b0916f3c"><a style="color:#0f83fd" href="https://www.choosyosx.com/" target="_blank" rel="noopener noreferrer">Choosy</a></h3><p>サービスごとにプロファイルを分けたい人におすすめ．<br>URLに指定の文字列が含まれた時~<br><code>cmd</code>を押しながらURLを開いた時~<br>など細かなカスタマイズが可能</p><h3 id="he6d1f28387"><a style="color:#0f83fd" href="https://folivora.ai/" target="_blank" rel="noopener noreferrer">BetterTouchTool</a></h3><p>さまざまなショートカットを作成することができる．<br>アプリだけでは設定できない柔軟なショートカットが魅力<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c71404a4ea384368a47c43b7d3ca1c02/37026ba729bb-20220802.png" alt=""></p><h3 id="h89ed37dcf0"><a style="color:#0f83fd" href="https://www.notion.so/ja-jp/desktop" target="_blank" rel="noopener noreferrer">Notion</a></h3><p>機能がありすぎるメモアプリ<br>タスク管理やドキュメント作成などさまざまな用途がある</p><h2 id="hc829d70789">デザイナー</h2><h3 id="h3f616aac93"><a style="color:#0f83fd" href="https://www.figma.com/downloads/" target="_blank" rel="noopener noreferrer">Figma</a></h3><p>デザインツールです．<br>最近はプレゼンや小さい素材を作るのにも使用しています．<br>最近日本語対応しました．</p><h2 id="h465d36771a">エンジニア</h2><h3 id="h59e24d16e8"><a style="color:#0f83fd" href="https://code.visualstudio.com/download" target="_blank" rel="noopener noreferrer">Visual Studio Code</a></h3><p>エディターです．<br>拡張機能が豊富で使いやすいです．</p><h3 id="h47d438b9d6"><a style="color:#0f83fd" href="https://www.jetbrains.com/ja-jp/products/" target="_blank" rel="noopener noreferrer">JetBrains製ツール</a></h3><p>統合開発環境です．<br>もとから多くの機能が入っており，GUIでコードを書く場合の選択肢はvscodeかjetbrains製ツールの2つだと思っています．</p><h3 id="h2513a9c324"><a style="color:#0f83fd" href="https://iterm2.com/" target="_blank" rel="noopener noreferrer">iTerm2</a></h3><p>ターミナルです．<br>hotkeyで自分は<code>cmd</code>+<code>j</code>で開いたり閉じたりできます<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/04cf02b82c3440299e7377723d23de3c/d9713511624d7fce46d2940f21b9fae2.gif" alt=""></p><h3 id="hb2a14f71e1"><a style="color:#0f83fd" href="https://www.docker.com/products/docker-desktop/" target="_blank" rel="noopener noreferrer">Docker Desktop</a></h3><p>ドッカーン</p><h3 id="h9019df4756"><a style="color:#0f83fd" href="https://www.postman.com/downloads/" target="_blank" rel="noopener noreferrer">Postman</a></h3><p>WebAPI開発用のツールです．<br>簡単にPOSTリクエストなどを送ることができます</p><h3 id="h5eea401a01"><a style="color:#0f83fd" href="https://fig.io/" target="_blank" rel="noopener noreferrer">Fig</a></h3><p>ターミナルで予測変換が出るようになる．<br>Fishなどから乗り換えた．<br>簡単で便利．</p>

MacBook に入れた方が良いアプリ 23選

<p>こんにちは！木下です。<br>今回はフォントの種類やその使い方、そして<strong>文字が与える印象</strong>について紹介します！</p><h2 id="h5a4acc6146">フォントの種類と使い方</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/9273e3e959ed472dbf2b9db0c10a7f40/1654337424082-SrPhT7W9Br.webp" alt=""></p><h2 id="hcf83e1357e"><br></h2><p><strong style="color:#222222">ゴシック体</strong><br><span style="color:#222222">文字の太さが均一で装飾がなく、可読性が高いフォントです。(可読性が高い…文字を理解するために頭を使う時間が短い)</span><br><span style="color:#222222">文字にクセがなく可読性が高いフォントは、遠くから見ても文字を判別することができます。</span><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/8c1bb1bda4614cb1baf860fb921ee25e/1654348045586-MorKLHRaN9.webp" alt=""></p><blockquote><span style="color:#222222">ゴシック体を使用したwebサイトの一部。暗い背景であるが、ゴシック体を使用しているため可読性を損なっていない。</span><br><span style="color:#222222">遠くから見ても文字を判別することができる太めのゴシック体はプレゼン資料が適し、細めのゴシック体はwebサイトの本文など読ませたい文章に適しています</span></blockquote><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/63fbfbebd20c49e19e458f374386cec8/1654337434749-Wzhb5PAB9Z.webp" alt=""><br><strong style="color:#222222">明朝体</strong><br><span style="color:#222222">文字の太さが細く、文字数が多くてもすっきりとして見えるため、小説や教科書などの長文に適しています。</span><br>プレゼン資料のフォントの違い。遠くから見ると<br>ゴシック体のプレゼン資料の方が視認性が高い。</p><blockquote>明朝体の可読性の高さを発揮するのは「読み物」であるため、ゴシック体のようにプレゼン資料やwebサイトの本文に使用することにはあまり適しません。</blockquote><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/d6fc660161944b8ca3d955cd9ba143b0/1654348657168-7sHcN8FgVL.webp" alt=""><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3443817d772f4f4f98d4f77424cf7ef3/1654337444395-kzGpfM7D3I.webp" alt=""><br><br><strong>デザイン書体</strong><br>文字に装飾がついていたり、大きさにばらつきがあるフォントです。可読性が低いものが多く、読ませる文には適しません。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/100592729dd9452399415bbbbb5d1055/1654350363290-mDPeA6rcxZ.webp" alt=""><br>一番目立たせたい箇所にデザイン書体を使用した制作物。</p><blockquote>可愛さやかっこよさなどの印象を与えるフォントが多いため、目立たせたい箇所にだけ使ったり、グラフィックデザインやバナーデザインの場で使用してみるとインパクトを与えるデザインにできます。</blockquote><h2 id="hcd07ec3fd1"><br>文字が与える印象</h2><p>人と人のコミュニケーションに欠かせないのが「言葉」であり「文字」 です。どんな言葉をどんな印象で伝えたいのか。 デザインする上でとても大切な要素になります。<br>実際に、文字はどういった印象を与えるのかを比べてみました。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3f6d966f82444559a78b163acb67d9a9/1654347169424-2MzgoeGKjU.webp" alt=""><br><span style="color:#222222">①のように、画像のみだとなんの広告かがわかりませんが、②のように具体的な情報や書体のイメージを組み合わせると効果的に伝えることができます。</span><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/295c6cb2601f45d2a6d14655fb5a7ba8/1654347550544-JHo7Iid2Hh.webp" alt=""><br>どちらの広告が適していると感じますか？ほとんどの方が、右の画像だと答えると思います。<br>左の画像のように、画像・イラストにテキストと書体が合っていないと、全体のイメージが統一されず見る人を混乱させてしまいます。<br>キャッチコピーと画像のイメージを揃えデザインを考えましょう。</p><h2 id="ha214098e44"><br>まとめ</h2><p>いかがだったでしょうか？文字をイメージにあわせることはとても重要だということが少しでも伝わっていれば幸いです。<br>最近は紙よりディスプレイ上で文章を読むことが多くなり、特に長文は読み づらいと感じる人が増えています。フォントの違いだけでなく、視線の移動距離や余白のリズムなど読みやすさへの工夫も施しましょう。<br>普段フォント選びをする際に迷ってしまう方に、この記事がフォント選びのお手伝いができたならば嬉しく思います。最後まで読んでくださり、ありがとうございました！</p>

初学者向け！文字が与える印象について

<p>今回はvar, const, letの違いについて詳しく解説したいと思います。<br>この３つのキーワードは変数をつける時に必ず出ます。<br>例えば：</p><pre><code>var name = "tony";
const name = "tony";
let name = "tony";</code></pre><p>varは昔からありますが、constとletはES6からの新しい宣言方法です。<br>だから、３つのキーワードも宣言方法ですが違いがあります。<br></p><h3 id="ha4216b9ab6">再宣言はvarしかできない</h3><p><strong>再宣言とは：</strong><br>一度宣言した変数は上書きすることができること。</p><pre><code>var num = 1;
var num = 22;
console.log(num); // =&gt;22

//letとconstは再宣言ができなし
let num = 1;
let num = 22; // =&gt; error

const num = 1;
const num = 22; // =&gt; error</code></pre><p><br></p><h3 id="hc681a46096">varとletは再代入ができるが、constができない</h3><p><strong>再代入とは：</strong><br>一度宣言した変数に、値を再び代入すること。</p><pre><code>var age = 10;
age = 90;
console.log(age); // =&gt;90

let age = 10;
age = 90;
console.log(age); // =&gt;90

//しかし　constの場合は
const age = 10;
age = 90;
console.log(age); // =&gt;error</code></pre><p><br></p><h3 id="hbd94b70209">letとconstはスコープがあるが、varはない</h3><p><strong>スコープとは：</strong><br>ブロック{}の中のみ参照でき、外は参照できない。</p><pre><code>//letとconstの場合
function test() {
    const x = 1;
    console.log(x); // =&gt; 1
    // {}の中に`x`は参照できる
}
test();
console.log(x); // =&gt; error
// {}外から`x`は参照できない</code></pre><p><br></p><h3 id="hdd3d00324c">つまり</h3><p><strong>var</strong>は１番万能そうに見えますが、<br>再宣言、再代入もできますし、スコープもありません。<br><strong>しかし</strong><br>複数再宣言、再代入をするとエラーが出やすく、<br>しかもスコープがないため、直すのも難しくてコードも読みにくいです。<br><br>だから<br><strong>constとletがおすすめです。</strong><br></p><p style="text-align:center"><strong>今度は演算について紹介します！！</strong></p><p><br></p>

JavaScriptの基礎から（０２）

<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><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>