タグ「スタイルシート」が付けられているもの

【Linux Mint】OSのダークモード設定がウェブページに反映されないのを直す。

  • 投稿:
  • / 更新:
さて、前々回:ウェブページをダークモード対応にする。 そして 前回:ウェブページのダークモード化。画像が目立ちすぎるので何とかする。 で、OSがダークモード/ダークテーマに設定されている場合に、ダーク…

ウェブページのダークモード化。画像が目立ちすぎるので何とかする。

  • 投稿:
  • / 更新:
さて、前回の記事:ウェブページをダークモード対応にする。 で書いた方法で、このブログページをダークモード対応にしてみました。 主に文字色と背景色を調整したのですが、背景を暗くするとSNSのシェアアイコ…

ウェブページをダークモード対応にする。

  • 投稿:
さて最近は、OS(またはブラウザ)でダークモード/ダークテーマが使用されていると、それに応じでダークな感じのウェブページを表示してくれるサイトが増えています。 個人的には、この挙動はとても好ましいと思…

Mastodonのタイムラインをウェブページに埋め込む。

  • 投稿:
さて、Twitterの先行きがなかなか信頼し難いので、Mastodonのアカウントを作ってみたのです。 アカウント作成自体は お好みのインスタンスを選ぶ。 アカウントを作成する。 (必要であれば)プロ…

【縦書き】h2vR.jsの大幅な改修をしようと思います。

  • 投稿:
さて、「ウェブページで縦書き表示」に取り組み始めてから早、10年。 → h2vR.js - 縦書きを実現するJavaScript - tategaki.info "スタイルシートで強引に縦書き…

【Windows】インストールした筈のフォントをCSSのfont-faceで指定してもローカルから読み込まれなくて悩む。

  • 投稿:
さて、Noto Sans JP という日本語フリーフォントがあります。 → Noto Sans Japanese - Google Fonts 個人的にはなかなか読みやすいフォントだと思うので、自作の…

textarea内でタブを入力可能にする。ついでにタブ幅も変更する。

  • 投稿:
テキストエリアの中でタブを入力しようとすると、次の input 要素にフォーカスが移ってしまい、入力できません。これは不便。 JavaScriptでキーボード入力を監視して、tabキーが押されたらカー…

【CSS】input type="range" の見栄えを、異なるブラウザ間で統一する。

  • 投稿:
input type="range" で表示できるスライダー形式の HTML 部品。 個人的にはなかなか使い勝手の良い奴ではないか、と思うのですが、ブラウザによって外観がかなり異なるのだな。例えば F…

jQuery要らずでスクロールバーをカスタマイズするJavaScriptライブラリ・"perfect-scrollbar"。

  • 投稿:
「スクロールバーをカスタマイズしたい」という需要は結構多い筈なのだけれど、お手軽にちょいちょいとする方法はなかなか無い。そろそろスタイルシートでガシガシできるような仕様にならないのかなぁ…と思いつつ、…

スタイルシートで矢印を描く。

  • 投稿:
.cssArrow_l{ display: inline-block; position: relative; box-sizing: border-box; margin: 0; pad…

Androidデバイス上のウェブブラウザに向けたフォント設定を考える。

  • 投稿:
Android上のブラウザ向けに表示フォントの指定をしたい。要はスタイルシートの font-family 周りの設定の話なのですが。 結論を先に書くと… Android 端末上のウェブブラウザに対して…

ウェブブラウザで実際に表示に使用されているフォント名を調べる。

  • 投稿:
ウェブページ上のテキストをどのフォントで表示するか、というのはスタイルシートの font-family プロパティで設定できます。 ただ、この font-family の指定、いろいろややこしかったり…

position: fixed でヘッダ固定するとアンカーがズレる。直す。

  • 投稿:
ウェブページを作るときにヘッダをページ上部に固定表示すると、リンクをクリックしてページ内アンカーへ飛んだとき、位置がヘッダの高さぶんズレる、という話。 例えば以下のようなページソースとスタイルシート。…

【CSS】display: grid; はどのブラウザで使えるのかな。

  • 投稿:
スタイルシートの Grid レイアウト。Firefox に続き、先日(2017.03月)のアップデートでデスクトップ版の Google Chrome でもサポートされたので、そろそろ実際に使う準備を始…

【CSS】画像を領域内にぴっちりと収める。

  • 投稿:
高さと幅が決まっているある領域内に、画像を綺麗に表示したい。 例えば、以下のような正方形の領域があったとして、その中に画像をきっちりはめ込みたいのだけれど、さて、すっきりスマートな方法はあるのかいな、…

【縦書き】Tips:縦書きのときと横書きのときで適用するスタイルを変更する。

  • 投稿:
  • / 更新:
縦書き表示用JavaScript・h2vR.jsです。 こんな質問をいただきました。 (前略)横書き時にのみ行間を広げたいのですが(後略) つまり、縦書き時と横書き時で、文書に適用するスタイルを変更し…

DOMContentLoaded と外部スタイルシート。

  • 投稿:
JavaScriptで、DOMContentLoaded イベントを捕捉して何かしらの処理を行うときの話。 DOMContentLoaded 時に getComputedStyle() でページ内要素…

PCからなのか、モバイルデバイスからのアクセスなのかを "ざっくり" と判別する。

  • 投稿:
タイトルのとおりなのだけれど、とりあえず今やりたいのは、 アクセスしてきたブラウザが、ユーザの側でウィンドウサイズ変更可(≒PC)な奴なのか、そうでない(≒スマートフォンやタブレットの類)なのか。 ……

【CSS / JavaScript】インラインテーブル要素を、行に対してぴったり配置する。

  • 投稿:
ruby_enabler2.jsでは、ruby要素を正しくレンダリングしてくれないウェブブラウザに対して、 ruby要素:インラインテーブル(display:inline-table;) 内包するrb…

Firefoxでルビ表示を実現するJavaScriptブックマークレット。

  • 投稿:
  • / 更新:
さて、拙作ruby_enabler.jsと鋭意開発中のHTML5対応版ruby_enabler2.jsは「ウェブページの制作者側でルビ表示の適正化を行うためのJavaScript」です。 余談ですが、…