−CSS小技一覧−
円形で文字上下左右中央に配置
<div id="menu_link">
<ul>
<li><a href="https://endive-kyoto.com/" class="click-btn">こだわり</a></li>
<li><a href="https://endive-kyoto.com/#menu2" class="click-btn">髪質再生</a></li>
<li><a href="https://endive-kyoto.com/#menu3" class="click-btn">お客様の声</a></li>
</ul>
</div>
/*右に固定*/
#menu_link{
position:fixed;
right:0;
top:50%;
margin-top:-200px;
padding-right:10px;
z-index:10;
}
/*円形*/
#menu_link ul{
list-style:none;
}
#menu_link ul li{
background-color:#a28177;
width: 100px;
height: 100px;
padding: 0;
margin: 0 0 10px 0;
line-height: 100px;
text-align: center;
border-radius: 50%;
}
#menu_link a{text-decoration:none; display:block;}
#menu_link a:link{color:#FFFFFF;}
#menu_link a:visited{color:#FFFFFF;}
#menu_link a:hover{color:#FFFFFF;}
#menu_link a:active{color:#FFFFFF;}
youtube中央配置画面設定
【 CSS 】
/*++++++++++++++++++++++++++++++++++++++++++
動画を中央配置に
++++++++++++++++++++++++++++++++++++++++++++*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
<div class="youtube">
(ここに動画埋め込みコード)
</div>
全画面表示
/*――――――――――――――――――
画面幅を100%
―――――――――――――――――――*/
.full-width{
width: 100vw;/*画面100%vwはブラウザ表示幅の単位*/
position: relative;
left: 50%;
transform: translateX(-50%);
}
.full-width iframe, .fluid-box img{max-width:100%;}
.fluid-box{
width:70vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.full-widthで全画面にしたものに、画像を中央に配置
.box {
display: flex; /* 要素をflexboxに対応させる */
align-items: center; /* 縦方向の中央揃え */
justify-content: center; /* 横方向の中央揃え */
flex-direction: column; /* 子要素の並びを上から下にする（要素の改行に対応） */
}
スマホとかスプレックス対応
.box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
ビデオ画面設定
<video src="DOES-9elements5.mp4" autoplay muted loop playsinline poster="moive.jpg"></video>
videoタグはインラインなので 中央には text-align:center; で行ける
controls --- コントロールバー
playsinline autoplay muted --- セット指定
loop --- ループ
/*ビデオ*/
video{
width:670px;
max-width:100%;
height:auto;
}
ボックスのはみだし
ボックスから英数字がはみ出してしまう場合、はみ出した部分を見えなくする。
リンクには影響しないので大丈夫！
【 CSS 】
overflow:hidden;
word-wrap:break-all;
これだと折り返しにならなかった！
全画面表示
/*――――――――――――――――――
画面幅を100%
―――――――――――――――――――*/
.full-width{
width: 100vw;/*画面100%vwはブラウザ表示幅の単位*/
position: relative;
left: 50%;
transform: translateX(-50%);
}
.full-width iframe, .fluid-box img{max-width:100%;}
.fluid-box{
width:70vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
指定幅を超えて全画面表示
【 CSS 】
.full-width{
margin: 0 calc(50% - 50vw)!important;
width: 100vw!important;
}
もしくは
.full-width{
width: 100vw!important;/*画面100%vwはブラウザ表示幅の単位*/
position: relative!important;
left: 50%!important;
transform: translateX(-50%)!important;
}
全画面の画像を中央表示
【 CSS 】
.settop{
position: absolute;
left: 50%;
margin-left: -（センターに置きたい要素の横幅 / 2）px; 画像のサイズ半分を指定 前にマイナスをつける。
}
.top{padding-top:200px;}
画像が絶対配置なので、その分、ボックスが詰まってしまうので、paddingで調整。
文末をそろえる
【 CSS 】
text-align: justify;
text-justify: inter-ideograph;
文章の強調
最初の一行目だけスタイルを適用させる。 p:first-line
赤い太陽、青い空。雲は一つもなくて、虹色に輝いている大空にバンザイ！。
そしてここから２行目になります。
【 CSS 】
#style01 p:first-line{
font-weight:bold;
color:red;
}
※最初のh2タグだけ適用！これ便利！！
section h2:first-child, section h1:first-child{margin-top:0px!important;}/*最初のh2タグだけ適用*/
最初の一文字だけスタイルを適用させる。 p:first-letter
赤い太陽、青い空。雲は一つもなくて、虹色に輝いている大空にバンザイ！。
そしてここから２行目になります。
【 HTML 】
<p class="style02">赤い太陽、青い空。雲は一つもなくて、虹色に輝いている大空にバンザイ！。</p>
【 CSS 】
p.style02:first-letter{font-size:32px; line-height:130%;}
pタグをDIVで囲んで使うと、IE6-7ではフォントを大きくするのが適用されない。最初の1文字を太字や色を変更するだけなら、DIV要素でいける。
文章の最初の一文字を下げる。 text-indent:1em;
赤い太陽、青い空。雲は一つもなくて、虹色に輝いている大空にバンザイ！。
そしてここから２行目になります。
【 CSS 】
#style03 p{text-indent:1em;}
2行目以降の文字を1文字下げる。 text-indent:-1em;
※赤い太陽、青い空。雲は一つもなくて、虹色に輝いている大空にバンザイ！。
そしてここから２行目になります。
じゃあ、３行目はどうなのかな？？
【 CSS 】
#style04 p{text-indent:-1em; padding-left:1em;}
text-indent:-1em;だけだと、最初の一文字が左側にマイナス1移動してしまうので、
他のテキストと始まりの位置を同じにする為に、padding-left:1em;入れてあげる。
E > F （子要素にのみ適用）
これは例えばヘッダのかわりになります。
フォントの太さ
9種類用意されています。boldは一般的な700と同じサイズになる。標準は400
この太さはboldです
この太さは700です
この太さは900一番太いサイズです
下線・上線・取り消し線・点滅 text-decoration
pタグすべての行にラインを引ける。また、DIV要素全てにもＯＫ。spanもいける。
★取り消し線：
.textnon{text-decoration:line-through;}
★アンダーライン：
.textborder{text-decoration:underline;}
BOXの高さの調整
1旅行体験日記
朝起きたら障子がオッこってきてマジびびったよ。 怪我しなかったけどね。
2会社概要
平成20年2月に株式会社に登録。 年商1億円を目指し、地域の皆様のお役に立てる会社へと成長していきたいと思っております。
3春日記
替え歌がはやっているのか、かわいらしい歌が何故か、もの悲しい歌に変わってる・・・・。 聞いていて大爆笑しました。 あと、やはり良く歌っているのはアンパンマン。・・・どこまでもどこまでも大好きなぁーアンパンマン（笑）
4雑記
ここまで書いたけど、どうだりろうか？
overflow:hidden; と
padding-bottom:1000px
margin-bottom-1000px; をいれてあげると、BOXの高さが揃う
1000の数値はどのくらいでもＯＫ
【 HTML 】
<div id="box">
<div class="contents1">
<p></p>
</div>
<div class="contents2">
<p></p>
</div>
<div class="contents3">
<p></p>
</div>
<div class="contents4">
<p></p>
</div>
</div>
【 CSS 】
#box{
width:900px;
overflow:hidden;
}
#box .contents1{
width:200px;
float:left;
background-color:#666666;
margin-bottom:-1000px;
padding:10px 10px 1000px 10px;
margin-right:10px;
}
#box .contents2{
width:200px;
float:left;
background-color:#999999;
padding:10px 10px 1000px 10px;
margin-bottom:-1000px;
margin-right:10px;
}
#box .contents3{
width:200px;
float:left;
background-color:#FFFF00;
padding:10px 10px 1000px 10px;
margin-bottom:-1000px;
margin-right:10px;
}
#box .contents4{
width:200px;
float:left;
background-color:#FF6666;
padding:10px 10px 1000px 10px;
margin-bottom:-1000px;
}
残念ながら、borderは引けない。下がみえないだけで、1000pxあるから。
リストの均等横並び
参考ページ1http://www.webdesign-fan.com/css3-matome
参考ページ2http://cappee.net/coding/displey-table-cell
【 HTML 】
<div id="catch">
<ul>
<li><img src="image/sample/float01.jpg" width="200" height="200" alt="サンプル" /></li>
<li><img src="image/sample/float02.jpg" width="200" height="200" alt="サンプル" /></li>
<li><img src="image/sample/float03.jpg" width="200" height="200" alt="サンプル" /></li>
</ul>
</div>
【 CSS 】
.catch{
background-image: url(http://yakiniku-kureya.com/wp-content/themes/kureya/img/tenpo.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.catch ul{
display:table;
width:100%;
padding:0px 20px 20px 20px;
margin-left:20px;
}
.catch ul li{
display:table-cell;
}
横並びブロックのマージンを調節
ボタンやリンクメニューなんかに大変良いかも！
【 HTML 】
<div id="float_css">
<ul>
<li><img src="image/sample/float01.jpg" width="200" height="200" alt="サンプル" /></li>
<li><img src="image/sample/float02.jpg" width="200" height="200" alt="サンプル" /></li>
<li><img src="image/sample/float03.jpg" width="200" height="200" alt="サンプル" /></li>
</ul>
</div>
【 CSS 】
#float_css{
width:620px;
border:2px solid #00561F;
background-color:#B28850;
}
#float_css ul {
width: 630px;
margin-right:-10px;
margin-left:-40px;#BOXの中で中央になってしまうので、左に寄せて調節してあげる
overflow: hidden;
_zoom:1;
list-style-type:none;
}
#float_css li{
float:left;
margin-right:10px;
}
HRの背景指定
ただの罫線↓
スタイルシートで適用
【 CSS 】
#styleHR hr{
background-image:url(image/sample/hr-border.gif);
height:20px;
border:0;
}
画像の下に文字を回り込ませない
これ使えるかも！
今までテーブルで組み込んでたのが、あら、簡単。スタイルシートで指定出来るなら最高！！ なんか今日だけで随分、デザインの幅が広がったな〜。すごいよ！
画像の大きさに合わせてpaddingを調整すると良い。
padding:0px 0px 0px 210px; 左に（画像が左にあるので）画像のwidthより10px大きいサイズを指定。
position:absolute; で画像の位置を指定。topとleftで、基準の位置からそのくらい動かすかを指定出来る。
とりあえず、基準位置から動かさずに 0 0 を指定しておく。
これ使えるかも！
今までテーブルで組み込んでたのが、あら、簡単。スタイルシートで指定出来るなら最高！！ なんか今日だけで随分、デザインの幅が広がったな〜。すごいよ！
画像の大きさに合わせてpaddingを調整すると良い。
padding:0px 0px 0px 210px; 左に（画像が左にあるので）画像のwidthより10px大きいサイズを指定。
position:absolute; で画像の位置を指定。topとleftで、基準の位置からそのくらい動かすかを指定出来る。
とりあえず、基準位置から動かさずに 0 0 を指定しておく。
【 CSS 】
画像左固定
#float_imageL{
width:400px;
padding:0px 0px 0px 210px;
position: relative;
}
#float_imageL img{
position:absolute;
left:0px;
top: 0px;
}
画像右固定
#float_imageR{
width:400px;
padding:0px 0px 0px 0px;
position: relative;
}
#float_imageR img{
position:absolute;
left:410px;
top: 0px;
}
