HTML/CSSで組むレイアウトのこれまでとこれから | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは。フロントエンドエンジニアの木下です。 HTML5が勧告された日(2014年10月28日)は自分の誕生日（ビルゲイツと一緒）だったので、何だか運命的なものを感じながら毎日HTML/CSS/JSを書いています。 アーキタイプブログではテック系の記事を書いていこうと思っています。よろしくおねがいします！ はじめに みなさんCSSは書いていますか？ HTML/CSSのコーディングはエンジニアではなくデザイナーの領域という会社も増えていますし、そうでなくても以前より開発時にデザイナーとエンジニアが連携する場面は増えているので、コードを目にする機会は多いと思います。 今回はwebページやアプリケーションのレイアウトを組む際の手法についてのお話です。 今どきといえばフレックスボックスやグリッドレイアウト。だけどテーブルレイアウトだってまだ使われているんだよ、ということでまずはこれまでの歴史を
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
あなたがコーディング初心者を脱する方法
比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場合は以下のような方法をとります。 親要素にoverflow: hidden;を指定する 親要素にclearFixを使う 強引にheightで高さをだしている場合をよく見るのですが、その方法だと中の要素が変わるたびに指定をしなおさないといけなくなりますので、height以外の方法をとるのがオススメです。 floatを解除する方法のまとめ: 小粋空間 floatはclearする 先ほどのclearFi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リダイレクトの警告
