2016-06-21

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/FireShot Capture 2 - 縦書き - http___studio-q.link_tategaki_

ゴシック、明朝体、フォントサイズ、1列(縦書きなので)に表示する文字数を指定できます。

出来たのはこんな感じ。
tategaki

詳しいコードを知りたい方は、コメントください。

 

#2017/12/20 更新

ソースコードを整形してから掲載しようと思いましたが、かなり遅くなっちゃってますがまだ整形してませんm(__)m

とりあえず、githubにアップしました。

https://github.com/fokazaki2/tategaki

 

author :: futoshi / Category :: CSS,HTML5,PHP,technology / Date :: 2016-06-21 / Comment :: 2 Comments »

2015-07-03

CSSのz-indexが効かない!

z-indexを調整してもなぜだか後ろに隠れてしまう。そんなことに出会ったことありませんか?
powerpoint-27539_640

以下に参考サイトがありました。

z-indexで重なりが直らない場合はtransformのz軸を疑ってみる

CSS translateに要注意です。

translateを使っていると効かなくなります。

私の場合は、SliderBarのJSプラグインを入れていたため、その中を調べてみるとtranslateを使っていました。
これが原因か、とわかったんですが、その上にmodalで表示したいのですが、SlideBarのJSプラグインを修正なんてしてる暇がないわけで。

解決方法は簡単です。

SlideBarJSプラグインの多くは、全体を囲むように指示があったりしますので以下のようになっている場合が多いです。

<div class="slidebar">
<div class="modal"></div>
</div>

それを外に出して同一レベルにする。

<div class="slidebar"></div>
<div class="modal"></div>

slidebarの制御外にすればよいってことですね。あとうあ、slidebarとmodalのz-index調整でOKです。

author :: futoshi / Category :: Blog,CSS,Javascript,technology / Date :: 2015-07-03 / Comment :: No Comments »

2013-11-26

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

checkboxradioHTMLのFORM要素のcheckbox(input type=checkbox)とradio(input type=radio)。
checkboxとradioの見た目を変更したいという要望がある。

スタイルシート(CSS)を用いれば可能かと思うが、このFORM要素は、CSSで変更できない。特にIE8以下は、完全に不可能です。
※CSS3から変更可能。

だけど、どうしてもデザイン的に変更させたい、というのであればいろんな手を使って実現させることは可能です。

ただ実現させるのではなくて、FORMの要素としてもちゃんとチェックされている、選択されているという状態であることも大事です。
phpなどでサーバ側でチェックされている状態が受け取ることができることが重要

実現方法を簡単に説明すると、チェックボックスを隠し、チェックされていない画像、チェックされた画像を用意し切り替える。

ということになります。

もうちょっと具体的には、以下。

  1. チェックボックスチェックされた画像、チェックが外れた画像を用意。
  2. チェックボックスを消します。display:noneにて。
  3. 1で用意した画像をLABELタグに配置。(background-image)
  4. CSS内で、checkedセレクタにてチェックされた時の画像に切り替えるようにする。

通常、checkboxやradioボタンについては、LABELタグを用います。そのLABELタグに対してデザインされたチェックボックスの画像を用意し、チェックされた時、チェックされないときをCSSのセレクタを利用して定義するのです。そうすることでチェックボックスを疑似的にデザインしたことになります。LABELをクリックしているので、当然、input type=checkboxのチェック状態も変更され、サーバ側での状態取得も可能です。

ここで問題なのは、IE8。IE8には、input[type=checkbox]:checkedというcheckedセレクタがありません。IE9以降対応でよければ問題ないのですが、IE8に対応させるためにはどうすればいいのか。
これはもう力技ということになります。クリックイベントを用意して、checkboxをクリックする処理を追加してあげる必要がありますね。jQueryにて。
ただ、この処理を追加するならば、CSSのcheckedセレクタは不要ですね。ぜんぶこっちで動作するようになりますので。

以下、jQueryのコードです。※jQueryは1.x系ですよ。IE8対応なので。

$(function(){
	$('#labelCheckbox1').mouseup(function(){
		$('#checkbox1').click();
	});
});

author :: futoshi / Category :: CSS,HTML5,jQuery,technology / Date :: 2013-11-26 / Comment :: 1 Comment »

2013-11-19

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

border-radios.htcはいまいち使えないことが分かったのでメモです。

Borderのコーナーを角丸にする方法

CSS3では[border-radius]という記述があるので簡単に実現できます。
forefoxやwebkit系(safari,chrome)でも対応させるためには、以下の通り。

moz-border-radius: 5px;	//for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px;		//CSS3

