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

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

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

解決済

いきなりCSSがHTMLに読まれなくなった。

aoihello
aoihello

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

1回答

0リアクション

0クリップ

350閲覧

投稿2022/09/06 14:45

編集2022/09/07 04:30

前提

以前は問題なく動いていたCSSが最近phpを書いたところ、うまくいかなくなってしまいました。
headerとfooterは使い回しで、他のページでは同じ書き方で適切に動いています。

実現したいこと

左端に寄ってしまっているfooter部分を下部に持って行きたいです。

該当のソースコード

php

<!------------------------------質問 HTML-----------------------------------------------------> <?php if(isset($_POST['post'])){ try { $db = new PDO('mysql:host=-----------'); session_start(); /*セッションを始める。*/ if(!empty($_POST['subject'])) { $_SESSION['subject']=$_POST['subject']; if(!empty($_POST['grade'])) { $_SESSION['grade']=$_POST['grade']; if(!empty($_POST['post'])) { $_SESSION['contents']=$_POST['contents']; $subject = $_SESSION['subject']; $grade = $_SESSION['grade']; $contents = $_SESSION['contents']; $sql = "INSERT INTO post(subject, grade, post) VALUES( :subject, :grade, :post)"; $stmt = $db -> prepare($sql); $stmt->bindValue(':subject', $subject, PDO::PARAM_STR); $stmt->bindValue(':grade', $grade, PDO::PARAM_STR); $stmt->bindValue(':post', $contents, PDO::PARAM_STR); $stmt->execute(); /*上のprepareの中(の$sql)を実行するという意味。*/ $sql = 'SELECT id + row_number() over() FROM post'; $stmt = $db -> prepare($sql); $stmt->execute(); /*header関数は単体の関数としては無理なので何か関数の中に入れる。 headerの前に画面出力があると上手くいかないので消す。*/ /*処理が終わったら飛ぶページ*/ header('location:---------'); exit(); }else{ echo '投稿内容を入力してください。';} }else{ echo '難易度を選んでくださいください。';} }else{ echo '教科を選んでください。';} } catch (PDOException $e) { echo "DB接続に失敗しました。\n"; echo $e->getMessage() . "\n"; exit(); } } ?> <!DOCTYPE html> <html lang="ja"> <!---------------------------送信フォーム------------------------------------------------------> <head> <link rel="stylesheet" href="questionCSS.css" type="text/css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>+Q</title> </head> <style> </style> <header> <div class="body header header-inner header-logo"> <img src="/images/header.jpg" alt="header2.jpg" width="100" height="60"> <a href="" class="header-botton">設定</a> <h1 href="" class="header-name">+Q</h1> </div> </header> <!---------------------------カテゴリー----------------------------------------------------> <body> <label href="" class="questext">質問の内容</label> <p1> <form method="POST"> <select class="subject" name="subject"> <option value="subject" selected> 教科 </option> <option >現代文</option> <option >古文</option> <option >漢文</option> <option >高校数学</option> <option >大学微分積分学</option> <option >大学代数学</option> <option >大学解析学</option> <option >大学数学その他</option> <option >英語</option> <option >高校科学</option> <option >大学力学</option> <option >大学電磁気学</option> <option >大学熱力学</option> <option >大学量子力学</option> <option >大学物理その他</option> <option >大学無機化学</option> <option >大学有機化学</option> <option >大学化学その他</option> <option >大学生物学</option> <option >医学</option> <option >教育学</option> <option >その他</option> </select> <select class="grade" name="grade"> <option value="subject" selected> 難易度 </option> <option >日常</option> <option >中学</option> <option >高校</option> <option >大学基礎</option> <option >大学専門</option> <option >大学院</option> <option >その他</option> </select> </p1> <textarea type="text" name="contents" class="question-text" rows="15" cols="50" wrap="hard" placeholder="質問"> </textarea> <div class="pictures"> <input type="file" name="pictures"> </div> <!-----------------------------送信ボタン--------------------------------------------------> <input type="submit" name="post" class="submit" value="投稿"> </form> <!---------------------------------------------------------------------------------------> <footer> <div class="body wrapper footer btn-orange btn-circle btn-circle-a"> <a href="-------" class="btn btn-orage btn-circle btn-circle-a">他の質問</a> <a href="------" class="btn btn-orage btn-circle btn-circle-a">Research</a> <a href="" class="btn btn-orage btn-circle btn-circle-a">+Q</a> <a href="" class="btn btn-orage btn-circle btn-circle-a">問題集</a> <a href="------" class="btn btn-orage btn-circle btn-circle-a">Profile</a> </div> <a href="" class="footer-copyright"> &copy; Arch </a> </footer> <!データの登録> </body> </html>

修正したcss

css

/*---------------------質問画面 CSS-------------------------------------------------------*/ @charset "utf-8"; /*classを使ってcssを書く場合はclassの前に.が必要*/ .container { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } /*-----------------------------header------------------------------------------------------*/ .header { position: absolute; top: 0; width: 100%; } .header-inner { background-color: black; display:flex; justify-content: space-between; align-items: center;/*ヘッダーの位置*/ border-bottom:200px; width: 100%; height: 70px; } .header-logo { position:absolute; padding-left: 10px; padding-right: 10px; } .header-botton { font-size: 5px; color:aliceblue; /*文字の色*/ place-content: space-between space-evenly; } .header-name { color: white; font-size: 20px; position: absolute; top: 10px; left: 50%; } /*-----------------------------main---------------------------------------------------------*/ .questext{ position:absolute; left:50%; top:20px; color:crimson; } .subject{ position:absolute; left:30px; top:170px; } .grade{ position:absolute; left: 35px; top: 170px; } input[type="text"] { position: absolute; border-top: 10px; margin: 0.5em 0; border: 1px solid #000; padding: 0.75em; width: 990px; height: 430px; font-size: 16px; color: #000; overflow: hidden; } .question-text { font-size: 18px; position: absolute; top: 160px; width: 100%; height: 200px; left: 20px; } .pictures { font-size: 10px; position:absolute; top: 130px; } .submit { position: absolute; bottom: 100px; right: 20px; } /*------------------------------footer---------------------------------------------------*/ .footer { position: absolute; /*絶対位置を指定するときに使う*/ bottom: 0; /*上とセットで下に固定という意味*/ height: 80px; width: 101.6%; background-color:black; font-size: 1.0px; color: #000; text-align: center; } btn, a.btn, button.btn { font-size: 1.6rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; cursor: pointer; user-select: none; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; color: aqua; /*文字の色*/ border-radius: 0.5rem; } a.btn-orange { color: #000; background-color: #000 } a.btn-circle { /*枠。色をつけたければ、 outline-color*/ border-radius: 50%; line-height: 75px; width: 150px; height: 50px; padding: 0; } .footer-copyright { color:white; position: absolute; bottom: 10px; left: 10px; font-size: 10px; }

強制キャッシュクリアのために変更した部分です。

php

<link rel="stylesheet" href="questionCSS.css?20220907" type="text/css">

試したこと

出力しているwebsiteでのキャッシュクリア。
class名の変更。
CSSで元々possition:absolute;と書いてあったfooterを削除。今は戻してあります。
safariのデベロッパーツールで読み込まれているかなどを確認したのですが、特にエラー表示や、優先順位負けなどはありませんでした。

補足情報(FW/ツールのバージョンなど)

ページのサイズがうまくできていなく右側が少し見切れています。
サイトに関わる部分は------で隠しています。

適切に動いているページではこのような感じになっています。
イメージ説明

問題の起きているページの画像です。
イメージ説明

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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