データベースエンジニアが行く

SELECTメニューの高さはCSSファイルに以下のように書けば指定できる。

height:1.8em;

だが、Safari（Mac、iPhoneとも）では高さ指定が効かない。

デフォルト値なのか、かなり低い高さになってしまう。

いろいろ試したところ、文字サイズの指定が有効だった。

font-size: 14px;

大きくなった文字を表示するため高さも高くなった。



あと、SELECTメニューの色が灰色になるので

background-color:#ffffff;

としてみた。iPhoneでは白くなった。

なぜ、Safariだけ表示が異なるのかは分からないまま。

ホームページ構成するファイルの中に拡張子がSSIのファイルがあることに気付いた。

WebでSSIを検索してみると Server Side Includes の略とあった。

説明文を読むと、HTMLファイル内に他のファイルを入れ込んで表示できるらしい。

試してみたが



うまくいかなかった。

説明文を読み直すと、サーバの設定を変更する必要があるらしいことが書いてあった。

.htaccessに

　AddOutputFilter INCLUDES .html

を追加したら、うまく表示できた。

入れ込むファイルを動的ファイルにして、随時、更新するとおもしろそう。

http://〜だと問題なく表示できるのに、https://〜にすると画面が崩れてしまうページがある。

原因はCSSファイルの指定の仕方にある。



上の記述を含むページをhttpsで開いても

httpsの中にhttpが混在はできないので、fonts.xxxxxxx.com/style.cssは読み込まれない。

CSSが読み込まれないので画面は崩れる。


href=”https://〜 と書けば問題は解決する。

httpsをとって、href="//〜 でも良いらしい。

参考URL
https://www.j-cool.co.jp/blog/?p=6548

、、などのHTMLタグ。

日々使っているが、なぜ、そのように書くのかは考えたことがなかった。
頭文字をとっているとは思いもしなかった。
分かったものだけ記載する。

p ← paragraph

ul ← Unordered List

li ← List Item

ol ← Ordered List

tr ← Table row

th ← Table header

td ← Table detail

display プロパティを説明しやすくするために先に div と span の違いを説明します。


div は画面サイズの横いっぱいまで占領します。div を複数並べた場合は自動的に改行されて縦方向に並びます。
span は改行されません。複数並べると改行されず横に並びます。


display: block;　
　　1行分の幅全部に適用されます。1つの要素が画面サイズの横いっぱいを占領します。
　　連続して指定すると自動的に改行されて縦方向に並びます。div のデフォルト値です。
display: inline;
　　1行のうちの一部に適用されます。連続して指定すると、改行されず横に並びます。
　　span のデフォルト値です。
display: inline-block;
　　要素全体はインライン（inline）要素、要素内はブロック（block）要素になります。
display: none;
　　画面に表示されません。
display: flex;
　　Flexboxモデルにしたがって表示されます。