- ベストアンサー
スマートフォンサイトのナビ部分画像の可変について
いつもお世話になっています。 今スマホサイトを構築中なのですが、添付画像のように画像をfloatさせて並べたいのですが、iphoneで確認しているのですが縦にした場合と横向きにした場合では横幅が変わるように配置がしたいんですが。。。実際は添付の上の様な状態になってしまいます。 スマホで可変のナビを作られている方はどのようにfloatさせているのでしょうか？？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 画像の大きさに合わせて文字の大きさを変えたい
画像の上にテキストを置きたいのですが、以下の条件の場合にどのようにcssを書けばいいのかわからないので教えてください。 1. 画像サイズがウインドウの大きさに合わせて可変する 2. 画像の垂直中央にテキストを配置する 3. 画像の大きさに合わせて相対的にテキストのサイズも同様に可変する ネットでいろいろ検索したり書籍を見たのですがなかなかこういう場合の手法が探せませんでした。 1.の画像サイズをウインドウの大きさに合わせるのはわかりましたが、2.はテーブルを使わずにできないでしょうか？ また、3.は検討もつきませんでした。やはりjavascriptなどを使わないと実現できないでしょうか？ やりたいことはスマホ用サイトで、スマホを縦にしたり横にしたりした場合に、画像の大きさはウインドウ横幅に合わせて変えられるのですが、文字の大きさまで変えたり、中央に配置するのがわかりませんでした。 html5+css3です。お手数ですがよろしくお願い致します。
- 締切済み
- CSS
- ツイッター画像添付
ツイッターに画像添付・投稿の時にスマホから（GALAXYs2LTE)添付する時に、スマホを縦の状態で撮ると画像が横向きになって投稿されます。 横向きに撮ると、問題はないのですが・・・ 縦で撮って添付したいのですが、何かの設定等でしょうか？ お詳しい方、宜しくお願い致します。
- ベストアンサー
- その他（SNS・掲示板・ブログ）
- 可変幅でabsolute指定で中央配置できません
可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか？困っています、どなたかお助けください。 例えば画像が固定のサイズであれば width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500ｐｘとはなりません。 よろしくお願い致します。
- ベストアンサー
- CSS
- スマホの背景画像について
タイトル通りスマホの背景画像について質問です。 初めて作成するので、まずはいろいろ調べたところ縦向きが320px で 横向きが480pxなので一般的にデザインカンプを作る際は320pxで作る ようなのでその通りにしております。 縦向きの場合には、サイズが合っているので表示もおかしくないのですが 横向きにしてしまうと間が空きます。 こんな問題があるので、できるだけ画像は使わないようにとのこともありますが 背景画像を使う場合、うまく表示できる方法はありますか？ 例えば、480pxで背景画像を作りcss3のbackground-sizeを使い縦向きであれば 320pxで横向きであればそのまま表示させるようにするとか思いついたのですがこの 方法はありでしょうか？
- ベストアンサー
- HTML
- リキッドデザインの縦向き画像
リキッドデザインで横向き画像を配置する場合、CSSでwidth100%で指定すると自動的にheightを計算されますが、縦向き画像の場合どのように指定すると良いのでしょうか？
- ベストアンサー
- CSS
- スマホサイトの画像がandroidでバラバラになる
スマホサイトのコーディングをしています。画像のwidthやらカラムのwidthやらを％で指定しないといけないのですが、 ある箇所の画像が全て同じ大きさで、cssの指定も全て同じはずなのにAndroidのみで大きさがバラバラになっているのです。 iPhoneやpcでChromeで見たときは全て大きさが揃っているのに。 どんな理由が考えられるでしょうか？ ちなみにcssの最初にimgを全て100％に指定してからそれぞれの画像が入るdivなどの横幅を50％とかに設定して、その中の画像を囲んでいるdivのwidthを25％とか見た目を確認しながら変えています。 助けてください！
- 締切済み
- CSS
- ページヘッダー部分のHTML/CSS
独学で勉強中の学生です。 どうしてもできなくて…よろしくお願いします！ ページヘッダー部分1～5（グローバルナビより上）を画像でHTML入れました。 CSSで 全体を inline 1をfloat: 2をmargin-left; 5をfloat: right; 3,4の高さを合わせることができません。 添付画像のような配置にするにはどうしたらよいのでしょうか。 使っているのはDreamweaverです。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- スマホの縦・横を判別して別画像を出すことは可能？
スマホサイト（iPhone・Andoroid両方対応）の制作時に、 スマホの縦・横を判別して別画像を出すことはできますか？ 現状は添付画像のように、 １．横640pxの画像を作成（文字を載せたい場合は左から320pxまでの所に描く） ２．背景画像で（１）の画像を指定 縦：左端から320pxの所までが見える 横：640pxまで見える ・・・という感じで作っていますが、 これを 縦用：横320pxの画像A.jpg 横用：横640pxの画像B.jpg を作成しておいて、スマホ縦の時はA.jpgを表示し、スマホ横の時はB.jpgを表示というようなことがしたいです。何卒宜しくお願いします。
- ベストアンサー
- CSS
- 【横幅を可変（？）】Flashの表示幅を変更させたい
いつもお世話になっております。 今回は、Flashについて質問です。 1,800px×300pxと言うデカイFlashがあります。 これを、HTMLに埋め込み再生するのですが、 ブラウザ幅に合わせて横幅のみ可変させる方法を知りたいです。 ※高さは固定 ※1,800×300と言う比率は変わらない。 つまり、ブラウザの横幅が1,000pxだった場合、 Flashは1,000pxまでしか表示させない。 残り800pxはマスク（？）する感覚です。 参考になればと思い、画像を用意しました。 ↓ http://www.gochader.com/sample.gif ご意見、ご回答よろしくお願いいたします！！！！
- ベストアンサー
- Flash
- 可変レイアウト時の、floatしたulの中央寄せ
floatしたulをセンタリングする為、以下のソースを記述しました。 <section> <ul> <li>ボタン1</li> <li>ボタン2</li> </ul> </section> section { position: relative; overflow: hidden; } section ul{ float:left; left:50%; position:relative; } section ul li{ float:left; left:-50%; position:relative; width:150px; margin-right: 5px; } ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い section ul li{ float:left; left:-50%; position:relative; width:40%; margin-right: 5px; } に書き換えた所、リストの横幅がすごく狭くなってしまいました。 ％幅で横に2つ並んだリストボタンをセンタリングさせられれば、 potisionを使用したセンタリングにこだわっているわけではありませんが 自分で思いつく限りを試しても解決に至らず、質問させていただきました。 html5、css3で記述しています。 詳しい方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- CSS