ただし、これではIE8以前には対応してません。
IE8以前のIE6,7,8に対応させるためには、「border-radius.htc」というものがありました。
これはIEのCSS拡張で、CSS内でjavascriptが呼び出せる仕組みになります。

注意:htcという拡張子をブロックするようなwebサーバ設定もありますので、その場合は使えません

以下、参考サイトです。けっこう記事にされている方いますね。

[CSS3による角丸表現の決定版?の htcファイル「border-radius.htc」]

[border-radius.htc使ってみた – 放置演算子]

[IE で border-radius を使う方法 – それはBlog]

上記の方は、3種類比較されていました。

  • border-radius.htc を使う
    VML を利用して、behavior を使って border-radius を実現する方法
  • border-radius.js を使う
    JavaScript を使って border-radius を実現する方法
  • JQuery Corner を使う
    jQuery Corner という jQuery プラグインを使って border-radius を実現する方法

border-radius.js」というJSもあるようですが、IE8は未対応とのことです。

さらに、「jQuery Cornerを使う」とありましたので実装テストしてみました。

[jQuery Corner plugin]

これを使えばできそうかと思いましたが、FORM要素のINPUTタグには使えませんでした。

border-radius.htcを使ってみる

border-radius.htcのダウンロード先はこちら
[curved-corner – CSS curved corner – Google Project Hosting]
http://code.google.com/p/curved-corner/

記述方法はこちら

moz-border-radius: 5px;	//for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px;		//CSS3
behavior: url(border-radius.htc);//for IE

border-radius.htcの動きとしては、
moz-border-radius、-webkit-border-radius、border-radiusで指定されている値を取得してるようです。

FORM要素のINPUTタグでも使える!と喜んでみたものの残念な結果に。
こちらのブラウザ(IE8)で確認したところ、合計で30個まではOKで31個以上のborder-radius.htc呼び出しがあった時にエラーとなっています。それも意味不明なJavascriptエラーです。
「エラー:引数が無効です」

デザイン的に細かいところまで角丸を実現させようとするborder-radius.htcではかなり厳しいですね。
一番単純な方法としては、Borderを無くして、背景に角が丸い画像を置くのが一番良いかもしれませんね。

author :: futoshi / Category :: Blog,CSS,Javascript,technology / Date :: 2013-11-19 / Comment :: 1 Comment »

2013-10-16

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

jsbin_image

ちょっとした動作確認や実験をしたいとき、テキストを編集して、ブラウザで表示してみて、、という作業になると思います。

パラメータを変更したり、ミスを直したりするのにも若干煩わしさがあったり。

jsbinというサイトでは、直接ブラウザ上でHTMLやJavaScript、CSSを書くことができ、リアルタイムでその実行結果を確認できます。
されに面白いところは、jQueryが使えるところ。
もちろんバージョンもいくつか選べます。

JQuery UIやbootstrap、prototype,YUI,dojoなどなど。あらゆる有名どころはすべて使えます。
もちろん自分で使いたいものを「Add library」にて選ぶだけ。

まずは、使ってみましょう。

http://jsbin.com/

このjsbin、さらに面白いことにこのシステム全体がオープンソース(OSS)で公開されました。
DB(MySQL)+web(apache)を使ったシステムになるようです。

ダウンロードはこちらから。
jsbin -GitHub
(https://github.com/remy/jsbin)

author :: futoshi / Category :: CSS,Javascript,technology / Date :: 2013-10-16 / Comment :: No Comments »

2011-10-12

レイヤー固定CSS

CSSには、レイヤーを好きな場所に固定したり、好きなレイヤーだけをスクロールさせる事が出来る。

こんなのは、ウェブ製作に関わる人なら知ってて当然の知識だと思います。

昔であれば、iframeを用いたりしてページ内に外部のhtmlファイルを読み込む事をしていたが、
現在では、CSSのoverflowを用いる方法に変わった。

これもご存知だと思いますが、iframeで読み込んだページのみがGoogleなどの検索エンジンで引っかかり、読み込んで完成するはずのページが丸裸の状態で開かれる事となり、メニューが存在しないなど困った結果になったからだ。

で、overflowが利用されるようになった。のだろう。

でも、今やiPhone、iPadなどのスマートフォンやタブレットでのWEB閲覧者が爆発的に増えていることで、重要な問題が発覚。

上記端末ではスクロールバーは表示されない、一本の指でのフリックではスクロールされないのです。

スクロールさせるには2本の指を使う必要がある。

しかし、overflow部分では2本指を使いなさいというのを知っている人は意外と少ないのではないだろうか。

 

今後は、どんどんそういった細かな点での注意が必要になってくるのかな。

 

author :: hiroki / Category :: CSS,technology / Date :: 2011-10-12 / Comment :: No Comments »

PR