【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の作成方法はこちら↓
関連記事
ブログランキングサイトなどに送信するRSS version1.0を作りたい!でも、どこから手をつけていいのか分からない…。そんな方に向けて、この記事では「RSS version1.0」の形式や、PHPでの作成方法を詳しく紹介します。これさえ読めば、「RSS version1.0」をPHPで自作できるようになります!
サイトロゴ / index.phpありなしの統一
この2つは問題なく動いています!よかった。
記事で紹介しているコードに色をつける
昨日はうまくいっていると思っていたんです。つい先ほど、スマホ画面で自分のサイトを見るまでは、問題ないと信じ込んでいました。
予想外のことが起こっていました。画面よりもサイトの横幅が広くなってる!えっ?なんで?しかも、画面のスクロールすらできない…。
えええっっっ。あんなに苦労したスマホ対応が、完全に潰されてる!
HTMLのpreタグは横幅が自動縮小しない?
いろいろと自分のサイトを見て回って、横幅がおかしくなっている原因をみてみました。やはり、昨日入れたコードの色付けが悪さをしているようです。HTMLの「pre」というタグを使ったのですが、これが悪いらしい。横幅が一定以上より小さくなりません。スマホの画面からはみ出してしまっています。
ネット検索しても何も情報が出てこない…。英語で検索しても出てきません。困った…。
しかたないので、コードを詳しく確認。スタイルシートも確認。さらに、コードを色々と弄り回してみました。いくつかの要素が悪さをしていることが分かりました。
- preではスタイルシートの折り返し設定がうまく効かないことがある(?)→一文が長くなる
- 一文が長すぎてページ幅に収まりきらない→ページ幅が強制的に広くなる
- preは色々難しい
preをdivの入れ子にすることでなんとかできそうな気もしますが、スタイルシートを弄ってもどうにもなりません…。ちょっと、どうすればいいのか分からない…。
というわけで、preは使わず、divでコードの表示をすることにしました。結局もとに戻ってる…。色だけはついたんですけど、いまいちだなぁ。後日ゆっくり考えよう。
今日はここまで
preの動作を調べたり、コードを書き換えたりするのにかなりの時間を使ってしまいました。今日作業できる時間がなくなってしまったので、経日ここまで。明日こそはお問い合わせページを作りたいです。