「ホームページビルダー17」にて、ホームページを作成しています。
ワードプレス側の「hpbダッシュボード」にて、ニュースなど作成、
作成後は、それら記事が、ホームページのTOPページ、半分下のエリアの「新着情報」に、
日付とタイトルが記載されるようにしています。
1つ目(最も最新の記事)の日付・ニュースタイトルは、左寄りに記載されますが、
2つ目以降の日付・ニュースタイトルは、中央になります。
理想としましては、掲載された、全ての日付・ニュースタイトルが左寄りに、
頭がそろうようにしたいのですが、プラグインなどの問題なのでしょうか?
現状を上手く言葉に出来ず申し訳ありません。
もし、お分かりの方がいらっしゃいましたら、回答をいただけたらと思います。
No.2ベストアンサー
- 回答日時:
恐らく、これに近いソースになっているのだと予想します。
【html】
<dl class="news">
<dt>2013年10月30日</dt>
<dd>メディア掲載のお知らせ</dd>
<dt>2013年10月29日</dt>
<dd>ホームページを立ち上げました</dd>
</dl>
【css】
.news dt{
float:left;
width:100px;
}
.news dd{
padding:0 0 10px 100px;
margin-bottom:10px;
border-bottom:solid 1px #CCC;
}
2列目は中央に寄っているのではなく、上の段の日付部分が折り返されているのでdtの縦がddよりも長くなり、floatの自然な機能として上のdtの右側に回り込んでいるだけです。
これはdtにclearを入れる事によって簡単に解決します。
また、ddに入れている下線(borderでも背景画像でも同じ)はあくまでddの範囲の一番下に表示されますので、
この記述方法だと、dtの方がddよりも縦が長くなると、日付の文字と下線がかぶってしまいます。
これに関しては、上記のclearだけでは解決しません。
dtの折り返しを防ぐには単純に幅を広げればいいかと言うとそうではなく、閲覧者の環境によって文字サイズや文字幅は様々ですので、見ている方によっては崩れます。
どの環境でも崩れず作るには、dtのwidthとddのpadding-leftの数値をpxではなくemで指定するとよいです。
em文字サイズによって変わる相対的な指定ですので、文字サイズが大きくなるとemの幅も大きくなり、環境によって2行になるような事はありません。
返事が遅くなりまして、
申し訳ありませんでした。
ホームページビルダーのサポートセンターと、こちらの両方で、
解決を模索しておりました。
結果的には、サポートセンターの方での
解決が出来ました。
今回のtkmojoのアドバイスは、
今後に活かされそうです。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- 文学・小説 四字熟語をもじったタイトルの小説またはエッセイ 2 2023/02/26 15:08
- メディア・マスコミ ネット記事と新聞記事・テレビのニュースはどちらの方が正確性・信憑性があると思いますか? 7 2022/06/06 18:20
- ホームページ作成・プログラミング ホームページ月額更新管理費用 4 2023/04/22 12:38
- リフォーム・リノベーション 業者のホームページに施工例が掲載される場合 2 2022/03/26 09:45
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- クーポン・割引券 バスの定期券について 3 2022/04/13 22:02
- 宗教学 聖教新聞「狙われる高齢者 特殊詐欺から身を守ろう」……こんな記事を載せて良いのかぁ、創価学会 10 2022/12/08 11:37
- Excel(エクセル) Excelでのデータ管理 6 2022/12/24 09:33
- Visual Basic(VBA) 【前回の続きです、ご教示ください】VBAの記述方法がわかりません。 2 2022/08/16 16:44
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページビルダー 空白の...
-
CSSのtransform: translate(-50...
-
HTMLフォームのSELECTの幅を一...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
CSSでh1とその下の文字との行間...
-
なぜ左に寄っているの?
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
-
エクセルVBAで列幅設定
-
道路幅を調べたいのですが
-
ホームページビルダーでセルの...
-
HTMLでテーブルを縦に並べたい!
-
PDFへてのテキストボックスにて...
-
tableで横スクロールバーが・・
-
<tbody>は何のためにあるんでし...
-
markdownでテーブルの罫線は、...
-
以下のHTMLをスタイルシートで...
-
Expression Web 3 文字カラーの...
-
スタイルシートで<table>の内側...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報