この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
2023年12月01日
プルダウンメニューの高さ指定（Mac Safari）
SELECTメニューの高さはCSSファイルに以下のように書けば指定できる。
height:1.8em;
だが、Safari（Mac、iPhoneとも）では高さ指定が効かない。
デフォルト値なのか、かなり低い高さになってしまう。
いろいろ試したところ、文字サイズの指定が有効だった。
font-size: 14px;
大きくなった文字を表示するため高さも高くなった。
あと、SELECTメニューの色が灰色になるので
background-color:#ffffff;
としてみた。iPhoneでは白くなった。
なぜ、Safariだけ表示が異なるのかは分からないまま。
height:1.8em;
だが、Safari（Mac、iPhoneとも）では高さ指定が効かない。
デフォルト値なのか、かなり低い高さになってしまう。
いろいろ試したところ、文字サイズの指定が有効だった。
font-size: 14px;
大きくなった文字を表示するため高さも高くなった。
あと、SELECTメニューの色が灰色になるので
background-color:#ffffff;
としてみた。iPhoneでは白くなった。
なぜ、Safariだけ表示が異なるのかは分からないまま。
2023年07月07日
SSI
ホームページ構成するファイルの中に拡張子がSSIのファイルがあることに気付いた。
WebでSSIを検索してみると Server Side Includes の略とあった。
説明文を読むと、HTMLファイル内に他のファイルを入れ込んで表示できるらしい。
試してみたが
うまくいかなかった。
説明文を読み直すと、サーバの設定を変更する必要があるらしいことが書いてあった。
.htaccessに
AddOutputFilter INCLUDES .html
を追加したら、うまく表示できた。
入れ込むファイルを動的ファイルにして、随時、更新するとおもしろそう。
WebでSSIを検索してみると Server Side Includes の略とあった。
説明文を読むと、HTMLファイル内に他のファイルを入れ込んで表示できるらしい。
試してみたが
うまくいかなかった。
説明文を読み直すと、サーバの設定を変更する必要があるらしいことが書いてあった。
.htaccessに
AddOutputFilter INCLUDES .html
を追加したら、うまく表示できた。
入れ込むファイルを動的ファイルにして、随時、更新するとおもしろそう。
2022年11月24日
httpsだと画面表示が崩れる
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
原因はCSSファイルの指定の仕方にある。
上の記述を含むページをhttpsで開いても
httpsの中にhttpが混在はできないので、fonts.xxxxxxx.com/style.cssは読み込まれない。
CSSが読み込まれないので画面は崩れる。
href=”https://〜 と書けば問題は解決する。
httpsをとって、href="//〜 でも良いらしい。
参考URL
https://www.j-cool.co.jp/blog/?p=6548
2022年07月31日
HTMLタグの命名理由
日々使っているが、なぜ、そのように書くのかは考えたことがなかった。
頭文字をとっているとは思いもしなかった。
分かったものだけ記載する。
p ← paragraph
ul ← Unordered List
li ← List Item
ol ← Ordered List
tr ← Table row
th ← Table header
td ← Table detail
2022年04月06日
display プロパティ
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モデルにしたがって表示されます。
divとspanの違い
div は画面サイズの横いっぱいまで占領します。div を複数並べた場合は自動的に改行されて縦方向に並びます。
span は改行されません。複数並べると改行されず横に並びます。
display プロパティ
display: block;
1行分の幅全部に適用されます。1つの要素が画面サイズの横いっぱいを占領します。
連続して指定すると自動的に改行されて縦方向に並びます。div のデフォルト値です。
display: inline;
1行のうちの一部に適用されます。連続して指定すると、改行されず横に並びます。
span のデフォルト値です。
display: inline-block;
要素全体はインライン（inline）要素、要素内はブロック（block）要素になります。
display: none;
画面に表示されません。
display: flex;
Flexboxモデルにしたがって表示されます。
