[B! CSS][html5] s99e209のブックマーク

[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法

ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。 The “Inside” Probl em 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。最近のWebでよく見かけるレイアウト古典的な解決策: 外側と内側のコンテナ単一の要素だけの場合コントロールが可能なコンテナがある場合親にoverflow-xを使用しなくてもいい場合 CSS GridまたはFlexboxは役立ちますか？代わりに、端をフェイクする最近のWebでよく見かけるレイアウトあなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colo

s99e209 2019/06/07

full-widthのテクニックでどんな幅でも中央にコンテナを配置できる。

css
html5

リンク

CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い

CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。デモはこちらデモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ

s99e209 2018/02/22

リンク

おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

タイトルに含まれる語に関する補足おじさん：筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。なぜ「モテ」なければいけないのか「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。セマンティックなコーディングは、開発者の課題理解度を図り、意

s99e209 2017/05/22

意図を明確にするHTMLコーディング

HTML5
css

リンク

W3Schools Online Web Tutorials

W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999