常連

注目の的

質問力

この度、転職先でBootstrapをレイアウトの例えばカラム作りなどで使うので覚えてくださいと言われ、本日手をつけ出しました。しかしながら、Bootstrapのメリットがあまりにも感じられなくて、どうしよう...メリットを感じられると思ったのに感じられない私、やばいかも..??と思って居ても立っても居られないなく、質門させていただくことにしました。


メリットを感じられない理由
１. レイアウトの枠作り(グリット)にcol-sm-3とかできるのは確かに便利かもしれない。でも、flexboxを普通にcssで今まで使用していたので、メリットがいまいちわからない。
→先輩から「あたなは今までゼロベースで作ってきた人でできてるから、Bootstrapにすぐ慣れるしすぐ良さが分かると思うよ」と言われたんですが、
あえてBootstrapで枠を作るのが果たして効率がいい方法なのか、手を動かすほど疑問に思ってしまった今日でした。

2.　クラス名にtext-centerとかは確かに便利だけど、クラス名に何でもかんでも指定する感じが慣れないだけなのか、
なんかすっと入ってこない。

3.　Bootstrapにバージョンアップがあったらまたあーだこーだ対処しなければならないんですよね？なんて思うと、敢えてBootstrapで枠レイアウトを作ることの必要性が見えてこない。

4. bootstrap.min.cssを読み込んで、その後で、common.css、pc.css、sp.cssを読み込み、bootstrap.min.cssは手をつけないでって言われているんですが、こんなにもcssを分割するメリットは何でしょうか。
pc.cssの中にもメディアクエリのブレイクポイントが5個くらいあって、もうよくわからなくて。cssをいくつも開いてブラウザで該当箇所を調べて、そのcssの箇所をみて、、みたいな。cssを分割で作るメリットはどういう所にあるのでしょうか。


すみません、そういうもんだよ！とか、いや無理にBootstrapは使う必要はないよ！とか、俺は使わない派とか、なんでも構わないので、Webサイト制作に携わっていらっしゃる方々のbootstrapの見解や使用方法をお尋ねしたく、質問させていただきます。
よろしくお願いいたします。

Webサイト制作におけるBootstrapを使うことのメリットが感じられないのです。

```HTML
  <header>
    <div class="header-left">
      <a href="#">
      <div class="logo">
        <img src="paspol_images/logo.png">
          </div>
        <div class="header-info">
          <h1>PAS-POL</h1>
          <p>旅のモノづくりブランド</p>
        </div>
      </a>
    </div>

    <div class="header-right">
      <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#">PRODUCT</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>

    <div class="header-bottom">
      <a href="#">
      <div class="bottom-item">
        <img src="paspol_images/down_allow.png">
      </div>
      </a>
    </div>
  </header>
```

```CSS
header {
  height: 585px;
  width: 100%;
  background-image: url(paspol_images/main_visual.jpg);
  background-size: cover;
  border-bottom-right-radius: 600px 30px;
  border-bottom-left-radius: 600px 30px;
  color: white;
  display: block;
  position: relative; 
}

header::after {
  content: "";
  display: block;
  background-color: #F6F6F6;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}


.header-left {
  display: inline-block;
  margin-top: 50px;
  margin-left: 95px;
}

.header-left:hover{
  opacity: 0.8;
  transition: all 0.3s
}

.header-info{
  float: left;
  color: white;
  margin-top:10px;
}

.header-info h1{
  font-size: 30px;
  letter-spacing: 6px;
}

.header-info p{
  font-size: 7px;
  letter-spacing: 3px;
}

.logo{
  float: left;
  padding-right:25px;
  width: 75px;
  height:75px;
}

.logo img{
  width: 75px;
  height:75px;
}

.header-right {
  float: right;
  margin-right: 55px;
}

.header-right li {
  padding: 85px 40px 0 0;
  display: inline-block;
  font-size: 13px;
}

header li a{
  color:white;
  text-decoration: none;
}

header li a:hover{
　text-decoration: underline;
  border-bottom: solid 2px white;
  padding-bottom: 10px;
}

.header-bottom{
  text-align: center;
}

.bottom-item{
  margin-top: 400px;
  width: 25px;
  height:15px;
}

.bottom-item img{
  width: 25px;
  height:15px;
}



.header-left:hover{
  opacity: 0.8;
  transition: all 0.3s
}
```

