iPhone DuoでWebサイト制作はどう変わる？折りたたみスマホのUI設計とCSS対応
CSS・実装
iPhone Duoの3つの画面幅（466px・626px・890px）と、折りたたみスマホの画面におけるウェブサイトのUI設計の考え方を解説します。既存サイトの検証ポイントから、折りたたみ端末ならではの新しい体験の作り方、将来的な実装方針までを紹介します。
Category
CSS・実装
現場で使ってきたCSSや実装の工夫、コーディングのメモです。
見出しに使えるfit-contentを解説してみる
CSS・実装
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。
CSSのみでカルーセルスライダーを実装する
CSS・実装
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。
円グラフをCSSのみで表現する
CSS・実装
円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。
ページローディングのプログレスバーをCSSアニメーションで実装する
CSS・実装
ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。
ページ遷移時のフェードインアニメーションをCSSのみで実装する
CSS・実装
ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。
CSS見出しデザイン21選
CSS・実装
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。
いざという時に使える7つのHTML&CSS Tips集vol.2
CSS・実装
覚えておくと便利なHTML＆CSS Tips集の第2弾です。実装で困ったときに読み返せるようまとめました。
覚えておくと便利なCSSデザインTipsを9つ集めてみた
CSS・実装
これまで画像で表現していたデザインも、今ではCSSのみで実装できるものが増えました。現場で使えるCSSデザインTipsを9個紹介します。
いざという時に使える13のHTML&CSS Tips集
CSS・実装
覚えておくと便利なHTML＆CSSのTipsを13個紹介します。実装で困ったときに読み返せるようまとめました。
コーディング後や納品時に確認する62のチェックリスト
CSS・実装
Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。
スクロール時に背景色を変更 – Intersection Observer
CSS・実装
スクロール後にイベントを実行させるIntersection Observerを使用して、背景色やテキストカラーを変更させる方法の紹介です。
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選
CSS・実装
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使え…
現場で使えるFlexboxレイアウト12選
CSS・実装
現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。
