例えば、下の様なレイアウトのページを作るとします。 都合上、以下の説明はブラウザを下に表示するレイアウトが全て表示できるより広い幅で見てください。 このレイアウト例を表示するための注意点のまとめ、およびCSS・htmlの記述内容はこちら 前ページで説明した「floatの指定」に従えば、上のレイアウトには 左右どちらかのブロックにfloatを指定する(下のどちらかの一つの指定をすればよい) メニューのブロックにfloat: left;を指定 または 内容のブロックにfloat: right;を指定 脚注のブロックにclear: both;を指定 clear: right;でもいいのですが、bothだとleft、rightどちらも解除できるので今回はbothを利用します。 が必要です。* { margin: 0; padding: 0;}で基本の余白を0にしてあるので、ブロック間の隙間はできま
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 (私はありました。) ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考:iPhone版Safariで文字サイズがおかしくなるときは-we
目次 1.viewportを指定する 2. apple-touch-iconを指定する 3. paddingやborderを幅に含める 4.メニューを3つ横並びにする 5.リンクに矢印を付ける 6.最後に 1.viewportを指定する スマホサイトを制作する際、一番最初に指定するものがviewportです。 そもそもviewportというものは、スマホの仮想的なウィンドウサイズのことで、デフォルトでは980pxが指定されています。このままでは文字などが小さくなり非常に見づらいです。見やすくするためにHEAD内に以下を指定します。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> これで見やすい文字サイズになりました。詳しい解説はiPhone生活や、viewportとはの解説を見るといいと思います。
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
こんにちは! ヨス(プロフィールはこちら)です。 今現在、Google検索では「スマホ対応」がされているかどうかは超重要になっています。 具体的にいうと、PCの検索順位はスマホでの検索順位が適応されているのです! 今回は、ブログのスマホ対応でのポイントをくわしく解説します。 スマホ対応で困った6つのこと 今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。 スマホで見たら画像がはみ出す?! まずはこちらの比較画像をご覧ください。 画像サイズ(左: 変更前・右: 変更後) スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。 これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。 でも大丈夫! CSSの<im
※ 2017.09.08 追記 2017年9月 に秩父の長瀞に cafe ura_hoto(うらほと) を Open 致しました。 当ブログの トップペ-ジ でもご紹介させていただいております。 ura_hoto(うらほと)は、カフェの仮面を被った食事メインの飲食店なのですが 成り行きでホームページを作ってしまったら、なんだかお洒落な感じになってしまったのでマズいなと(・・;; ほんとうは山の麓にあるお店なのでハイカ-やサイクリストの汗だくのお客さま大歓迎でございます。 サイクリストの皆さまの胃袋をきっと満足させてみせます! というのが、私たち夫婦の想いです^^ 以上、potere & deburin からのお知らせでした。 (2017年9月8日) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く