このデザインどうマークアップする？

本

僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善出来る箇所を見つけたりナレッジの共有をします！マークアップエンジニアやフロントエンドエンジニア、デザイナーだけどマ… もっと読む

運営しているクリエイター: えび🍤

画像をキレイに配置できるobject-fitが凄い！

僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする？」シリーズの第五弾です！このデザインどうマークアップする？早速ですが、このデザインどうマークアップしますか？写真が並ぶギャラリーページですが、画像の縦横比がバラバラですね。バラバラの画像が、正方形の中に良い感じに納まっているデザインです。僕の場合このようにマークアップします。 object-fitを使って画像のサイズを調整

最短2行！CSSで縦横中央揃えをする最新の方法

僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする？」シリーズの第四弾です！このデザインどうマークアップする？早速ですが、このデザインどうマークアップしますか？画面いっぱいに画像が配置され、中心にテキストが配置されているいわゆる「ヒーローヘッダー」と呼ばれるようなデザインですね。ここでのポイントはテキストの縦横中央揃えの方法です。僕の場合このようにマークアップします。 dis

Google マテリアルデザインに学ぶテキストフィールドの実装方法

僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善出来る箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする？」シリーズの第三弾です！このデザインどうマークアップする？早速ですが、このデザインどうやってマークアップしますか？このデザインに見覚えのある方もいるかと思います。そうです。Google マテリアルデザインのテキストフィールドです。今回は第一弾、第二弾とは趣向を変えて、既に実装されているものを自分なりの方法で実装し直してみま

投稿カードのUXを良くするための工夫

僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする？」シリーズの第二弾です！このデザインどうマークアップする？早速ですが、このデザインどうやってマークアップしますか？仕様としては「CSS」や「HTML」ラベルをクリックするとカテゴリーページに飛び、画像やタイトルをクリックすると詳細画面に飛ぶというよくある投稿カードです！僕の場合このようにマークアップします。正しい文章構成を

投稿リストのマークアップをする時に気を付けている4つのこと

マークアップって開発環境とかJSとかに比べてアップデートする頻度が低くないですか？でも、CSSやらHTMLも進化してますよね。そこで、僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたり、ナレッジの共有ができればと思い「このデザインどうマークアップする？」シリーズを始めました！マークアップエンジニアやフロントエンドエンジニア、デザイナーだけどマークアップ業務もしているという方に読んで頂けると嬉しいです。僕がマークアップする時に気を付け