不用意に 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
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
CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集 ｜ 向壁虚造
タイトルや見出しに視覚的な趣向を凝らしたいなら「グラデーション」がおすすめです。 例えば下図のような具合に、見出しにグラデーションをかけるだけで、ページ全体に華やかな印象が加わります。 HTML＆CSSで一工夫するだけで、彩り豊かなグラデーション文字を作ることができます。 今回は、HTML＆CSSで文字にグラデーションを付けるテクニックをご紹介したいと思います。 また、記事の後半ではコピペで実装できるサンプルデザインも掲載しているので、すぐにグラデーション文字を使いたい方はどうぞ。 １．CSSで文字にグラデーションを付ける手順 まず、CSSには一発で文字にグラデーションを付けるようなプロパティや値はありません。 グラデーション文字を作るには複数のコードを組み合わせる必要があります。 具体的には、以下の３つのプロパティ・値を使って、グラデーション文字を描画していきます。 background
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
こんにゃくいも (12490586) [ユーザー記事] - ニコニコ大百科
こんにゃくいもさんのページ ユーザーID: 12490586 総レス数: 7461 (第176位) 総編集数: 1258 (第243位) 総お絵カキコ数: 504 (第48位) 総新規記事数: 68 (第602位) 総ピコカキコ数: 3 (第416位) 最近更新した記事 アイ★チュウ 双子 双子 カードファイト!! ヴァンガード 踊るアニメOPED 踊るアニメOPED 高槻かなこ 22/7 幼馴染の一覧 ツキウタ。 アイドリッシュセブン ラブライブ！虹ヶ咲学園スクールアイドル同好会 ラブライブ！虹ヶ咲学園スクールアイドル同好会 ツキウタ。 アイドリッシュセブン お絵カキコ ラブライブ！虹ヶ咲学園スクールアイドル同好会 ラブライブ！虹ヶ咲学園スクールアイドル同好会 ツキウタ。 ラブライブ！虹ヶ咲学園スクールアイドル同好会 ラブライブ！虹ヶ咲学園スクールアイドル同好会 アニメソングの一覧 NE
![こんにゃくいも (12490586) [ユーザー記事] - ニコニコ大百科](https://cdn-ak-scissors.b.st-hatena.com/image/square/5bd1fac8d544d19340796767c18bdf23d7d3493d/height=288;version=1;width=512/https%3A%2F%2Fdic.nicovideo.jp%2Fimg%2Fog_b.jpg)
斬鉄剣で斬れない物一覧とは (ミジュクモノメとは) [単語記事] - ニコニコ大百科
斬鉄剣で斬れない物一覧単語 13件 ミジュクモノメ 6.7千文字の記事 153 0pt ほめる 掲示板へ 記事編集 斬れないのが悪いのではない。拙者の腕の未熟さ故だ・・・一覧（登場順）その他関連動画関連商品関連チャンネル関連項目掲示板 この記事は第379回の今週のオススメ記事に選ばれました！ より斬鉄剣を攻略できるような記事に編集していきましょう。 この記事は第379回の今週のオススメ記事に選ばれました！ より斬鉄剣を攻略できるような記事に編集していきましょう。 斬鉄剣で斬れない物一覧とは、ルパン三世に登場する十三代目石川五ェ門の所持する斬鉄剣で斬れない物の一覧である。 なお、斬ることはできたが再生されるなどして実質的には失敗に終わった例も含む。 また、ルパン三世という作品は個々のエピソードが独立していることが多いという性質上、「斬れないもの」も基本的には一回きりの設定となっており、あるエ
![斬鉄剣で斬れない物一覧とは (ミジュクモノメとは) [単語記事] - ニコニコ大百科](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f6a8f0c70ef5d006f39d5041a72391624afb47f/height=288;version=1;width=512/https%3A%2F%2Fdic.nicovideo.jp%2Foekaki%2F521881.png)
粗品とは (ソシナとは) [単語記事] - ニコニコ大百科
粗品単語 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%
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
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
8年ぶりのスタイルシート更新
ずーっとPHSユーザだった私がスマホに乗り換えたのが2017年のこと。2年縛りとかないイオンモバイルで買ったのだけれど、PINの入力が面倒で仕方ないから顔認証のある機種に変えたかったのと、Android5.1の通信料急増問題が重なり、さっさと機種変更しようと思い立った。 で、新機種でこのブログを見てみたら、とても見難くて困った（理由はよくわからないが、旧機種ではそこまでつらいと感じていなかった）。私は今でもインターネットはほぼPCから利用しているのだけれど、スマホを2年使ってきて、だんだんスマホからのネット利用も増えてきつつある。私は物忘れをすると、自分の記事の過去ログを検索することがしばしばある。スマホでネットを見るときも、それは同じだ。 そんなわけで、スマホから自分のブログが見難いのは困る。そこで、なんと8年ぶりにスタイルシートやら、ブログのテンプレートやらを編集することになった。 も
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"> <section class="are
TwitterのUIデザインで見つけたCSSのテクニックのまとめ
TwitterのUIデザインで見つけたCSSのテクニックを解説した記事を紹介します。 さまざまなコンテンツが入る可能性のあるコンポーネント、コンテンツが長い・短い場合、アイテムの数などを想定した興味深いテクニックが解説されています。 CSS Findings From Twitter Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバター画像のアスペクト比 CSS calc()関数の謎の使い方 CSSの背景とHTMLの画像の混在 スタイルのリセット CSSのposition: sticky; スペース要素 ツイートコンテンツの追加方法 スペースにハードコードされた値を使用する ナビゲーションリンクの幅 念のためのマージン ビューポートの高さが小さい場合のモーダル はじめ
絵文字😇を含むテキストを表示する @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(
PIXIV TECH FES.のLPを支えるCSSアニメーションテクニック - pixiv inside
※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
CSSフレームワークBulmaについて - 一休.com Developers Blog
フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO
ニコニコ大百科の記事『粗品』がやばい→「ニコニコは定期的に変態が現れる」「努力の方向音痴」と話題に #nicopedia
池田 泰延 on Twitter: "「Webフォントが重たい」ことへの対策。 ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf"
CSS - transform - とほほのWWW入門