ブックマーク / coliss.com (3)

  • よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout

    最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま

    よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
    p_inter
    p_inter 2020/05/28
  • Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ

    スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。

    Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
    p_inter
    p_inter 2017/02/14
    タブにするにも、メニュー多すぎでそれを整理することもできないので(政治的に)結局ハンバーガーかな…
  • メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS

    メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要

    メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
    p_inter
    p_inter 2016/04/21
    言うは易し行うは難し
  • 1