header-bottom部分の画像を背景画像より上（前?）に持ってきたいのですが
背景画像の下（後ろ）になってしまいます。

z-indexやposition: absolute;を使ってみたのですが
どうしても前側にきません。。。

![イメージ説明](9e1cf2be4b95eeab5f77a4954db64a11.png)

背景画像が一番下にならない

ローカルに保存した画像ファイルをHTMLで出す、といった処理を実施したいです。

```
<img src="file:///C:/tmp/WFvbFvqjuE.jpg">
```

コンソールで以下が出力されていました。
```
Not allowed to load local resource: file:///C:/tmp/puTpkXdkQH.jpg
XMLHttpRequest cannot load file:///C:/tmp/puTpkXdkQH@2x.jpg. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
```
上記のように記述したのですが、画面に表示されません。
srcの内容をコピペすれば画像が見れるので指定ミスではないのですが…。

お手数ですが、よろしくお願いします。

ローカルのファイルをHTML上で表示させたい

現在ホームページ作成のためHTMLとcssの勉強をしていて疑問が出たので質問させていただきます。
記述する順番についてです。

HTMLを書きながらCSSを書くのか、HTMLのベースを書いてからCSSを書くのかについてです。

初歩の初歩ですがよろしくおねがいします。

HTMLとCSSの書く順番について

実機とchromeなどの検証画面でresponsiveやiphone5などにして見る画面と大分差が生じております。
chromeで見ると全然text-align:centerが効いてますが、
実機のiphone Xとiphone 8で見るとh3要素のtext-align:centerだけが効かず。
他の要素はwidth:100%内に綺麗に治っていますが、
h3要素達だけまるでwidth:100%より広いwidthがあるようにズレて表示されてしまいます・・・！

そして、何度かロードを重ねると正しく表示されたり、また表示が崩れたり・・・
全然基準が分からなくて修正に困っております。

こういう現象に陥ることがある方、是非ともご意見、アドバイスを宜しくお願い致します！

実機とchromeなどで検証する画面とレイアウトが違う場合、どうして検証できますか？

連投失礼します

ブラウザの文字サイズ設定に合わせて文字サイズが変わるようにする場合、
```CSS
html {
  font-size: 62.5%;
}
```
を指定して10pxにすることで、各要素の文字サイズをemで指定する際に計算しやすくすると良いという記事が、
検索すると山ほど出てくると思うのですが、
```CSS
html {
  font-size: 0.625em;
}
```
ではなく、％で指定するのはなぜでしょうか？
各要素のサイズをemを使って指定しているので、htmlだけemではなく％だと統一されていないような気がして気持ち悪いので、
何も理由がなければemで指定したいと考えています。
％でないとブラウザの文字サイズ設定が反映されないブラウザがあるなど、そういう理由があるのでしょうか？

html要素にfont-size: 0.625emではなく62.5%;と指定する理由

CSSで画像内の特定色を透過することは可能ですか？
ブルーバックで撮影された画像の背景をCSSだけでマスク処理（クロマキー）できたら助かるなぁと思っています。

宜しくお願い致します。

CSSで画像内の特定色を透過することは可能ですか？

お世話になっております。

件名の通り、wordpressで「更新」ボタンにショートカットキー（「ctrl+s」など）を割り当てる方法を教えていただけますと幸いです。

プラグインはできれば使いたくありませんが、難しそうならプラグインでもOKです。

よろしくお願いします。

wordpressの「更新」ボタンにショートカットキーを割り当てる方法

phpで全てのページのheader.phpを共通化しましたが、
各ページタイトルのみ部分変更するにはどうすればいいですか？

共通header.php
```
<head>
    <meta charset="UTF-8">
    <title>〇〇|サイトタイトル</title>
    
</head>
```

index.php
```
<?php include ('header.php'); ?>
<div>
</div>

```
上記内容の場合タイトルタグ内の〇〇部分を各ページごとに変更したいです
よろしくお願いいたします。