このページの本文へ

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

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

記事提供：

ツイートする

本文印刷

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

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

最終結果のCodePenデモです。

Trello Screen

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

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

「Apple Search Ads」日本上陸！広告運用担当者が押さえたいポイント6つ

App Storeの検索結果に広告が出せる「Apple Search Ads」がいよいよ日本でも始まりました。概要と出稿する上で押さえておきたいポイントをまと...

1
0

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

Instagramストーリーズへの広告が簡単に出せるようになりました。具体的な設定方法を画像を交えて紹介します。Instagramストーリーズ機能の投稿後...

0
0

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

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

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

0
0

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

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

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

2
0

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

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

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

2
0

手軽になったインスタ「ストーリーズ」広告、設定・出稿方法まとめ

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

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

0
0

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

ランキング

ソーシャル

ASCII.jp Web Professional

Tweets by WPJ_news

Web Professionalの本