HTML/CSS あらゆるUIパーツ、レイアウトの実装法を学べるcsslayout.ioがすごい こんにちは。今回は、いろんなレイアウト、見た目をHTML/CSSで表現する方法をまとめているcsslayout.ioさんを紹介します。 どんなサイト? Webサイトでよく使われるUIパーツを、HTML/CSSのみで実装する方法... 2023.01.26 HTML/CSS
HTML/CSS さらに楽をする、emmetのカスタマイズ方法 こんにちは。HTML/CSSの記述する速度を圧倒的に早めてくれるemmet。皆さんもお使いの方は多いのではないでしょうか。 emmetの使い方はこちら。 しかし一部の短縮記法は現代のHTMLで良いとされる形と微... 2023.01.21 HTML/CSS
HTML/CSS 【position: absolute なし】display: gridを使って要素を重ねる こんにちは。今回は、最近見かけたdiplay: gridを使って要素を重ねる方法について考えていこうと思います。 デモ ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。 デモサイト... 2022.12.24 HTML/CSS
HTML/CSS コンテンツ幅の中の特定の要素を画面いっぱいにするスマートな方法 こんにちは。今回はデザインで時々見かける、「コンテンツ幅は決まっているけど一部の要素は画面いっぱいになる」デザインのスマートな実装方法を紹介します。 どんなデザイン? 例えば次の画像のようなレイアウトです。デモサイトはこちら(... 2022.12.23 HTML/CSS
HTML/CSS 多分これが一番いいアコーディオンメニューだと思います。(高さ可変=height: auto; 対応) こんにちは。今回はアコーディオンメニューについて色々考えたので解説していこうと思います。 アコーディオンメニューと一言に言っても、googleで検索すると色々な実装パターンが出てきますよね。またライブラリもこれといったものがあまりあ... 2022.11.17 HTML/CSSweb制作
HTML/CSS display: grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略する こんにちは。今回は、今までは再現するのに手間のかかった「レスポンシブで要素の順番が変わるレイアウト」をgridを使って上手く攻略していこうという内容です。grid自体の解説はあまり詳しく行わないので、以下の記事を参考にしてください。 ... 2022.09.30 HTML/CSS
HTML/CSS レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法 皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。 装飾が賑やかなほど起こりや... 2022.08.17 HTML/CSS
HTML/CSS 教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック12選 こんにちは。昨今プログラミングやコーディングにおいて様々な情報が見られるようになりました。しかし、そんな環境でもまだまだ学習と仕事、案件には差があるように思います。 そこでこの記事では、実際に案件で求められることの多い細かなコーディ... 2022.08.13 HTML/CSS
HTML/CSS Bootstrapはガチでいらない はい。今回はCSSフレームワークのBootstrapは本当に必要なのかについて書いていきます。 Bootstrapとは、Twitter社が開発したWebのフロントエンドを高速で制作するためのフレームワークです。 公式: ... 2022.06.13 HTML/CSS
HTML/CSS display、全部flexでいい説 こんにちは。今回は、僕がコーディングしていて最近思うことを書き残しておきます。 タイトルの通りで、HTML要素は基本的にdisplay: blockないしはinlineが初期値になっていますがもう全部flexにしちゃった方が色々楽な... 2022.06.06 HTML/CSS