タグ

cssとwebデザインに関するrryuのブックマーク (5)

  • Tailwind考 - uhyo/blog

    皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ

    Tailwind考 - uhyo/blog
    rryu
    rryu 2022/10/02
    ユーティリティベースのCSSの欠点はHTMLからは同じコンポーネントかどうかが判別しづらいのでドキュメント化しておかないと無尽蔵にコンポーネントが作られてしまうところにあると思う。
  • CSSで「余白」を制してデザイナーに好かれよう - Qiita

    余白を制する者はデザインを制する らしい。 いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。 「余白 デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。 Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 こちらはLIGの記事です。 これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。 最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、 それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。 印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそ

    CSSで「余白」を制してデザイナーに好かれよう - Qiita
    rryu
    rryu 2018/01/17
    マージンは上だけの方が最初の要素はマージン無しにするみたいにマージンの衝突を制御しやすいのか。
  • もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita

    HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか? モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日語、文字詰めできないかな?ほら、このカタカナとかキモい。。」 「Webで文字詰めだと?無理なんだよあきらめな!」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

    もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
    rryu
    rryu 2017/11/21
    あまり普及していないのは環境によって見え方が違うというのが許容されないからな感じがする。
  • icono - light and ready to use icons for your next project

    <link rel="stylesheet" href="icono.min.css"> Also you can load icono from cdn, courtsey from KeyCDN <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">

    icono - light and ready to use icons for your next project
    rryu
    rryu 2015/01/26
    CSSだけで作ったアイコン。i要素とそのbefore/after疑似要素だけで実現しているのがすごい。
  • 固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯がべられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら: https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLCSSを用意します。 CSSの読み込み <link rel="styles

    固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    rryu
    rryu 2015/01/21
    スクロールにつれて固定ヘッダ部分がもにゅむにゅ変形するアレ。
  • 1