タグ「CSS3」が付けられているもの

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

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

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

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

【縦書き h2vR.js】最新版のChromeなど一部のブラウザでの表示不具合と、その暫定対処法。

  • 投稿:
ウェブページで縦書きレイアウトを実現する JavaScript・h2vR.js および h2v.js です。 最新版の Google Chrome および、レンダリングエンジンに Blink を採用し…

STAR WARSのオープニングシーケンスをウェブブラウザから弄って遊ぶ。2015年版。

  • 投稿:
遥か昔、…じゃなくてほぼ4年前に『CSS と JavaScript でスターウォーズのオープニングを再現するウェブアプリ - iSW』というのを作っていたのです。 → iSW 再生ページ(Chrom…

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

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

【縦書き】h2v.js、均等割付に対応しました。 但し…。

  • 投稿:
  • / 更新:
さて、縦書き変換JavaScript・h2v.jsのバージョン3.3.0です。 → h2v.js - ダウンロード - tategaki.infoスタイルシートの text-alignプロパティに j…

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

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

「縦書き字形」のブラウザ上での表示具合はどんなもんだろう。

  • 投稿:
前回導きだした、「現行のすべてのOSでいちおう安全な font-family 設定:ゴシック版」を使って、縦書き字形がブラウザ上できちんと表示されるかどうか確かめてみます。 括弧たち : ユニコード:…

iPhoneの Safari で checkbox をデカく表示する。

  • 投稿:
チェックボックス、いわゆる ←これなのですが、こいつのサイズを変更したい。フォントサイズを大きめに設定していると、checkboxのサイズと文字サイズがアンバランスになってしまいます。手許の Fir…

【CSS】文字の縁取り。

  • 投稿:
こないだ作った、スターウォーズのイントロをスタイルシートとJavaScriptで完全再現する iSW というWebアプリ。くわしくは → コチラからどうぞ…なのですが、この『STAR WARS』のタイ…

iPhoneでスターウォーズのオープニングを作って遊ぶ。

  • 投稿:
iSWは、映画『STAR WARS』のオープニングシーケンスを弄って遊ぶためのWebアプリケーションです。いちおう iPhone 向けに作ってみたけれど、最新版の WebKit 系ブラウザ(Chrom…

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

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

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

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

h2v.js - Webページの文章を縦書きで表示するJavaScript。

  • 投稿:
  • / 更新:
作ってみた。ここから下の本文が縦書きで表示されている筈。IE 7以前のバージョンや、携帯・スマートフォンブラウザで閲覧している人、その他レイアウトがズレているときは、↓この辺に表示されている「縦→横切…

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

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

Internet Explorer 9は普及しているのかね。

  • 投稿:
さてさて、IE9の日本正式リリースから1ヶ月。どのくらい使われているのか、ウチのサイトのアクセスログを覗いてみましょう。まずはWindowsユーザが、どのブラウザを使ってアクセスして来たのかチェック。…

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

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

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

  • 投稿:
前回の続きです。今回は、画像の上に「色付きの背景を透過させた div ボックス」を重ねてみます。オリジナルの画像はこれ。 div.board{ position:relative; width:4…

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

  • 投稿:
すべてのメジャーブラウザに対応! と謳いたいところですが、CSS3の採用状況などにばらつきがあったりするので、Firefoxで最適な表示。Safari・Chrome・Internet Explorer…

Internet Explorer 9 製品候補版が来た。CSS3はどうよ?

  • 投稿:
ダウンロードはコチラから → Internet Explorer 9 製品候補版 - Microsoft Windowsぺろっと使ってみましたが、以前たまたま気がついたCSSの不具合が解消されています…