Ruby
HTML
CSS
bootstrap
flag-icon

htmlのcodeをReviewしてもらったので、Memo

こんな感じの簡単なサイトをDemoで作ったので、Front EngeneerにReviewしてもらいました。

country_before.jpg

Brfore

test.html
<div class="container">
  <div class="row">
    <% data.country.countries.each do |f| %>
    <div class="col-4">
      <div class="jumbotron">
        <!-- <flag> -->
        <div class="col">
          <span class="flag-icon flag-icon-<%= f.code.downcase %> display-1 rounded-circle"></span>
        </div>
        <!-- </flag> -->
        <!-- <name> -->
        <div class="col">
          <h5><%= f.name %></h5>
        </div>
        <!-- </name> -->
        <!-- <description> -->
        <div class="col">
          <a href="http://ja.wikipedia.org/wiki/<%= f.name %>" target="_blank" class="badge badge-info">
            wikipedia
          </a>
        </div>
        <!-- </description> -->
      </div>
    </div>
    <% end %>
  </div>
</div>

Review

  • まず、円が楕円じゃない??

    確かに。。。
    class = "flag-icon-squared rounded-circle " として比率を合わせてから円に。

  • class="col-4" これいる?

    初心者発想で、(国旗,国名,wikipediaへのLink)を縦に並べるために使用してだが、divだけで良かったみたい。

  • jumbotronがループで繰り返されるになんか、おおげさ感!!

    boostrapでカッコよさそうなのを選んだが、意味合い的になんか内容はないけどカッコよく見したい時とかに使うっぽい。ということで、cssで。

  • 国旗と文字のバランスおかしくない?

    text-align: center; で。

と他にもアドバイスはもらったが、下記のように書き直した。すごく、勉強になりました。

After

test.html
<div class="container">
  <div class="row">
    <% data.country.countries.each_with_index do |f| %>
    <div class="col-4">
      <div class="test_box">
        <!-- <flag> -->
        <div>
          <span class="flag-icon flag-icon-<%= f.code.downcase %> display-1 flag-icon-squared rounded-circle"></span>
        </div>
        <!-- </flag> -->
        <!-- <name> -->
        <div>
          <strong><%= f.name %></strong>
        </div>
        <!-- </name> -->
        <!-- <description> -->
        <div>
          <a href="http://ja.wikipedia.org/wiki/<%= f.name %>" target="_blank" class="badge badge-info">wikipedia</a>
        </div>
        <!-- </description> -->
      </div>
    </div>
  <% end %>
  </div>
</div>
site.css
.masanos_box {
  text-align: center;
  background-color: #ddd;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #999;
}

review_2.jpg

一歩前進感。