webで縦書きを表現する方法

CSSで対応する方法と画像に変換する方法があります。 CSSの場合は、こちらのページに書いてありました。「テキストを縦書きに表示する」 http://technique.eweb-design.com/0402_tt.html CSSにて 以下の項目を使うことで実現できます。ただし、IE限定とのことですが、最近のブラウザでは対応しているものが多いようです。 writing-mode: tb-rl;で文章を縦書きにしています。 direction: ltr;左から右にテキストを流しています。   ブラウザの差異を気にするようなら、画像を作るしかありません。 ということで、phpで画像に変換できるように作ってみました。 http://studio-q.link/tategaki/ ゴシック、明朝体、フォントサイズ、1列(縦書きなので)に表示する文字数を指定できます。 出来たのはこんな […]

CSSのz-indexが効かない!

z-indexを調整してもなぜだか後ろに隠れてしまう。そんなことに出会ったことありませんか? 以下に参考サイトがありました。 z-indexで重なりが直らない場合はtransformのz軸を疑ってみる CSS translateに要注意です。 translateを使っていると効かなくなります。 私の場合は、SliderBarのJSプラグインを入れていたため、その中を調べてみるとtranslateを使っていました。 これが原因か、とわかったんですが、その上にmodalで表示したいのですが、SlideBarのJSプラグインを修正なんてしてる暇がないわけで。 解決方法は簡単です。 SlideBarJSプラグインの多くは、全体を囲むように指示があったりしますので以下のようになっている場合が多いです。 それを外に出して同一レベルにする。 slidebarの制御外にすればよいってことですね。あとうあ、 […]

checkbox(or radio)のスタイルを変更するには?

HTMLのFORM要素のcheckbox(input type=checkbox)とradio(input type=radio)。 checkboxとradioの見た目を変更したいという要望がある。 スタイルシート(CSS)を用いれば可能かと思うが、このFORM要素は、CSSで変更できない。特にIE8以下は、完全に不可能です。 ※CSS3から変更可能。 だけど、どうしてもデザイン的に変更させたい、というのであればいろんな手を使って実現させることは可能です。 ただ実現させるのではなくて、FORMの要素としてもちゃんとチェックされている、選択されているという状態であることも大事です。 (phpなどでサーバ側でチェックされている状態が受け取ることができることが重要) 実現方法を簡単に説明すると、チェックボックスを隠し、チェックされていない画像、チェックされた画像を用意し切り替える。 ということ […]

CSS3の角丸をIE8(IE6 & IE7)でも実現させる[border-radius.htc]の落とし穴

border-radios.htcはいまいち使えないことが分かったのでメモです。 Borderのコーナーを角丸にする方法 CSS3では[border-radius]という記述があるので簡単に実現できます。 forefoxやwebkit系(safari,chrome)でも対応させるためには、以下の通り。 ただし、これではIE8以前には対応してません。 IE8以前のIE6,7,8に対応させるためには、「border-radius.htc」というものがありました。 これはIEのCSS拡張で、CSS内でjavascriptが呼び出せる仕組みになります。 注意:htcという拡張子をブロックするようなwebサーバ設定もありますので、その場合は使えません 以下、参考サイトです。けっこう記事にされている方いますね。 [CSS3による角丸表現の決定版?の htcファイル「border-radius.htc」 […]

JavaScriptとCSSをブラウザ上で開発しよう

ちょっとした動作確認や実験をしたいとき、テキストを編集して、ブラウザで表示してみて、、という作業になると思います。 パラメータを変更したり、ミスを直したりするのにも若干煩わしさがあったり。 jsbinというサイトでは、直接ブラウザ上でHTMLやJavaScript、CSSを書くことができ、リアルタイムでその実行結果を確認できます。 されに面白いところは、jQueryが使えるところ。 もちろんバージョンもいくつか選べます。 JQuery UIやbootstrap、prototype,YUI,dojoなどなど。あらゆる有名どころはすべて使えます。 もちろん自分で使いたいものを「Add library」にて選ぶだけ。 まずは、使ってみましょう。 http://jsbin.com/ このjsbin、さらに面白いことにこのシステム全体がオープンソース(OSS)で公開されました。 DB(MySQL)+ […]

レイヤー固定CSS

CSSには、レイヤーを好きな場所に固定したり、好きなレイヤーだけをスクロールさせる事が出来る。 こんなのは、ウェブ製作に関わる人なら知ってて当然の知識だと思います。 昔であれば、iframeを用いたりしてページ内に外部のhtmlファイルを読み込む事をしていたが、 現在では、CSSのoverflowを用いる方法に変わった。 これもご存知だと思いますが、iframeで読み込んだページのみがGoogleなどの検索エンジンで引っかかり、読み込んで完成するはずのページが丸裸の状態で開かれる事となり、メニューが存在しないなど困った結果になったからだ。 で、overflowが利用されるようになった。のだろう。 でも、今やiPhone、iPadなどのスマートフォンやタブレットでのWEB閲覧者が爆発的に増えていることで、重要な問題が発覚。 上記端末ではスクロールバーは表示されない、一本の指でのフリックではス […]