CSSでテキストの縁を表現する方法

カテゴリー CSS
[DEMO] CSSのみで袋文字を実現する - CSS3で遊んでみる3 | CSS-EBLOG http://css-eblog.com/eblog_sample/1001/text-stroke/ CSS3のtext-shadowとfilter:dropshadowで、わりと強引かもしれませんがテキストの縁を表現できるジェネレータを紹介します。 細かく設定はできませんが、縁の太さを入力してから「適用」ボタンを押すと、CSSのプロパティが生成されます。赤色から変更する場合は、「red」と書かれている場所を「#000000」などに変更すれば色を変えることができます。 IE6でもなんとか表現できてはいますが、影の位置が若干ずれていたりしてしまってますね。 SafariやGoogleChromeはWebKitが使われてますので、テキストの縁用にCSSが用意されています。 [css] /*ふちの太さ*/ -webkit-text-stroke-width:3px; -webkit-text-stroke-color:#FF0000; -webkit-text-fill-color:#FFFFFF; [/css] この設定はスマートフォン用のページだと有効的に使えますが、PC用のページでは、他のブラウザが対応していないため使えないですね。このジェネレータで見る限りでは、問題なくキレイに表現されているように見えます。 Firefoxではうまく動きませんでしたが、実際に表示してみたところ問題なく表示されました。 画像をなるべく使わない。ページ速度もSEOの評価対象といわれていますので、表現の幅をきかせるのであれば、こういったテキストを使うといいとおもいます。 ※検証に使ったブラウザは全て最新のバージョンです。

続きを読む

CSS3の表現が簡単に作れるプロパティジェネレーター

カテゴリー CSS
CSS3は古いブラウザで表示が崩れたりするので、すべてCSS3でコーディングされたWebサイトはなかなかありませんが、iPhoneのSafariやAndroidのChromeではWebKitが採用されているので、スマートフォン用のWebサイトにはCSS3の表現が使われています。今まで画像を使って表現するしかなかったグラデーションやテキストのドロップシャドウなど、画像を使わないことによってページ全体の容量を軽減することができますので、スマートフォン用のWebサイトではどんどんCSS3を活用していったほうがいいですね。 グラデーションやドロップシャドウをCSS3で書くのはちょっとだけ文字数が多く、ちょっと微調整にめんどくさいところがあります。今回は微調整しながら表示確認ができ、CSS3のソースを生成してくれるジェネレータの紹介です。 CSS3プロパティジェネレーター | CSS-EBLOG http://css-eblog.com/eblog_sample/0912/css3-generator/ 設定が終わったらページ右上の「ソースを生成」ボタンを押すとライトボックス風にソースが出てきます。-webkit　-moz　-ms と書かれているところはそれぞれのブラウザのレンダリングエンジンに対しての命令なので、スマートフォン用など限定して使う場合はとっちゃっていいとおもいます。 -webkit はSafari、GoogleChomeに使われているWebKitを指してます。 -moz はMozilla系のGeckoエンジン、Firefoxなどを指してます。 -ms はCSS3が使えるIE9のTridentエンジンを指してます。

続きを読む

JSONエディタとJSONパーサ

カテゴリー JavaScript, JSON
JSONエディタ http://braincast.nl/samples/jsoneditor/ http://jsoneditor.net/ JSONパーサ http://json.parser.online.fr/ コピペしたらツリーになって確認できます。確認するだけのことが多いので、あまり編集することありませんが、どれも使い勝手はかわりませんね。

続きを読む

AS3で重複しないランダムな数字を配列で返す方法

カテゴリー Adobe Flash, ActionScript3
2011年の抱負を語ってから連続でAS3の話で恐縮ですが、、、毎度困ってる重複しないランダムのClassをメモします。 重複しないランダムは何かと便利です。その数を引っ張り出すのに、毎回関数で数字を生成するのはナンセンス。なので、一回のメソッドでほしい数分が格納された配列を作る。そんなClassを作りました。 ActionScript3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 package { public class RandomNonOverlapping { //↓この配列に重複しないランダムの数字が入ります。 public var ary= new Array(); public var max:uint = new uint(); public var Need:uint = new uint();//必要な個数 public function RandomNonOverlapping(m,n) { init(m,n); } public function init(m,n):Array { var max:uint = m; var Need:uint = n; var int_a = new Array(); var int_b = new Array(); //0～maxの数字を全部配列に入れる for (var i:int=0; i<= max; i++) { int_a[i] = i;<br /> } var j:Number = 0; var a_length:Number = int_a.

続きを読む

Stats.asがダウンロードできる場所と使い方

カテゴリー Adobe Flash, ActionScript3
※追記 最新のダウンロードできる場所はここです https://github.com/mrdoob/Hi-ReS-Stats AS3用のFPSとメモリーの使用量がわかる、Stats.asというのがあります。左上のグラフみたいなやつですね。めちゃくちゃ便利なんですが、PC移行の際にバックアップをとるのを忘れ、再度ダウンロードしにいったんですが、なんと！ソースがなくなってる？じゃないですか！ http://code.google.com/p/mrdoob/wiki/stats ↑だいたいここに飛ばされるんですがなくなってるみたいですよね。 あれば便利なんで、、、何とかしてみつけたいなぁーっと思い、探しに探したら見つかりました！ Stats.asがダウンロードできる場所はここ http://code.google.com/p/mrdoob/source/browse/trunk/libs/net/hires/utils/?r=109 ↑Stats.asを右クリックで、名前をつけて保存。で保存してください。 簡単な使い方 Stats.asをひらくと、「package net.hires.debug」となってます。ドキュメントクラス、またはflaファイルがあるところに「net」フォルダ、その下に「hires」フォルダ、その下に「debug」フォルダを作ってその中にStats.asを置いてください。 ActionScriptに下記のコードを書きます。(古いコードです) ActionScript3 1 2 import net.hires.debugStats; addChild(new Stats()); 追記 どうやらimportのパスが、変更になったみたいです。通りすがりのStarlingさんからご指摘いただきました。ありがとうございました！(^^) ActionScript3 1 2 import net.hires.utils; addChild(new Stats());

続きを読む

ガソリン価格情報WEBサービスAPI

カテゴリー WEB, API
ガソリン価格比較サイト gogo.gs に寄せられたガソリン価格および軽油・灯油の価格情報を提供します。 提供：gogo.gs API：ガソリン価格情報WEBサービスAPI URL：http://api.gogo.gs/ サンプルリクエスト：http://api.gogo.gs/v1.2/?apid=guest&lat=35.671766&lon=139.613228&sort=d いまのところ？レスポンスはXML形式のみみたいです。

続きを読む

プロフィール画像

こたぽん

JavaScript, React, NextJS, VueJS, NuxtJS, AWS, Firebase, Git, ビールと生ハムが好き

Rakuten, Inc. CyberAgent, Inc.