質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • HTML

    9000questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5808questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

文字数によってcssがズレてしまう

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 247

tomoharu

score 26

表題の通りですが、投稿される文字数によってcssの表示がズレてしまいます。。。。

イメージ説明

一番左は半角のfの並び、右二枚は全角のwなのですが、文字が半角か全角かその数によって星の位置がズレています。

何か良い方法はございますでしょうか。

すみません。コードを失念しておりましたので、追記いたします。

画像右の箱一個ぶんのコードです。

<div class="toprankingbox">
 <% if !@comic_ranking.first.nil? %>

  <%= link_to (image_tag @comic_ranking.first.front_cover.to_s),user_comic_path(id: @comic_ranking.first.id, user_id: current_user.id)%>
   <div class="gold_crown_index" >
   <%= image_tag "gold_crown.png"%>
   </div>
   <div class ="first_intro">
    <%= image_tag "likedstar.png"%>
 <%= @comic_ranking.first.likes.count%>
   </div>
   <div class ="character">
 <%= image_tag "character.png" %>
 <%= @comic_ranking.first.author%>
   </div>
 <% end %>
</div>
.toprankingbox{
  position:relative;
  text-align: center;
  width:32%;
  display: inline-block;
  margin: 5px;
  height:50%;

.gold_crown_index {
  display:inline;
  position:relative;
  /*top:30%;*/
}

.gold_crown_index img{
display:inline;
  bottom:84%;
  left:-15%;
  position:relative ;
  width:20%;
}

.first_intro {
display:inline;
position:relative;
top:2%;
left:-20%;
width:40%;
height:10%;
font-size:110%;
}

.first_intro img {
position:relative;
display:inline;
height:6%;
width:9%;
left:-5%;
bottom:1%;
}

.character {
  display:inline;
  position:relative;
  left:1%;
  top:1%;
}

.character img {
  display:inline;
  position:relative;
  top:10%;
  width:10%;
  left:-3%;
  margin-top:-29%;
}

ソースを表示を行うと下のようになります。

<!DOCTYPE html>
<html>
<body>
 <!DOCTYPE html>

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<header>
  <nav class="nav navbar navbar-default">
    <div class="navbar-left">
     <span class="sr-only">メニュー</span>
     <a href="/"><img src="/assets/comilog-d9fa57ddd3291e7a3494cb41526bdc41c441a5483e90aab70ad202f556bcaf6b.png" alt="Comilog" /></a>
    </div>
    <div class="searchbox">

    <form action="/comics/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
    <input type="text" name="search" id="search" placeholder="作品名・サークル名など" style="position:absolute;left:50%;width:230px;height:50px;border:solid black;border-radius:10px;" />
     <div class="glass">
    <input alt="Glass" type="image" src="/assets/glass-3115adcf693de65345921dc56cbbd01d2988b8a7408fed2e6a779dbfa886b90a.png" />
     </div>

</form></div>


  <div class="nav navbar-nav navbar-right">
      <!-- さんログイン中  %> -->
      <a rel="nofollow" data-method="delete" href="/users/sign_out">
       <img style="background-color:#fd6458;" src="/assets/logout-aa0e2397a0cb1b694a197104c310f311e5d1a39fd0efe904610d32280bef732a.png" alt="Logout" />
</a>    </div>
    </div>
  </nav>
</header>
<nav class="navbar navbar-default navbar-fixed-bottom " role="navigation">
 <div class="row">
  <div class="btn-group btn-group-justified">
    <a href="/" class="btn" >ホーム</a>
    <a href="/user/:id" class="btn">お気に入り</a>
    <a href="/user/:id/comics/rank" class="btn">ランキング</a>
    <a href="/user/:id/comics/search" class="btn">検索</a>
    <a href="/user/:id/comics/new" class="btn">出品</a>
    <a href="/user/:id/comics/manage" class="btn">マイページ</a>
 </div>
 </div>
</nav>
    <form action="/comics/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
</form>
<div class="topnew">ランキング</div>

<div class="toprankingbox">

  <a href="/user/1/comics/52"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180113154450.jpg" alt="20180113154450" /></a>
   <div class="gold_crown_index" >
   <img src="/assets/gold_crown-7247ae59ca76a5f59d1127d65103f0b20ecced6c96ea69c69470973831bee15b.png" alt="Gold crown" />
   </div>
   <div class ="first_intro">
    <img src="/assets/likedstar-94c981f44151b4411d8814d655cea17122e6fdf6894ceccf9ce6765e48604e7b.png" alt="Likedstar" />
 1
   </div>
   <div class ="character">
 <img src="/assets/character-dfe3ed6c8b64585ad539c3a4bf2ddbcc0d12cf1a421f3317b26003616f9e2926.png" alt="Character" />
 www
   </div>
</div>


</div>



 <div class="toprankingbox">



  <a href="/user/1/comics/53"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180113154513.jpg" alt="20180113154513" /></a>
  <div class="silver_crown_index" >
   <img src="/assets/silver_crown-30cb2d0b17e4fe098925460243d9d9e04ce1e6ac4b19ac15f6bacfda2c1974e2.png" alt="Silver crown" />
   </div>
   <div class ="first_intro">
    <img src="/assets/likedstar-94c981f44151b4411d8814d655cea17122e6fdf6894ceccf9ce6765e48604e7b.png" alt="Likedstar" />
 1
   </div>
     <div class ="character">
 <img src="/assets/character-dfe3ed6c8b64585ad539c3a4bf2ddbcc0d12cf1a421f3317b26003616f9e2926.png" alt="Character" />
 www
  </div>
 </div>

</div>

 <div class="toprankingbox">



  <a href="/user/1/comics/54"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180116214151.jpg" alt="20180116214151" /></a>
  <div class="copper_crown_index" >
   <img src="/assets/copper_crown-2e980e0da7dc1a43a4d4797d1594dbf612aa59f027d41b5157c37d62f1c3b0c4.png" alt="Copper crown" />
   </div>
   <div class ="first_intro">
    <img src="/assets/likedstar-94c981f44151b4411d8814d655cea17122e6fdf6894ceccf9ce6765e48604e7b.png" alt="Likedstar" />
 1
  </div>
   <div class ="character">
 <img src="/assets/character-dfe3ed6c8b64585ad539c3a4bf2ddbcc0d12cf1a421f3317b26003616f9e2926.png" alt="Character" />
 qqqqqqqq
  </div>
   </div>
 </div>
</div>




  <div class="topnew">新着作品</div>
<table id="comic_index">
  <tbody class="page">
    <span style="display:inline-block;background-color:white;width:100%;">

 <div class="topnewbox"><a href="/user/1/comics/56"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180126230835.jpg" alt="20180126230835" /></a>








</div>
 <div class="topnewbox"><a href="/user/1/comics/55"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180126230633.jpg" alt="20180126230633" /></a>








</div>
 <div class="topnewbox"><a href="/user/1/comics/54"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180116214151.jpg" alt="20180116214151" /></a>








</div>
 <div class="topnewbox"><a href="/user/1/comics/53"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180113154513.jpg" alt="20180113154513" /></a>








</div>
 <div class="topnewbox"><a href="/user/1/comics/52"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180113154450.jpg" alt="20180113154450" /></a>








</div>
 <div class="topnewbox"><a href="/user/1/comics/51"><img src="https://comilog-object.s3.amazonaws.com/uploads/20180113154432.jpg" alt="20180113154432" /></a>








</div>



</tbody>

    </span>

</table>
  <nav class="pagination">


        <span class="page current">
  1
</span>

        <span class="page">
  <a rel="next" href="/?page=2">2</a>
</span>

        <span class="page">
  <a href="/?page=3">3</a>
</span>

    <span class="next">
  <a rel="next" href="/?page=2"></a>
</span>

    <span class="last">
  <a href="/?page=3">最後</a>
</span>

  </nav>
</body>
</html>

何卒宜しくお願い申し上げます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2018/01/27 15:04

    とりあえず、CSSのカッコ閉じ忘れがあります。あと、問題を再現できるコードをご提示ください。たとえば <%= @comic_ranking.first.author%> はHTMLが出力されるのかテキストなのか、これだけではわからないのでは?

    キャンセル

  • defghi1977

    2018/01/27 15:58

    HTMLを生成しているスクリプト(ruby?)じゃなくて, スクリプトを実行して得られたHTMLを提示して下さい.(webブラウザにて「ソースを表示」し, そこからHTMLをコピペ等)

    キャンセル

  • tomoharu

    2018/01/28 16:38

    承知致しました。付け足します。さしあたりソース表示はすぐできるので、対応いたします。

    キャンセル

回答 2

checkベストアンサー

+3

スタイル付け云々の前に出力されたHTMLコードの文書としての整合性が破綻しています. このまま一部のスタイルを修正したとしても, 次回修正時にほぼ確実に別の問題が発生します.

まずは下記について問題がなくなるようにサーバースクリプトを修正して下さい.(詳細なスタイル付け・クラス設定はその後)

  • 文書先頭の<!DOCTYPE html>は唯一とする.
  • head要素を用意し, その中にmeta,link要素等を配置する.
  • 開始タグと終了タグの対応を付ける(<div></div><span></span>等)
  • tbody要素配下にspan要素を記述することは出来ないので, 正しい要素に変更する.

NOTE:
FireFoxでは上記エラー群をソース表示時にエラーとして赤色表示しますので, これらが全て解決するのを見届けて下さい.

NOTE:
直接的にはdisplay:inlineの代わりにdisplay:inline-blockを使えば何とかなりそうでしたが, 上記問題をはらんだままスタイルのみを修正することは出来ません.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/28 21:21

    承知しました。ありがとうございます。やってみます

    キャンセル

0

間違っていました。<span>タグは、inline要素なのでwidthの幅は指定できません。
もう少し勉強してから回答します。
大変申し訳ありませんでした…

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/27 13:35

    すみません。追記しました。
    spanつけてみたのですが、うまくいきませんでした。
    何卒宜しくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9000questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5808questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。