このページの本文へ

いまどきのCSSではどう書けるか？ Trelloのレイアウトを再現してみた

2017年11月06日 20時26分更新

記事提供：

ツイートする

本文印刷

タスク管理ツール「Trello」の特徴的なレイアウトを最新のCSSテクニックを使って実装する方法を解説します。

Trelloボード画面（例はこちら）の基本的なレイアウトの実装方法を紹介します。レスポンシブでCSSのみを使うソリューションでレイアウト構造の特徴を解説します。

最終結果のCodePenデモです。

Trello Screen

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

「脱電話」でコミュニケーション基盤へ進化したTwilio、LINEとも接続

クラウド電話APIサービスの「Twilio」が日本上陸から5周年を迎えた。Twilioは同名の米スタートアップ企業が展開するサービスで、日本ではKDDIウェ...

0
0

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説しま...

0
0

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

チームで美しくメンテナブルなCSSを書くための「Stylelint」導入のすすめ

エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Sty...

1
0

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

Googleマップから店舗へ送客できる「ローカル検索広告」の出し方・回し方

実店舗のあるWebサイトは、サイトへの誘導だけではなく、店舗への誘導も重要です。Google アドワーズのローカル検索広告の始め方と運用のポイン...

0
0

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

5ステップでわかる！「リテンション広告」完全実施ガイド

アプリの継続利用を促す「リテンション施策」を実施する手順を解説します。5つのステップを繰り返し実施することで効率よく広告を運用しましょう。...

0
0

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

CSS Gridで使えるrepeat()関数の「auto-fill」「auto-fit」の違いを理解すると、柔軟なレスポンシブ Webデザインが実現できます。わかりにくい両...

0
0

すぐに役立つ！プロの解説記事

ランキング

ソーシャル

ASCII.jp Web Professional

@WebPro_editors からのツイート

Web Professionalの本