HTML/CSSを学ぶ 中央揃えにleft: 50%; transform: translateX(-50%);などという馬鹿げた記述をするな
こんにちは。今回はよく紹介される中央揃えテクニックについて思うところがあったので、最新の中央揃えを解説します。 よく紹介される、position: absolute;にしてleft: 50%; transform: translateX(-...
Web制作を学ぶ
HTML/CSSを学ぶ 
HTML/CSSを学ぶ 【コピペ可】文字数制限のかかったいい感じのtextareaを作る方法
こんにちは。今回はtextareaタグをいい感じにする方法を紹介します。 作るものの確認 文字数制限 ＋ それが分かりやすいように右下に表示をします。制限文字数を超えると赤くなってユーザーが気づきやすくしています。 const textar...
HTML/CSSを学ぶ 【position: absoluteなし】一見重なっている要素をlinear-gradientで解決する
こんにちは。今回は、デザイン上の見た目は要素が重なっているように見える要素をスマートに実装する方法を解説したいと思います。 重なっているデザインといえばposition: absolute;を使った実装法がまず思いつくと思いますが、posi...
Web制作を学ぶ Webサイトで実際に表示されているフォントが何か確認する方法
みなさん、Webサイトを見ていて「このフォントなんて名前なんだろう？」と気になったことってありますよね。 あるいはWeb制作をしているコーダーやデザイナーの方であれば「ちゃんとCSSで指定した通りにフォントが表示されているかな？」と不安にな...
HTML/CSSを学ぶ CSSの単位、vwはいつ使うべきか【おすすめの使い方を紹介】
cm、mm、Q、in、pc、pt、ex、ch…と実は20以上の単位がCSSには存在します。といってもpxと％が使えれば概ね問題はありません。 しかし、時々pxと%以外の単位を知っているとコーディング時にお得な時があります。今回はその中のvw...
HTML/CSSを学ぶ CSSの単位、emはいつ使うべきか【おすすめの使い方を紹介】
CSSにはいろんな単位がありますよね。pxと%に始まり、ある程度見かけるem、rem、vw、vh、ほとんど見かけないcm、mm、Q、in、pc、pt、ex、ch…と実は20以上の単位がCSSには存在します。といってもpxと％が使えれば概ね問...
Web制作を学ぶ 【2024版】Webエンジニア必見！おすすめVSCode拡張機能11選と、実はもう不要なもの4選
Web制作やWeb開発をしている方の多くはコードエディタにVSCodeを採用していますよね。シェア率70%を超えているという調査もあるほどです。その一因は、拡張機能で自分好みにカスタマイズできるからでしょう。 しかし一方でデフォルトの機能も...
Web制作を学ぶ 【コーダー必見！】VSCodeのショートカット一覧【Web制作特化】
エンジニア、コーダーなら多くの人が使っているVSCode。せっかく素晴らしいツールですから、なるべく多くの機能を使って効率的に開発したいところ。 VSCodeのようなリッチテキストエディタを使うメリットの1つは、なんと言ってもショートカット...
HTML/CSSを学ぶ サイズが違うタイル状のレイアウトを自在に行う【grid-template-areas】
こんにちは。今回はタイル状かつタイルのサイズが違う場合のスマートなコーディング方法を解説しようと思います。 例えば次のようなレイアウトです。Airbnbのサイトにあるレイアウトですが、最初の画像だけサイズが違います。 これだけなら左右に要素...
HTML/CSSを学ぶ 【marginに別れを告げる】gapプロパティでスマートに余白を攻略する
こんにちは。今回は余白について書いていきます。 みなさんCSSにおいて余白といえばmargin、あるいはpaddingを思い浮かべるでしょう。要素と要素の間の余白はmarginを、要素の内側の余白にはpaddingを、というような使い分けを...