カテゴリー: CSS3
CSS変数 カスタムプロパティ
DreamWeaverでは対応してにない?
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11274026986
css上で使う変数のこと。sassのとちょっと違う。sassつかうなら不要だが、sass使わないで変数使いたいならカスタムプロパティで。
使いすぎると逆に複雑になるから制限して使う。
基本は全体に使うなら:root {}で。
変数名はルールを決めて使う
変数定義時
–変数名: 値:
変数呼び出すとき
プロパティ: var(–変数名);
css全体で変数を使うなら
:root{
変数
}
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> ← この箇所。
印刷用css
スクロールに連動したcssアニメーション
https://coco-factory.jp/ugokuweb/jscss/
ここwa
各アニメーションが適応されるクラス名はsample-anime.htmlからコピペ
パッケージとしてd/webコンテンツツール/cssAnimetion/に保存
<!--cssアニメーション用-->
<script type="text/javascript" src="../cssAnimetion/sample-anime.js"></script>
<link rel="stylesheet" href="../cssAnimetion/sample-anime.css">
<div class=" col-lg-6 mb-5">
<section class="item-section">
<div class="itemBox fadeLeftTrigger">
<h2 id="anchor-parent" class="col-12 text-center mb-1 boxTitle">ペアレントトレーニング</h2>
<div class="row">
<div class="col-xl-4 mb-3">
<img src="../image/service/item1.jpg" class="img-fluid mx-auto" alt=""/>
</div>
<div class="col-xl-8 ">
説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明
</div>
</div>
</div>
</section>
</div>
CSSアニメーション
コピペでOK↓
https://b-risk.jp/blog/2021/01/anim-reference/
画像のようにhtmlには適応できないので、backgroud-imageにしてその要素に適応させる
ページ内のアンカー位置がずれる
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;
}
入れる要素にマージントップやパディングトップがそもそも初めから設定していると余計なスペースを作ってしまうので変な時はそのパディングなどを削除する
グリッドレイアウト 横並びレイアウトはFlexboxで解決!
CSSアニメーション ループ背景画像
パララックス プラグイン Rellax.js
bootstrapと parallax
work/test-parallax/
※ブラウザ確認の際は、パララックスがスクロールできるだけの高さをhtml側のコンテンツに必要。コンテンツの高さがブラウザの高さ以上でなければスクロールされないからパララックスの確認もできないので注意。
パスが上手く通らない場合は下記で。
<head>
<!--パララックス-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<div class="container-fluid px-0">
<div class="row">
<div class="col-12 para01" data-parallax="scroll" data-image-src="../image/flow/item11.jpg"></div>
</div>
</div>
高さはCSSファイルを用いて指定
https://qumeru.com/magazine/238
D/webコンテンツツール/parallax/
ダウンロードしたら、BootstrapにおいてJSなどの読み込みをしているscript属性の一番下にこのファイルを追記しておきます。
<script src="各々のパス/parallax.js-1.5.0/parallax.min.js"></script>
Bootstrapを使用する時点でjQueryは読み込んでいると思うので、改めて記述する必要はありません。もし読み込んでいない場合はjQueryも読み込んでおきます。
パララックスのプラグインとjQueryをDLする
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="各々のパス/to/parallax.min.js"></script>
Bootstrapでパララックスを作成する
あとは簡単で、パララックスの機能をつけたい要素にdata-parallax="scroll"
という属性を追加し、data-image-src
という属性に背景画像のURLを設定するだけで、パララックスを作成することができます。
パララックスを適用させる
<div data-parallax="scroll" data-image-src="背景画像のURL">
高さはCSSファイルを用いて指定するなど、やり方は自由です。
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!--Font Awesome-->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<title>サンプルコード</title>
</head>
<body>
<div class="parallax-window text-center" data-parallax="scroll" style="height:400px; color:white;" data-image-src="https://qumeru-media-preview.s3-ap-northeast-1.amazonaws.com/preview/Bootstrap/238/river-5765785_1920.jpg"><h1>パララックス</h1></div>
<div class="text-center" style="height:400px; background-color: black;color:white;"><h1>パララックスではない</h1></div>
<div class="parallax-window text-center" data-parallax="scroll" style="height:400px; color:white;" data-image-src="https://qumeru-media-preview.s3-ap-northeast-1.amazonaws.com/preview/Bootstrap/238/sea-164989_1280.jpg"><h1>パララックス</h1></div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</body>
</html>
レスポンシブ対応について
パララックスはスマホとの相性は良くなく、スマホではOFFにすることが多いです。
このプラグインではスマホ(iOS、Android)の場合、デフォルトで背景画像を固定にする設定になっています。
もしこれをONにしたい場合は、iosFix
属性とandroidFix
属性をfalse
に設定します。
上記の箇所のparallax.jsを編集するとスマホで映らなくなる。また、PCブラウザのデベロッパーツールのスマホではパララックスは作動しているが、スマホ実機ではスクロールしなかった。
ヘッダー フッターの要素を固定する
https://qumeru.com/magazine/193
Bootstrap 4で固定ヘッダーを実現する方法はとても簡単で、ヘッダー要素に対しclassを一つ指定して上げるだけです。
class="sticky-top"
を追加してあげるだけです。
デモサンプルのようにヘッダーよりも上部に要素を追加すれば、初期表示時には表示されるけど下にスクロールしたら隠れるようにすることもできます。 もちろん、固定ヘッダーとして指定した要素はページ上部に固定された状態となります。
<div class=”sticy-top”>
</div>
IE display:flex; がおかしい
IEではdisplay:flex;はレイアウト崩れる
下記記述
display: -moz-flex: // firefox
display: -webkit-flex; //Android2.3~,Chrome,Safari等
display: -ms-flexbox; //IE9~用
display: flex; //最新のブラウザ向け
あと、IEではimgタグの中にwidthとheightが記述されていないと画像が引き延ばされておかしくなるので記述すること。
画像を縦横中央に配置したかった時の記述
display:-ms-flexbox;
display: flex;
display: -moz-flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
【Web制作】IE11でFlexboxが横並びにならなくてハマる – さくらいらぼ /個人ブログ (webhoric.com)
mx-auto 中央寄せ
https://qiita.com/Fendo181/items/1f32cbbfa676766ae331
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
上のコードはCSSで記述すると
.mx-auto {
width: 200px;
margin: 0 auto;
}
コンベアスライドショー CSSのみで実装
サンエツカラミー
html
<!--バナーエリア-->
<div class="container-fluid">
<div class="row mb-md-5 justify-content-center">
<div class="col-xl-8 bnrArea1">
<div class="row">
<!--コンベアスライドショー1-->
<div class="xslider_wrap" ontouchstart="">
<div class="xslider1">
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=1"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/catalog.png" class="img-fluid mx-auto w-100" alt="カタログギフト"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=2"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/toyamafood.png" class="img-fluid mx-auto w-100" alt="富山の食品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=3"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/food.png" class="img-fluid mx-auto w-100" alt="食品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=4"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/towel.png" class="img-fluid mx-auto w-100" alt="タオル・繊維"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=5"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/origin.png" class="img-fluid mx-auto w-100" alt="サンエツオリジナル品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=6"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/baby.png" class="img-fluid mx-auto w-100" alt="ベビー用品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=7"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/soap.png" class="img-fluid mx-auto w-100" alt="ソープ・石鹸・洗剤"/></a></div>
</div><!-- xslider1 -->
<div class="xslider2">
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=1"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/catalog.png" class="img-fluid mx-auto w-100" alt="カタログギフト"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=2"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/toyamafood.png" class="img-fluid mx-auto w-100" alt="富山の食品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=3"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/food.png" class="img-fluid mx-auto w-100" alt="食品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=4"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/towel.png" class="img-fluid mx-auto w-100" alt="タオル・繊維"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=5"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/origin.png" class="img-fluid mx-auto w-100" alt="サンエツオリジナル品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=6"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/baby.png" class="img-fluid mx-auto w-100" alt="ベビー用品"/></a></div>
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=7"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/soap.png" class="img-fluid mx-auto w-100" alt="ソープ・石鹸・洗剤"/></a></div>
</div><!-- xslider2 -->
</div><!-- xslider_wrap -->
<!--コンベアスライドショー1終了-->
</div>
css
.xslider_wrap {
display: flex;
overflow: hidden;
width: 100%;
background: #cee5f2;
border: 1px solid #CCCCCC;
}
.xslider1 , .xslider2 {
display: inline-flex;
flex: none;
animation: xslider 30s 2s linear infinite;
}
.xslider_wrap:hover div {
animation-play-state: paused!important;
}
.xslider1 div , .xslider2 div {
flex: none;
padding: 10px;
}
.xslider1 div:hover , .xslider2 div:hover {
transform: translateY(-5px);
}
@keyframes xslider {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
参照元
コンベア的な動きをするカルーセル(スライドショー、スライダーともいう)の作り方を下記に載せます。
HTMLとCSSのみで作成でき、自動で動きます。それぞれのアイテムにリンクを貼ることもできます。
Chrome、Edge、Firefoxで動作確認済みです。注意画像の遅延読み込みをしていると挙動があやしくなる可能性があります。
目次 [表示]
HTML
<div class=”xslider_wrap” ontouchstart=””> | |
<div class=”xslider1“> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
</div><!– xslider1 –> | |
<div class=”xslider2“> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
<div><a href=””><img src=””></a></div> | |
</div><!– xslider2 –> | |
</div><!– xslider_wrap –> |
view raw.html hosted with ❤ by GitHub
構造
xslider_wrapxslider1xslider2
「xslider_wrap」という名前のdivの上に、「xslider1」と「xslider2」という2つのdivを載せて動かしています。
2つのdivを同時に動かすことにより、すきまなくアイテムが流れているように見せることができます。
個別のアイテムは「xslider1」「xslider2」に載せていきます(これも各々をdivで括ります)。
xslider1アイテム1アイテム2アイテム3
注意点
- 1行目に「ontouchstart=””」という記述がありますが、これはスマホでアイテムをタッチした時に、パソコンでマウスホバーした時の動きを適用させるというものです。
- 「xslider1」と「xslider2」に載せるアイテムの内容は、必ずしも同一でなくとも大丈夫ですが、「xslider1」と「xslider2」の幅を同じにする必要があるので、できれば同一の内容の方が望ましいです。
- 「xslider1」と「xslider2」、それぞれに載せるアイテム数は、各アイテムの幅にもよりますが、5~7個くらいが最適なようです(「xslider1」が「xslider_wrap」から少しはみ出るくらい)。アイテム数が少なすぎても多すぎても、すきまができたりアイテムが重なったりする可能性があります。
- アイテムを増やす時は、
<div><a href=""><img src=""></a></div>
の数を増やしてください。
CSS
.xslider_wrap { | |
display: flex; | |
overflow: hidden; | |
width: 100%; | |
background: #e2ffc4; | |
box-shadow: 0 2px 5px #999; | |
} | |
.xslider1 , .xslider2 { | |
display: inline-flex; | |
flex: none; | |
animation: xslider 30s 2s linear infinite; | |
} | |
.xslider_wrap:hover div { | |
animation-play-state: paused!important; | |
} | |
.xslider1 div , .xslider2 div { | |
flex: none; | |
padding: 10px; | |
} | |
.xslider1 div:hover , .xslider2 div:hover { | |
transform: translateY(-5px); | |
} | |
@keyframes xslider { | |
0% { | |
transform: translateX(0); | |
} | |
100% { | |
transform: translateX(-100%); | |
} | |
} |
view raw.css hosted with ❤ by GitHub
1~7行目
「xslider_wrap」(外枠)のスタイルです。
4行目「width」で横幅、
5行目「background」で背景色、
6行目「box-shadow」で影
の指定をしています。お好みで変更、削除ができます。
9~13行目
「xslider1」と「xslider2」のスタイルです。12行目の「30s」という部分でスライドの速度を変更できます。数字を大きくすると速くなり、小さくすると遅くなります。アイテム数により早く感じたり遅く感じたりすると思いますので、適宜変更してください。
また、その横の「2s」という部分で、スライダーの開始時間を2秒遅らせています(初動を安定させるため)。この数字を大きくすると開始がますます遅くなり、小さくすると少し早まります。
アイテム数が多く、初動が安定しない場合、これをもっと遅らせると安定するかもしれません(その場合、なるべくWebサイトの下部に設置した方がよさそうです)。
余談1:「display:inline-flex;」について
display:inline-flex;アイテム1アイテム2アイテム3
display:flex;アイテム1アイテム2アイテム3
「xslider1」と「xslider2」に「display:inline-flex;」をつけています。
「display:inline-flex;」は、「display:inline-flex;」をつけた要素自体の幅を、その中身の幅にしてくれるようです。
「display:flex;」だとブロック要素になるので、中身が少なくても「width:100%;」になります。
「xslider1」「xslider2」の各幅が「width:100%」より大きければ「flex」でも問題なさそうなのですが、念のため「display:inline-flex;」の方を採用しました。
余談2:「flex: none;」について
このスライダーを作り始めた時に、「xslider1」と「xslider2」が重なる現象が起き悩まされたのですが、それを解決してくれたのが11行目の「flex: none;」です。
15~17行目
「xslider_wrap」をhoverするとスライダーが一時停止します。
19~22行目
アイテムを入れるdivのスタイルです。21行目「padding: 10px;」で各アイテムの間隔を調整できます。数字を大きくすると間隔が広くなり、小さくすると狭くなります。
余談:再度登場の「flex: none;」について
20行目、またしても「flex: none;」が登場します。こちらにも入れておかないと、アイテム画像がとても小さく表示されてしまいます。
画像が小さくなるのを直すだけなら「flex-shrink:0;」でもいいのですが、flexプロパティでいっぺんに指定した方がいいようなので「flex: none;」としました。
24~26行目
アイテムをホバーした時に、5px分上にピョコっと移動します。数字を大きくすると更に上に移動します。
下に下げたい場合は正数にしてください。
28~35行目
要素を動かす記述です。「xslider」という名前をつけて、それを「xslider1」と「xslider2」に適用しています。それぞれが「横軸0(その要素の始まりの位置)から-100%(その要素の幅分左側に動かした位置)まで動く」ということを表しています。
0%の記述はいらないような気もしたのですが、同じような質問を見つけ、念のため入れた方がいいよ、的な回答がついていたので入れることにしました。
あとがき
これを作るまでは、jQueryで作ったスライダーを使っていたのですが、WordPressの読み込みのタイミングのせいなのかなんなのか、たまに表示されない時があって気になっていました。時代的にも「脱jQuery」の流れのようなので、今回CSSのみで動くスライダーに挑戦してみました。
今の時代、CSSでここまでできるのかとビックリ、そして勉強になりました。ありがたい時代になったものですねェ。追記Jetpackの「画像の遅延読み込み」を無効にした所、jQueryのスライダーの調子も良くなりました。「画像の遅延読み込み」はスライダーと相性が悪いのかも……?
関連記事:別のタイプのスライドショー
横スライドショー(jQuery)
こちらはjQueryを使った横スライドショーです。
【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】
ドロップシャドー 下だけ
wordpressのレスポンシブの画像が縦長に伸びる
なぜか急に石浦家具のishiura-caseでそうなった。
img要素のwidthとheightをautoにしたら治った。
.mainContent img{width:auto;
height: auto;}
テキストの横に縦ボーダーを入れた時にテキストとボーダーを同じ高さにしたい時
line-height: 100%;
cssでのカーニング
font-weightをbolderよりさらに太くするには
https://qiita.com/RyoTa0222/items/e0cb8d55519af2ffeb79
石浦家具のトップページのPRODUCTの部分
color: black; -webkit-text-stroke: 2px black;