常連

社会貢献

### :nth-of-type()で任意の引数を複数取得して使いたい。

:nth-of-type()を使って要素を取得する場合、
()の中に任意の数字を1つ入れるか、
(odd)(偶数)、(even)(奇数)などの特定の引数しか使えません。

たとえば、30枚ある写真の内、1,4,29枚目を取得したい場合、

.photos li:nth-of-type(1) img,
.photos li:nth-of-type(4) img,
.photos li:nth-of-type(29) img 
 { border:solid 2px #333; }

と記述していますが、これをもっと簡略化させて

.photos li:nth-of-type(1,4,29) img 
 { border:solid 2px #333; }

のように引数を1度で取得する方法はありませんでしょうか？
（上の例では失敗します）

:nth-of-type()で任意の引数を複数同時に取得して使いたい。

wordpressで「Custom Post Type UI」をつかってカスタム投稿を作りました。

そのカスタム投稿に通常の投稿とは違うCSSを導入したいのですが、うまくいきません。

ネットで検索し、「header.php」の中に、

<?php if(is_singular(plan_list)): ?>
<link rel="stylesheet" href="http://..../wp-content/themes/sahifa/style-plan_list.css" type="text/css"  media='all' />
<?php else: ?>
<link rel="stylesheet" href="http://..../wp-content/themes/sahifa/style.css" type="text/css" media='all' />
<?php endif; ?>

を追加しました。（"plan_list"がカスタム投稿名です。）

その結果、該当箇所にはきちんと動作しました。

しかし、header下部に

<link rel='stylesheet' id='tie-ilightbox-skin-css'  href='http://..../wp-content/themes/sahifa/css/ilightbox/dark-skin/skin.css' type='text/css' media='all' />

という記述があり、そちらが優先して反映されてしまします。

php内では
<?php wp_head(); ?>
となっている部分なので編集できません。

こちらの記述を正しく直す方法はありますでしょうか？

ちなみに、テーマは「sahifa」です。

wordpressのカスタム投稿に違うCSSを導入したい

初心者です。
超基本的な部分の質問ですが、いつも悩む部分なのでアドバイス頂けると幸いです。

---

ヘッダー-----------------

ロゴ←

大見出し(サイトの名前など)

ヘッダー-----------------

こういった場合のロゴに、なんのタグを当てればよいのか、いつも迷います。

ヘッダーのロゴはh1でも構わないという記述をいくつかのサイトで参考にさせていただきました。
[参考サイト](https://www.seo-pro.jp/seo/heading)
[参考サイト](https://lpeg.info/seo/seo_h1_logo.html#m8)

---

しかし、感覚的に、大見出しをh1にしたいので、
なんとなく、存在感があまり強くないヘッダーロゴにh1を使うのは気が引けます。

とすると、
テキストの場合は、<h2>を頭から使うわけにもいかないだろうし、
<p>タグだろうかと
思ってしまい今は<p>タグをあてているのですが、間違っていますか？

画像のロゴの場合は
<div>タグ…？

実際の現役の方はどうしていらっしゃるのかなと思い、質問させて頂きました。

どうぞ宜しくお願いします。

[追記]
当方、ローカル環境で、課題をこなしている勉強中の者です。
この質問に、SEO的な観点や、どういった効果をもたらすのかなど、細かい指定の無い質問でした。
いつもなんとなく<p>タグで囲っていたので、調べたところ、
意見が様々あり、また参考にした記事の更新日も気になったので、
現役の方や、詳しい方の今のご意見をお聞きしたく質問した次第でした。

ヘッダーロゴはどのタグで囲えばよいのか？<h1>?<p>?<div>?

### 前提・実現したいこと

書籍でPHPを勉強しており、
関数の分野でわからない点があり質問させていただきました。

下記の書籍で勉強中です。
「気づけば プロ並み PHP」
http://www.ric.co.jp/book/contents/book_926.html


### 発生している問題・エラーメッセージ

エラーは出ていないのですが、理解を深めたいと思います。

エラーメッセージ
```

### 該当のソースコード

```php

※関数部分
function sanitize(**$before**)
{
foreach($before as $key=>$value)
{
$after[$key]=htmlspecialchars($value,ENT_QUOTES,'UTF-8');
}
return **$after**;
}

※実行部分
$post=sanitize($_POST);


```

### 試したこと

$_POSTで受け取ったデータ→関数の実行（エスケープ）→返り値を$postに。
上記のようなざっくりと処理の流れは理解できるのですが、
「$before」　「$after」　の部分が理解できません。

・sanitizeの引数がなぜ「$before」という変数に設定されているか。
（$_POSTで受け取ったデータ）

・返り値をなぜ「$after」という変数に入れているか。

・両方とも実行部分では「$before」　「$after」という変数は出てきていないのになぜ動くのか。

### 補足情報（FW/ツールのバージョンなど）
初歩的な質問になり恐縮ですが、ご教授いただければ大変助かります。

PHPにおける関数での処理の流れを理解したいです。

掲題通りなのですが、固定ページごとにCSSを読み込ませたいのですが分かりません。
調べてはいるのですが解決できず質問させていただきました。

分かる方ご教授いただけたら幸いです。
もしくは初心者でも分かるサイトがあれば教えていただけると大変嬉しいです。

よろしくお願いいたします。

WordPress 固定ページごとにCSSを読み込ませる方法

Googleで検索しても、スマホで使用するときの文字サイズばかり出てきて見つけれなかったので、質問させてください。

横幅750pxのスマートフォン用デザインデータをもらい、コーディングしております。
余白などは半分にして作成しておりますが、
たとえば文字サイズが24pxだった場合、文字サイズも半分の12pxにするのでしょうか。

初歩的な質問で申し訳ありません。
宜しくお願い致します。

スマホサイトのコーディング時、文字サイズはデザインカンプの半分にするのですか？

親要素がposition: relativeの時に
子要素がposition: relativeで
その子要素には特にheight指定はないけど、
要素として存在する分のheightはあるんじゃないですか。
それが即ち、親要素のheightにもなるのではないのでしょうか？

親要素、子要素共にheightに対しての指定はない状況においてです。

なのに、なぜか次の要素が引きあがってきちゃうんですよ・・・。

何か、間違った理解をしているのでしょうか・・・。

子要素がabsoluteだったら、heightがなくて
次の要素が上がってくるのはわかりますが、
子要素がrelativeでも各子要素がheight指定がない限り
次の要素が上がってきちゃうのでしょうか？

現状はなぜかsection5が勝手に上がってきてるので、
margin-topでその分入れてますが、
relativeで入れたのにmarginでそこを確保すべきなのか？
コードで間違いがあったのかなと思い、
質問させて頂きます・・・。

```html
<section id="section4">
                <h2>Interview</h2>
                <figure id="people-img">
                    <img src="image/index/index_img09.png">
                </figure>
                <div id="people-area">
                    <a href="#" class="pic" id="pic01">
                        <div class="a-hover"></div>
                        <p>01</p>
                        <div class="animated">
                            <img src="image/index/index_img10.png">
                        </div>
                        <div class="shadow">
                            <div class="shadow-in">
                                一番目の人
                            </div>
                        </div>
                    </a>
                    <a href="#" class="pic" id="pic02">
                        <div class="a-hover"></div>
                        <p>02</p>
                        <div class="animated">
                            <img src="image/index/index_img11.png">
                        </div>
                        <div class="shadow">
                            <div class="shadow-in">
                                二番目の人
                            </div>
                        </div>
                    </a>
                    <a href="#" class="pic" id="pic03">
                        <div class="a-hover"></div>
                        <p>03</p>
                        <div class="animated">
                            <img src="image/index/index_img12.png">
                        </div>
                        <div class="shadow">
                            <div class="shadow-in">
                                三番目の人
                            </div>
                        </div>
                    </a>
                    <a href="#" class="pic" id="pic04">
                        <div class="a-hover"></div>
                        <p>04</p>
                        <div class="animated">
                            <img src="image/index/index_img13.png">
                        </div>
                        <div class="shadow">
                            <div class="shadow-in">
                                4番目の人
                            </div>
                        </div>
                    </a>
        </section>
        <section id="section5"></section>
```
```css
#section4 {
    width: 1220px;
    margin: 0 auto;
    position: relative;
    padding-top: 400px;
    height: auto;
}
#section4 h2 {
    font-size: 11.4rem;
    letter-spacing: 0.16em;
    text-align: center;
    position: relative;
    z-index: 1010;
}
#section4 #people-area {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex-direction: row;
}
#section4 #people-img {
    right: 25px;
    position: absolute;
    z-index: 10;
    top: 370px;
}
#section4 #people-area #pic01 {
    position: relative;
    left: 70px;
    top: 280px;
}
#section4 #people-area #pic02 {
    position: relative;
    right: 0px;
    top: 670px;
    z-index: 1000;
}
#section4 #people-area #pic03 {
    position: relative;
    left: 10px;
    top: 1120px;
}
#section4 #people-area #pic04 {
    position: relative;
    right: 70px;
    top: 1340px;
    z-index: 1000;
}
#section5 {
    margin-top: 1900px;
    position: relative;
    background-color: #fff;
    height: 986px;
    width: 100%;
}
```

position: relativeの親要素の中に子要素のpositionによる高さについて

h1 → 親要素
p → 子要素
```css
h1{
 position:relative;
}
p{
 position:absolute;
 left:10px;
}
```
と書くと親要素のh1のボックスに対してpが左から10pxのところに配置されるということは分かります。

しかし勉強していて僕の勘違いかもしれないのですが、、
```css
h1{
 position:relative;
}
p{
 position:relative;
 left:10px;
}
```
というものが出てきました。

親要素に「position:relative」を書いて、子要素に「position:absolute」を書くパターンしか僕は知りません。


しかし、、、


子要素に「position:relative」を書くパターンが存在するのでしょうか？

また存在するのであればどのような表現になるのでしょうか？


ご解答よろしくお願い致します。