直接div内に↑のように alian="center"と記載することでもいけるが
あくまでこういうのは、CSS内で指定するのが正しいため
*/
}
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #799dec;
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.6;
text-decoration: none;
text-align: center;
transition: .2s;
box-sizing: border-box;
}
.btn a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 25px;
width: 9px;
height: 9px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
transition: .2s;
box-sizing: border-box;
}
/* ホバー時のスタイル */
.btn-press a {
box-shadow: 0 10px 10px -5px rgba(0,0,0,0.25);
transform: translateY(-4px);
}
.btn-press a:hover {
box-shadow: none;
transform: translateY(0);
}
/* 光のスタイル */
.btn-flash a {
overflow: hidden;
}
.btn-flash a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
transition: .5s;
}
/* ホバー時のスタイル */
.btn-flash a:hover::before {
top: 0;
left: 100%;
}
/* ホバー時のスタイル */
.btn-scale a:hover {
border-radius: 8px;
transform: scale(0.95);
}
/* HTML・CSSでつくるおしゃれなボタンのデザイン35選
https://pote-chil.com/css-stock/ja/button */
.hb-nami {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 250px;
margin:0 auto;
padding: .9em 2em;
border: 1px solid #2589d0;
border-radius: 5px;
background-color: #fff;
color: #2589d0;
font-size: 1em;
}
.hb-nami:hover {
animation: anima-button-30 1s;
}
@keyframes anima-button-30 {
0% {
box-shadow: 0 0 0 0 rgb(37 137 208 / 50%);
}
100% {
box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
}
}
/* スペシャルサンクス、クリックで要素の表示非表示を切り替えるHTML+CSS https://0edition.net/archives/3555 */
.hidden_box {
margin: 10px 0;
padding: 0;
text-align: left;
}
.hidden_box label {
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin: 0 auto;
padding: 10px;
min-width: 50%;
}
.hidden_box label:hover {
background: #f5f5f5;
}
.hidden_box label:after {
content: "を表示"; /* 閉じている状態のときにラベルの後ろに続く文字 */
}
.hidden_box input {
display: none;
}
.hidden_box .hidden_show {
height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
text-align: left;
transition: 0.5s;
}
.hidden_box input:checked + label:after {
content: "を非表示"; /* 開いている状態のときにラベルの後ろに続く文字 */
}
.hidden_box input:checked ~ .hidden_show {
height: auto;
opacity: 1;
padding: 10px 0;
}
/* メモ・チェック・アイコン 3点ボックスセット https://pote-chil.com/css-stock/ja/box
------------------------------------- */
/* メモアイコン小 */
.box-memos {
display: flex;
grid-gap: 0 .7em;
margin: 0 auto;
padding: 1em;
border-radius: 5px;
background-color: #fff9e5;
color: #333333;
}
.box-memos::before {
width: 24px;
height: 24px;
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ffb36b'%3E%3C/path%3E%3C/svg%3E");
}
.box-memos p {
margin: 0;
padding: 0 0 0 .7em;
border-left: 1px solid #ffb36b;
}
/* メモアイコン大 */
.box-memob {
max-width: 500px;
margin: 0 auto;
border: 2px solid #ffb36b;
border-radius: 5px;
color: #333333;
}
.box-memob div {
display: inline-flex;
align-items: center;
column-gap: 4px;
position: relative;
top: -13px;
left: 10px;
margin: 0 7px;
padding: 0 5px;
background: #fff;
color: #ffb36b;
font-weight: 600;
vertical-align: top;
}
.box-memob div::before {
width: 22px;
height: 22px;
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ffb36b'%3E%3C/path%3E%3C/svg%3E");
}
.box-memob p {
margin-left: 15px;margin-right:15px;
padding:0 0.5em .1em;
}
/* チェックアイコン小
------------------------------------- */
.box-checks {
display: flex;
align-items: center;
grid-gap: 0 .7em;
margin: 0 auto;
padding: 1em;
border-radius: 5px;
background-color: #ecffe9;
color: #333333;
}
.box-checks::before {
width: 16px;
height: 8px;
border-bottom: 3px solid #86d67c;
border-left: 3px solid #86d67c;
transform: rotate(-45deg) translate(2.5px, -2.5px);
content: '';
}
.box-checks p {
margin: 0;
padding: 0 0 0 .7em;
border-left: 1px solid #86d67c;
}
/* チェックアイコン大
------------------------------------- */
.box-checkb {
max-width: 500px;
margin: 0 auto;
border: 2px solid #86d67c;
border-radius: 5px;
color: #333333;
}
.box-checkb div {
display: inline-flex;
align-items: center;
column-gap: 4px;
position: relative;
top: -13px;
left: 10px;
margin: 0 7px;
padding: 0 8px;
background: #fff;
color: #86d67c;
font-weight: 600;
vertical-align: top;
}
.box-checkb div::before {
width: 15px;
height: 7.5px;
border-bottom: 3px solid #86d67c;
border-left: 3px solid #86d67c;
transform: rotate(-45deg) translate(2px, -2px);
content: '';
}
.box-checkb p {
margin: 0;
padding: 0 1.5em 1em;
}
/* 注意アイコン小
------------------------------------- */
.box-notes {
display: flex;
grid-gap: 0 .7em;
margin: 0 auto;
padding: 1em;
border-radius: 5px;
background-color: #ffebee;
color: #333333;
}
.box-notes::before {
width: 24px;
height: 24px;
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}
.box-notes p {
margin: 0;
padding: 0 0 0 .7em;
border-left: 1px solid #f06060;
}
/* 注意アイコン大
------------------------------------- */
.box-noteb {
max-width: 500px;
margin: 0 auto;
border: 2px solid #f06060;
border-radius: 5px;
color: #333333;
}
.box-noteb div {
display: inline-flex;
align-items: center;
column-gap: 4px;
position: relative;
top: -13px;
left: 10px;
margin: 0 7px;
padding: 0 8px;
background: #fff;
color: #f06060;
font-weight: 600;
vertical-align: top;
}
.box-noteb div::before {
width: 22px;
height: 22px;
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}
.box-noteb p {
margin: 0;
padding: 0 1.5em 1em;
}
/* シンプルなボックス https://pote-chil.com/css-stock/ja/box */
/* タイトル付きのボックス（上部中心） */
.tboxue {
max-width: 540px;
margin: 0 auto;
margin-left:20px;
margin-right:20px;
border: 1px solid #0d4872;
border-radius: 3px;
}
.tboxue span {
display: flex;
justify-content: center;
align-items: center;
padding: .5em 20px;
background-color: #052f4f;
color: #fff;
font-weight: 530;
}
.tboxue p {
margin: 0;
padding: 1em 1.5em;
color: #333;
}
/* タイトル付きのボックス（吹き出し風）
タイトル
吹き出し風のタイトルを付けたボックス。角丸にすることで、よりポップで可愛らしい印象を与えることができます。
タイトルの文字数によって吹出しのちょぼの位置が移動してしまうので
ちょぼの部分を削除
*/
.tbox-f {
position: relative;
margin-top: 1em;
padding: 1.8em 1.5em 1em 1.5em;
border: 2px solid #052F4F;
margin-left:20px;
margin-right:20px;
}
.tbox-f > div {
position: absolute;
top: -1.3em;
left: -.3em;
padding: .4em 1.3em;
border-radius: 20px;
background-color: #052F4F;
color: #fff;
font-size: .9em;
}
.tbox-f p {
margin: 0;
}
/* この枠の中に
list-nの枠なしバージョン
list-nonを入れたりするといい
*/
/* 交差する枠線 */
.inter-box {
position: relative;
max-width: 400px;
margin: 0 auto;
padding: 1em calc(1.5em + 9px);
border-top: 1px solid #a6b2b9;
border-bottom: 1px solid #a6b2b9;
color: #333;
}
.inter-box::before,
.inter-box::after {
position: absolute;
width: 1px;
top: 50%;
transform: translateY(-50%);
height: calc(100% + 20px);
background-color: #a6b2b9;
content: '';
}
.inter-box::before {
left: 9px;
}
.inter-box::after {
right: 9px;
}
/* 考えごと風のふきだし https://saruwakakun.com/html-css/reference/speech-bubble
*/
.balloon {
position: relative;
margin: 2em 0 2em 40px;
padding: 15px;
background: #d1e0f3;
border-radius: 30px;
margin-right: 20px;
}
.balloon:before {
content: "";
position: absolute;
left: -38px;
width: 13px;
height: 12px;
bottom: 0;
background: #d1e0f3;
border-radius: 50%;
}
.balloon:after {
content: "";
position: absolute;
left: -24px;
width: 20px;
height: 18px;
bottom: 3px;
background: #d1e0f3;
border-radius: 50%;
}
.balloon p {
margin: 0;
padding: 0;
}
/************************************
** コピーボタン
************************************/
.copy-btn,
.copy-btn-yg {
border: none;
padding: 6px;
border-radius: 8px;
color: white;
font-size: 12px;
background:#ffcc75;
border-radius: 50vh;
padding: 1em 1em 1em 0.8em;
line-height:1;
display: inline-block;
}
.copy-btn:hover {
background-color: #ffcc75; /* #b3b3b3; 色を変えてもいいが*/
cursor: pointer;
}
.copy-btn-yg { background: #C4D700; /* #b3b3b3; 黄緑*/
}
.copy-btn-yg:hover { background-color: #C4D700; /* #b3b3b3; 黄緑*/
cursor: pointer;
}
.copy-text { width: 130px;
}
/* これか
.copy-btn {
background-color: #ffa500;
border: none;
padding: 6px;
border-radius: 8px;
color: white;
font-size: 12px;
}
.copy-btn:hover {
background-color: #b3b3b3;
cursor: pointer;
}
これでもいいが
.copy-btn {
border: none;
position: relative;
display: inline-block;
margin: 1em 0 1em 15px;
padding: 0 5px;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #FFF;
font-size: 13px;
font-weight: bold;
background: #ffcc75;
border-radius: 20%;
box-sizing: border-box;
}
.copy-btn:hover {
cursor: pointer;
}
.copy-btn:before {
content: "";
position: absolute;
top: 50%;
left: -25px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #ffcc75;
z-index: 0;
}
*/
/* HTML・CSSでつくるおしゃれな見出しのデザイン
https://pote-chil.com/css-stock/ja/heading
＜PR＞紹介コードの部分
*/
.pr-fcode {
display: flex;
justify-content: center;
align-items: center;
color: #333333;
}
.pr-fcode::before,
.pr-fcode::after {
width: 1px;
height: 40px;
background-color: #5f5753;
content: '';
}
.pr-fcode::before {
transform: rotate(-35deg);
margin-right: 30px;
}
.pr-fcode::after {
transform: rotate(35deg);
margin-left: 30px;
}
/* メディアクエリ。 ウィンドウ幅が0?500pxの場合に適用するCSS */
@media screen and ( max-width:500px )
{
img
{
max-width: 100%;
height: auto;
}
#outline{
width:100%;
overflow : hidden ;/* 左右にグラグラ動いて安定しなかったり、、
h2の見出しなどがはみ出したりするため、この部分を強引に隠して
見えなくする荒療治として overflow : hidden ; を使ってもいいが、
これをすると端っこが途切れたりするので、はみ出す部分を全部修正して
最後に指定することにする。⇒大体、修正できたので使用。 */}
/*==〜以下、画面の横幅が500pxまでの場合のスタイル記入〜==*/
/*
header
------------------------------------- */
.tleft {
width:200px;height:13px;
margin:0em;margin-left:5px;margin-top:0px;
margin-bottom:0.7em;}
/* 以下のようにしてたが画像がでかくなっておかしいので、
強制的にサイズを指定して、上のようにしているが、未だによくわからない
.tleft {
width:100%;
float:none;margin:0em;margin-left:5px;margin-top:3px;
margin-bottom:0em;height: 17px;}
- */
.tright {
margin-left:0px;
margin-bottom:4px;
}
/* header内、サイトタイトル下の部分 見出しH1のところ
------------------------------------- */
.subtitle{
max-width: 92% ;
height:16px;
/* 背景のバナー素材をスマホ用に変更。。*/
background: url("./img/back/tittle3_8_cz500_25.png") left -1px no-repeat;
background-size:100%;
padding-left:28px;
}
h1 {font-size:1em;line-height:100%;
padding-right:28px;padding-top:2px;
font-weight:normal;
/* はみ出た文字を三点リーダー（…）で省略 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
/* パンくずリスト--------------------------- */
.topicpath,.topicpath2{font-size:0.8em;}
.main { width:100%;
float:none;
margin-left: auto;
margin-right: auto;
}
.side { width:97%;/* PCのCSSのmargin-leftを0にして、widthを97%にしたら、スマホで見るとちょうど左右の空きが同じくらいになった */
float:none;background-size:100%;
}
.side ul{
width:100%;}
.contentstitle {
width:100%;
background-size: cover;/* 画像サイズが小さいためタイル状に繰り返し表示されてしまう。
これを指定すると横幅いっぱいに背景画像が表示される。すなわち繰り返されずに
ひとつの画像がそのまま拡大されるため、画質が劣化して少しぼやけてしまうのが難点 */}
/* 各ポイントサイト、チャットレディ、ASPなどの解説ページの上部リンク。戻る← →サイトへ、のところ
------------------------------------- */
.lineleft {width :170px;font-size:0.7em;
}
.lineright {
margin-left:3px; font-size:0.7em;padding-right:5px;margin-right:5px;
}
.netbox {/* ポイントサイト、アフィリエイト攻略の目次などに使う */
float:none;
width : 95%;
}
h3.mtitle {/* ポイントサイト、アフィリエイト攻略の目次などに使う*/
margin-top:15px;/* 上の部分を少し空けた方がスマホでは見やすい*/
width:100%;}
h2.headline1,h2.headline2,h2.headlinez {
padding-right:5px;margin-right:5px;/*--
スマホで見ると、どうしても右がはみ出す部分がmargin設定で消えた。
h2.headline0のmargin-rightはもともと20pxあるタイプなのでなんもしなくて良かった,-- */ }
h3.madonna,h4.madonna {
padding-right:10px;margin-right:15px;background: url(./img/allow/123.gif) no-repeat left 3.3px;/*-- -- */ }
/* メモアイコン大 */
.box-memob,.box-checkb,.box-noted {/* スマホで見るとやけに右の余白（margin-right）が狭くなるので*/
width: 89%;
}
/* table css
----------------------------------------------------------- */
.tablebasic { width:91.5%;/* スマホで見るとやけに右の余白（margin-right）が狭くなるので*/
table-layout: fixed; box-sizing: border-box; /* 行が多いとはみ出て表示されない部分があったりするので
https://nebikatsu.com/3666.html/*/
}
.tablebasic TH {
font-size:0.9em; padding:2px;
}
.tablebasic TD {
font-size:0.9em; padding:2px;
}
.tablebasic TD.center,
.tablebasic TD.bkcream {
font-size:0.9em;padding:2px;}
/* TH内の背景色を変える場合 --------- */
.tablebasic TH.ltitle,
.tablebasic TH.ptitle,
.tablebasic TH.pltitle,
.tablebasic TH.pinktitle,
.tablebasic TH.yctitle,
.tablebasic TH.purplet,
.tablebasic TH.beiget { font-size:0.9em;padding:2px;}
/* tsbは、tablebasic-smallバージョンの略で、
行が多くて
スマホで見たら見切れたりする場合、
font-sizeを小さくするなどスマホ向けに対応するver.
----------------------------------------------------------- */
.tbs { width:91.5%; table-layout: fixed; box-sizing: border-box;}
.tbs TH {
font-size:0.7em;
padding: 2px; /* セル内の余白 */ }
.tbs TD {
font-size:0.6em;
padding: 2px; /* セル内の余白 */ }
.tbs TD.center,
.tbs TD.bkcream {
font-size:0.6em;padding: 1px;}
/* TH内の背景色を変える場合 --------- */
.tbs TH.ltitle,
.tbs TH.ptitle,
.tbs TH.pltitle,
.tbs TH.pinktitle,
.tbs TH.yctitle,
.tbs TH.purplet,
.tbs TH.beiget { font-size:0.7em;padding: 1px;}
.ueee {padding-right:7px;}
/* リアル収入、チャットレディ講座、webのライブチャット、ブログライターなどで
使っている。目次 右下関連記事メニューリスト */
.rmenul2 { padding-right:5px; margin-right:5px;/* スマホで見ると
右が途切れてしまうので */}
.mainnews {
float:none;}
.mainnews2 {
float:none;}
.imgbox0 { margin-right:30px;margin-left:30px; /* スマホからだと文字がズレるので調整
widthの数値をいじるなどしてもいいかもだが 画像の width="350" ver. */
}
.imgbox0 p { text-align: initial; /* 上のように自分なりに考えて強制的に画像の横幅にあわせて
下の文字がそろうようにしてたが、これを指定するだけでもいけるっぽい。
https://magazine.techacademy.jp/magazine/8850
大枠のdivでtext-align : center を指定した状況で、
文章そのものは左寄りにしたい場合、
タグにtext-align : initial
を付与することで、テキスト中央寄せの指定を個別解除することができます。とのこと */
}
.imgbox100 { margin-right:30px;margin-left:30px;
width:83%;/* ブラウザを縮めると文字が右横に飛び出していたので. */
}
/* コピーボタン */
.copy-btn,.copy-btn-yg {
display: block;
margin-left:130px;margin-top:5px;
/* スマホで見ると左端に行くので右に寄せて */
}
} /* この最後の閉じ忘れに注意。これがひとつでも他の場所にあるだけで
PCにも反映されちゃったり、おかしくなる。
------------------------------------- */