[B! CSS] tailtameのブックマーク

不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園

CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。﹁〜になります。﹂が﹁〜になり〼。﹂になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu

tailtame 2024/04/17

https://twitter.com/yodare_inu_/status/1780431031218343978 から…と思ったら書いたきっかけだったか。コメント非表示！

リンク

CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する

2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列︵グリッド︶を入れ子にして、親行列の行や列に子行列を整列させることが可能です。この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め複雑な行列の入れ子と、subgrid

tailtame 2023/09/18

ふむむ。まだスマホとか最新じゃないからすぐには無理そう😉　safari突き抜けバグって死んだ？　minmax()あるから平気なんかな

css
tips

リンク

CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集｜向壁虚造

タイトルや見出しに視覚的な趣向を凝らしたいなら﹁グラデーション﹂がおすすめです。例えば下図のような具合に、見出しにグラデーションをかけるだけで、ページ全体に華やかな印象が加わります。 HTML＆CSSで一工夫するだけで、彩り豊かなグラデーション文字を作ることができます。今回は、HTML＆CSSで文字にグラデーションを付けるテクニックをご紹介したいと思います。また、記事の後半ではコピペで実装できるサンプルデザインも掲載しているので、すぐにグラデーション文字を使いたい方はどうぞ。1．CSSで文字にグラデーションを付ける手順まず、CSSには一発で文字にグラデーションを付けるようなプロパティや値はありません。グラデーション文字を作るには複数のコードを組み合わせる必要があります。具体的には、以下の3つのプロパティ・値を使って、グラデーション文字を描画していきます。 background

tailtame 2023/07/03

color: translate ; でもいいのか。アニメグラデやりたいんだよなー。別件。clipはwebkit用必須。 ●css ●tips

リンク

游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO

游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。ただ、面倒くさい問題があるんですよね。そう、かねてより議論されている、﹁WindowsのChromeで見にくいんすけど﹂問題。この問題についてちょっと調べればわかるのですが、@font-face で解決している人がかなり多いです。僕も以前までそうしていました。

tailtame 2023/01/05

游ゴシックの細字でキレるのでまたぐぐり。 font-weight:500か～～～～

font
css

リンク

どうしてHTML5が廃止されたのか | フューチャー技術ブログ

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては﹁何をいまさら﹂という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。広義のHTML5 / 狭義のHTML5HTML5

tailtame 2021/06/21

HTML5が出た頃もHTML4使えなくなるの？とか思ってた人もいたけど気にせんでもええで。みたいなところある。loading=lazyは最高に便利なので助かる。h1複数みたいなのはヤダｗ ●html ●CSS

リンク

こんにゃくいも (12490586) [ユーザー記事] - ニコニコ大百科

こんにゃくいもさんのページユーザーID: 12490586 総レス数: 7461 (第176位) 総編集数: 1258 (第243位) 総お絵カキコ数: 504 (第48位) 総新規記事数: 68 (第602位) 総ピコカキコ数: 3 (第416位) 最近更新した記事アイ★チュウ双子双子カードファイト!!ヴァンガード踊るアニメOPED 踊るアニメOPED 高槻かなこ 22/7 幼馴染の一覧ツキウタ。アイドリッシュセブンラブライブ！虹ヶ咲学園スクールアイドル同好会ラブライブ！虹ヶ咲学園スクールアイドル同好会ツキウタ。アイドリッシュセブンお絵カキコラブライブ！虹ヶ咲学園スクールアイドル同好会ラブライブ！虹ヶ咲学園スクールアイドル同好会ツキウタ。ラブライブ！虹ヶ咲学園スクールアイドル同好会ラブライブ！虹ヶ咲学園スクールアイドル同好会アニメソングの一覧NE

tailtame 2021/06/01

結構前から…。border-radiusとか

CSS

リンク

斬鉄剣で斬れない物一覧とは (ミジュクモノメとは) [単語記事] - ニコニコ大百科

斬鉄剣で斬れない物一覧単語13件ミジュクモノメ 6.7千文字の記事 153 0pt ほめる掲示板へ記事編集斬れないのが悪いのではない。拙者の腕の未熟さ故だ・・・一覧︵登場順︶その他関連動画関連商品関連チャンネル関連項目掲示板この記事は第379回の今週のオススメ記事に選ばれました！より斬鉄剣を攻略できるような記事に編集していきましょう。この記事は第379回の今週のオススメ記事に選ばれました！より斬鉄剣を攻略できるような記事に編集していきましょう。斬鉄剣で斬れない物一覧とは、ルパン三世に登場する十三代目石川五ェ門の所持する斬鉄剣で斬れない物の一覧である。なお、斬ることはできたが再生されるなどして実質的には失敗に終わった例も含む。また、ルパン三世という作品は個々のエピソードが独立していることが多いという性質上、﹁斬れないもの﹂も基本的には一回きりの設定となっており、あるエ

