テキストサイトを作っています。
-------------------------------------------------
#container1 {
width: 948px;
margin: 0px auto;
min-height: 100%;
overflow: hidden;
padding: 1px;
background: #FFF;
}
div.main {
margin-left: 8px;
line-height: 1.5em;
font-size: 100%; /* ここでフォントサイズを変える */
color: #0b0b0b;
font-family: "メイリオ",sans-serif;
margin-bottom: 300px;
}
-------------------------------------------------
cssにこのように記述して、文章を表示する部分をつくりました。
しかし、今のままではPCで閲覧したときはちょうどよい文字サイズなのですが、スマホだと文字が小さく表示されてしまい、とても読みづらいです。
スマホで表示したときだけ文字を大きく表示するようにしたいのですが、どうしたら良いでしょうか。
No.2ベストアンサー
- 回答日時:
スマホは、解像度が高く本来は、1pxが、0.26mmなのですが・・
【引用】____________ここから
基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。名目の腕の長さが28インチの場合、視角は約0.0213度である。距離をおいて読むために、1pxは約0.26mm(1/96インチ)に対応する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[構文と基本データ型( https://momdo.github.io/css2/syndata.html#value- … )]より
スマホの場合は、Viewport という機能があり、本来980pxであってもスマホ縦置きの横幅320px、すなわちほぼ1/3に縮小されてしまいます。
そのために、パソコンで見るのに比較して1/3の文字になったりします。
もちろん、最大の原因はWebページの作成で、大きな幅に固定してしまうから起きる現象で、リキッドデザインで、320pxでも縮めなくても表示できるデザインにしてあれば問題ないのです。
#container1 {
width: 948px;
margin: 0px auto;
↓
#container1 {
width: 90%;
min-width:480px;
max-width:1000px;
margin: 0px auto;
・・・これが本来の手法です。これでスマホ縦置きだと 320/480 約 3/5程度で表示される
★#container1 このようなid名やclass名は好ましくありません。
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
・・・20年近く前から言われ続けているが、理解されにくく、それでHTML5では構造を示す新しい要素が追加された。
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP( http://www.html5.jp/trans/w3c_differences.html#n … )
つけるなら、それを参考に<div class="article">でしょうが、率直に
body{width: 90%;min-width:480px;max-width:1000px;margin: 0px auto;・・
ないし
div.header,div.section,div.footer{
{width: 90%;min-width:480px;max-width:1000px;margin: 0px auto;・・
でよい。
★CSS2以降は、起点セレクタを書きます。
div#container1
#container1 とかけば、*#container1 と全称セレクタ(詳細度0)が省略されたとみなす
★div.main
mainは、ごく一部に使う。
main 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/main.html )
これらは、検索エンジンがページの内容を正確に理解するため--SEO検索エンジン最適化のために留意したほうが良い。
さて、本題の文字サイズですが、基本的にはリキッドで対処できますし、それで対応できない・・たとえば、640ピクセル以下のデバイスだとデザインを変える
<style type="text/css" media="screen and (max-width: 640px)">
でスマホ用のスタイルをかく。
そして、先のViewportをつかって、HTMLに
<meta name="viewport" content="width=device-width; initial-scale=0.8">
を書いておく。
1) ページをリキッドで製作する。
現在のように幅広ディスプレイ、タブレットやスマホのような小さな画面が混在する場合は必須です。
2) mediaqueryをつかって、画面幅でデザインを変更する。
3) Viewportをつかって、縮小されないようにする
の三点が対策になります。
No.1
- 回答日時:
レスポンシブデザインにする。
詳しくは検索して研鑽して下さい。
例えば以下をcssの最後へ追加して、ブラウザの横幅が480px以下のものにだけ、適用するcssを作る。
@media screen and (max-width: 480px) {
div.main { font-size : 12px ; }
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
form input テキストを上下中央...
-
HTMLで文字が重なって表示されます
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
Win IE5.5~6.0での余白に関す...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
divタグ+CSSでのレイアウトで、...
-
指定したborderの一部が表示さ...
-
CSS(0の単位)について
-
W3Cのソースコードの検証サービ...
-
font-sizeが効かない
-
画像と一緒にスライドするリン...
-
4枚の画像を均等間隔で一列に...
-
余分な縦スクロールバーが出て...
-
z-indexで上になっている要素だ...
-
ホームページのCSSについて
-
CSS:animation開始位置の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報