タグ・デザイン掲示板

[

複数の画像と文字を横並びについて。
by みなみ

2019-12-30 16:19
自力でなんとか画像と文字を横並びにする事に成功したのですが、タグに間違いがないか自信がありません。

お詳しい方、どうかチェックいただけると幸いです。
どうぞ宜しくお願い致します。

<table border="0" cellpadding="0" cellspacing="0"><tr><td><p style="font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></td><td><div style="background-color:#FFFFFF;width:300px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:80px">
<a href="★★" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;" ><img src="★▼" border="0" style="margin:2px" alt="" title=""></a></td>
<td style="vertical-align:top;width:88px;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word">
<a href="★★" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;" >タイトル
タイトル</a>
<td style="width:80px">
<a href="★★" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;" ><img src="★▼" border="0" style="margin:2px" alt="" title=""></a></td>
<td style="vertical-align:top;width:88px;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word">
<a href="★★" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;" >タイトル
タイトル</a>
</p></td><tr></table></div></td></tr></table>

pc
[編集]

by 774

2019-12-31 01:41
▼ミスについて
・閉じタグの記述漏れ
・閉じ順の不備
とりあえず頻出として、上記二点が気になりました。
個別の指摘は『HTML5 採点』あたりで検索すると見つかるwebツールを用いてみてください。ナノの仕様上満点は取れないのと、冗長部分は指摘されませんが、ある程度のミスなどは防げると思います。

▽編集の容易化

・HTMLに不慣れなようでしたら、ホムペ設定にて『改行を<br>に変換：しない』への変更を強くお勧めします。
ページレイアウトに関わらず改行できるので、編集ページが見やすくなる→ミスしにくくなります。
機能の本文等は個別に『変換する』設定にできるので、そうそう不便もないと思いますよ。

・同一項を複数の要素で囲う際は、特に理由が無ければ一つにまとめた方が楽で可読性も高くなります。
例：△<table><tr><td>内容</td></tr></table>
　　○<div>内容</div>

・同一スタイルを複数に記述するならHEADも使用した方が何かと楽です。
例：△<div style="aa:A;bb:B;cc:C;">あ</div>
　　　<div style="aa:A;bb:B;cc:C;">い</div>
　　○<div class="style1">あ</div>
　　　<div class="style1">い</div>

▼修正案
「自分がやるなら」程度ですがご参考までに。

・「改行を<br>に変換：しない」設定前提の記述です。
・大元のミス等の関係でブラウザ毎の修正や解釈により表示がまちまちだったため、とりあえずchrome閲覧時準拠に作成しています。

・幅や余白等はHEAD内CSSにて調節してください。
└指定詳細：『[:前の単語] css』で検索

・幅や余白調整時用にデフォで構成要素に枠線を付けています。本使用時はHEAD内から該当箇所を削除してください。

・『rel="nofollow noopener noreferrer"』も下記条件等、場合により不要です。
├『nofollow』：アクセス禁止設定にて検索除けにチェック or head内に検索除け記述有
├『noopener』：リンク先が自分のサイト
├『noreferrer』：headに『<meta name="referrer" content="no-referrer">』記述有
└詳細：『rel 属性 html』で検索

▽該当レイアウト箇所

<ul class="list">
  <li>
    <div class="img">
      <a href="" target="_blank" rel="nofollow noopener noreferrer">
        #mtr数#
      </a>
    </div>
    <div class="text">
      <a href="" target="_blank" rel="nofollow noopener noreferrer">
        タイトルタイトル
      </a>
    </div>
  </li>
  <li>
    <div class="img">
      <a href="" target="_blank" rel="nofollow noopener noreferrer">
        #mtr数#
      </a>
    </div>
    <div class="text">
      <a href="" target="_blank" rel="nofollow noopener noreferrer">
        タイトルタイトル
      </a>
    </div>
  </li>
</ul>

▽HEAD内（以下を追加）

<style type="text/css">

/* == list部分 == */

/* - 大枠 - */
.list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    max-width: 300px;/* 幅 */
    margin: 0 10px;/* 外余白 */
    padding: 10px;/* 内余白 */
    background-color: #ffffff;/* 背景色 */
    word-wrap: break-word;/* 単語内の文字折り返し処理 */
    break-word: break-all;/* 同上 */
    font-size: 12px;/* 字サイズ */
    line-height: 1.4em;/* 行間 */
}

/* - 画像+テキストリンクのセット - */
.list > li {
    box-sizing: border-box;
    display: flex;
    width: 50%;
    min-width: 150px;/* 最小幅 */
}

/* - 画像部分 - */
.list > li > .img {
    flex-grow: 1;
    width: 66px;/* 幅 */
    min-width: 0;
    align-self: center;/* 縦配置 */
    text-align: center;/* 字寄せ */
}
.img img {
    max-width: 100%;
    height: auto;
    border: none;
    outline: none;
    vertical-align: bottom;
}

/* - テキスト部分 - */
.list > li > .text {
    flex-grow: 10;
    min-width: 0;
    padding: 2px 6px;/* 内余白 */
}

/* ===
* 以下、幅や余白調節時視認用
* 本使用時は削除してください。
* === */

.list,.list * {
    outline-offset: -1px;
}
.list {
    outline: solid 1px #f00;
}
.list > li {
    outline: dashed 1px #09f;
}
.list > li > .img {
    outline: solid 1px #ff0;
}
.list > li > .text {
    outline: solid 1px #0f0;
}

</style>

pc
[編集]

by みなみ

2020-01-04 22:31
774さんせっかく教えていただいたのに遅くなりすみません！有り難うございます！
直ぐに改行無しで教えていただいたのでやり直しました！
分かりやすく色わけしていただいたお陰でなんとか出来ました。

ただこれを更にcenter寄せにしようと検索してこれかなと思うのを一時は見つけheadに入れたのですが、上手くいかず、もう一度同じページを探しましたが、見失い、せっかく入れたのも消してしまいまして、また躓いております。汗

あと採点チェックをしたら、body部分が真っ赤になりました。

なんというか、本当に教えていただき有り難うございます。

pc
[編集]

by 774

2020-01-05 05:34
デザイン面ではどうにかなりそうで良かったです。

▼中央寄せ

『大枠』の外余白の値を『0 10px』→『0 auto』に変更
→詳細：『margin 値 css』『ブロック要素中央寄せ css』

▼bodyが真赤

▽『<body省略>』のエラーが多い場合
以下2点の編集を

①[HEAD・HTML詳細]>[BODYタグ]入力欄を以下に

<body>

②head内<style省略></style>内に、以下を追加

/* == 色設定 == */
body {
background-color: #ffffff; /* 背景 */
           color: #777777;}/* 文字 */
a:link   { color: #00cccc;}/* リンク */
a:visited{ color: #0088ff;}/* ├訪問済 */
a:hover  { color: #666666;}/* ├選択 */
a:active { color: #ff0088;}/* └クリック */

→解説
①部分を空欄にすると、ナノ機能の『色設定』反映の為『<body bgcolor="背景設定色" text="文字設定色" ....>』の様にbody要素に属性付きで自動記述されます。
しかし、html5では[bgcolor,text,alink]等、見た目に関わる属性全て非推奨です。(「そういうのはcssでやってね」という方針に変わりました)

▽その他の場合

何種類かエラー出そうな事は思いつくのですが全部書くと量が多くなるので「自力で修正」が無理なら『ソース表示(方法要検索)』をしてユーザーidや固有名詞のみ伏せて提示してください。

pc
[編集]

[