[B! css] [2ページ] fashiのブックマーク

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装セマ

fashi 2021/03/22

凄いけど軸がなくて値も読めない / builderでShow Data on Hoverにすると読めるようになる模様

css

リンク

「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita

続編を書きました。CSSも大幅改善してるので、一度見てみてください。︻小数点実装︼﹁(HTML +) CSS﹂のみを使って、今﹁もっとリアルな電卓﹂を作ってみた - Qiita完成品まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめにはじめて、CSS カウンターの存在をはじめて知ったときは驚きました。テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がないと思っていたからです。Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - QiitaCSSで見出しタグに連番をつけ

fashi 2020/07/15

css

リンク

現代開発者のためのCSS基礎技術 - Qiita

ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。ちまたには﹁CSSとは何か﹂を学ぶ教材はたくさんあっても、﹁CSSをどうやってうまく使うか﹂についてはあまり詳しく触れられません。仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。本記事は﹁CSSをうまく使う技術﹂に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。特にプログラミング経験はあるもののウェブフロントエンドの経験が浅い方初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方にお勧めです。プロローグ CSSの書き方は一通りではありません。好きな書き方を自由に選ぶことができます。これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。この場において

fashi 2020/07/06

「アクセシビリティうんぬんは置いておいて、要素の状態をあらわす標準化された技術だと考える」WAI ARIAの後にカスタムデータ属性来るとWAI ARIA使わなくていいのでは？って気がしてくる

リンク

ICS にしはらフロントエンドエンジニア@z-index完全に理解した on Twitter: "予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx"

予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx

fashi 2020/06/16

css

リンク

CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しいこれらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、

fashi 2020/05/18

css

リンク

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css

用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス

fashi 2020/03/30

bootstrapだってたった2行じゃないか

css

リンク

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に

Webで縦書きなどを実現する﹁CSSWriting Modes Level 3﹂、ついにW3Cの﹁勧告﹂に HTMLで構造化された文書に対してスタイルを与える﹁Cascading Style Sheet﹂︵CSS︶は﹁CSS2﹂から、directionプロパティでテキストの表示方向を左から右か、右から左かを指定可能でした。今回勧告になった﹁CSSWriting Modes Level 3﹂では、従来の横書きの左から右への記述︵英語やヒンディ語など︶、横書きの右から左への記述︵ヘブライ語やアラビア語など︶に加えて、日本語やモンゴル語などで使われるような縦書きなどを指定することができます。また、縦書きでは、右から左への行送り︵中国語、日本語、韓国語など︶と、左から右への行送り︵モンゴル語など︶も指定可能。これらは同一ページ上で混在でき、さらに双方向混在の記述における分離、字形の方向

fashi 2019/12/11

css

リンク

Webサイトをダークモードに対応させよう

2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！とにかく夜間見えづらい！私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ

fashi 2019/09/27

css

リンク

フロントエンドエンジニア御用達の MDN web docs を網羅した

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられておりある一定の流れに沿って読むということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。ですので、初学者でも学習しやすいように MDN web docs 全体の

fashi 2019/09/24

リンク

line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する

テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-clampプロパティの仕様 text-overflowでこれを実現できますか？実装の注意点 line-clampプロパティのサポートブラウザリソース line-clampプロパティとは CSSのline-clampプロパティは、テキストを指定した行数で省略します。 2019年現在、Editors Draftなので、仕様は確定ではありませんが、max-linesとblock-overflowの省略形として定義されており、前者は勧告候補で削除される危険性があ

fashi 2019/08/30

css

リンク

CSSを非同期ロードする最も簡単な方法 - Qiita

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。が、なんかすっごい簡単な対処法があったので紹介してみます。以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。ちなみにSco

fashi 2019/08/02

いかがでしたかじゃないけど最後疑問形なのがモヤモヤする

css

リンク

うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。

なんか、このサイトBootstrapくさい。そう感じることはありませんか?その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。欧文をベースに設計されたBootstrapをそのまま

fashi 2019/05/03

2016年の記事。Appleのcssの数値すごいな

css

リンク

たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita

HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。サンプルを使ってFPSを実際に測定してみる今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const

