HTMLをはじめ、CSSやJavaScriptなどで実装するフロントエンドの主要な機能が一つのパッケージになった「Easy front-end framework」を紹介します。
HTMLをはじめ、CSSやJavaScriptなどで実装するフロントエンドの主要な機能が一つのパッケージになった「Easy front-end framework」を紹介します。
CocProxy めんどくさいことしない置換プロキシー 使い方 http://svn.coderepos.org/share/lang/ruby/cocproxy/proxy.rb をダウンロード `files' というディレクトリをつくる 置換したいファイルをてきとうにつっこむ ruby proxy.rb ポートとか表示されるのでブラウザの設定を変える デフォルトだと、 #{File.basename(req.path_info)}", #{req.host}#{req.path_info}", #{req.host}/#{File.basename(req.path_info)}", .#{req.path_info}", がスキャンされ、ヒットしたら置換されます。 例えば、http://example.com/test/foo/bar.css にアクセスすると files/bar.c
ローンチするまでの日にちと時間をカウントダウンするページのテンプレートファイル一式をOurTutsから紹介します。 Free "Site Under Construction" Template demo デモサイトでは、ロゴ、メールアドレスや電話番号などがダミーで配置されており、ローンチするまでのカウントダウンとコンテンツスライダーが揃ったものとなっています。 主な特長は以下のとおり。 jQueryを使用したカウントダウン jQueryを使用したコンテンツスライダー PSDファイル付き モダンでクリーンなタイプフェイス テーブルを使用しない100%CSSベースのレイアウト validなXHTML 1.0 Transitional validなCSS 2.1 クロスブラウザ対応 IE6, Fx3, Safari2, Op
iPhone 対応ウェブページにするおまじない 2009-09-08-2 [Tips][iPhone] Revilist を iPhone の Safari で見ると、なんか縮小されちゃうので困っていました。 しかし、いろいろ調べて解決! 下記のメタタグを足したらOKでした。 <meta name="viewport" content="width=device-width; initial-scale=1.0;"> おまじないなし。字が小さいです。拡大しても横スクロールが必要になってイマイチ。 おまじない後。iPhone の幅に合わせての折り返し。ほどよい文字サイズです。 参考 - iPhone 3G用のWebページを作る1 http://allabout.co.jp/internet/javascript/closeup/CU20080715A/index3.htm - iPhone
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー(もしくはディレクター?)さんは、デザインをパッと見て「このデザインで組めます!」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード:Shift-JIS ・改行コード:
自宅用に新しいパソコンを買った sakai です。 スペック重視とお店で伝えたら「ちょっと値が張りますよ~」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね… 今回は小ネタで失礼します。 Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。 このように表示されます。 XHTML ソースは以下です。 <p>※ここに注意書き。<br /> 改行しても見栄えがいいです。</p> CSS のソースは以下です。 p { margin-left: 1em; /* ブロック全体を 1em 右に */ text-indent: -1e
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
PAGE 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in c
3キャリア1ソースで作成するときは、「背景画像は1つまで!」ルールでやっているのですが、各キャリアの対応状況ってどんなんだろーと思いちょっと確認してみました。 1キャリアのみ対応の案件もたまにあるので、柔軟に対応できますように。 サンプルページ →サンプルページを見る 結果発表 htmlのサンプルページ bodyに指定 <body background="bg.gif" ...> docomo:○ au:○ softbank:○ table/tdに指定 <table background="bg2.gif"> <tr> <td>サンプルです</td> </tr> </table> <table> <tr> <td background="bg2.gif">サンプルです</td> </tr> </table> docomo:×(iモードブラウザ1.0)、○(iモードブラウザ2.0) au:○
内容量の多い代替テキストは一行に収めていますか? それともデザインデータからコピーアンドペーストしたまま(あるいは意図的に)複数行で収めていますか? altテキストやtitleテキストによるツールチップには改行を持たせられるとなんとなく知っていたんですが、いままで何らかの理由をもって改行を削除して一行に収めていました。根拠は忘れたのですがそういうものだと思いそうしてきました。しかしながらそれではいかんと急に根拠が気になって調べてみたところ、以下の記事にたどり着きました。 ■title 属性のツールチップ内で改行 http://www2.u-netsurf.ne.jp/~alt/mt/archives/20031211_1555.html 2種類の方法を使ったWinIEでの改行対応方法と、title属性はCDATAなのでブラウザは改行しないのが正しい解釈、という記事なんですが、alt属性や
漬物が苦手なためいつも行くお弁当屋さんで「漬物はいりません」と言ったところ代わりにキャベツを大盛りにしてくれたのは嬉しかったのですが次の日から弁当屋さんに「キャベツ君」と呼ばれるようになったのが解せない気分の sakai です。 先日は弊社のコーダー(短期アルバイト)募集にたくさんのご応募ありがとうございました。お陰さまで、短期アルバイトの募集は締め切らせていただきました。 なお、近日中に今度は長期アルバイトもしくは中途採用の募集を検討していますので、また是非よろしくお願いします。 弊社では採用時に実技試験は行っておりませんが、今後は簡単な実技試験を導入してみるのも良いかも、と考えています。 面接に来ていただいた方にあまり時間を取らせるわけにもいきませんので、20~30分くらいでできて、かつ実力がわかるような試験問題を検討中です。 例として以下のような問題を作ってみました。 コーダーのみな
携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるというか心が折れるというか眠くなるというか。 そんなフォームページを簡単にやっつけるべく、コピペでペタペタはっていけるようにまとめてみました。 こんなフォームページがちょちょいのちょいと。 Dreamweaverなどを使っている場合はスニペットに登録しておくとかなり作業効率がアップしますよ? ただ、Dreamweaverを使わずに秀丸とかでコーディングする時もあるので、そういう時の自分の為に。 メニュー さくっとコピペできるように、html用とxhtml用で分けています。 ・html用のフォームパーツ ・xhtml用のフォームパーツ 数字とか値は適当に入っているので、コピペしたら直してくださいませ。 html用のフォームパーツ ・基本のパーツ ・割とそのまま使えるパーツ ・名前 ・住所 ・生年月日 ・性別 ・同意規
モバイルサイトでリンク色を指定するには、htmlの場合はbodyタグ内に記述、xhtmlの場合はhead内に記述する必要があります。 <body link="#000000" vlink="#ff0000" alink=""> ・link 通常のリンク色 ・vlink 訪問済みのリンク色 ・alink フォーカス時のリンク色 <head> ... <style type="text/css"> <![CDATA[ a:link{color:#000000;} a:visited{color:#666666;} a:focus{color:;} ]]> </style> </head> ・a:link 通常のリンク色 ・a:visited 訪問済みのリンク色 ・a:focus フォーカス時のリンク色 未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって
htmlで携帯サイトを制作する際、フォントサイズ指定は<font size="数字">で指定します。 では、どのサイズを指定すればいいのか! って結構悩みませんか? ということで、各キャリア(各端末)どんな感じなんだろうーということで確認してみみました。 サンプルページ 各font sizeと、あわせてmarqueeと太字(b、strong)も入れたサンプルページです。 →サンプルページを見る font sizeは1~7で指定します。 モバイルで7などを指定する人はいないと思いますが、一応参考までに。 相対指定は-2~+4で指定してます。 (相対はfont size="3"が基準のため、+1だとfont size="4"相当、-2だとfont sizse="1"相当。) 後の細かいソースは右クリックで見てみてください。 docomo 検証端末:F-03B (iモードブラウザ2.0) フォン
先日コーディングをしたモバイルサイトの案件で、どうしても複数画像を縦に隙間なく表示させなければならない状況がありまして、その時の検証結果をまとめてみました。 3キャリア(docomo,au,softbank)1ソース対応 対応機種:3G以降 xhtmlで記述 サンプルページ http://sakaki0214.com/sample/090328/index.xhtml ※シュミレーターやFirefoxのアドオン「FireMobileSimulator」や、直接携帯端末で見てください。 各サンプルの簡単な解説 [1]1画像ごとにbrで改行<img src="画像" /><br /> <img src="画像" /><br /> <img src="画像" /><br /> [2]改行なし<img src="画像" /> <img src="画像" /> <img src="画像" /> [3
モバイルサイトでtableを中央揃えにする方法です。 ちなみに、docomoのtable対応はxhtml2.0以降です。 iモード対応XHTMLのバージョン(docomo公式) docomoの901,701,702(一部端末)はtableタグがきかないのでご注意を。 サンプルページ →サンプルページを見る 「完璧なセンタリング」は携帯サイトでは難しいです。 スクロールバーが表示される端末だと微妙にずれます。 (その微妙なずれが分からない程度ならOKだと思いますが、サンプルページのような背景画像だと微妙なずれが目立ちます。) tableタグにalign="center" <table align="center" width="220"> ・ ・ ・ </table> ほぼ全端末でtableがセンタリングされます。 tableタグの外側のdivタグでtext-align:center;を指定
画像リンクを選択した時(フォーカス時)の各キャリアの表示をまとめてみました。 画像の内側に枠線が表示されたり、外側に表示されたり、2pxだったり3pxだったりと各キャリア、機種によってバラバラです。 画像ギリギリにスライスするときはちょっと注意が必要かなーと思います。 サンプルページ http://sakaki0214.com/sample/090709/index.xhtml 今回サンプルに使った画像は以下の2つ。 枠線が3pxの角丸画像です。 下の画像は1番目の画像の外側に、背景色と同じ色の余白を上下左右3pxとってます。 それぞれの画像リンクを選択したときの表示は以下の通りでした。 ちょっと分かりにくい画像ですが...ご了承ください。 もっと角丸にしないと分かりにくいですね。 docomo(F-08A、F-01A) 白い枠の外側に青い枠線が表示される (画像の内側に3px:青2px+
左に画像、右にテキスト。 3キャリア1ソースなら、 <img src="sample.jpg" align="left" style="float:left;"> テキストテキストテキスト みたいにやるだけ。簡単簡単。 なんですが、今回は画像の右側にチェックボックス(もしくはラジオボタン)を配置する場合。 普段どおりにコーディングをすると、 <form action="#" method="post"> <img src="sample.jpg" align="left" style="float:left;"> <input type="checkbox">ほげほげ<br /> <input type="checkbox">ほげほげ<br /> <input type="checkbox">ほげほげ<br /> </form> となるわけですが。 auだけカラム落ちしてしまいます。 ※H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く