https://it-biz.online/web-design/inline-block/
結論、インライン要素は行内の一部のまとまり、ブロック要素は独立したブロック（行全体のまとまえり）として配置されます。インライン要素は主に文章の一部を装飾するために使われ、ブロック要素はページの構造やレイアウトを定義するために使われます。
- インライン要素
→行の中の一部のまとまり（主に行内装飾のために利用される） - ブロック要素
→行全体のまとまり
インライン要素 ブロック要素
カテゴリー: html5
aタグの中にaタグを貼る方法
new-chance/index.html
自社サイトトップページのキービジュアルはback-graoud-imageで背景がスライドショーになっているが、その背景にaタグのリンクを貼り、その上にも別要素のボタンを乗せてそのボタンにもリンクを貼りたい。
ボタン要素の画像にはリンクが張ってあり、それを包含している背景画像の外側にリンクを貼ろうとするとaタグが重ねっているからエラーになる。
そんな時は下記サイトのように入れ子の上にくるボタン一つ一つのaタグをobjectタグで包めば大丈夫。
aタグ内のaタグはobjectタグで囲む
aタグ内のaタグはobjectタグで囲ってあげると正しくパースされます。
<a href="/articles/1"> <!-- 全体をクリックすると記事ページヘ遷移 -->
<img src="/assets/articles/1.jpg">
<p>タイトルタイトル</p>
<div>
<span>著者名：</span>
<object><a href="/users/fukami">ふかみ</a></object>
</div>
<div>
<span>タグ：</span>
<object><a href="/tags/yakei">夜景</a></object>
<object><a href="/tags/buildings">ビル</a></object>
<object><a href="/tags/beautiful">綺麗</a></object>
</div>
</a>自社サイトトップページ
Html
<div class="container-fluid top-key mx-0 px-0">
<a href="profile/index2.html">
<div class="container-fluid mx-0 px-0 bg-slider " >
<div class="text01"><img src="image/top/item5.png" class="img-fluid" alt=""/></div>
<div class="text02"><img src="image/top/item6.png" class="img-fluid" alt=""/></div>
<div class="text03"><img src="image/top/item7.png" class="img-fluid" alt=""/></div>
<div class="clear"></div>
<div class="container px-0 topContainer">
<div class="row serviceContainer justify-content-center" >
<div class="col-md-7 col-sm-7 col-10 animation001">
<div class="row">
<div class="col-6 col-sm-3 mb-sm-4 mb-2 text-center"><object><a href="advertisement/index.html"><img src="image/top/item4.png" class="img-fluid" alt="広告"/></a></object></div>
<div class="col-6 col-sm-3 mb-sm-4 mb-2 text-center"><object><a href="produce/index.html"><img src="image/top/item1.png" class="img-fluid" alt="プロデュース"/></a></object></div>
<div class="col-6 col-sm-3 mb-sm-4 mb-2 text-center"><object><a href="advertisement/index2.html"><img src="image/top/item2.png" class="img-fluid " alt="クリエイティブ"/></a></object></div>
<div class="col-6 col-sm-3 mb-sm-4 mb-2 text-center"><object><a href="culture/index.html"><img src="image/top/item3.png" class="img-fluid" alt="環境 文化"/></a></object></div>
</div>
</div>
</div>
</div>
</div>
</a>
</div> CSS
.topkey {}
.topkey a {width: 99.1vw;
height: 100vh;}
.bg-slider {
width: 99.1vw;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
/*align-items:flex-end;*/
justify-content: center;
position: relative;
}
※一番外側で覆っているaタグはdream weaver ではaタグ箇所選択すると表記を直してとメッセージが出るがレイアウト的には大丈夫なようだ。
<a href=”profile/index2.html”>
*******
</a> ← この箇所。
SEO h1タグ複数 html5
https://webtan.impress.co.jp/e/2020/05/11/35869
グーグルの進化とミューラー氏による公式見解では……
グーグルも進化している。たとえば、次のようにだ：
- コンテンツの分析能力が向上した
- ページ内の各要素がどう絡み合っているかをより深く理解できるようになった。
そもそも、世の中のWebページには、HTMLマークアップのミスが存在しているものだ。その事実を考えると、使われているタグが h1 であろうと h2 であろうと div であろうと、ページに記載されている内容の解釈をグーグルが自分たちの側で独自に行おうとするのも理にかなっている。
この議論があまりに頻繁に浮上するため、グーグルのジョン・ミューラー氏はウェブマスター向けの動画で次のように語った。
h1 要素は、1ページの中で好きなだけ使っていい。制限はない。上限も下限もない。
h1 要素は、ページの構造を強化する素晴らしい方法であり、ユーザーや検索エンジンはページのどの部分がどの見出しの下に配置されているのかを理解できるので、私ならページ上で適切に使うだろう。
そして特にHTML5では、ページ上で複数の h1 要素を使うのはまったく普通で、予想されていることだとも言える。そのため、心配する必要はない。
SEOツールのなかには、これを問題にして次のように言ってくるものもある：
h1タグが1つもありません
h1タグが2つあります
私たちから見ると、これは重要な問題ではない。ユーザビリティの観点から見ると、改善するほうが理にかなっているかもしれない。したがって、こうした提案は完全に無視するわけではない。
しかし、検索エンジンという観点では、重要な問題だとは思わない。
サイトに h1 要素がまったくなくても、あるいは5つあっても、まったく問題ない
グーグルの最も信頼されている権威の1人がこのように述べているにもかかわらず、多くのSEO担当者はまだ懐疑的で、「信用したいが検証したい」と考えている。
ページ内のアンカー位置がずれる
cocowa/service/index.html
ページ内リンクがずれる例
アンカーをつけることで適宜閲覧したい箇所へ移動できるものの、ジャンプ先の位置がずれてしまうケースがあります。
原因の多くは、ヘッダー位置を画面上部に固定しているためです。
ジャンプ先のセクションタイトルなどの要素の上に固定ヘッダーが重なって表示されてしまうため、表示がずれているように見えてしまうわけです。
ページ内リンクがずれる原因を解消する方法
では、固定ヘッダーの際の表示ずれを回避するための方法を紹介します。
CSSでアンカーとなるセクションタイトルに対して、ヘッダーの高さ分のpadding-topと、ヘッダーの高さ分のネガティブマージンをmargin-topに設定することで、ページ内リンクのジャンプ先を上にずらせます。
以下の例では、CSSに下記の記述を付け加えています。
.section h2 {
padding-top: 60px;
margin-top:-60px;
}
ここwaのご相談ページで実装中
/service/index.html
<div class=" col-lg-6 mb-5">
<section class="item-section">
<div class="itemBox">
<h2 id="anchor-counseling" class="col-12 text-center mb-1 boxTitle">カウンセリング</h2>
<div class="row">
<div class="col-xl-4 mb-3">
<img src="../image/service/item3.jpg" class="img-fluid mx-auto" alt=""/>
</div>
<div class="col-xl-8 ">
説明説明説明説明説明
</div>
</div>
</div>
</section>
</div>///////////
<li><a href="../service/index.html#anchor-counseling">カウンセリングについて</a></li>////////////////////
.serviceContainer .item-section h2 {
padding-top: 200px;
margin-top:-200px;
}入れる要素にマージントップやパディングトップがそもそも初めから設定していると余計なスペースを作ってしまうので変な時はそのパディングなどを削除する
絵コンテ
ヘッダー フッターの要素を固定する
https://qumeru.com/magazine/193
Bootstrap 4で固定ヘッダーを実現する方法はとても簡単で、ヘッダー要素に対しclassを一つ指定して上げるだけです。
class="sticky-top"を追加してあげるだけです。
デモサンプルのようにヘッダーよりも上部に要素を追加すれば、初期表示時には表示されるけど下にスクロールしたら隠れるようにすることもできます。 もちろん、固定ヘッダーとして指定した要素はページ上部に固定された状態となります。
<div class=”sticy-top”>
</div>
htmlにphpを埋め込む＆phpをインクルードさせる
includeさせるファイルがbootstrap5でつくっており、埋め込み先がbootstrap3の場合は、表示されるけども、各種フォントなどが軒並み小さく表示された。テニスのプレミア店の告知テストでそうなったので、その時はphpでは埋め込まなかった
https://www.sejuku.net/blog/30680
↑上記の方法でhtmlにphpを動かすには下記を.htaccessに記述しないと動かない。
可能にするには、
「.htmlでもphpとして実行してね」という記述が必要です。
以下の記述を.htaccessにします。
AddType application/x-httpd-php .html .htm
htmlファイル上にphpを埋め込んで動かす方法
phpをhtmlにインクルードさせる
new-chance/building/
https://qiita.com/non0311/items/aef6b5f030dfeb517c17
https://xn--web-oi9du9bc8tgu2a.com/php-basic-function-include/
HTMLを勉強してホームページを公開してみたものの、運用についてお悩みの方もきっと多いのでは？
例えば、ページを1つ追加しただけなのに、すべてのページにリンクを貼りつけなければならないのが面倒で結局更新しなくなってしまったり、デザインを変えたいけど、すべてのページに反映させるのが面倒で、手を付けないままにしてしまったり。
1つの修正がすべてのページに及んでしまうことの億劫さはホームページを公開した多くの方が一度は頭を抱えてしまう問題だと思います。
そんな問題を解決に導くのは、『1つを変更したら、すべてのページに反映するような状態にする』こと。外部ファイル化して、各ページはそのファイルを読み込んで表示するような仕組みにすることで実現できますので、どうぞ一度お試しください。
すべてのファイルを変更するのはしんどい…解決策は『外部ファイル化』
ページを一つ追加したからサイトのメニューを更新しなきゃ!とは思ったものの、ページ数が多くて大変…。
経験がある方もいらっしゃると思います。そのような場合は、サイトのメニューを外部ファイル化しておくことで手軽に更新できるようになります。
ヘッダーやフッター、サイドバーなど、どのページでも表示させる部分のHTMLコードを外部ファイル化させて、各ページで1つのファイルを使いまわす形にすれば、そのファイルを変更するだけで、その変更内容がすべてのページに反映されます。
外部ファイル化を行う方法はいくつかありますが、『PHP』を使う方法が一般的です。
PHPを使って外部ファイルを読み込む際は次のどちらかの関数を使います。
- include
- require
PHPは“関数”という『処理をひとまとめに定義したもの』をいくつも用意してくれています。上記のinclude関数、require関数はどちらも外部ファイルを読み込む処理をします。
次のように書くことで、外部ファイルを読み込めるようになります。
<?php include(‘ファイルのパス’); ?>または
<?php require(‘ファイルのパス’); ?>
外部ファイル化してみる
下記のHTMLコードの『<!– ここから外部ファイル化する –>』から『<!– ここまで外部ファイル化する –>』までを外部ファイル化してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>これはテストページです。</h1>
</div>
<!-- ここから外部ファイル化する -->
<div id="side">
<p>ここはサイドです</p>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
<li>メニュー7</li>
<li>メニュー8</li>
<li>メニュー9</li>
</ul>
</div>
<!-- ここまで外部ファイル化する -->
<div id="main">
<p>ここはメインです</p>
<p>
テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
</p>
<p>
テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
</p>
</div>
<div id="footer">
<p>テストページでした。</p>
</div>
</div>
</body>
</html>STEP1. 使いまわしたい箇所を切り取り、別ファイルに保存する
切り取ったHTMLコードを別のファイルとして保存します。この時、拡張子は『php』で読み込むページと同じ階層に保存してください。
今回は『side.php』とします。
<!-- ここから外部ファイル化する -->
<div id="side">
<p>ここはサイドです</p>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
<li>メニュー7</li>
<li>メニュー8</li>
<li>メニュー9</li>
</ul>
</div>
<!-- ここまで外部ファイル化する -->includeさせるphpにはhead情報はinclude先のhtmlに記載があればいらない。wordpressのphpのパーツみたいに考えたらよい。いらない物記載すると表示されなくなるから。
STEP2. 切り取った箇所に外部ファイルを読み込む関数を入れ込んで保存する
先ほど切り取った箇所に外部ファイルを読み込むinclude関数を記述し、ファイルを保存します。拡張子は『php』で保存してください。
ファイル名は『index.php』とします。
※13行目に追記しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>これはテストページです。</h1>
</div>
<?php include('./side.php'); ?>
<div id="main">
<p>ここはメインです</p>
<p>
テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
</p>
<p>
テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
</p>
</div>
<div id="footer">
<p>テストページでした。</p>
</div>
</div>
</body>
</html>phpをhtmlにインクルードすると、html側の背景色が灰色になることがある。<body>タグにstyelで正しい背景色を指定してあげれば良い。
STEP3. ブラウザから『index.php』を閲覧する
PHPが動作するサーバーにアップロードし、ブラウザで閲覧すると、外部化したファイルを読み込んだ状態で表示されます。
https://berkiefer.jp/blog/tech/html-include/
html5ではmetaタグではキャッシュのコントロールができない だから.htaccess
https://teratail.com/questions/132475
<meta http-equiv=“Cache-Control” content=“no-store”>
↑これはhtml5では使えなくなってるとのこと。
下記の記事
お世話になります。
html５のheader内に
<meta http-equiv="Cache-Control" content="no-store">と入れてもキャッシュされます。
ブラウザはmetaタグを無視するのでしょうか。
よろしくお願いいたします。
HTML5ではキャッシュコントロールが無くなったようです。
【キャッシュについて整理】
https://qiita.com/anchoor/items/2dc6ab8347c940ea4648#%EF%B8%8F-htmlのmetaタグで制御
なので、.htaccessでかわりにキャッシュさせないように記述
https://lpeg.info/html/htaccess_cache.html
石浦家具にて設置
石浦のサーバーでは大丈夫なようだが、同じ記述でcm-creation.net/yoshida/new-ishiuraへ.htaccessをアップするとページを開くことができなくなったので取り下げた。
testサイトのcm-creationの方に間違ってSSLのhttpsへリダイレクトする記述を.htaccessにコピペしていたから上記のようになった。その記述外したら大丈夫になった。
<Files ~ “¥.(html|php|jpe?g|gif|png|css|js|pdf)$”>
Header add Pragma “no-cache” Header set Cache-Control no-cache
</Files>
この場合、主要なWEBサイトの構成ファイルがキャッシュされなくなります。
これはキャッシュ自体を消すのではなく、キャッシュを無効にする設定です。
そのため前回分のキャッシュが消えるまで古いデータが表示される場合があります。
http://www.ne.jp/asahi/spring/season/OtherTips/no-cache.html
蟹谷さんからのアドバイス
お世話になります。
[.htaccess]へキャッシュコントロールを記載することで可能かと思います。
https://www.softel.co.jp/blogs/tech/archives/4479
<Files ~ “\.(html|php|jpe?g|gif|png|css|js|pdf)$”>
Header add Pragma “no-cache”
Header set Cache-Control no-cache
</Files>
※全ファイルでのキャッシュを無効とする場合は「<Files>」タグを外して
Header add Pragma “no-cache”
Header set Cache-Control no-cache
とのみ記載
なおサーバー設定によっては許可されてない場合がありますがほとんどのサーバーで可能かと思います。
ブラウザにキャッシュさせない方法
クライアントからキャッシュクリアさせないとデーターが新しくならない事に不服申し立てがあった。（石浦家具）
この記事おくったからかも
https://www.kbs-web.com/solution/item/hpinfo/cash.html
キャッシュはいつ消えるの？
先述したキャッシュのクリア（削除）はあくまであなたのパソコンのキャッシュを削除したに過ぎず、他のパソコンのキャッシュを消すことはできません。
キャッシュが消えるタイミングはブラウザの設定やインターネットの利用頻度によって異なるため、いつ消えるということは一概に言えません。一定期間で消える場合もあれば、一定の容量を超えたら古いデータから消えていくなどさまざまです。
いずれにしても最近見たサイトがキャッシュとして残るため、初めての訪問者や久しぶりの訪問者にはきちんと更新されたデータが表示されます。
→この記事の後もいろいろ試したり聞いてみたが、結論から言うとキャッシュにあるデーターを削除する方法は見いだせなかった。今後キャッシュさせない方法や最新状態をリクエストする機能はあったが、アクセス時にブラウザに溜まったキャッシュをクリアして最新状態で表示方法は分からなかった。社長が石浦さんと話してブラウザのキャッシュをユーザーがクリアしないと更新が変わらない件は、そこまでやるにはシステム導入と費用がかかると話をして先方も理解し、現状維持となった。
キャッシュクリアしなくてもいいようにキャッシュ自体を封じる方法。
この方法を取る前に読み込まれてしまったものはローカルでキャッシュされているためにどうすることもできないが、（たぶんcontent=”no-store, max-age=0“でブラウザのキャッシュが強制的に再検証されるが..。）今後ページに新規でアクセスする方にはキャッシュさせない方法により常に新しい情報を見てもらえる。
↑読み込まれた過去のものはこの状態では変わらなかった。html5ではサポートされないから。
-
meta要素にno-cacheを追記する
(html5では効かないが一応)
<!–ブラウザにキャッシュさせない設定–>
<meta http-equiv=”Pragma” content=”no-cache”>
<meta http-equiv=”Cache-Control” content=”no-cache, max-age=0“>
<meta http-equiv=”Expires” content=”0″>
※max-age=0
no-store ディレクティブは、新しいリソースがキャッシュされることを防ぎますが、過去のリクエストの結果としてキャッシュ済みの古いリソースが応答するのを防ぐことはできません。 max-age=0 を設定すると、キャッシュが強制的に再検証されます（キャッシュがクリアされます）。
https://www.tagindex.com/html_tag/page/meta_pragma.html
meta要素で、文書のキャッシュを無効にすることができます。この要素はhead要素の中で使用します。
- この指定により、常に最新の情報が表示されるようになることが期待されます。
- ですが、環境によっては、この指定を行った場合でもキャッシュから読み込まれてしまうケースがあるようです。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
| 属性 | 値 | 説明 |
|---|---|---|
http-equiv="" |
Pragma |
Pragma は Cache-Control に対応していない環境向けの指定となります |
content="" |
no-cache |
キャッシュを無効にする |
| 属性 | 値 | 説明 |
|---|---|---|
http-equiv="" |
Cache-Control |
キャッシュを制御 |
content="" |
no-cache |
コンテンツに変更がある場合はキャッシュを使わない（キャッシュ自体は行われる） |
no-store |
キャッシュさせない |
Cache-Controlのno-cacheは、コンテンツに変更がある場合は最新の情報を読み込むが、変更がない場合はキャッシュから読み込む、という指定になります。
この指定がうまく機能しない場合は、同時にキャッシュの有効期限も指定してみてください。（下記使用例を参照）
使用例
同時にキャッシュの有効期限を指定した例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>文書のタイトル</title>
</head>
<body>
</body>
</html>http://www.tohoho-web.com/ex/draft/nocache.htm
<meta http-equiv=”Expires” content=”0″>
キャッシュの有効期限
設定値を0に設定すると、即有効期限切れにするため、キャッシュしていない状態とほぼ同等になる。
ただし、これに対応されていないブラウザも存在するため、確実なものではない。
この要素で指定した日時、または秒数後に、ブラウザのキャッシュから文書の情報が消去されます。
http://www.ne.jp/asahi/spring/season/OtherTips/no-cache.html
既に読み込まれてキャッシュされているコンテンツについてはどうなる？
no-store ディレクティブは、新しいリソースがキャッシュされることを防ぎますが、過去のリクエストの結果としてキャッシュ済みの古いリソースが応答するのを防ぐことはできません。 max-age=0 を設定すると、キャッシュが強制的に再検証されます（キャッシュがクリアされます）。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control
http://www.tohoho-web.com/html/meta.htm
<meta http-equiv=”Cache-Control” content=”no-store,max-age=0“>
<meta http-equiv="Cache-Control" content="s-maxage=60,max-age=120">
↑読み込まれた過去のものはこの状態では変わらなかった。
HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】
クライアントにキャッシュの削除をお願いしなくて済む方法
【実務で必須】クライアントにキャッシュの削除をお願いしなくて済む方法
URLパラメータ（GETパラメータ）を付ける
それではいよいよ本題です。
URLパラメータ・・・何やら難しそうな単語に聞こえますが、やる事は至って簡単です。
例えばcssの読み込みをするときは次のように書くと思います。
<link href="css/style.css" rel="stylesheet" />それをこのように書けばOKです。
<link href="css/style.css?ver=1.0.1" rel="stylesheet" />拡張子の後に?を付けてその後に適当にVer名や日付などを書きます。
?以降の書き方に決まりはないので、分かりやすいように書いておきましょう。
日付の場合だと次のようになります。
<link href="css/style.css?202006021" rel="stylesheet" />この数値を変えるとブラウザは別のファイルだと認識するので、キャッシュが保持されていても問題ありません。
またjsやimgタグでも同様です。
<script src="js/main.js?ver=1.0.1"></script><img src="img/profile.png?20200621" alt=""/>これでファイル名が同じままでもキャッシュを削除する必要がなくなります（更新するたびにファイル名を変えるわけにはいきませんからね）
WordPressの場合
WordPressの場合は以下のようにcssやjsをfunctions.phpから読み込んでいる人が多いと思います。
<?php
function my_script_init()
{ wp_enqueue_script( 'main', get_template_directory_uri() .'/js/main.js', array( 'jquery' ), '1.0.1', true );
wp_enqueue_style( 'style-name', get_template_directory_uri() .'/css/style.css', array(), '1.0.1' );
}
add_action('wp_enqueue_scripts', 'my_script_init');
?>この場合は拡張子の後ではなく、第4引数にある1.01がバージョン名にあたります。
更新するごとにこの数値を変えていけばOKです。
以上です。
やっている事は簡単ですがクライアントに負担をかけさせず、自分も無駄に時間を消費しないで済むのでぜひ活用しましょう。
https://note.ju-5.com/archives/80
https://taishon.nagoya/browser-cache-delete/
キャッシュバスティング CacheBusting
https://anchoco.me/html-js-cache-busting/
クエリパラメータを使う
クエリパラメータはwebサイト制作時のテクニックとなります。
例えばhtmlに以下のような画像を表示する記述があったとします。
<img src="logo.png" alt="ロゴです">画像を新しいものに差し替える場合、logo.pngの画像ファイルを上書きするだけでよいでしょうか？
答えはnoで、前述のキャッシュの仕組みがあるため、ユーザーによっては画像が変更されない可能性があります。
そこで、以下のような記述にします。画像名にクエスチョンマーク以降に文字列を追加します。
<img src="logo.png?ver1.0" alt="ロゴです">設定する文字列はなんでもよいのですが、この記述によりブラウザでは画像ファイル名が変わったとみなし、画像ファイルを新しくダウンロードしてくれるようになります。jsやcssを更新する場合、ひどいとサイトが表示されなかったり表示崩れが起きる可能性もあります。
webサイトは不特定多数がアクセスしてくるものですので、配慮したいですね。
長くなりましたが、クライアント側キャッシュの注意点でした。
https://kds-info.jp/blog/%E3%80%8C%E3%81%82%E3%80%81%E3%81%9D%E3%82%8C%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82%E3%80%8D%E3%81%A8%E3%81%AF%E3%82%82%E3%81%86%E3%82%AA%E3%82%B5%E3%83%A9/
パラメータとは？
パラメータとは､ サーバーに情報を送るためにURLに付け加える変数のことを言います｡
(変数？なんだそれ・・。)
まぁ細かいところは、今回も割愛いたしますが、
ざっくりお伝えすると、
クエッションマーク (?) をURLの末尾に付けることで、「変数(パラメータ)＝値」の形式で、
サーバーに送信するデータをURLに含めることができると覚えといてください。
キャッシュクリアの方法
実はこれ。imageだけではなくCSSやJSにも活用できます。
し か も！
やり方はかんたんです！
読み込む静的ソースのファイルパスの後に「？」と任意の文字列を追加するだけ！
百聞は一見に如かずということで、下記がソースです。
imageファイルの場合
|
1
|
<img src=“/hogehoge.jpg?20190806”>
|
CSSファイルの場合
|
1
|
<style type=“text/css” href=“css/hogehoge.css?20190806”>
|
JSファイルの場合
|
1
|
<script type=“text/javascript” src=“/js/hogehoge.js?20190806”>
|
という具合にファイル名の末に?を付けるだけで、
ブラウザに新しいファイルとして認識され、それまでキャッシュされていたリソースがクリアされます。
ちなみに、この方法は楽天などのECモールでも使えます！
(くぅーーーーッ！嬉しい！)
ちなみにこの「?」以降の文字列は実はどんなものでも大丈夫です。
「?yamada」でも「?kds」でも自分で管理しやすい任意の表記でも大丈夫です！
ただ一人で運用していくならまぁ自分がわかればいいですが、
いつ付与されたパラメータかをメンバー全員が把握する為にも私山田的には「?20190901」や「?day=20190901」みたいなわかりやすいものがオススメです！
パラメータを使うときの注意点
キャッシュを付与している状態で画像を更新すると、「あれ？また変わんない・・・。」となってしまいます。
それもそうで、画像が変わらないのはずっと前回付与したパラメータを読み込んでいるからです。
そういう時は、
[?01]→[?02]
な具合で、このパラメータの文字を変更してください
PHPを使えば、動的にパラメーターを付与することもできます。
ここでは詳しく書きませんので、気になる方は
「PHP パラメータ 付与」
で検索してみてください。
.htaccessでも設定可能
https://www.kbs-web.com/solution/item/hpinfo/nocash.html
.「.htaccess」でキャッシュを残さない設定をする
※注意
.htaccessはサーバーによっては設定・変更・設置が不可であったり、設置したことでサイトに大きな影響を与える場合があります。設定・変更・設置は自己責任でお願いいたします。
新規に設置する場合
- メモ帳などのエディタを開きます。
- 以下のコードを貼り付けます。
<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$"> Header add Pragma "no-cache" Header set Cache-Control no-cache </Files> - 名前をつけて保存からファイル名を「.htaccess」、ファイル種類を「すべてのファイル」にして保存します。
- トップページがあるフォルダへアップロードします。
既に.htaccessがある場合
- .htaccessをダウンロードします。コピーペーストしてバックアップを取っておくことをお勧めします。
- .htaccessをメモ帳などのエディタで開きます。
- 以下のコードを追加で貼り付けます。
<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$"> Header add Pragma "no-cache" Header set Cache-Control no-cache </Files> - 保存します。
- 元の場所へアップロードします。
これでほぼすべてのファイルがキャッシュされなくなります。
ただしこの設定はキャッシュを消す設定ではなく、キャッシュさせなくさせる設定です。そのためキャッシュが消えるまでは、古いデータが表示される場合があります。
コードについて
コードについて詳しく解説します。
<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>コードの2、3行目はキャッシュさせない設定です。
1行目はどのファイルに対する命令か記述します。
上記の場合ですと、html,php,jpeg,jpg,gif,png,css,js,pdfのファイルを指定しています。
例えば「画像やPDFはキャッシュさせておき、変更があれば別名でアップロードするからhtmlだけキャッシュしなければいい」という場合は以下のようになります。
<Files ~ "\.(html)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>
例えば「PHPとCSSとJSはめったに変えないから、よく変えるhtmlと画像とPDFだけキャッシュしなければいい」という場合は以下のようになります。
<Files ~ "\.(html|jpe?g|gif|png|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>※htmlやphpをキャッシュさせない指定をすると、メールフォームなどで確認画面から入力画面に戻った時に入力した項目が消えるケースがありますのでご注意ください。
サイトや運用方法に合わせた方法をとりましょう。
キャッシュの有効期限設定
https://konoti.com/website/seo/browser-cache.html
キャッシュの設定方法
サーバー側で.htaccessが設定可能な場合、ExpiresヘッダーやCache-Control ヘッダーを使って、キャッシュの有効期限を設定することができます。
Expiresヘッダーでは有効期限を年月日時で指定します。一方Cache-Controlヘッダーの場合は、日時指定ではなく、サーバーがレスポンスを受け取ってからキャッシュを削除するまでの期間を秒数で指定します。
また、.htaccessを設定せずとも、HTMLソースのhead内にmetaタグとしてcache-controlやexpireを設定することで、有効期限を設定することができます。
Chromeのデベロッパーツールでキャッシュの有効期限を調べる方法
https://www.wp-benricho.com/chrome-dev-cache/
キャッシュとは？ブラウザキャッシュのメリットと有効期限の設定方法
レイヤー重ね順 z-index 中央揃え position
https://saruwakakun.com/html-css/basic/z-index
https://cotodama.co/position-absolute-center/
ユニオンの婦中スタジオ移転のために、婦中ページに一時施行
親要素にrelative付けなくても丁度良い箇所（スタジオ情報箇所に挿入された？）
.studioOuter2 {
position: absolute;
z-index: 20;
height: 30%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class=”container”>
<div class=”row”>
<div class=”col-xs-12 studioOuter2″>
<img src=”../images/studio/toyama_fuchu/jyunbi01.png” class=”img-responsive center-block” alt=”2018冬移転オープン”/></div>
</div>
</div>
赤い箇所は画像を中央揃えさせるため。
フルスクリーンの背景画像に動画を設定
スクリプト無し、動画をページの背景いっぱいに表示する方法
レスポンシブにも対応
/**************************************************************************/
http://www.nxworld.net/tips/css-fullscreen-background-video.html
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずにCSSのみで実装する方法です。古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。
HTML
<body>
<video autoplay loop poster="img.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
</body>CSS
body {
margin: 0;
padding: 0;
background: url(img.jpg) center center fixed no-repeat;
}
video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}フルスクリーンで表示されるように幅と高さを指定したvideo要素をposition: fixedで配置し、body要素には一応IE8などの非対応ブラウザ用に背景画像を指定しておくというものになります。
（非対応ブラウザは完全に無視ということであればbody要素への記述は必要ありません）
先述したようにほぼ全てのブラウザで同じように表示させたい場合はスクリプトを使って実装することにはなると思いますが、モダンブラウザであればこのようにCSSのみで簡単に実装することができます。
実際の動きは以下で確認できます。
ipad iphoneなどのタッチデバイスでscrollが効かない時
http://ochien.seesaa.net/article/357081256.html
-webkit-overflow-scrolling: touch がきかない場合
以前は iOS 系では「スクロールは2本指でできます」とか「iScroll を使いましょう」というのが定番でしたが、-webkit-overflow-scrolling: touch が登場してくれたおかげで、
.scroll {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
という感じで CSS を書くだけで、1本指で、しかも慣性スクロールできるようになりました。
かなり楽な世の中になりました。
ちなみに Android でも Android 4.0.4 Safari/534.30 であれば、-webkit-overflow-scrolling: touch が動作しました。
が、scroll をつける div などの高さを設定しておかないとスクロールバーが表示されず、スクロールできませんでした。
Android でも -webkit-overflow-scrolling: touch を使いたいのにうまく動作しないという場合は、scroll させたい領域の高さを指定してみることをおすすめします
web上でzipファイルなどダウンロードさせるには
ページに余分なbodyの余白の背景色が入る min-width
藤田運送でwidth:100%にしている箇所の背景色が一部分bodyの背景色になっている。ウィンドウを狭めるとどんどんその領域がデカくなる。
親要素に100%は依存するためらしい。
min-width:
幅100%による弊害
実際にやってみて分かることは、幅100%の親要素がどこかが大切ということ。今回、水色のブロックの親要素はbodyでした。つまり、ウィンドウ幅500pxの時の横スクロールバーをずらせば、bodyも500px、その子である水色のエリアも幅500pxということです。スクロールバーを横に動かしても、ウィンドウ幅が500pxであれば幅100%の値も500pxなので、今回のように背景が途中で見切れてしまう、という現象が起きるんですね。
この症状の対処法は？
解決方法はいたって簡単で、幅100%のブロックに「min-width」を指定してあげるだけ。例えば、今回の場合は内包ブロック720px以下にならなければいいので、以下のようにすればウィンドウ幅を狭めても720px未満にはなりません。
#wrap {
width:100%;
min-width:720px;}
hタグとimg seo
そもそもhtmlの文法って本当に意味あるのかな？
コーディングする上での決まりごとって意味ではあるけど、タグとseoは関係ないというのが公式見解だし。(text-indentの悪用とかペナルティ受けるようなのは除く)
なんとなくテキストの方が良いみたいな雰囲気があった時代もありますが、今は問題ないかと思います。
IE11でレスポンシブされないって思ったけど
ローカル環境での動作確認は不可
HTTP接続によって閲覧しないとこのJSは動作しない 以上の条件下による制約はありますが、CSS3 Media Queries.jsとRespond.jsの組み合わせによりIE8以下にもレスポンシブが対応できますが、あまり意味はないかも・・・。
IEはローカル環境ではcss3をつかさどっているMedia Queriesが働かずレイアウトされないが、HTTP接続してサーバー下では作動される。
ビビった。
windows7はIEは9まで
windows7はIEは9までしかいれれない。10とか、11とかいれても、windows7ではブラウザとの相性でhtml5を上手く互換できない。ＯＳ自体のプラットフォームに依存しているのかも
あやまってバージョンあげた時は
html5のアンカーについて
topページのデザインが、昔のデザインへもどってしまった
松田工務店のトップが突然以前のテストデザインへもどってしまった。っと思い、テーマファイルの上書きをしたり、googleのキャッシュを削除依頼したが変わらない。なんてことはなかった、ルート下に、テスト用のindex.htmlがアップされていてdomainはそれを読みにいっていた。紛らわしいのでローカルからもindex.htmlは削除
茶谷さんいわく、削除しても表示されるのはどこかに読みに行っているファイルがあるから。その通りだった。
IEだけレイアウト崩れる。padding問題
http://www.nishishi.com/blog/2006/02/ie_padding.html
http://hinannjo.web.fc2.com/data/laboratory/bug001.html
widthとpadding/borderを一緒に指定しない
というわけで回避方法2。
ボックスを2つ用意して、外側のボックスにwidthを、内側のボックスにpadding/borderを指定するやり方。
XHTML
1.<div class="c1">2.<div class="c2">3.この岸辺露伴が最も好きな事のひとつは、自分で強いと思ってるやつに「NO」と断ってやる事だ・・・4.</div>5.</div>css
1.div.c1 {2.width: 310px;3.}4.div.c2 {5.padding: 20px;6.border: 10px #fff solid;7.}外側のボックス（div.c1）に全体の幅であるwidth:310pxだけを指定して、paddingとborderは指定しない。
そして内側のボックスにpadding:20pxとborder:10px #fff solidを指定する。
余白の部分をpaddingじゃなくてmarginにすると、marginの相殺が起きたりするのでpaddingの方が無難。
こんな感じにwidthとpadding/borderを一緒に指定しないようにすれば、標準モードでも互換モードでもボックス全体の幅が310px、本文の範囲が250pxと見てくれが同じになる。
しかもxml宣言も書けるし、IE6が後方互換モードになろうがそんなこと気にしなくてもいいという。
cssハックでIE6にだけ別のスタイル当てようとしてる人や、仕方なくxml宣言スルーしてたxhtml使いの人はこの方法マジオススメ。
ダメといいますか、h1にはSEO的にもテキストが最適なのでimgは控えるべきだと言われまして、imgを入れようとしていたのでどうしようかと思っていた所でした。文法的に問題ないのですね、imgといっても会社のロゴ等なので安心して配置できそうです！