【これやってOK？NG？】 <h1>見出し1</h1> <h1>見出し2</h1> h1タグを1ページに2つ使う！ これってOK？NG？ #どこやさ

【これやってOK？NG？】 <div class="space"></div> 空のdivでスキマを作る！ これってOK？NG？ #どこやさ

【これやってOK？NG？】 <p style="color: blue; font-size: 20px;">こんにちは</p> 見た目の指定を全部HTMLに書く！これってOK？NG？ #どこやさ

【これやってOK？NG？】 HTMLでクラス名に日本語を使うと… <div class="赤い文字">こんにちは</div> これってOK？NG？ あなたは使ったことある？🧐 #どこやさ

【これやってOK？NG？】 <div class="main-title">ようこそ</div> クラス名に「-（ハイフン）」を使う！ これってOK？NG？ #どこやさ

【これやってOK？NG？】 <div class="box red center">こんにちは</div> クラスをスペースで区切って3つ指定！ これってOK？NG？ #どこやさ

【これやってOK？NG？】 CSSの書き方👇 color = red; 「=」で色を指定！これってOK？NG？ #どこやさ

【これやってOK？NG？】 <p>本文です</p> <br><br><br><br><br> <p>次の段落です</p> これで余白を作る…これってOK？NG？ 👇 あなたの予想をリプで教えてください！ #どこやさ

綺麗なコードを書くヒント⑥ 【余分なコードは削除する】 一部をコメントアウトしてみたりして いろいろ試しながら 実装中していくと思いますが 納品時には不要なコードやファイルは 削除しておくようにしましょう！ 特にJSのconsole.logなどは 忘れやすいので要注意です！⚠️ #Web制作 #どこやさ

綺麗なコードを書くヒント⑤ 【!importantは使わない】 !importantは必ずスタイルが当たるので便利なのですが、修正を重ねるごとにどんどんコードが複雑になっていきます😱 !importantは原則として使わない、 というルールを徹底しましょう！ #Web制作 #どこやさ

綺麗なコードを書くヒント④ 【CSSのネストは最小限にする】 CSSのネストが深すぎるとコードが複雑になります。 できるだけネストではなく個別にクラス名をつけてCSSを当てるようにしましょう。 例） ❌ .news-section div div p ⭕️ .news-text　←pタグにクラス名をつける #Web制作 #どこやさ

綺麗なコードを書くヒント③ 【適切にコメントを書き残す】 特にJavaScriptのコードなどで、 そのコードが何をしているコードなのかを書いておくと、他の人が見たときに大変役立ちます！ 例） // トップに戻る $(".top-btn").click(() => $(window).scrollTop(0)); #Web制作 #どこやさ

綺麗なコードを書くヒント② 【意味のあるクラス名を使う】 クラス名を見て、何を示しているかすぐに分かる名前にしましょう。 例） ❌ section1 （何のセクションなのか分かりにくい） ⭕️ news-section （ニュースセクションだとすぐに分かる！） #Web制作 #どこやさ

綺麗なコードを書くヒント① 【インデントを揃える】 今日からは、他の人が見ても読みやすい 綺麗なコードを書くためのヒントをご紹介します！💡 まずは基本のインデント。 VSCodeの拡張機能などで自動的に整形されるようにしておくのがおすすめです！ #Web制作 #どこやさ

VSCodeのおすすめ拡張機能⑨ 「Figma for VS Code」 Figmaのデザインカンプをコーディングするときに便利な機能です。 VSCodeから画像を書き出せたり、コードを提案してくれたりします。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能⑧ 「Prettier - Code formatter」 コードのインデントを自動で整形してくれる機能です。 コードがスッキリ見やすくなります。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能⑦ 「htmltagwrap」 選択したテキストを簡単にHTMLで囲うことができる機能です。 テキストの一部をspanで囲いたい！というときに便利です。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能⑥ 「HTMLHint」 HTMLの文法が間違っているときに教えてくれる機能です。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能⑤ 「CSSTree validator」 CSSの文法が間違っているときに教えてくれる機能です。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能④ 「TODO Highlight」 後でやろう、と思っているTODOをコメントで「TODO:〇〇」と書いておくとハイライトしてくれる機能です。 後でやるつもりだったのに忘れてしまった…！というミスを防ぎます。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能③ 「Auto Rename Tag」 開始タグと終了タグのどちらかを変えると、もう一方も自動的に変わる機能です。 時短にもなるし、ミスを防ぐことができます。 marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

VSCodeのおすすめ拡張機能② 「Code Spell Checker」 スペルミスを教えてくれる機能です。 うまく動かないと思っていたらスペルミスが原因だった、ということ、よくありますよね…！ marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

6/3作業記録 7:00-8:00 朝活 23:00-3:00 ﾓｸﾓｸ -架空カフェサイト(#どこやさ) -＋α カフェメニューサイトを制作 -もちろんﾚｽﾎﾟﾝｼﾌﾞ対応済 -そろそろscssｺ-ﾃﾞィﾝｸﾞ戻ろうか😃 #侍エンジニア #どこやさ #webデザイン #AーTECH pic.x.com/uDJSoRcezq

VSCodeのおすすめ拡張機能① 「zenkaku」 コードの中に全角スペースが紛れているときに教えてくれる機能です。 コード内に全角スペースが含まれているとエラーの原因になることがあるので、 基本的には半角スペースを使うようにしましょう！ marketplace.visualstudio.com/items?itemName… #Web制作 #どこやさ

■リストスタイルのCSS 「list-style-type」プロパティで、リストのマーカーの種類を指定します。noneでマーカーを非表示にできます。 ul { list-style-type: none; } #Web制作 #どこやさ

■クリッピングパスのCSS 「clip-path」プロパティを使って、画像など要素を特定の形状に切り取ることができます。 三角矢印▶︎でよく使います。 img { 　clip-path: polygon(0 0, 0% 100%, 100% 50%); } #Web制作 #どこやさ