質問編集履歴

5 一部変更

keisuke.F

keisuke.F score 16

2020/07/15 15:37  投稿

マウスオーバーするとliタグが表示されるようにしたい
お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
そこでposition: relative;を付与するもどこにおいても反応しないです。(エラーが出てしまったりします)  
spanタグをtd内に記述していることが原因でしょうか。
しかし、td外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。
main.html.haml
```Ruby
.main
 .table-responsive
   %table.chart
     %thead
       %tr
         %th アーティスト
         %th タイトル
         %th レベル
     %tbody
       - @songs.each do |song|
         %tr
           %td
             = song.artist
           %td
             = song.title
           %td
             = song.level_i18n
           %td
             %span=image_tag 'arrow_top.png'
             %ul
               %li= link_to '編集', "/songs/#{song.id}/edit"
               %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }
```
main.scss
```Ruby
.main {
 height: calc(100vh - 100px - 30px);
 background-color:  #808080;
 overflow: auto;
 .table-responsive {
   color: #fff;
   padding: 50px;
   font-size: 20px;
   .chart {
     width: 60%;
     height: 100vh;
     margin: 0 auto;
     thead {
       border-bottom: 2px dashed #87CEFA;
     }
     tbody {
       tr {
         border-bottom: 2px dashed #87CEFA;
         line-height: 5em
         span {
         }
         :hover ul{
           display: block;
         }
         ul {
           display: none;
           li {
             margin: 1em auto; 
             background-color: #f7f7f7;
             border-left: 1px solid #d8d8d8;
             border-right: 1px solid #d8d8d8;
             box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
             border-radius: 4px;
             a {
               text-decoration: none;
               color: #666666;
             }
           }
         }
       }
     }
   }
 }
 .registration {
   .form-group {
     margin: 0 auto;
     width: 800px;
     display: flex;
     flex-direction: column;
     padding-top: 80px;
     .form-title {
       font-size: 20px;
       margin-top: 10px;
     }
     .form-control {
       margin-top: 5px;
     }
     .btn-primary {
       margin-top: 50px;
     }
   }
 }
}
```
よろしくお願い致します。
  • Ruby

    14985 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    15898 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Sass

    726 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Haml

    315 questions

    Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

4 一部変更

keisuke.F

keisuke.F score 16

2020/07/15 15:34  投稿

マウスオーバーするとliタグが表示されるようにしたい
お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
そこでposition: relative;を付与するもどこにおいても反応しないです。(エラーが出てしまったりします)
spanタグをtd内に記述していることが原因でしょうか。
しかし、td外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。
main.html.haml
```Ruby
.main
 .table-responsive
   %table.chart
     %thead
       %tr
         %th アーティスト
         %th タイトル
         %th レベル
     %tbody
       - @songs.each do |song|
         %tr
           %td
             = song.artist
           %td
             = song.title
           %td
             = song.level_i18n
           %td
             %span=image_tag 'arrow_top.png'
             %ul
               %li= link_to '編集', "/songs/#{song.id}/edit"
               %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }
```
main.scss
```Ruby
.main {
 height: calc(100vh - 100px - 30px);
 background-color:  #808080;
 overflow: auto;
 .table-responsive {
   color: #fff;
   padding: 50px;
   font-size: 20px;
   .chart {
     width: 60%;
     height: 100vh;
     margin: 0 auto;
     thead {
       border-bottom: 2px dashed #87CEFA;
     }
     tbody {
       position: relative;  
       tr {
         border-bottom: 2px dashed #87CEFA;
         line-height: 5em
         span {
           position: absolute;  
         }
         :hover ul{
           display: block;
         }
         ul {
           display: none;
           li {
             text-decoration: none;
             margin: 2em auto; 
             color: #666666;
             margin: 1em auto; 
             background-color: #f7f7f7;
             border: 2px solid #ccc;
             border-left: 1px solid #d8d8d8;
             border-right: 1px solid #d8d8d8;
             box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
             border-radius: 4px;
             a {  
               text-decoration: none;  
               color: #666666;  
             }  
           }
         }
       }
     }
   }
 }
 .registration {
   .form-group {
     margin: 0 auto;
     width: 800px;
     display: flex;
     flex-direction: column;
     padding-top: 80px;
     .form-title {
       font-size: 20px;
       margin-top: 10px;
     }
     .form-control {
       margin-top: 5px;
     }
     .btn-primary {
       margin-top: 50px;
     }
   }
 
 }
}
```
よろしくお願い致します。
  • Ruby

    14985 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    15898 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Sass

    726 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Haml

    315 questions

    Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

3 一部変更

keisuke.F

keisuke.F score 16

2020/07/15 15:22  投稿

