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

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

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

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

PHP

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

CSS

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

Q&A

解決済

1回答

580閲覧

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

aoihello

総合スコア31

HTML5

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

PHP

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

CSS

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

0グッド

0クリップ

投稿2022/09/06 14:45

編集2022/09/07 04:30

前提

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

実現したいこと

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

該当のソースコード

php

1<!------------------------------質問 HTML-----------------------------------------------------> 2<?php 3if(isset($_POST['post'])){ 4try { 5$db = new PDO('mysql:host=-----------'); 6session_start(); /*セッションを始める。*/ 7 if(!empty($_POST['subject'])) { 8 $_SESSION['subject']=$_POST['subject']; 9 if(!empty($_POST['grade'])) { 10 $_SESSION['grade']=$_POST['grade']; 11 if(!empty($_POST['post'])) { 12 $_SESSION['contents']=$_POST['contents']; 13 $subject = $_SESSION['subject']; 14 $grade = $_SESSION['grade']; 15 $contents = $_SESSION['contents']; 16 17 $sql = "INSERT INTO post(subject, grade, post) 18 VALUES( :subject, :grade, :post)"; 19 $stmt = $db -> prepare($sql); 20 $stmt->bindValue(':subject', $subject, PDO::PARAM_STR); 21 $stmt->bindValue(':grade', $grade, PDO::PARAM_STR); 22 $stmt->bindValue(':post', $contents, PDO::PARAM_STR); 23 $stmt->execute(); /*上のprepareの中(の$sql)を実行するという意味。*/ 24 $sql = 'SELECT id + row_number() over() FROM post'; 25 $stmt = $db -> prepare($sql); 26 $stmt->execute(); 27 /*header関数は単体の関数としては無理なので何か関数の中に入れる。 headerの前に画面出力があると上手くいかないので消す。*/ 28 29 /*処理が終わったら飛ぶページ*/ 30 header('location:---------'); 31 exit(); 32 }else{ echo '投稿内容を入力してください。';} 33 }else{ echo '難易度を選んでくださいください。';} 34 }else{ echo '教科を選んでください。';} 35 36 } catch (PDOException $e) 37 { 38 echo "DB接続に失敗しました。\n"; 39 echo $e->getMessage() . "\n"; 40 exit(); 41 } 42} 43?> 44<!DOCTYPE html> 45<html lang="ja"> 46<!---------------------------送信フォーム------------------------------------------------------> 47 <head> 48 <link rel="stylesheet" href="questionCSS.css" type="text/css"> 49 <meta charset="utf-8"> 50 <meta name="viewport" content="width=device-width, initial-scale=1"> 51 <title>+Q</title> 52 </head> 53 <style> 54 </style> 55 <header> 56 <div class="body header header-inner header-logo"> 57 <img src="/images/header.jpg" alt="header2.jpg" width="100" height="60"> 58 <a href="" class="header-botton">設定</a> 59 <h1 href="" class="header-name">+Q</h1> 60 </div> 61 </header> 62<!---------------------------カテゴリー----------------------------------------------------> 63<body> 64 <label href="" class="questext">質問の内容</label> 65 <p1> 66 <form method="POST"> 67 <select class="subject" name="subject"> 68 <option value="subject" selected> 69 教科 70 </option> 71 <option >現代文</option> 72 <option >古文</option> 73 <option >漢文</option> 74 <option >高校数学</option> 75 <option >大学微分積分学</option> 76 <option >大学代数学</option> 77 <option >大学解析学</option> 78 <option >大学数学その他</option> 79 <option >英語</option> 80 <option >高校科学</option> 81 <option >大学力学</option> 82 <option >大学電磁気学</option> 83 <option >大学熱力学</option> 84 <option >大学量子力学</option> 85 <option >大学物理その他</option> 86 <option >大学無機化学</option> 87 <option >大学有機化学</option> 88 <option >大学化学その他</option> 89 <option >大学生物学</option> 90 <option >医学</option> 91 <option >教育学</option> 92 <option >その他</option> 93 </select> 94 <select class="grade" name="grade"> 95 <option value="subject" selected> 96 難易度 97 </option> 98 <option >日常</option> 99 <option >中学</option> 100 <option >高校</option> 101 <option >大学基礎</option> 102 <option >大学専門</option> 103 <option >大学院</option> 104 <option >その他</option> 105 </select> 106 </p1> 107 <textarea type="text" name="contents" class="question-text" rows="15" cols="50" wrap="hard" placeholder="質問"> 108 </textarea> 109 <div class="pictures"> 110 <input type="file" name="pictures"> 111 </div> 112 113 <!-----------------------------送信ボタン--------------------------------------------------> 114 <input type="submit" name="post" class="submit" value="投稿"> 115 </form> 116 <!---------------------------------------------------------------------------------------> 117 <footer> 118 <div class="body wrapper footer btn-orange btn-circle btn-circle-a"> 119 <a href="-------" class="btn btn-orage btn-circle btn-circle-a">他の質問</a> 120 <a href="------" class="btn btn-orage btn-circle btn-circle-a">Research</a> 121 <a href="" class="btn btn-orage btn-circle btn-circle-a">+Q</a> 122 <a href="" class="btn btn-orage btn-circle btn-circle-a">問題集</a> 123 <a href="------" class="btn btn-orage btn-circle btn-circle-a">Profile</a> 124 </div> 125 <a href="" class="footer-copyright"> 126 &copy; Arch 127 </a> 128 </footer> 129 <!データの登録> 130</body> 131</html>

