PR

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が変わっていたので新しいものに修正しました。 どんなサイト?...
HTML/CSSを学ぶ

さらに楽をする、emmetのカスタマイズ方法

こんにちは。HTML/CSSの記述する速度を圧倒的に早めてくれるemmet。皆さんもお使いの方は多いのではないでしょうか。 emmetの使い方はこちら。 しかし一部の短縮記法は現代のHTMLで良いとされる形と微妙に違っていたりします。あるい...
HTML/CSSを学ぶ

【position: absolute なし】display: gridを使って要素を重ねる

こんにちは。今回は、最近見かけたdiplay: gridを使って要素を重ねる方法について考えていこうと思います。 デモ ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。 デモサイトはこちら。 結論 結論から言...
HTML/CSSを学ぶ

要素をコンテンツ幅をはみ出して画面いっぱいにするスマートな方法

こんにちは。今回はデザインで時々見かける、「コンテンツ幅は決まっているけど一部の要素は画面いっぱいになる」デザインのスマートな実装方法を紹介します。 どんなデザイン? 例えば次の画像のようなレイアウトです。 ベース部分の説明 まずコンテンツ...
HTML/CSSを学ぶ

display: grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略する

こんにちは。今回は、今までは再現するのに手間のかかった「レスポンシブで要素の順番が変わるレイアウト」をgridを使って上手く攻略していこうという内容です。grid自体の解説はあまり詳しく行わないので、以下の記事を参考にしてください。 「レス...
HTML/CSSを学ぶ

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。 装飾が賑やかなほど起こりやすい傾向...
HTML/CSSを学ぶ

教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック12選

こんにちは。昨今プログラミングやコーディングにおいて様々な情報が見られるようになりました。しかし、そんな環境でもまだまだ学習と仕事、案件には差があるように思います。 そこでこの記事では、実際に案件で求められることの多い細かなコーディングのテ...
HTML/CSSを学ぶ

Bootstrapはガチでいらない

はい。今回はCSSフレームワークのBootstrapは本当に必要なのかについて書いていきます。 Bootstrapとは、Twitter社が開発したWebのフロントエンドを高速で制作するためのフレームワークです。 公式: プログラミングスクー...
HTML/CSSを学ぶ

【最強の中央寄せ方法】全部display: flex;でいい説

こんにちは。今回は、僕がコーディングしていて最近思うことを書き残しておきます。 タイトルの通りで、HTML要素は基本的にdisplay: blockないしはinlineが初期値になっていますがもう全部flexにしちゃった方が色々楽なんじゃな...
スポンサーリンク