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

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

  • 投稿:
ウェブページ上のテキストをどのフォントで表示するか、というのはスタイルシートの 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」です。 余談ですが、…

【HTMLルビ】両面ルビ表示を実現する。中間発表。

  • 投稿:
  • / 更新:
【2015.02.07 追記】  ruby_enabler2.js、完成版が出来ました。→ こちらでどうぞ。 以前に書いた記事のコメント欄で『HTML5の両面ルビを実現すべく何かしらやってみる』と書…

各OSに標準でインストールされているフォントを調べる。 最新版。

  • 投稿:
さて、以前書いた『各OSに標準でインストールされているフォントを調べる。』という記事に追加です。 Windows 8.1 と Mac OS X 10.9(mavericks)に、「游ゴシック(体)」「…

「両端揃え」と「均等割付」。

  • 投稿:
  • / 更新:
どうやら自分の中でも用語が混乱しているようなので、私見も含めてまとめておきます。『日本語の横書き文書』を整形するときの話です。 『両端揃え』というのは、一般的にはこういう処理。 言葉で説明すると、 【…

ChromeやSafariのfont-sizeやline-heightの値。

  • 投稿:
  • / 更新:
スタイルシートで font-size や line-height を小数点以下の値をもつ数値で指定した場合、いわゆるWebKit系ブラウザでの振る舞いだと、これらは少数点以下を切り捨てたpx値で表示さ…

input type="file" 要素のカスタマイズ。

  • 投稿:
HTMLでファイルの選択ダイアログを表示させるための INPUT 要素です。<input type="file" />この部品は、各ブラウザで大体こんなふうに表示されます。OSに依っても多…

各OSに標準でインストールされているフォントを調べる。

  • 投稿:
  • / 更新:
さて、前回の続き。内容は表題のとおりです。拙作 h2v.js で綺麗な縦書き表示をするためには、和文字が等幅なフォントが必須です。で、さまざまなOSに(日本語環境であれば)標準でインストールされている…

htmlの色表記を「RGB」-「16進」-「色名」相互に変換する。

  • 投稿:
  • / 更新:
新しくページの色使いを考えるときに、毎度毎度コレをするためにウェブをうろうろして時間を費やしてしまうので作ってみた。 → Webカラー RGB - 16進 - 色名 相互変換。|freefieilde…

CSS3の3D transform、三次元回転やperspectiveの実装状況は?

  • 投稿:
さて、ブラウザに完全実装された暁にはいろいろ面白い視覚効果を試せそうな 3D の変形プロパティ。公式のデベロッパーサイトや解説サイトを巡ってみても、何がどこまで実際に使えるのか、結局どういう書式でC…

iOS版safariの「文字サイズ自動調整」がいやらしい。

  • 投稿:
  • / 更新:
ええと、 divやらspanやらに表示フォントサイズを指定してやるでしょ。 iPhoneのSafari(以下MobileSafari)から、そのページにアクセスするでしょ。 JavaScriptで、フ…

縦書きスタイルシート、修正。

  • 投稿:
縦書き用スタイルシート、久しぶりに弄っていたら不具合発見。 Operaの一部のバージョンで、transform が効かない。このスタイルシートでは、括弧や長音記号などを 横書き → 縦書き に変換する…

スタイルシートだけで画像にさまざまな効果をプラスしてみる。その3。

  • 投稿:
スタイルシートだけで画像にさまざまな効果をプラスしてみる。その1。スタイルシートだけで画像にさまざまな効果をプラスしてみる。その2。 ということで今回は、iTunesなどでお馴染みのcoverflo…