PR

あらゆるUIパーツ、レイアウトの実装法を学べるcsslayout.ioがすごい

HTML/CSSを学ぶ

こんにちは。今回は、いろんなレイアウト、見た目をHTML/CSSで表現する方法をまとめているcsslayout.ioさんを紹介します。

※ 2023/12/20 更新
サイトのURLが変わっていたので新しいものに修正しました。

どんなサイト?

Webサイトでよく使われるUIパーツを、HTML/CSSのみで実装する方法をまとめているサイトです。

JavaScriptや、何かしらのライブラリ/フレームワークを一切使っていません。

CSS layout — Phuoc Nguyen

デザインからコーディングするときに初見のパーツがあると、コードに起こすのに時間がかかりますよね。

初めて見るものは少ない方が良いわけです。

このサイトで事前に勉強しておくと実際のデザインに触れる時に楽になります。

使い方

csslayoutは非常にシンプルなサイトなのでわざわざ解説するほどのものでもないのですが、せっかくなので書いていきます。

CSSLayoutのサイトにアクセスすると、早速UIパーツ一覧が表示されます。

カテゴリーとして、

  • Display
  • Feedback
  • Input
  • Layout
  • Navigation

に分けられています。アニメーション付きの要素も紹介されていてとてもありがたいですね。

実装を見たいUIパーツを選択すると個別ページに遷移します。HTML/CSSのコードと、Demoが表示されます。

あとはコピーするだけで使えます。簡単ですね。

まとめ

というわけでcsslayout.ioの紹介でした。

もちろん常に同じ実装をすればいいとは限らないので都度調整は必要ですが、大体の実装方針を決める上では非常に参考になるのでぜひ使ってみてください。

この記事を書いた人
小林 秀樹

Web制作フリーランス9年目|ディレクター・フロントエンドエンジニア
「世界一初心者に優しい」→セカヤサ。

コーポレートサイトやLP、メディア立ち上げまで幅広く対応。コーディングを軸に、UX設計・SEOライティング・サイト運用まで一貫対応。

法律系オウンドメディア立ち上げ支援では、特定のキーワードでのSEO1位を実現し問い合わせ獲得に貢献。また大手専門学校サイトの大規模リニューアル(100ページ超)でのディレクションと実装の両面の経験あり。

最近では、AIツールによる自社サービスUI制作や、ChatGPTを活用した記事執筆フローの構築など、AI時代に対応した制作手法の実践にも注力している。

zenn:
https://zenn.dev/hideki_climax

制作実績:
https://tan-band-c66.notion.site/37abe7077b184b338fd8f53f6873ca1d

小林 秀樹をフォローする
HTML/CSSを学ぶ
スポンサーリンク
シェアする
小林 秀樹をフォローする

コメント

タイトルとURLをコピーしました