ユーザーインターフェイス [Web制作]

アイコン

参考：

比較表でマル／バツ／サンカクは通じません | IT 技術者のための English Writing

マルバツ印は正誤との認識は外国では通用しない！ | うなずき 2nd フラッシュ

丸印 – Wikipedia

チェックマーク – Wikipedia

バツ印 – Wikipedia

英語圏でも「バツ」はダメという意味になりますか？ – Yahoo! 知恵袋

英語圏で「ダメ」という禁止を表す記号 – 教えて! goo

コンポーネント

参考：

よく使われるレイアウトや UI コンポーネント、それだけを実装するための HTML と CSS のシンプルなコードのまとめ | コリス

レイアウト

参考：

よく見かけるレイアウト／UI コンポーネント、それだけを実装する HTML と CSS のシンプルなコードのまとめ | コリス

CSS Layout

Display

• Acoordion
• Arrow Buttons
• Avatar
• Avatar List
• Badge
• Calendar
• Card
• Centering
• Close Button
• Color Swatch
• Concave Corners
• Cookie Banner
• Corner Ribbon
• Curved Background
• Diagonal Section
• Docked at Corner
• Dot Leader
• Drop Area
• Drop Cap
• Fading Long Section
• Feature Comparison
• Feature List
• Fixed at Corner
• Fixed at Side
• Folder Structure
• Full Background
• Initial Avatar
• Inverted Corners
• Keyboard Shortcut
• Layered Card
• Lined Paper
• Media Object
• Overlay Play Button
• Price Tag
• Pricing Table
• Property List
• Questions and Answers
• Ribbon
• Separator
• Stacked Cards
• Stamp Border
• Statistic
• Status Light
• Sticky Table Column
• Sticky Table Headers
• Teardrop
• Three Dimensions Card
• TImeline
• Tree Diagram
• Triangle Buttons
• Video Background
• Voting
• Watermark
• Zigzag Timeline

Feedback

• Intermediate Progress Bar
• Modal
• Notification
• Popover Arrow
• Presence Indicator
• Progress Bar
• Radial Progress Bar
• Resizable Element
• Spinner
• Tooltip
• Validation Icon

Input

• Box Selector
• Button with Icon
• Chip
• Custom Checkbox Button
• Custom Radio Button
• Floating Label
• Input Addon
• Radio Button Group
• Radio Switch
• Rating
• Search Box
• Slider
• Spin Button
• Stepper Input
• Switch
• Toggle Password Visibility
• Upload Button

Layout

• Card Layout
• Holy Grail
• Masonry Grid
• Same Height Columns
• Sidebar
• Simple Grid
• Split Screen
• Sticky Footer
• Sticky Header
• Sticky Sections

Navigation

• Breadcrumb
• Circular Navigation
• Dot Navigation
• Drawer
• Dropdown
• Full Screen Menu
• Mega Menu
• Menu
• Nested Dropdowns
• Pagination
• Previous Next Buttons
• Split Navigation
• Tab
• Wizard

公式サイト：

CSS Layout – A Collection of Popular Layouts and Patterns Made with CSS

リポジトリ：

phuocng/csslayout: A Collection of Popular Layouts and Patterns Made with CSS. Now it has 100+ patterns and continues growing! – GitHub