タグ

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

タグの絞り込みを解除

*CSS3と*cssに関するyamadarのブックマーク (91)

  • これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック


    高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
    これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
    yamadar
    yamadar 2021/08/19
    Safariのアドレスバー表示変更を受けてのCSS修正
    リンク

  • Modern CSS Solutions

    12 Modern CSS One-Line Upgrades Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience. How Custom Property Values are Computed Review behaviors to be aware of regarding how the browser computes final

    Modern CSS Solutions
    yamadar
    yamadar 2020/05/12
    斜めにされると違和感すごいな
    リンク

  • CSS Gridとアクセシビリティについて気になっていたこと


    前回の記事でCSS Gridは﹁魔法の杖﹂だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番︵ソースオーダー︶と視覚的な順番︵ビジュアルオーダー︶にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。 ﹁でも、それってアクセシビリティ的にはどうなんだろう？﹂というのが気になっていました。 マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの﹁魔法の杖﹂的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。 調べてみたところ、CSS Gri
    CSS Gridとアクセシビリティについて気になっていたこと
    yamadar
    yamadar 2018/01/16
    良き
    リンク

  • CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ


    2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。
    CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ

  • もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita


    HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 ﹁日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。﹂ ﹁Webで文字詰めだと？無理なんだよあきらめな！﹂なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
    もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
    yamadar
    yamadar 2017/11/21
    これ系のCSSプロパティが無い頃、1文字ずつ letter-spacing を調整していたデザイナ兼コーダーの彼を思い出す。
    リンク

  • CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita


    💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
    CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
    yamadar
    yamadar 2017/08/16
    Webフォントを使用する時は、“font-display: swap;”も併用するとWebフォントが読み込まれるまでに一時的に他のフォントを表示できる
    リンク

  • 5000兆円欲しい！.css

    About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

    5000兆円欲しい！.css

  • 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

  • CSS3 Flexbox UIパターン集「Flexbox Patterns」


    CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集﹁Flexbox Patterns﹂です。 ﹁Flexbox Patterns﹂は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。 詳しくは以下 上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。 現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。シンプ
    CSS3 Flexbox UIパターン集「Flexbox Patterns」

  • [CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

    <hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>

    [CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

  • CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法


    2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示されるfilterは、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。﹁プログレッシブエンハンスメント﹂というやつですね
    CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法

  • そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita


    帳票といえばPDFとして生成するのが一般的でしょうか?でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
    そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

  • あまり知られていないCSSの12の事実(続編) | POSTD


    1年以上前に、私は最初の 12 Little-known CSS Facts︵あまり知られていないCSSの12の事実︶ を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
    あまり知られていないCSSの12の事実(続編) | POSTD
    yamadar
    yamadar 2015/08/13
     初っ端から知らんかった。。。仕様追わなきゃなぁ。  

    ●*CSS
    ●*CSS3
    ●tips
      
    リンク

  • CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA


    mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては﹁ブレンドモード﹂や﹁描画モード﹂﹁モード﹂と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
    CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
    yamadar
    yamadar 2015/07/07
    フォトショでよく見る奴だ
    リンク

  • [CSS] rem でフォントサイズを相対指定する


    以前 ﹁YUI Fonts CSS でフォントサイズを相対指定する﹂ という記事を2008年に書いたんだけど、6年後(!!)の現在はremで指定しているのでそれについてメモっておく。rem(root + em= rem)というのは単位のことで、ルート(=html)を基準に相対指定ができる。YUI Fonts CSSなどのemや%を用いる相対指定との最大の違いは、指定が入れ子になっても親のサイズに影響を受けないという所で、それが最大のメリットでもある。 対応状況は、モダンブラウザならほぼおkという感じだけど一部注意が必要。 IE9＆10はfontショートハンドおよび疑似要素で未対応 IE9&10&11は疑似要素のline-heightで未対応 Chromeはborder-sizeでremを使用すると拡大したときに線が消える プリプロセッサを常用してるので、remの設定部分もほぼ使い回
    [CSS] rem でフォントサイズを相対指定する
    yamadar
    yamadar 2015/06/24
    rem、普及してきた。
    リンク

  • cssnextを使って最新のcss syntaxで開発するのが良さそう


    ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の

  • CSS の pointer-events プロパティでマウスイベントを制御する - Qiita

    Twitter Bootstrap の .btn に .disabled をつけると、click イベントが発生してないことに今さら気がついて、なんでだろうと思ってコードをみてみたら、こういう指定があった。 .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; /* これなに */ cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } pointer-events はデフォルト値 auto 、 これを none とすると、マウスイベントを拾わなくなるらしいです。 モダンブラウザではサポートされてるけど、IE は11から。 SVG

    CSS の pointer-events プロパティでマウスイベントを制御する - Qiita
    yamadar
    yamadar 2015/04/02
    マウスイベントを無視させたりする pointer-events。IE11から。
    リンク

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

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

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

  • CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ

    素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか！という驚きのテクニックまで、今年もCSSに注目です。

    CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ

  • Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …

    Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi

    Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
  • 1 2 3 4 5 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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