修正したcss

css

1/*---------------------質問画面 CSS-------------------------------------------------------*/ 2@charset "utf-8"; 3 /*classを使ってcssを書く場合はclassの前に.が必要*/ 4 5 .container { 6 padding-top: 10px; 7 padding-bottom: 10px; 8 padding-left: 10px; 9 padding-right: 10px; 10} 11/*-----------------------------header------------------------------------------------------*/ 12 .header { 13 position: absolute; 14 top: 0; 15 width: 100%; 16 17} 18 .header-inner { 19 background-color: black; 20 display:flex; 21 justify-content: space-between; 22 align-items: center;/*ヘッダーの位置*/ 23 border-bottom:200px; 24 width: 100%; 25 height: 70px; 26} 27 .header-logo { 28 position:absolute; 29 padding-left: 10px; 30 padding-right: 10px; 31} 32 .header-botton { 33 font-size: 5px; 34 color:aliceblue; /*文字の色*/ 35 place-content: space-between space-evenly; 36} 37 .header-name { 38 color: white; 39 font-size: 20px; 40 position: absolute; 41 top: 10px; 42 left: 50%; 43} 44 45 46/*-----------------------------main---------------------------------------------------------*/ 47 .questext{ 48 position:absolute; 49 left:50%; 50 top:20px; 51 color:crimson; 52 } 53 .subject{ 54 position:absolute; 55 left:30px; 56 top:170px; 57 } 58 .grade{ 59 position:absolute; 60 left: 35px; 61 top: 170px; 62 } 63 64 input[type="text"] { 65 position: absolute; 66 border-top: 10px; 67 margin: 0.5em 0; 68 border: 1px solid #000; 69 padding: 0.75em; 70 width: 990px; 71 height: 430px; 72 font-size: 16px; 73 color: #000; 74 overflow: hidden; 75} 76 .question-text { 77 font-size: 18px; 78 position: absolute; 79 top: 160px; 80 width: 100%; 81 height: 200px; 82 left: 20px; 83} 84 85 .pictures { 86 font-size: 10px; 87 position:absolute; 88 top: 130px; 89} 90.submit { 91 position: absolute; 92 bottom: 100px; 93 right: 20px; 94} 95/*------------------------------footer---------------------------------------------------*/ 96.footer { 97 position: absolute; /*絶対位置を指定するときに使う*/ 98 bottom: 0; /*上とセットで下に固定という意味*/ 99 height: 80px; 100 width: 101.6%; 101 background-color:black; 102 font-size: 1.0px; 103 color: #000; 104 text-align: center; 105} 106btn, a.btn, button.btn { 107 font-size: 1.6rem; 108 font-weight: 700; 109 line-height: 1.5; 110 position: relative; 111 display: inline-block; 112 cursor: pointer; 113 user-select: none; 114 transition: all 0.3s; 115 text-align: center; 116 vertical-align: middle; 117 text-decoration: none; 118 color: aqua; /*文字の色*/ 119 border-radius: 0.5rem; 120} 121a.btn-orange { 122 color: #000; 123 background-color: #000 124} 125a.btn-circle { /*枠。色をつけたければ、 outline-color*/ 126 border-radius: 50%; 127 line-height: 75px; 128 width: 150px; 129 height: 50px; 130 padding: 0; 131} 132.footer-copyright { 133 color:white; 134 position: absolute; 135 bottom: 10px; 136 left: 10px; 137 font-size: 10px; 138}

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

php

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

試したこと

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

全く効いてないようには見えないので、読まれないではなく想定の通り組めてないだけに見受けられます。
CSS検証サービスで試したところ、文法エラーは沢山あるようですので、そちらご確認ください。
イメージ説明

※なお、質問に提示されたCSSそのまま放り込んでいます。

@charsetも使い方間違ってそうです。
https://developer.mozilla.org/ja/docs/Web/CSS/@charset

投稿2022/09/06 20:02

m.ts10806

総合スコア80842

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/09/06 20:03

「読まれてない」ならブラウザ開発ツールのコンソールに404エラー出ているはずなので、そちらも確認を。 クエリストリング付与による強制キャッシュクリアも試してください。
aoihello

2022/09/07 04:28 編集

m.ts10806様ご回答誠にありがとうございます。 上記のエラーも気づいておらず修正しました。そのエラーが原因ではありませんでしたが、クエストリング付与による強制キャッシュクリアを実行したところ、適切に出力されるようになりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問