サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
sakaki0214.com
透過pngで書きだしたい画像に乗算やオーバーレイや焼きこみカラー...などなど、描画モードが「通常」以外のものが使われていること、ありますよね？ 書きだしてから 「あれ...なんかデザインと違う...まさか...。あーやっぱり乗算だったー（泣」 っていうこと、ありますよね？（私だけですか...） 自分でちょちょいと修正できるときはいいんですけど、どう考えても無理な時とか、あまりに色々なところに乗算などを使われていると、 「次からはできればもうちょっと気をつけていただけるとありがたいです！」 と言いたい。 がしかし、なんで描画モード変更しちゃいけないの？と言われるとうまく説明できない。 できなかったので... サンプル作っておいておくことにしました。 （描画モードが変更されているパーツを透過pngで書きだすと、描画モードは反映されないんですよ、って説明してたんですけど...そもそもこれであっ
PCでもガラケーでもスマホでも、コーディングではインデントを一切使わない派の私ですが、要望があればもちろんします。 （Dreamweaverでぽちっと！） 今回はガラケーコーディングのお仕事で、 「インデントしてください」 というご要望をうけ、なんとなく嫌だけど（嫌な予感がするけど）やってみたら・・・ auで画像の下に隙間ができました。 いや、auはもともと隙間ができるんですが...言葉だと難しいので、画像でさくっと説明。 こういう見出しがあった場合、 <div style="background:#000000;color:#ffffff;"> <img src="img/line.jpg" alt="" width="100%" style="margin:0 0 3px;" /><br /> 見出しです <img src="img/line.jpg" alt="" width="10
2013年1月26日追記 時代の移り変わりとともに、このソースでは対応できなくなっているので 続：Androidブラウザでviewportのwidth指定[to-R] こちらのやり方がいいと思います！ これを横に回転させて、 画面幅に合わせて拡大したい。 これ、見にくくないのかな...と個人的には思うんですが、そういう依頼がちらほら来るのでまとめてみました。 サンプルページ http://sakaki0214.com/sample/110605/ 通常（横にしても拡大しない） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" /> iPhone用（横にすると拡大する） <meta name="viewport" content="wid
携帯サイトで、背景色を濃い色に、文字色を白（もしくは白に近い色）に指定している箇所に入力フォームを設置する場合、inputタグ（テキストボックスやsubmitボタン）の文字色に注意しましょーというお話です。 サンプルページ QRコード →サンプルページを見る <div style="background:#333333;color:#ffffff;"> ﾒｰﾙｱﾄﾞﾚｽ<br /> <input type="text" value="hogehoge@hoge.jp" name="mail" size="27" style="width:95%" /><br /> <input type="submit" value="送信する" /><br /> </div> 各キャリアでの表示 docomo（F-06B） テキストボックス内の文字色も、submitボタンの文字色も「黒」。 外側のフォン
前にも同じエントリー「[携帯]複数画像を縦に隙間なく表示させられるか」をあげていますが、サンプルを作り直したので書き直してみました。 以下のようなデザインをコーディングする場合、画像を縦に隙間なく表示させる必要があります。 3つ並んでいる赤ちゃんの写真のところです。 結論を先に言ってしまうと、3キャリア1ソースで画像を縦に隙間なく表示させることは現状不可能です。 （2010年9月6日現在） ということで、以下検証結果です。 brで画像を改行 <div style="text-align:center;"> <img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /><br /> <img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149"
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
別のブログでは既に告知してますが、こちらでも紹介させてください。 執筆協力をしました本「ケータイサイト解体新書」が6月24日に発売されました。 執筆協力といっても、やっていることはこのブログでやっていることとあまり変わりません。実際に自分がデザイン、コーディングをしたサイトのソースがどかんと載っています。 以下、自分が担当したものをざーっとご紹介。 CHAPTER4 4-01 おなじみの「モバツイ」 （おなじみなのでキャプチャーは割愛） CHAPTER4 4-02 EC系のサイトデザイン、といっても公開できる実績がないので完全なるダミーサイトを作成。 サイト名を考えたり（オガベジ、はオーガニックベジタブルを略しただけだったり！）、商品なににしよー、値段どうしよー、と、ワイヤーといったものがないので色々大変でした。 CHAPTER4 4-03 コンテンツ配信系のサイト「Music Full」
3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか？ ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。 xhtmlの場合、htmlの場合、と両方確認してみました。 サンプルページ（border使用） QRコード →サンプルページを見る <div style="text-align:center;"> <div style="background:#eeeeee;border:2px solid #000000;text-align:center;width:80%;margin:0 auto;"> <img src="img/sp.gif" alt="" width="1" height="2" /><br /> ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br /> <img sr
よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ（ボタンのサイズ）が変更できるか、の検証です。 今までsubmitボタンの大きさを変更したことが無かったのですが、とあるソースを見ていたら、 <input type="submit" value="ボタン" style="font-size:x-small;" /> という記述をみかけて気になった次第です。 サンプルページ →サンプルページを見る <input type="submit" value="ボタン" style="font-size:x-small;" /> こんな感じで、inputタグの中でfont-sizeを指定してます。 <div style="font-size:x-small;"><input type="submit" value="ボタン" /></div> 下の方は、inputタグ内で指定
携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフにしてる部分）を何ピクセルにしてますか？ PCサイトの場合だと、通常の文字サイズを12pxないし13px、小さい文字を10pxで作成しているデザインをよく見るのですが、携帯でもそのパターンが多いなーと感じています。 ユーザーが端末側の設定で文字サイズを変更している場合がありますが、検証する時は通常「標準（中）」の文字サイズでやっています。標準の文字サイズでチェックして、微調整をしたりしてます。 ※会社の方針や案件によっては違うかもしれないので一概には言えませんが。 デフォルトの設定から変更していない人の割合が多い、とどこかに書いてあったような...？ で、端末側の設定で文字サイズ標準（中）にすると、意外と文字が大きく表示されるんです。 なので、デザイン上の文字サイズを12px、10pxで作成してしまうと、実機で見た
背景色、文字色は通常6桁のカラーコードで指定しますが、CSSでは省略して3桁で書くことができます。 では、htmlで3桁のカラーコードを使っちゃうとどういうことになるか、というのをキャリア別にチェックしてみました。 先に結論を言ってしまうと、 「HTMLでカラーコード3桁は使うな」 ということなんですが、実際自分がつい使っちゃったことがあってしばしはまった経験があるので...一応書き残しておこうと思った次第です。 サンプルページ QRコード →サンプルページを見る 3桁でカラーコードを指定するとどうなるか bodyタグに背景色をカラーコード3桁で指定 <body bgcolor="#333"> docomo（iモードブラウザ1.0） [F-09A]背景が真っ黒になります。 [SO903i]背景が真っ白になります。 [D902i]背景が真っ白になります。 docomo（iモードブラウザ2.0
携帯（ガラケー）コーディングでインデントはNG 2011年12月27日 [携帯]inputタグの文字色が外側のフォントカラー指定に影響される 2010年11月15日 [携帯]画像を縦に隙間なく並べる方法 ver02 2010年09月06日 [携帯]携帯サイトで枠線を表現する方法 2010年05月29日 [携帯]submitボタンの大きさ調整 2010年04月21日 [携帯]デザインの時、fontサイズを何pxにしてますか？ 2010年03月26日 [携帯]カラーコードを3桁で指定するとどうなるか 2010年02月22日 [携帯]フォントサイズ（XHTML版） 2010年01月14日 携帯サイト[xhtml]のコーディング前のチェックポイント 2009年11月30日 [携帯]各キャリア別、背景画像の対応状況 2009年11月25日 [携帯]xhtmlのリンク指定方法〜cssとbodyの違い
フォントサイズ（HTML版）に引き続き、今回はXHTML版です。 CSSでフォントサイズを指定するので、こんな感じになります。 <span style="font-size:x-small;">文字文字</span> 各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。 サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。 サンプルページ QRコード →サンプルページを見る 各種フォントサイズと、ついでに太字のサンプルもおいております。 太字の指定方法はbとstrongとfont-weight:bold;です。 各キャリア、端末の表示 docomo 【大】xx-large,x-large 【中】large,medium 【小】small,x-small,xx-small ※全端末共通
xhtmlのｻﾝﾌﾟﾙﾍﾟｰｼﾞです
Dreamweaverのコードビュー画面のデフォルトの色って見づらくないですか？ なので、ちょこちょこいじっているんですが（まだ「これがベスト！」というのにたどり着けません）、だんだん汚くなってきて収拾がつかなくなってきました。 デフォルトに戻したい。 と思ってもヘルプには載っていないんです（頑張って探したんですがたぶんないかとっ）。 探した末にたどり着いたのがこちらのサイト Dreamweaverの背景を黒にして使う方法(改訂版) - Rewish こちらのサイトでは、タイトルの通り「背景を黒にして使う」ためのxmlファイルがDLできるようになっているんですが、私の目的はただ一つ。 Dreamweaverのカラーリングスキームをデフォルトに戻したい。 これだけ。 なのでサクッと方法をメモしておきます。 xmlファイルの在りかを探す 私の場合（WinXP）、 C:\Program File
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
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：○
結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。 <body link="#5994FF" vlink="#59E2FF"> <style type="text/css"> <![CDATA[ a:link{color:#5994FF;} a:focus{color:;} a:visited{color:#59E2FF;} ]]> </style> サンプルページ →サンプルページを見る bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？ って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。 まずは予備知識として docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモード
携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるというか心が折れるというか眠くなるというか。 そんなフォームページを簡単にやっつけるべく、コピペでペタペタはっていけるようにまとめてみました。 こんなフォームページがちょちょいのちょいと。 Dreamweaverなどを使っている場合はスニペットに登録しておくとかなり作業効率がアップしますよ？ ただ、Dreamweaverを使わずに秀丸とかでコーディングする時もあるので、そういう時の自分の為に。 メニュー さくっとコピペできるように、html用とxhtml用で分けています。 ・html用のフォームパーツ ・xhtml用のフォームパーツ 数字とか値は適当に入っているので、コピペしたら直してくださいませ。 html用のフォームパーツ ・基本のパーツ ・割とそのまま使えるパーツ ・名前 ・住所 ・生年月日 ・性別 ・同意規
恐らく、auの古めの機種でしか発生しないとは思うのですがたまたま遭遇してしまったため書き残しておきます。 というか、今までこんな現象知らなかったので...今まで私が制作したサイトはことごとく2ｇ（ｒｙ ...。 xhtml、htmlどちらでも同じ現象が発生します。 他のキャリアで見るとなんの問題もない普通のプルダウンなんですが。 auの古めな機種（A5511T、W41CAで検証）で見ると、 という感じで2行になります。 ちなみに、auの最近の端末で見るとプルダウンの部分だけ他よりもフォントが大きく見えてしまいます。 サンプルページ →サンプルページを見る 原因は？ selectの外側で小さめの文字サイズを指定すると、selectボックスの中身のテキストはデフォルトのサイズのままだけど、ボックスのみが小さめの文字サイズにあわせて小さくなります。 要するに、「中身は大きいままなのに外側のボック
★marquee ただmarqueeﾀｸﾞのみでかこっただけ loop="-1"を指定 ←behavior="alternate"→ 背景色指定 ★各ﾌｫﾝﾄｻｲｽﾞのｻﾝﾌﾟﾙ一覧 [font size="数字"] font size="7" font size="6" font size="5" font size="4" font size="3" font size="2" font size="1" [相対指定(基準値は3)] font size="+4" font size="+3" font size="+2" font size="+1" font size 指定なし font size="-1" font size="-2" ★太 ･太字は各ｷｬﾘｱまちまち｡ (ほとんど効かないと思った方がよい) ｺｺbで囲ってます｡ ｺｺstrongで囲ってます｡ ★太(ﾌｫﾝﾄ小)
モバイルサイトでリンク色を指定するには、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）の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。 今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。 ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。 デザイン、条件は前のエントリーと同様です。 前提条件は、 ・3キャリア1ソース ・html（CSSは使用不可） ・文字コード：Shift-JIS ・改行コード：CR LF 対応端末は、 ・docomo 901以降 ・au WIN端末 ・sb 3G です。 ※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。 チェックポイント tableが使えることによって前よりもチェッ
携帯（ガラケー）コーディングでインデントはNG 2011年12月27日 [携帯]inputタグの文字色が外側のフォントカラー指定に影響される 2010年11月15日 [携帯]画像を縦に隙間なく並べる方法 ver02 2010年09月06日 ケータイサイト制作前にコーダーが確認しておきたいところ 2010年07月07日 [携帯]携帯サイトで枠線を表現する方法 2010年05月29日 [携帯]submitボタンの大きさ調整 2010年04月21日 [携帯]デザインの時、fontサイズを何pxにしてますか？ 2010年03月26日 [携帯]カラーコードを3桁で指定するとどうなるか 2010年02月22日 [携帯]フォントサイズ（XHTML版） 2010年01月14日 携帯サイト[xhtml]のコーディング前のチェックポイント 2009年11月30日 [携帯]各キャリア別、背景画像の対応状況 20
ｵｰﾌﾟﾝ記念SALE実施中!今なら全品送料無料です☆ shop｢LOGO ﾛｺﾞ｣はｵｰｶﾞﾆｯｸ商品を中心に取り扱っている雑貨屋さんです☆肌に優しいｺｯﾄﾝ素材の衣類の問い扱いもありますので､小さなお子様がいらっしゃるお母様にも安心してお買い求めいただけます｡
モバイルで背景画像の左端（ないし右端）に画像をリピートさせたい。 という案件に遭遇しまして。 どういう風に対応するのがベストかを色々試してみました。 条件は「3キャリア1ソース」「xhtml」です。 横幅240pxの画像をリピートさせる docomoのiモードブラウザ1.0（2008年秋冬モデル以前）はbackground-repeatが効かないため、背景画像の横幅は240pxにしないといけません。 ※横幅いっぱいの背景画像でないと横（x軸方向）にもリピートしてしまう為。 <body style="background:#000000 url(bg_300.gif);"> →サンプルページを見る 参考イメージ ただ、このやり方だとVGA対応の画面で見た場合に画面中央あたりにもリピート画像が来てしまいます。 参考イメージ VGA対応の画面も考慮して横幅480pxの画像をリピートさせる <bo
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
入力フォーム（テキスト：1行）の横幅サイズの調整について、いつもコーディング時に迷うのでメモしておきます。 ※前提条件：3キャリア1ソース、xhtml size="**"のみ指定 <input type="text" size="27" name="hoge" /> 他のキャリアに合わせてサイズを調整していると、auで見た時に縦に2行になる場合があります（※端末の文字サイズにも依存します）。数字が大きすぎた場合？になるようですですが、だからといってauに合わせて数字を小さくすると、他のキャリアで見た時の横幅がかなり短くなってしまいます。 後、sizeで指定すると端末で設定している文字サイズによってフォームの長さも変わってきてしまうので、そこもちょっと気になるところです。 style="width:**"のみ指定 <input type="text" style="width:80%" na
次のページ
このページを最初にブックマークしてみませんか？
『これからゆっくり考L +α』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