tailtame 2021/05/31

切り取り前と切り取り後で合体か～。ようやるなぁｗ　結構切れないもの多いねｗ

リンク

ニコニコ大百科の記事『粗品』がやばい→「ニコニコは定期的に変態が現れる」「努力の方向音痴」と話題に #nicopedia

トランプ @t0kri ニコニコ大百科で一番やばい記事っていっても色々な方向性があると思うんですけど、変態性で一番なのはこれしかないと思います。 HTMLとCSSのそれだけで描画してるんです。描いてはいないんです。 pic.twitter.com/mHjEkJ4aus 2021-05-28 20:36:48

tailtame 2021/05/31

昔面白かったのは https://dic.nicovideo.jp/a/wikipedia かな。border-radiusって面白いんすよォ https://developer.mozilla.org/ja/docs/Web/CSS/border-radius 数値いじれるよ！

css
neta

リンク

粗品とは (ソシナとは) [単語記事] - ニコニコ大百科

粗品単語 577件ソシナ 88 0pt ほめる掲示板へ記事編集掲示板粗品とは、粗品︵そしな、そひん︶ - 贈り物を送る際に、贈り物を謙遜した言い方。粗品︵そしな︶ - 吉本興業所属のお笑いコンビ﹁霜降り明星﹂のツッコミ役。詳しくはコンビの記事を参照。この記事は第676回の今週のオススメ記事に選ばれました！ほんの心ばかりの記事ですが、気兼ねなくご笑納くださいませ。︻スポンサーリンク︼ほめる 88 0pt ページ番号: 5610637 初版作成日: 20/12/28 22:25 リビジョン番号: 2924471 最終更新日: 21/06/08 21:09 編集内容についての説明/コメント: オススメ記事選定記事編集編集履歴を閲覧この記事をもとに新規記事作成スマホ版URL: https://dic.nicovideo.jp/t/a/%E7%B2%97%E5%93%

tailtame 2021/05/31

border-radiusか。css自由度あがっていいよなぁ…。ツッコまれてたけど、下側の色が確かに逆︵バズツイの引用RTで︶。直せるタイプなんかな。色の入れ替えだけ / 直そうかと思ったら直ってたｗ ●css ●dictionary

リンク

池田泰延 on Twitter: "「Webフォントが重たい」ことへの対策。ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf"

「Webフォントが重たい」ことへの対策。ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf

tailtame 2021/05/26

フォントはデフォルトが…。一部だと使うと軽いよな

リンク

CSSだけで作る超軽量ポップアップモーダルウインドウ（スマホ対応） - Qiita

スペースの限られたスマホサイトなどで注釈や解説を付けたい場合に重宝します LightboxのようなUIを目指しました背景の半透明グレーのところをクリックするとウインドウが閉じますポップアップの中の要素が枠の高さを超える場合、縦スクロールが出るので、長い内容でも見せることができますデモ jsbin html <div class="popupModal1"> <input type="radio" name="modalPop" id="pop11" /> <label for="pop11">クリックでポップアップ</label> <input type="radio" name="modalPop" id="pop12" /> <label for="pop12">CLOSE</label> <input type="radio" name="modalPop" id="pop13

tailtame 2021/05/05

iframeも対応されててよかったわ(｀・ω・´)　スマホ右手操作マンなのでXボタンの位置いじった…

css
tips

リンク

【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法

Enterキーを押すとtextareaのスクロール位置がずれる問題ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。とりあえずautosize textareaを疑うスクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor

tailtame 2021/02/23

リンク

8年ぶりのスタイルシート更新

ずーっとPHSユーザだった私がスマホに乗り換えたのが2017年のこと。2年縛りとかないイオンモバイルで買ったのだけれど、PINの入力が面倒で仕方ないから顔認証のある機種に変えたかったのと、Android5.1の通信料急増問題が重なり、さっさと機種変更しようと思い立った。で、新機種でこのブログを見てみたら、とても見難くて困った︵理由はよくわからないが、旧機種ではそこまでつらいと感じていなかった︶。私は今でもインターネットはほぼPCから利用しているのだけれど、スマホを2年使ってきて、だんだんスマホからのネット利用も増えてきつつある。私は物忘れをすると、自分の記事の過去ログを検索することがしばしばある。スマホでネットを見るときも、それは同じだ。そんなわけで、スマホから自分のブログが見難いのは困る。そこで、なんと8年ぶりにスタイルシートやら、ブログのテンプレートやらを編集することになった。も

tailtame 2020/06/03