fashi 2019/01/23

css

リンク

複数行にも対応！CSS を使ってはみ出した文字を「･･･」で省略する方法｜ KLUTCHE

範囲内に収まらない文字を﹁・・・﹂で省略する方法です。使うのは CSS のみで、各ブラウザにも対応しています。長い文章の冒頭だけ表示したいときってあると思います。実現する方法としては、・PHP 等を使ってサーバサイドで文字列を丸める・text-overflow を使うなんかがあると思います。 PHP なんかでは文字列を指定の幅でトリミングすることを﹁丸める﹂と言います。なんか専門用語的で格好良いので﹁ちょっとこの文字列丸めといて﹂的に使うことをおすすめします。しかし、上記2点の欠点として、・PHP は文字数指定の省略なので、可変する幅に応じることができない・text-overflow: ellipsis; は複数行に対応できないが挙げられます。使う場面が限定されすぎです。そんな時に使って欲しいが今回の方法です。デモデモページウインドウの狭くしてもらうとわ

fashi 2018/11/26

css

リンク

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

CSSだけでドット絵︵Pixel Art︶を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。ちなみに下図のようなドット絵がつくれる。マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについてドット絵を描くためには、CSSのbox-shadowプロパティを使う。そもそもbox-shadowプロパティは、要素にドロップシャドウ効果︵影をつける︶を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad

fashi 2018/10/30

Tableタグで描くのと変わらないがアニメーションが簡単なのは良いね

ネタ
css

リンク

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。ブラウザで簡単に利用できるブックマークレットも用意されています。ブックマークレット Construct.cssのブックマークレットブックマークレットを使用すると、以下のCSS

fashi 2018/09/20

前はこういうのWebDeveloper拡張に入ってたけど開発者ツールが便利になってから使われなくなってたな

CSS

リンク

サブミット時に display none になっている入力欄に disabled 属性をつける jQuery プラグインを作った - わからん

フォームをサブミットするときに、display none になっている input 要素に disabled属性をつける JavaScript を書いたので、jQuery プラグインにしてとっておくことにしました。サブミット時に DOM のトラバースコストを払うことで、サーバサイドでは、より本質的な仕事に集中できます。フォーム部品の hide()/show() 類を多用する巨大なフォームでの利用を想定しています。仕様 hidden 属性を持つ input 要素は対象としません input 要素自体が display none ならサブミット時に disabled属性を付与します input 要素の親要素のどれかが display none なら、サブミット時に input 要素に disabled属性を付与します実装 (function($) { var is_none = fu

fashi 2018/08/11

リンク

フロントエンドの「想定外」に対応する考え方とTipsいくつか

とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。全く動かなくなってしまう原因は単純︵後述︶だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！　と思いました。フロントエンドの想定外ウェブサイト

fashi 2018/07/05

「Cookieが無効なだけで「全く」動かなくなってしまうウェブサイトのほとんどは、Web Storageを読み書きするときに起きる例外が原因」

リンク

死んだCSSを見つける方法 - Qiita

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。今、故意に﹃未使用CSS ( unused CSS ) ﹄ではなく﹃死んだCSS ( dead CSS ) ﹄というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。そこには既に使われていないCSSがあるだけではなく

fashi 2018/06/19

リンク

CSSをハックしてパスワードを盗み取るキーロガーが登場

By Christoph Scholz CSSは、使用するフォントやパーツの色合いなどウェブページのスタイルを指定するファイルですが、そのCSSだけを用いてパスワードを盗み取るコードがGitHub上で公開されています。 GitHub - maxchehab/CSS-Keylogging: Chrome extension and Express server that exploits keylogging abilities of CSS. https://github.com/maxchehab/CSS-Keylogging 仕組みとしては、パスワード欄へ文字が入力されるたびにその末尾の文字を取得し、その文字に応じた画像を外部のサーバーからダウンロードするというもの。例えば﹁a﹂と入力された場合は﹁http://keylogger.site/a﹂にアクセスするという具合です。アクセスさ

fashi 2018/02/23

いろいろ考えつくものだな

リンク

はてなブックマーク

タグ

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

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

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス