Q&A
何度も指摘してますがなかなか対応されないので困っています。
コードはテキストで、マークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
classタグでクラス化しても、デベロッパーで確認するとできていない。
HTMLタグとbodyタグがページ上部のスペースにあるとデベロッパーに書かれていた。
基本書き方が間違えていると思うのですが、どこが間違えているのかわかりません。
エディタ上でのコード
<!DOCTYPE html> <html> <head> <title> ポケモン GO 位置共有サイト</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %> <meta name="description" content="ポケモンgo効率的にポケモンを探しませんか？"> </head> <body> <div class="home-main"> <div class="home-wrapper"> <header> <img class ="header-logo" src="header-logo.png" alt="ヘッダーの画像"> <div class="header-list"> </div> </header> <div class="header-contents"> <div class = "main-top"> <img class="pokemon-top" src="top_picture.jpg" alt="ポケモンのトップ画像です"> <div class = "top-message-box"> <h1>ポケモン探しは<br>ポケ位置</h1> </div> <div class="search-box"> <h2>ポケモン・場所から探す</h2> <input type= "text" placeholder="ポケモン名（例：ピカチュウ）" name="left-search-box" class="search-box-content left-box-content"> <input type= "text" placeholder="場所名（例：静岡県）" name="right-search-box" class="search-box-content ringht-box-contet"> <input type = "submit" value="検索" class= "search-box-content submit-box"> </div> </div> </div> </div> </div> </body> </html>
ブラウザ上でのソースコード
<!DOCTYPE html> <html> <head> <title> Pokemon GO 位置共有サイト</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="M/w8KLIsrCl7YwN+fXNnHCvxFbx3O4a/jVG7EzfaaDTvaQxFAJOZ1E2HaeKzYshyAqErlbH3ciE4/Y0hMYKsjg==" /> <link rel="stylesheet" media="all" href="/assets/application.debug-2581a648196c496cf9e0c65f4598c73e4de2f2c4dd2b21af14a26a6d8d2cd612.css" data-turbolinks-track="reload" /> <script src="/packs/js/application-9afcbb5693aa87623e69.js" data-turbolinks-track="reload"></script> <meta name="description" content="ポケモンgo効率的にポケモンを探しませんか？"> </head> <body> <!DOCTYPE html> <html> <head> <title> ポケモン GO 位置共有サイト</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="fpG+za9y2G2csR4NiRnAwkxNwCi8ElzRBS7DMGXdp4GiBI6gHc3tkKpVdJFHCG+sZR3+AXreqE+wgvUCY4VjOw==" /> <link rel="stylesheet" media="all" href="/assets/home.debug-b80a01e8985c6f7dd79fd39bd247c872e01d7947f1d8050ab6313de9eab74154.css" data-turbolinks-track="reload" /> <meta name="description" content="ポケモンgo効率的にポケモンを探しませんか？"> </head> <body> <div class="home-main"> <div class="home-wrapper"> <header> <img class ="header-logo" src="header-logo.png" alt="ヘッダーの画像"> <div class="header-list"> </div> </header> <div class="header-contents"> <div class = "main-top"> <img class="pokemon-top" src="top_picture.jpg" alt="ポケモンのトップ画像です"> <div class = "top-message-box"> <h1>ポケモン探しは<br>「ポケ位置」</h1> </div> <div class="search-box"> <h2>エリア・ポケモン名から探す</h2> <input type= "text" placeholder="エリア（例：静岡県）" name="left-search-box" class="search-box-content left-box-content"> <input type= "text" placeholder="ポケモン名（例：ピカチュウ）" name="right-search-box" class="search-box-content ringht-box-contet"> <input type = "submit" value="検索" class= "search-box-content submit-box"> </div> </div> </div> </div> <div class="top-wrapper"> <div class="top-main"> <div class="search-area"> <h2 class="search-area_title">エリアから探す</h2> <div class=search-area_area"> <div class="selected-area"> <div class="selected-area_name"> <span>静岡県</span> </div> <div class="selected-area_store-count"> <span>23件</span> </div> </div> </div> </div> </div> </div> </body> </html> </body> </html>
わかる方、ご教授よろしくお願い致します。
何度も申し訳ありません。
修正修正しましたので、確認の方をよろしくお願い致します。
ただ、この質問内容だと何をしたいのか何を確認したいのか分かりません。
どうなれば解決なのか見えないとアドバイスも得られにくいかと思います。
それに、HTMタグだけでこのコードでは無理がありますね。Ruby on Rails関係ないレイアウト上の問題だけなら「ブラウザに表示されたコンパイル後のHTML」を提示してください。
railsの方は特にまだ触れていないので関係ないと思われます。
「コンパイル後のHTML」という意味がよくわかりません。
とりあえず、文字だけでは伝わりにくいと思い、写真を追加致しました。
不明な点がありましたら、コメントの方よろしくお願い致します。
書いたviewのコードとブラウザに表示されたコードは違いますよ。
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
このあたり全部、コンパイルされてHTMLになってます。
「触ってないから関係ない」のではなく、提示されたコードがRailsなので「関係ある」と言っています。
本当に関係ないのならブラウザに表示されたHTMLを提示してください。
ブラウザ右クリック→ソースを表示
（意識しなくていいのがRailsの良いところではあるけど、Webの基本身につかないのでそこだけ見るべきではないですね）
すみません。
特に触らなければ関係ないと思っていました。
ブラウザに表示されたHTMLを追加します。
webの基本の理解を深めたいのですが、何かいい方法がありましたら教えを乞いたいです。
>webの基本の理解を深めたいのですが
「リクエスト」と「レスポンス」を確実におさえることだと思います。
それにWebは制限環境でも作らない限り全世界に公開されるので、セキュリティについてもきちんとおさえることです。
あと、Rails使ってると何がどうなってそうなっているのか見えづらくなってます。
Railsが全てだと思わないことです。RailsだけやってるとRailsしかできなくなるので、「Webの基本」は身に付かないと思ってください。（私のコメントでの指摘でピンとくるようになったらある程度身についてきたと言えるでしょう）
できればソースコードはコピーができるようにコードで囲ったテキストで記述してください。
Railsはわかりませんがこれはもととなるテンプレートがあって、body以下のみ記述する部分にhtmlまるごと記述しているように見えます。
m.ts10806様
ご返答感謝いたします。
「リクエスト」と「レスポンス」ですね。
セキュリティについてはフレームワークの基礎が理解してから勉強してみたいと思います。
gogoweb_ikeda様
ソースコードをテキストに追加いたしました。
確認の方よろしくお願い致します。
これ、RailsのViewの組み方では？
Viewプログラムこれだけですか？
テンプレート化してコンテンツ部分だけ別途読み込んだりしてませんか？
構成含めて提示してください。
m.ts10806様
ビュー、ルーティング、 コントローラーの画像追加いたしました。
確認よろしくお願い致します。
回答2件
0
ベストアンサー
Railsについては知らないので「そんなこと知ってるよ」かもしれませんが、どうやら<body></body>の中に、本来のthml
<DOCTYPE html> <html> (略) </html>
がまるまる、入れ子のように入っていますよ。m.ts10806さんのおっしゃるようにテンプレート化してコンテンツ部分だけ別途読み込んだり（そういう機能があるのかは知りませんが）してるのではありませんか？
一回最小構成で試してみて、うまく行ったらちょっとずつ記述を増やしていってはどうですか？
投稿2020/11/01 10:22
総合スコア67
写真を追加しました。
<%yield%>というタグはそのファイルにあるコードが、全てのviewフォルダーのhtmlファイル内に入りますというものですが、もしおかしな点がありましたら連絡お願いします。
ホントに申し訳ないですが、web系はReactとAngularしか知らないのでわかりません。
ありきたりですが、まず似たような環境で<h1>Hello, World</h1>をきちんと表示させれるかどうか試してみたらどうですか。無理なら、入門サイトで始めにやるような状態にちょっとずつ戻していっていろいろ試すしか無いと思います。
greenleave10000様
メンターさんに確認してもらったら、CSSでpositon:absolute;を使っていてそれが親属性のクラスの範囲に影響されなかったためです。
消したら治りました。
ありがとうございました！
0
CSSでposition:absolute; になっていたため、作ったクラスが積み上がらなかった。
投稿2020/11/04 23:24
総合スコア8
あなたの回答
tips
プレビュー
