スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
ActionScript 3.0 : htmlのパラメーターを受け取る
htmlのパラメーターをActionScriptで受け取る htmlには下記のように書きます。 <param name="FlashVars" value="param1=value1¶m2=value2"> ActionScriptには下記のように書きます。 var flashvars:Object; var param1:String; var param2:String; flashvars = LoaderInfo(loaderInfo).parameters; param1 = flashvars["param1"]; param2 = flashvars["param2"]; すると、param1には"value1"がparam2には"value2"が格納されます。
MOONGIFT: » HTMLを解析してCSS生成「html2css」:オープンソースを毎日紹介
CSSで便利だと感じるのは構造を階層化できる点だが、逆にきちんと構造化しておかないと欠点にもなりかねない。別な所で定義した名称と重複してしまい、どうもうまくいかないという経験がある人も多いはずだ。 まず現状どういった構造になっているのか、それを把握する所からはじめてみよう。それが分かればうまく構造化できるはずだ。 今回紹介するオープンソース・ソフトウェアはhtml2css、HTML文書を解析してCSSファイルにするソフトウェアだ。 html2cssはclassやid、そしてタグの構造を解析して、それをCSS形式で出力してくれる。これを見てみると、CSSのネストした構造がどの位深いのか良く分かる。無駄な点があればそれも見えてくるだろう。ソースとしてファイル、文字列またはURLを利用できる。 最上位がhtml bodyからはじまるので、大抵ネストは深くなるだろう。だが、そこから不要なものは抜き
A CSS Sticky Footer
A CSS sticky footer that just works We've all tried to use a sticky footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based sticky footer are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a sticky footer that even beginners can get a handle on. It's been tested in IE 5 and up, Fi
パワーソフト・ＨＴＭＬ特殊文字一覧
ＨＴＭＬ特殊文字一覧 ＨＴＭＬ特殊文字一覧は、ホームページ作成時に特殊な文字を使用したいときに利用します。たとえば、ブラウザは通常、複数空白を詰めてしまいますが、ここで空白がほしいときには、 と記述すると空白を挿入してくれます。また、ＨＴＭＬファイル内にいきなり "<" を書くとタグの開始とみなされますが、文字として＜を書きたいときには ≷ と記述します。 使用頻度の高いのは、 " & < > © です。
右クリックでリンク用HTMLを生成するFirefox機能拡張「Make Link」 - ネタフル
Download of the Day: Make Link (Firefox)というエントリーより。 Windows/Mac/Unix (Firefox): The Make Link Firefox extension lets you easily copy and paste complete links formatted in HTML or forum markup. リンク部分を右クリックでリンク用HTMLを生成する「Make Link」というFirefox用の機能拡張がありました。 試しに使ってみました。 インストール後にリンクを右クリックすると、このようなコンテキストメニューが表示されます。 HTMLを選択すると、リンク用のHTMLでコピーされますので、あとはペーストするだけです。リンクテキストとURLをコピーしてくれます。 ちなみに自分で内容をカスタマイズすることもで
コーディング大会みたいなのやりたいなぁ～
コレから書く事は、本決まりになったら「お知らせ」カテゴリにて告知いたします。 大会なんて書いてますが、ネーミングセンスが無かったので取り急ぎで付けただけです。 やりたい事は、デザイナーさんに2、3ページのデザインを作成してもらい、ソレをコーダーな方、コーダー志望な方、コーディング出来るぜ！な方、コーディングスキルも向上したい！って方、デジパに入りたい！(笑)って方なんかがコーディングすると言うもの。 まぁ、ようするに1つのデザインを皆が其々の思いで組むっちゅー感じですわ。 こういった事に興味引かれる人居るかな… 一応、興味引かれるような感じの企画にしたいと思ってますが、今は脳内妄想オンリー。 この発端は、昔個人趣味サイトを使って行ったのですが、1つのテーマに沿ってキャラを描いてもらい、ソレを1枚絵として完成させるというモノ。 下記のイラストは、男性キャラを好きに描いて集めた感じ。 その時に
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 33,323 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下の
CSSに見惚れてばかりじゃなくて、もっと私（HTML）を見てよっ！
と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。 ウチのサイトの一番の目的は「CSSって面白い！」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である（X）HTMLの正しい記述方法。 もちろん、CSSの勉強の前に（X）HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。 何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。 ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。 楽しんでナンボっす。 で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、（X）HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅
進化する“Webスクレイピング”技術の世界 ― ＠IT
2007/02/20 WebサービスのAPIやRSSフィードを使って複数サイトのサービスや情報をマッシュアップ――。これはWeb2.0が包含するいくつかの概念のうち、最も重要なものの1つだ。Amazon.comやGoogle、Yahoo!、楽天といった大手Webサイトは、RESTやSOAPを用いたAPIを公開しており、さまざまなサービス提供者や個人がAPIを通して各種サービスを利用している。その一方、世の中のWebサイトの大多数はWeb1.0的なHTMLやCGIフォームしか提供していないのが現実だ。こうした背景からWeb1.0サイトから構造化されたデータを引っ張り出す“Webスクレイピング”技術が急速に発展してきているようだ。 HTMLをXML化し、XPathで関連データだけを抽出 例えば価格情報サイトでは製品名から価格が簡単に調べられるが、Webサーバから提供されるのは、製品名や価格にレ
canvas : 画像の合成方法いろいろ - WebOS Goodies
使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形（パス or ビットマップ画像）、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています（簡
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
テキストエリアでタブ入力
<SCRIPT language="javascript" type="text/javascript" src="http://homepage2.nifty.com/lightbox/tabtextarea.js"> </SCRIPT> ★ TAB のみ挿入する場合 ◎ TAB 挿入 TAB キー ◎ TAB 削除 Back Space キー ★ まとめて処理は対象文字列を選択する ◎ TAB 挿入 TAB キー ◎ TAB 削除 SHIFT+TAB キー IE と Firefox、Netscape、Opera で動作確認しています(Opera は、name 属性が必要です)。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT lan
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TableとCSSいろいろ - DesignWalker
http://www.tsujita.jp/blojsom/blog/default/PHP/2006/04/07/%25u753B%25u50CF%25u2192HTML%25u5909%25u63DB%25u30C4%25u30FC%25u30EB.html
http://blog.ilr.jp/2006/07/post_3.php
WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト＋2200以上の無料HTMLテンプレ*ホームページを作る人のネタ帳
HTMLをPDFに変換するサービスいろいろ:phpspot開発日誌
HTML → PDF
