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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1144閲覧

cssが認識されない理由

makadamiahelen

総合スコア23

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/02/09 03:19

編集2019/02/09 05:26

php

1<?php get_header(); //header.phpを取得 ?> 2 3 <div id="content" class="clearfix"> 4 <aside> 5 <?php get_sidebar(); //sidebar.phpを取得 ?> 6 </aside> 7 8 <div id="errorMessage" class="clearfix"> 9 <h1>404 ERROR. PAGE NOT FOUND.</h1> 10 <span><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップに戻ります</a></span> 11 12 <label class="article404"> 13 <?php 14 // --------- 新着情報を3件表示 --------- 15 $args = array( 16 'category_name' => 'staff', // カテゴリー「staff」を読み込む 17 'posts_per_page' => 3 // 表示数 3件 18 ); 19 $the_query = new WP_Query( $args );// 新規WP query を作成 変数args で定義したパラメータを参照 20 if ( $the_query->have_posts() ) : 21 // ここから表示する内容を記入 22 ?> 23 24 <section class="section404"> 25 <h2 class="section-title">NEWS</h2> 26 <ul class="news-list"> 27 28 <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 29 // -------- ここから繰り返し---------- ?> 30 31 <li> 32 <span class="date"><?php the_time('Y.m.j'); ?></span> 33 <span class="label-info">お知らせ</span> 34 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 35 </li> 36 37 <?php // -------- 繰り返しここまで----------- 38 endwhile; ?> 39 40 </ul> 41 <div class="center"> 42 <a href="<?php echo home_url(); ?>/category/news/" class="btn btn-default">お知らせ</a> 43 </div> 44 </section> 45 46 <?php 47 // -------- 新着情報WP_query終了----------- 48 wp_reset_postdata(); 49 endif; 50 ?> 51 52 53 </label> 54 </div> 55 </div> 56 57 58 59 60 61<?php get_footer(); //footer.phpを取得 PHPで終了するので閉じタグは不要です

css

1@charset "utf-8"; 2 3 4 5#errorMessage { 6 width: 700px; 7 float: right; 8 margin-top: 30px; 9} 10 11 12.article404 .section404 { 13 color: #ffbe00; 14 margin-top: 300px; 15}

すごく単純なコードだとおもいますが、404エラーの際に表示されるテンプレートです。
エラー文言と、その下に投稿記事を3つ表示させています。

しかしこのarticle sectionに対してcssが効かずに困っています。

補足なのですが、このarticle
実はpage.phpの固定ページテンプレートで使ってまして、idもclassも指定しておりません。
なのでstyle.cssには

article {
------
}
という風に書いてあるんですが、これがいけなかったりしますでしょうか?

問題の部分を装飾しているcssを追記します

css

1/* Content 2 ========================================================================== */ 3 4#content { 5 width: 900px; 6 margin: 30px auto; 7} 8 9aside { 10 float: left; 11 width: 200px; 12} 13 14aside section { 15 margin-bottom: 20px; 16} 17 18article { 19 float: right; 20 width: 700px; 21} 22 23article section { 24 margin-bottom: 40px; 25} 26 27article h2 { 28 color: #ffbe00; 29} 30 31article h3 { 32 color: #888; 33} 34

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSS

1/* ↓ 全角スペースを半角にしましょう */ 2.article404 .section404 { 3 color: #ffbe00; 4 margin-top: 300px; 5}

投稿2019/02/09 03:22

kei344

総合スコア69364

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

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

makadamiahelen

2019/02/09 03:25

回答ありがとうございます。 ご指摘のとおり修正してみましたが、結果は変わりませんでした・・・ デベロッパーツールで見てみたんですが、どうも認識すらされていないようで、取り消し線すらついていない状況でした。 この場合って何が考えられるでしょうか。
kei344

2019/02/09 04:44

どのCSSにかいて、それがどこにあり、それをどう呼び出しているかを質問文に追記されてはいかがでしょう。 提示されたCSSが全体で無ければ、CSSは途中で問題が起こった場合、それ以降が正しくパースできないことがあります。
kei344

2019/02/09 05:38

最初に提示された部分が含まれていませんね。書かれていないコードは認識も実行もされません。 情報を小出しにしたい気分はわかりますが、問題の解決にはつながらないので私は否定的です。(全体コードが膨大でteratailの文字制限にかかる事もあるとは思いますが、そう書かれていなければ回答者にはわかりません) > デベロッパーツールで見てみたんですが、どうも認識すらされていないようで 読み込んでいるCSSファイルのリストもデベロッパーツールで確認が出来るので、そもそも読み込まれているか確認しましょう。
yoshinavi

2019/02/09 08:17

横からスミマセン。 「kei344」さんのご指摘のように全角スペースが、まだ残っているのでは? <label class="article404">にもあります。全体を見直されると良いかもです。
makadamiahelen

2019/02/09 09:31 編集

kei344さんへ 追記した部分はstyle.cssに もともとの部分は404.cssに書いてあります errorMessage{ } の部分は適応されていたので、読み込まれてはいる認識でした。 kei344さん、yoshinaviさんへ ありがとうございます。 原因がわかりました。 label class=""の部分の全角が原因で、idもclassも有効になっておらず cssが効かなかったんだと思います。 全角を半角にしたところ正常に表示されました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問