kamenokoki.com

【55日目】HTMLのpreがどうしてもページ幅を決めたいらしい

Posted:  Last Update:

サイトを作成して55日目。昨日はRSS1.0を作成するPHPを作ったり、サイトロゴを実装したりと実りのある一日でした。今日からはロードマップの次のステップに取り掛かりたいのですが…。

ロードマップ

ロードマップで進捗を見ると、ここまで進みました!

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する
    • お問い合わせページを作る ←今日からここをやる
    • 検索ボックスを作る
    • サイトマップページを作る
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

昨日の成果

昨日色々と作ったので、その成果を確認して見たいと思います。ちなみに、昨日実装できたのは次の4つです。

  • RSS version1.0を作成する
  • サイトロゴを作成してベタ打ちのロゴと交換する
  • 記事で紹介しているコードに色をつける
  • index.phpのあり、なしを統一する

RSS version1.0を作成する

RSS version 1.0をPHPで作成した件です。ついでに、RSS1.0しかpingでは受け付けていないFC2にpingを送るPHPも作りました。昨日Pingを送信した結果、今日見に行くと、最新記事が反映されていました!作った甲斐がありました。

RSS version1.0の作成方法はこちら↓

サイトロゴ / index.phpありなしの統一

この2つは問題なく動いています!よかった。

記事で紹介しているコードに色をつける

昨日はうまくいっていると思っていたんです。つい先ほど、スマホ画面で自分のサイトを見るまでは、問題ないと信じ込んでいました。

予想外のことが起こっていました。画面よりもサイトの横幅が広くなってる!えっ?なんで?しかも、画面のスクロールすらできない…。

えええっっっ。あんなに苦労したスマホ対応が、完全に潰されてる!

HTMLのpreタグは横幅が自動縮小しない?

いろいろと自分のサイトを見て回って、横幅がおかしくなっている原因をみてみました。やはり、昨日入れたコードの色付けが悪さをしているようです。HTMLの「pre」というタグを使ったのですが、これが悪いらしい。横幅が一定以上より小さくなりません。スマホの画面からはみ出してしまっています。

ネット検索しても何も情報が出てこない…。英語で検索しても出てきません。困った…。

しかたないので、コードを詳しく確認。スタイルシートも確認。さらに、コードを色々と弄り回してみました。いくつかの要素が悪さをしていることが分かりました。

  1. preではスタイルシートの折り返し設定がうまく効かないことがある(?)→一文が長くなる
  2. 一文が長すぎてページ幅に収まりきらない→ページ幅が強制的に広くなる
  3. preは色々難しい

preをdivの入れ子にすることでなんとかできそうな気もしますが、スタイルシートを弄ってもどうにもなりません…。ちょっと、どうすればいいのか分からない…。

というわけで、preは使わず、divでコードの表示をすることにしました。結局もとに戻ってる…。色だけはついたんですけど、いまいちだなぁ。後日ゆっくり考えよう。

今日はここまで

preの動作を調べたり、コードを書き換えたりするのにかなりの時間を使ってしまいました。今日作業できる時間がなくなってしまったので、経日ここまで。明日こそはお問い合わせページを作りたいです。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告