タグ

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

タグの絞り込みを解除

*CSS3に関するyamadarのブックマーク (364)

  • これからはこの実装がオススメ！ 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]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説


    ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ﹁backdrop-filter﹂を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filterCSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 ﹁backdrop-filter﹂だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ ﹁backdrop-filter﹂だと、一行のコードで実装できる 私はbackdrop-filterとい
    [CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説

  • 恐竜に教える現代のCSS – Part 1 | POSTD


    注釈‥ ﹁CSSでピクセルをいじるのは確かに難しかった！　今じゃHTMLで非セマンティックなクラス名とかインラインCSSとかを使うのがクールで、JavaScriptでCSSスタイルを書いたりもできるって！﹂ ﹁﹃ファミリー・ガイ﹄の﹃CSS﹄GIF︵訳注‥米アニメ﹃ファミリー・ガイ﹄のキャラクターを使った、CSSを扱う厄介さを示唆するGIF画像︶をここに挿入﹂ ﹁ハハッ！﹂ CSSは不思議なことに、Web開発者が学ぶ中で非常に易しいとも難しいとも考えられている言語です。確かに、CSSは簡単に始められます。特定の要素に適用するスタイルの属性と値を定義して、それから……いえ、差し当たって必要な作業はほぼそれだけです。しかし、比較的大規模なプロジェクト向けに意義のある形でCSSを組むとなると、作業は複雑に入り組んできます。あるページのある要素のスタイルを指定しようとCSSのどの行を変更しただけで
    恐竜に教える現代のCSS – Part 1 | POSTD
    yamadar
    yamadar 2018/05/11
    ？？？グリッドの紹介してるだけだった
    リンク

  • [HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ


    調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に﹁間違っている﹂という指
    [HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ

  • CSSのベンダープレフィックスを再確認してみる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-

    CSSのプロパティにはブラウザごとに異なるベンダープレフィックス（接頭辞）を記述するものがあります。こうすることで異なるブラウザ間でも正しく表示できるようになります。今回はこのベンダープレフィックスについて再確認の意味も込めてまとめていき…

    CSSのベンダープレフィックスを再確認してみる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-

  • 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

  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA


    HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows7のIE 11以降となります︵※︶。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事﹁Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft﹂ 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
    yamadar
    yamadar 2016/12/20
    最近フロントエンドやってないから、こういうキャッチアップは助かる
    リンク

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


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

  • 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要素を素敵にデザインするスタイルシートのテクニックのまとめ

  • In Pieces - 30 Endangered Species

    About this project In Pieces is an interactive exhibition turned study into 30 of the world’s most interesting but unfortunately endangered species — their survivals laying literally, in pieces. As Featured On Each species has a common struggle and is represented by one of 30 pieces which come together to form one another. The collection is a celebration of genic diversity and an attempting remind

    In Pieces - 30 Endangered Species
    yamadar
    yamadar 2015/12/08
    一つ一つ webkit-clip-path で描画してアニメーションしてる。努力の賜物。
    リンク

  • Google

    世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

    Google
    yamadar
    yamadar 2015/11/30
    -webkit-perspective-origin, -webkit-perspective, -webkit-transform 辺りを使って台形に変形。あとは 50ms 毎の setTimeout でスクロールしている。
    リンク

  • 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
  • 1 2 3 4 5 6 7 8 9 10 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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