[Html/Rails]範囲指定について #HTML

初めに

なぜこの記事を書こうと思ったのか

フロントサイドの実装をするとき、クラス名を直前に決めているせいかcssで装飾をするときに名前を忘れてしまったクラス名は思い出すのにどの部分に当たるのか曖昧の場合があるので自分中でルールを決めてここにメモしたいと思ったから。

環境

・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

記事の目次

1)土台
2)状況に応じてのテンプレート
3)最後に

土台

・基本的にheaderとfooterは部分テンプレートとして使う頻度が多いのでスルー
・いままで作ったアプリはメイン部分を２−3分割で分けていた

application.html.erb

<!DOCTYPE html>
<html>

<head>
  <title>タイトル名</title>
  <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
  <%= stylesheet_link_tag 'application', media: 'all'%>
  <%= javascript_pack_tag 'application' %>
</head>

<body>
  <%= yield %>
</body>

</html>

index.html.erb(縦に２−３分割のとき)

<div class= 'main'>
  <div class= 'top-box'>
    <div class= 'top-container'>
    このサイトについて説明したいこと</div>
  </div>
  <div class= 'middle-box'>
    <div class= 'middle-container'> 
    どんなことができるのか</div>
  </div>
  <div class= 'bottom-box'>
    <div class= 'bottom-container'>
    このサイトのサービスや表</div>
  </div>
</div>

index.html.erb(横に２−３分割のとき)

<div class= 'main'>
  <div class= 'left-box'>
    <div class= 'left-container'>
    このサイトについて説明したいこと</div>
  </div>
  <div class= 'middle-box'>
    <div class= 'middle-container'> 
    どんなことができるのか</div>
  </div>
  <div class= 'right-box'>
    <div class= 'right-container'>
    このサイトのサービスや表</div>
  </div>
</div>

状況に応じたテンプレート

_header.html.erb(上の部分)

<header>
<div class='header-box'>
  <div class='left-box'>
    <div class='logo-box'>
      <%= link_to "ロゴの名前や画像" root_path %> <%#　ロゴのみの場合%>
      <a href "#" id "side-btn"><i class= "他のサイトからロゴを持ってくる"></i></a> <%#　サイドバーがいるとき%>
    <div>
  </div>
  <div class='right-box'>
    <div class='right-container'>
      <%= link_to 'リンク先の名前',oooo_path, class: "　リンクの名前（英語表記）" %>
      <%= link_to 'リンク先の名前',oooo_path, class: "　リンクの名前（英語表記）" %>
      <%= link_to 'リンク先の名前',oooo_path, class: "　リンクの名前（英語表記）" %>
    </div>
  </div>
</div>
</header>

_footer.html.erb(下の部分)

<footer>
<div class='footer-box'>
  <div class='left-box'>
    <div class='logo-box'>
      <%= link_to "ロゴの名前や画像" root_path %>
    <div>
  </div>
  <div class='right-box'>
    <div class='right-container'>
      <%= link_to 'リンク先の名前',oooo_path, class: "　リンクの名前（英語表記）" %>
      <%= link_to 'リンク先の名前',oooo_path, class: "　リンクの名前（英語表記）" %>
      <%= link_to 'リンク先の名前',oooo_path, class: "　リンクの名前（英語表記）" %>
    </div>
  </div>
</div>
</footer>

_sidebar.html.erb(左右部分)

<div id ="bars">

  <div class= "sidebar-container">

    <div class= "bar">
      <%= link_to "トップページ", oooo_path %>
    </div>

    <div class= "bar">
      <%= link_to "好きな遷移先", oooo_path %>
    </div>

    <div class= "bar">
      <%= link_to "好きな遷移先", oooo_path %>
    </div>

    <div class= "bar">
      <%= link_to "好きな遷移先", oooo_path %>
    </div>

    <div class= "bar">
      <%= link_to "ログアウト", destroy_user/session_path, method: :delete %>
    </div>

  </div>
</div>

最後に

今までは、これから書く機能を連想しそうなクラス名にしていたが、親子関係がわからなくなり無駄な時間が過ぎてしまったので、今日からは基本的にこのテンプレートを使ってアプリの実装する！みなさんはアプリケーションを作るとき自分の中でルールとかつくってるのかな？

ここまで読んでくださってありがとうございます！