タグ

関連タグで絞り込む (14)

タグの絞り込みを解除

cssに関するfashiのブックマーク (54)

  • UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」

    TightenやLaravelのデザインを担当したSteve Schoger(@steveschoger)さんによる、ビジュアルデザインにおけるコツをまとめたモーメント「Little UI Details」が公開されています。 Little UI Details https://twitter.com/i/moments/880688233641848832 明るい背景色上に白色のテキストを追加する場合、微妙に影を付けると、文字が見えやすくなるだけでなくよりポップになります。 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more. pic.twitter.com/p9rudeFxvP— Steve Scho

    UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」

  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
    fashi
    fashi 2017/07/09
    リンク

  • CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる


    CSSの関数には便利なものがたくさんあります。例えば、div要素に﹁width: calc(100% - 50px);﹂と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
    CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
    fashi
    fashi 2017/06/14
    リンク

  • SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする


    SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと﹁今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった﹂という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS︵というかスタイリング︶はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
    fashi
    fashi 2017/05/09
    コーディングもデザインも両方出来る人ばかりならいいのだろうな
    リンク

  • CSSのposition:stickyがすごく便利 | q-Az


    最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考‥position - CSS｜MDN 簡単に言うと﹁スクロールでその位置まで来たらそれ以降は fixed する﹂みたいな感じです。 サンプルこの記事内で﹁position: sticky﹂や﹁サンプル﹂など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
    CSSのposition:stickyがすごく便利 | q-Az
    fashi
    fashi 2017/03/06
    面白いけどこのサンプルちょっとぎこちないな
    リンク

  • Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン


    Webデザインの知識がなくてもOK！Bootstrapの使い方︻入門者向け︼ HTML/CSSといったWebデザインの知識がない人でもわかる︻Bootstrap︼の使い方。Bootstrapのダウンロード方法、サンプルコードがあってすぐに実践可能。グリッドシステムやテーブルなどの使い方あり。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール﹁テックアカデミー﹂が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元‥GMOリサーチ株式会社　調査期間‥2021年8月12日～8月16日　 調査対象‥2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法‥インターネット調査 独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なB
    Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン

  • Keiyaku CSS


    Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdownorHTML, apply keiyaku-csstoit then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS︵以下、﹁本件ライブラリ﹂という。︶は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
    fashi
    fashi 2017/01/09
    やっぱMarkdownエディタは有料のじゃないと物足りないかなあ…
    リンク

  • 文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA


    游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事﹁Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ﹂を参考ください。 ▲左側は未指定︵和文等幅︶の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境‥ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
    文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

  • [CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ

    Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な

    [CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ
    fashi
    fashi 2016/10/26
    リンク

  • 変態的 CSS トリック


    多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
    変態的 CSS トリック
    fashi
    fashi 2016/08/29
    ちょっとブラウザが仕様変更すると崩れそうなテクニックこわい
    リンク

  • CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室


    追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から﹁CSS in JS﹂と言って、雑に言うと﹁CSSはイケてないからJSでインラインスタイルを書いてしまえ﹂という話がある。︵ちゃんと知りたい人はこちら︶ 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら﹁いや流石にロジック汚れるんじゃね？﹂とか﹁CSSの便利機能を捨てて平気なの？﹂とか色々と懐疑的だったんだけど、1～2か月書いてみたら想像以上に良かったので感想を書くことにした。 まず一番に主張したい部分を先に言うと、こう。 ︵誤解︶JSのコードがスタイル記述で汚れる ︵正解︶JSのコードがスタイル記述から解放される 前提 実際に書いたのはJavaScriptではなくElmなので以下は全て
    CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

  • IE6で閲覧すると。


    hamashunさんがTwitterで、 IE6を使って閲覧すると右上に﹃アナログ﹄って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
    IE6で閲覧すると。
    fashi
    fashi 2008/12/15
    面白い
    リンク

  • [Think IT] 【これならわかる！JavaScript/Ajax】Ajaxライブラリ入門 第5回：Ajax開発の未来 (1/3)


    もうHTMLやCSSをゼロから書くことはない？ JavaScriptのライブラリは、各ブラウザ間のバグや仕様の違いを吸収することで、開発者の負担を激減することを可能としました。しかし、JavaScriptの仕様の違いと同時にCSSレイアウトのバグや仕様の違いも、Web開発者の大きな悩みの1つでした。そんな中、最近ではCSSのフレームワークも出てきたので、その中でも注目度の高い2つを紹介します。1つ目は、blueprintcss︵http://code.google.com/p/blueprintcss/︶です。blueprintcssは柔軟にグリッドの設定ができるCSSフレームワークです。最新バージョンは0.7です。印刷時のCSSも用意されており、印刷時も適切なレイアウトで表示されます。また、非常に細かくグリッドの設定︵http://files.bjorkoy.com/blueprint
    fashi
    fashi 2008/06/03
    YAML CSS-Framework / Ajaxのアクセシビリティ問題など
    リンク

  • CSS＆JavaScriptカレンダーライブラリ集:phpspot開発日誌

    DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. CSS＆JavaScriptカレンダーライブラリ集。 いろんなCSSとJavaScriptで実装されたサンプルライブラリが紹介されています。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Google Calendar into your Site JS Calendar The DHTML / JavaScript

  • 前のページ 1 2 3

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.