皆様こんにちは。フロントエンドエンジニアのレンツです。僕の連載では初学者向けに、コーディングのノウハウを提供しています。 今回はHTMLに付けるclassの名前について考えてみたいと思います。classに付ける名前によってタグの組み方もコーディングの速さも変わってきますし、拡張性の高さも変わってきます。 classの命名についてちょっと知識をつけていただいたら、コーディング時間が短くなってもっと楽しく開発できるようになりますよ！ というわけでいってみましょう。 コーディングの悩み：classの命名規則 さて、HTMLとCSSを勉強したら何かサイトを作ってみたくなりますよね。HTMLタグを書いてclassをつけてCSSでスタイルを当てていく〜……という作業を延々と繰り返す日々が始まります。 勉強しはじめでアドレナリン全開のころは勢いでいくらでもできる作業なのですが、考えなしにスタートしてしま

いつもclassの名前をどうするかで悩むどこにどんなclassを付けたか忘れてしまい、コーディングに時間がかかるclassの命名に必要な英語がパッと浮かばない class命名規則のポイント主なポイントclass名を見たらどこの何かがわかるまずclass名を付けるときに注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかある程度検討がつくということです。 特にコーディングを学び始めて間もない方はナンバリングをするだけだったり、何の脈絡もない名前を付けてしまったりして、修正が必要になったときに見返すと「何が何だかわからない状態」になってしまう人もいたりします。 そんな悲劇はもうたくさんです。class名を見れば「だいたいこの辺かな？」とアタリが付けられるようにしましょう。その術を以降で伝えていきます。 ある程度の規則性があるコードの品質が高いレベルで必要な場合は「厳格な

font-size: 62.5%;というテクニックがありますよね デフォルト値に手をかけるので、超絶嫌いなテクニックのひとつです なのにですね、あちこちで超見かけるんですよ。 検索かけても「便利！」という言葉がたくさん並んでいるんです。 超嫌いなんですが、いったいどこから湧いたテクニックなのかわからない。 そこで、時間を見つけて調べようと思って、タイトルを書くだけ書いたら1年溶けてました そろそろ廃れる頃合いだと思うのですが、現在Webサイト制作の勉強をしている初学者間では、いまだにメインストリームを歩んでいるっぽいので、流行りに乗り遅れたなあと思いつつ、つらつら調べてみました。 html { font-size: 62.5%; } の概要 フォントサイズをピクセルで指定した場合、ユーザーがブラウザ設定でフォントサイズを変更していてもフォントの大きさは変わりません。 はっきり言ってアクセシ

練習教材 体系的な学習 コードレビュー コーディングの練習教材 体系的な学習 プロによるコードレビュー 現場でスタートライン につく実力をつける スマートコーディングは、コーディング代行専門会社が 現場で必要な知識を６つのステップに体系化した、コーディング学習サービスです。

『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪

概要 画像のデコードは、ブラウザのメインスレッドをブロックします。こちらの記事では、例としてブラウザのメインスレッドが800ミリ秒を超えてブロックされています。 decoding="async" は、その解決策として使うことができます。 loading属性との違い loading属性は、loading="lazy"と使うことによって画像の遅延読み込み化ができます。 loading属性は「画像をいつ読み込むか？」という画像の読み込みのタイミングを担当しますが、decoding属性は「画像をいつデコードするか？」という画像のデコードのタイミングを担当します。 loading=lazyとdecoding="async"の併記 loading="lazy"とdecoding="async"は併用することができます。 注意点としては、デコードのタイミングが遅れることによって、スクロール時に画像が表示

どうも上かるびです。 imgタグのwidth/heightの値を入力することでレイアウトシフトが防げる、というのは割と有名なお話です。 ただそのwidth/heightの値をどうやって取得しているのかってあまり話題にならないですよね。 今回はVSCode上で簡単に画像（imgタグ）のwidthとheightを取得できる方法をご紹介します。 ネコーダー いくつか条件があるから気をつけてね！ VSCodeのデフォルト機能で取得できる 私も2021年の暮れ頃に初めて知ったのですが、VSCodeのデフォルト機能で画像のwidth/heightの値を取得できます。 Update image sizes - VS Code Can Do That - Workshopburkeholland.gitbook.io 上記公式ページにやり方が書いてあります。 手順だけ日本語で説明すると以下になります。 i

俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ

プライベートで CSS を教える機会があるのですが、CSS に関しては特に苦手にしている人が多く、「どうやったらそうなれますか？」という質問をよくもらいます。 そこで普段あまり考えたことがなかったので、ちょっと考えてみました。 その中で感じたことは、自分には見えているものが、他の人には見えていないということでした。 いくつかキーとなる視点がありそうなので、シリーズ化してみます。 今回は「レイアウト」について。 はじめに 今回は次のような、コメントフィード風の UI を作るケースを想定して順に説明していきます。 ちなみに自分の場合、作成時間は 15 分くらいでした。 コードはこちらで全て見ることができます。 https://codepen.io/mitsuruog/pen/dmZBLM?editors=1100 CSS が苦手な人にやらせた場合、自分が期待した通りにはならないケースが多いと思

バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/