2019/6。1年前のだけどひさびさに見て…なるほど。フォントしていないのってありがたいのですよね…（本文は特に）。

リンク

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

tailtame 2020/05/26

探してたのじゃないけど面白い。高さのビューポートで使えるな(｀・ω・´)

css
tips

リンク

TwitterのUIデザインで見つけたCSSのテクニックのまとめ

TwitterのUIデザインで見つけたCSSのテクニックを解説した記事を紹介します。さまざまなコンテンツが入る可能性のあるコンポーネント、コンテンツが長い・短い場合、アイテムの数などを想定した興味深いテクニックが解説されています。 CSS Findings From Twitter Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにアバター画像のアスペクト比 CSS calc()関数の謎の使い方 CSSの背景とHTMLの画像の混在スタイルのリセット CSSのposition: sticky; スペース要素ツイートコンテンツの追加方法スペースにハードコードされた値を使用するナビゲーションリンクの幅念のためのマージンビューポートの高さが小さい場合のモーダルはじめ

tailtame 2020/05/22

firefoxで絵文字入りツイート再利用（半テンプレ）しようとしてバグるのそのせいかなぁ…。イラッとすることもわりとある(｀・ω・´)

twitter
css

リンク

CSS - transform - とほほのWWW入門

transf orm 属性を用いて、要素を右方向(X軸方向)、下方向(Y軸方向)に、移動、拡大、縮小、傾斜、回転させたりすることができます。また、3D 関数を用いると、画面に対して手前方向(Z軸方向)方向に移動、拡大、縮小、回転させ、三次元的な描写を行うことが可能となります。3D 効果を出すには、親要素に transf orm-style: preserve-3d を指定し、perspective で遠近法の視点を設定する必要があります。

tailtame 2020/05/20

『※ Chrome, Firefox, Opera, Edge の最新版で表示するとサイコロが動きます。』すげー(｀・ω・´)

css

リンク

絵文字😇を含むテキストを表示する @font-face 設定（Unicode 10.0対応版）

CSSで絵文字を表示するための @font-face 設定を紹介します。この方法はモダンな閲覧環境ではほぼ問題なく表示できます。またJavaScriptを使用して絵文字を画像に置換するタイプ︵EmojiOne、Twemoji︶と比較して、表示速度や利便性などの面で大きく有利です。絵文字を含むテキストを表示する @font-face 設定︵Unicode 10.0対応版︶デモページもご覧ください。以下のCSSを指定すると絵文字がきれいに表示されます。 @font-face { font-family: MyFontFamily; src: local("Hiragino Kaku Gothic ProN"), local("Meiryo"); } @font-face { font-family: MyFontFamily; font-weight: bold; src: local(

tailtame 2020/02/08

2017。先月ヒント見てて気づいたけどピリオド（.）+Winキーで絵文字キーボードあるんだぜ。「画像で表示されている絵文字はコピーができません。」これもわかるけど印象変わるんだよなぁ…みんな似せてきてるけど

リンク

PIXIV TECH FES.のLPを支えるCSSアニメーションテクニック - pixiv inside

※本記事に出てくるアニメーションは全てCSSで作られていますはじめまして、新卒エンジニアのyui540(@yui540)です。普段は、pixiv FANBOXというサービスのCSS エンジニアをしています。今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、﹁PIXIV TECH FES.って何？﹂という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ

tailtame 2020/01/23

GIF速くて目がチカチカする(｀・ω・´)　『filter: blur();』って重いよな…まあ今の時代～だろうけど（ https://qiita.com/bluebird/items/a3f55206984fa8105e39 ）。CSSアニメーションでいろいろ遊びたい…IE11死すべし死すべし

css

リンク

脱Bootstrapガイド〜フルスクラッチCSS〜 - Qiita

2021/02/12 追記この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、現在のBootstrapは内部的にもflexboxになっていたりと改良されています。まずは剥がす前に最新版への更新を検討してみてください。一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで

tailtame 2020/01/18

2015年で2018最終か。フラットボタンも息が長いなぁ。Win8は死んだけどIE11はまだ死なぬなぁ。

リンク

CSSフレームワークBulmaについて - 一休.com Developers Blog

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。レストラン店舗向けの管理画面店舗の方と一休スタッフの両方が使う DAUは数千の規模主な用途は在庫の管理と、プラン︵コース︶や席の管理現在は店舗を限定してリリース済み具体的には以下のような画面で構成されています。 UIフレームワークは必要か？まずそもそもUIフレームワークは必要かという議論があります。今回のプロジェ

tailtame 2019/12/02

css
reading

リンク

はてなブックマーク

タグ

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

CSSに関するtailtameのブックマーク (326)

お知らせ

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

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス