メッセージの編集
お名前
本文
▼ミスについて ・閉じタグの記述漏れ ・閉じ順の不備 とりあえず頻出として、上記二点が気になりました。 個別の指摘は『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>
編集パス
編集
記事削除
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -