CSS 初学者だった頃に知りたかったこと | rakuishi.com
この記事では、自分が CSS 初学者だった頃に知りたかったことをまとめています。 Normalize.css Chrome, Safari, Firefox, IE などといったブラウザには、各々、デフォルトスタイルが当てられています。これにより、同じ要素なのに、余白や文字の大きさが微妙に異なる、といったことが起こります。 そこで登場する Normalize.css は、各ブラウザの違いを吸収し、各要素の有用なデフォルトのスタイルを維持したものです。Normalize.css を使えば、どのブラウザで見た時にも同じスタイルが当てられます。 Normalize.css は、HTML の head 内で以下のように宣言して使います： <link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/c
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSレイアウトを学ぶ
GitHub - vasanthk/css-refresher-notes: CSS Refresher!
GitHub - ericchiang/pup: Parsing HTML at the command line