2024.03.15 福岡フロントエンド勉強会 #1
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita
はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と
Firefox113.0タブ位置の変更
Firefox89.0～112までタブ位置を下に設定したまま頑張ってくれていましたが、ついに113ででタブ位置がまた上に行ってしまいました…(T_T) 昨日（5/9）、以前のタブ位置の記事のコメント欄に「バージョン113でタブが上にいった」とのご報告を受け、また同時に解決方法のURLもご教示くださいました。 コメントを拝見してすぐにFirefoxを更新しようとしてみたのですが、私のFirefoxはこの時点で更新を確認してみても113は降りてこず、更新される日を待っていました。 すると今日更新のお知らせが入り、113にしてみると…… 恐れていたことが……。 いえ、コメントくださった「さぶろう」様がちゃんと解決方法のURLを記入してくださっていたので今回は全く慌てることもなく、いつも通りのタブ位置（下）に収まってくれました！ さぶろう様、解決方法を記事にしてくださっていた「お豆腐」様、ありがと
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
キレる増田
参考： CSSインジェクション http://anond.hatelabo.jp/20160417143943 はてな匿名ダイアリーの標準スタイルシートでデコるバッドノウハウ http://anond.hatelabo.jp/20100827202157
Skypeのログイン画面がへん
最近、Skypeをバージョンアップしたら、Skypeのログイン画面がおかしくなりました。 Windows7 32bitで、Skypeのバージョンは6.14です。 こんな感じに崩れて表示されます。まるで、スタイルが効いていないような変な感じです。 このパソコンにはDreamweaverがインストールされているのですが、Dreamweaverがレジストリに設定したCSSのMIME Typeの値が原因のようです。 【崩れていた時の設定】 [HKEY_CLASSES_ROOT\.css] "(Default)" = "CSSFile" "Content Type" = "application/x-css" ←これが原因！ "PerceivedType" = "text" 【崩れなくなった時の設定】 [HKEY_CLASSES_ROOT\.css] "(Default)" = "CSSFile"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
xzoro778RC on Twitter: "Firefoxのタブ位置を下にしてたから、71.0更新で又、無効化された 下記情報を元に、userChrome.cssを修正したら、タブ位置を下に出来た https://t.co/hYf8jauhdx"
CSSが破綻する4つの理由 - Qiita