このページの本文へ

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

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

記事提供：

ツイートする

本文印刷

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

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

最終結果のCodePenデモです。

Trello Screen

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

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

コードを書きながらデザインできる「Hadron」ってどんなツール？

デザインツールやプロトタイピングツールが増える中、デザイン可能なコーディングツール「Hadron」のプレビュー版がリリースされました。さっそく...

0
0

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

A/Bテストが無料で捗る！「Google オプティマイズ」の設定と使い方

複数のパターンからベストな組み合わせを見つけるA/Bテスト。手間やコストがかるA/Bテストを無料で実施できる「Google オプティマイズ」の使い...

2
0

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

2018年5月16日、シックス・アパートはCMSプラットフォームの最新版「Movable Type 7」の提供を開始した。Webサイトの管理ツールという枠を超...

2
0

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

田川欣哉、深津貴之、中村洋基——トップクリエイターが語る「体験」のデザイン

日本を代表するトップクリエイターたちは体験（エクスペリエンス）をどう捉え、デザインしているのか？セミナーイベント「CODE Digital Creativ...

0
0

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

メルカリの急成長を支える分析チームにアナリストとしてジョインする方法

総ダウンロード数は1億件以上、スマホユーザーの22.4％が利用する圧倒的人気アプリの「メルカリ」。ヒットの裏側には徹底した「分析」によるチュー...

3
0

新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7

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

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

3
0

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

ランキング

ソーシャル

ASCII.jp Web Professional

Tweets by WPJ_news

Web Professionalの本