マウスオーバーするとliタグが表示されるようにしたい
お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
そこでposition: relative;を付与するもどこにおいても反応しないです。(エラーが出てしまったりします)
しかし、table外にspanを書くとエラーが出ます。
しかし、td外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。
main.html.haml
```Ruby
.main
 .table-responsive
   %table.chart
     %thead
       %tr
         %th アーティスト
         %th タイトル
         %th レベル
     %tbody
       - @songs.each do |song|
         %tr
           %td
             = song.artist
           %td
             = song.title
           %td
             = song.level_i18n
           %td
             %span=image_tag 'arrow_top.png'
             %ul
               %li= link_to '編集', "/songs/#{song.id}/edit"
               %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }
```
main.scss
```Ruby
.main {
 height: calc(100vh - 100px - 30px);
 background-color:  #808080;
 overflow: auto;
 .table-responsive {
   color: #fff;
   padding: 50px;
   font-size: 20px;
   .chart {
     width: 60%;
     height: 100vh;
     margin: 0 auto;
     thead {
       border-bottom: 2px dashed #87CEFA;
     }
     tbody {
       position: relative;
       tr {
         border-bottom: 2px dashed #87CEFA;
         line-height: 5em
         span {
           position: absolute;
         }
         :hover ul{
           display: block;
         }
         ul {
           display: none;
           li {
             text-decoration: none;
             margin: 2em auto; 
             color: #666666;
             background-color: #f7f7f7;
             border: 2px solid #ccc;
             border-radius: 4px;
           }
         }
       }
     }
   }
 }
 .registration {
   .form-group {
     margin: 0 auto;
     width: 800px;
     display: flex;
     flex-direction: column;
     padding-top: 80px;
     .form-title {
       font-size: 20px;
       margin-top: 10px;
     }
     .form-control {
       margin-top: 5px;
     }
     .btn-primary {
       margin-top: 50px;
     }
   }
 }
}
```
よろしくお願い致します。
  • Ruby

    14985 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    15898 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Sass

    726 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Haml

    315 questions

    Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

2 一部変更

keisuke.F

keisuke.F score 16

2020/07/15 15:21  投稿

マウスオーバーするとliタグが表示されるようにしたい
お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
そこでposition: relative;を付与するもどこにおいても反応しないです。(エラーが出てしまったりします)  
spanとtd内に記述していることが原因でしょうか。
しかし、table外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。
main.html.haml
```Ruby
.main
 .table-responsive
   %table.chart
     %thead
       %tr
         %th アーティスト
         %th タイトル
         %th レベル
     %tbody
       - @songs.each do |song|
         %tr
           %td
             = song.artist
           %td
             = song.title
           %td
             = song.level_i18n
           %td
             %span=image_tag 'arrow_top.png'
             %ul
               %li= link_to '編集', "/songs/#{song.id}/edit"
               %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }
```
main.scss
```Ruby
.main {
 height: calc(100vh - 100px - 30px);
 background-color:  #808080;
 overflow: auto;
 .table-responsive {
   color: #fff;
   padding: 50px;
   font-size: 20px;
   .chart {
     width: 60%;
     height: 100vh;
     margin: 0 auto;
     thead {
       border-bottom: 2px dashed #87CEFA;
     }
     tbody {
       position: relative;
       tr {
         border-bottom: 2px dashed #87CEFA;
         line-height: 5em
         span {
           position: absolute;
         }
         :hover ul{
           display: block;
         }
         ul {
           display: none;
           li {
             text-decoration: none;
             margin: 2em auto; 
             color: #666666;
             background-color: #f7f7f7;
             border: 2px solid #ccc;
             border-radius: 4px;
           }
         }
       }
     }
   }
 }
 .registration {
   .form-group {
     margin: 0 auto;
     width: 800px;
     display: flex;
     flex-direction: column;
     padding-top: 80px;
     .form-title {
       font-size: 20px;
       margin-top: 10px;
     }
     .form-control {
       margin-top: 5px;
     }
     .btn-primary {
       margin-top: 50px;
     }
   }
 }
}
```
よろしくお願い致します。
  • Ruby

    14985 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    15898 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Sass

    726 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Haml

    315 questions

    Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

1 内容の一部変更

keisuke.F

keisuke.F score 16

2020/07/15 15:20  投稿

マウスオーバーするとliタグが表示されるようにしたい
お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
アイコンをホバーすると”編集”、”削除”と表示されるようにしたいのですが苦戦中です。
調べて実装するも、状況は変わらず検討が付かなくなりました。
マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
spanとtd内に記述していることが原因でしょうか。
しかし、table外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。
main.html.haml
```Ruby
.main
 .table-responsive
   %table.chart
     %thead
       %tr
         %th アーティスト
         %th タイトル
         %th レベル
     %tbody
       - @songs.each do |song|
         %tr
           %td
             = song.artist
           %td
             = song.title
           %td
             = song.level_i18n
           %td
             %span=image_tag 'arrow_top.png'
             %ul
               %li= link_to '編集', "/songs/#{song.id}/edit"
               %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }
```
main.scss
```Ruby
.main {
 height: calc(100vh - 100px - 30px);
 background-color:  #808080;
 overflow: auto;
 .table-responsive {
   color: #fff;
   padding: 50px;
   font-size: 20px;
   .chart {
     width: 60%;
     height: 100vh;  
     margin: 0 auto;
     thead {
       border-bottom: 2px dashed #87CEFA;
     }
     tbody {
       position: relative;  
       tr {
         border-bottom: 2px dashed #87CEFA;
         line-height: 5em
         span {
           position: absolute;  
         }  
         :hover ul{  
           display: block;  
         }
         ul {
           display: none;  
           li {
             text-decoration: none;
             margin: 2em auto; 
             color: #666666;
             background-color: #f7f7f7;
             border: 2px solid #ccc;
             border-radius: 4px;
           }
         }
       }
     }
   }
 }
 .registration {
   .form-group {
     margin: 0 auto;
     width: 800px;
     display: flex;
     flex-direction: column;
     padding-top: 80px;
     .form-title {
       font-size: 20px;
       margin-top: 10px;
     }
     .form-control {
       margin-top: 5px;
     }
     .btn-primary {
       margin-top: 50px;
     }
   }
 
 }
}
```
よろしくお願い致します。
  • Ruby

    14985 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    15898 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Sass

    726 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Haml

    315 questions

    Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る