HTML/CSSを学ぶ たったの一行でサイトの読み込み速度を実質10倍以上にする方法
ホームページはできれば読み込みが速い方が良いですよね。特にLPのようにユーザーに直接商品を訴求するようなページではなるべく離脱率を下げる工夫がしたいところです。その一つとして読み込み速度はとても重要です。一方でLPは使われる画像の数が多く、...
HTML/CSSを学ぶ
HTML/CSSを学ぶ 
HTML/CSSを学ぶ CSSで安易なネストは使うな【Sassもだよ】
こんにちは。Chrome112でCSSのネストが使えるようになりました。Can I Useを見るとまだモダンブラウザはほとんど対応していません（2023/04/05現在）が、基本的には後追いで実装する流れになるでしょう。Twitterの反応...
HTML/CSSを学ぶ あらゆるUIパーツ、レイアウトの実装法を学べるcsslayout.ioがすごい
こんにちは。今回は、いろんなレイアウト、見た目をHTML/CSSで表現する方法をまとめているcsslayout.ioさんを紹介します。※ 2023/12/20 更新サイトのURLが変わっていたので新しいものに修正しました。どんなサイト？We...
HTML/CSSを学ぶ さらに楽をする、emmetのカスタマイズ方法
こんにちは。HTML/CSSの記述する速度を圧倒的に早めてくれるemmet。皆さんもお使いの方は多いのではないでしょうか。emmetの使い方はこちら。しかし一部の短縮記法は現代のHTMLで良いとされる形と微妙に違っていたりします。あるいはど...
HTML/CSSを学ぶ 【position: absolute なし】display: gridを使って要素を重ねる
こんにちは。今回は、最近見かけたdiplay: gridを使って要素を重ねる方法について考えていこうと思います。デモブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。デモサイトはこちら。結論結論から言えば、gr...
HTML/CSSを学ぶ 要素をコンテンツ幅をはみ出して画面いっぱいにするスマートな方法（フルブリードレイアウト）
こんにちは。今回はデザインで時々見かける、「コンテンツ幅は決まっているけど一部の要素は画面いっぱいになる」デザインのスマートな実装方法を紹介します。どんなデザイン？例えば次の画像のようなレイアウトです。フルブリードレイアウトと呼ばれることも...
HTML/CSSを学ぶ display: grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略する
こんにちは。今回は、今までは再現するのに手間のかかった「レスポンシブで要素の順番が変わるレイアウト」をgridを使って上手く攻略していこうという内容です。grid自体の解説はあまり詳しく行わないので、以下の記事を参考にしてください。「レスポ...
HTML/CSSを学ぶ レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか？僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。装飾が賑やかなほど起こりやすい傾向に...
HTML/CSSを学ぶ 教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック12選
こんにちは。昨今プログラミングやコーディングにおいて様々な情報が見られるようになりました。しかし、そんな環境でもまだまだ学習と仕事、案件には差があるように思います。そこでこの記事では、実際に案件で求められることの多い細かなコーディングのテク...
HTML/CSSを学ぶ Bootstrapはガチでいらない
はい。今回はCSSフレームワークのBootstrapは本当に必要なのかについて書いていきます。Bootstrapとは、Twitter社が開発したWebのフロントエンドを高速で制作するためのフレームワークです。公式：プログラミングスクールやい...