タグ

webデザインに関するhyoromoのブックマーク (5)

  • スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope

    【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLCSSで画像を操る編(前編) 2.HTMLCSSで画像を操る編(後編) スマホサイトの作り方関連のブログとかを見てて、viewport周りの基的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか? ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait(縦)表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 (まぁ、拡大とは意味が違うので当然なのですが。。。) 具体的にどうい

    スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
  • ButtonMaker webボタン素材 自動生成サイト - 無料

    このページはホームページ制作に使えるボタン素材を生成するサイトです。 ご希望の項目を設定し、右上の「create」ボタンをクリックするだけで簡単にボタンを作れます。 ※印の付いた項目は設定必須で、その他の項目は必要に応じて設定してください。 各項目の「カラー」の欄は入力欄をクリックするとカラーピッカーが表示されますので、 ご希望の色をクリックすると自動で入力できます。 背景色の「方向」はグラデーションにする際の1から2への色の向きです。 テキストの位置2は自由に指定したい場合に設定すると、 位置1の指定を無視して、位置2で指定した位置にテキストを表示します。

  • Android,iPhone用ページを作成するにあたっての注意点 - PHP,MySQL,Flex,JSな日々+イラストとか

    Android,iPhone用ページを作成するにあたっての注意点 ちょいとAndroidiPhone用のページを作っているのですが、解像度もブラウザも一緒だからあまり気にしなくていいのかなぁって思ってたそんなことはなかったのでメモ。 iPhoneでのsafari Androiでのsafari レイアウトが崩れてる!! 原因は単純でAndroidの場合は右のスクロールバーの横幅分だけ減ってます。6ピクセル。 これから両方に対応したページを作ろうかなぁって思っている方は覚えておいたほうがいい感じ。 せっかくなので表示される解像度を表にしてみました。 機種 横 高さ Android 314 429 iPhone 320 356

    Android,iPhone用ページを作成するにあたっての注意点 - PHP,MySQL,Flex,JSな日々+イラストとか
  • モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか?』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ

  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
  • 1