.wwwrap{
max-width:1150px;
text-align: center;
margin:0 auto;
}
.baseBox {
/* — 親BOXの定義 ——————————————–*/
display : inline-block; /* インラインブロック化 */
position : relative; /* 親要素 */
overflow : hidden; /* はみ出しは非表示 */
margin : 0 auto; /* BOXの位置(中央寄せ) */
width : 100%; /* BOXの横幅 */
height : 160px; /* BOXの高さ */
}
/* — 前面文字の定義 —————————————–*/
.baseBox .frontStr {
display : inline-block; /* インラインブロック化 */
position : absolute; /* 親要素からの相対位置 */
font-size : 36px; /* 前景文字のサイズ */
font-weight : bold; /* 太字 */
top : 35%; /* 親要素にサイズにする */
left : 0;
right : 0;
bottom : 0;
}
.baseBox .frontStr span {
display : inline-block; /* インラインブロック化 */
position : absolute; /* 親要素からの相対位置 */
font-size : 18px; /* 前景文字のサイズ */
font-weight : bold; /* 太字 */
top : 48%; /* 親要素にサイズにする */
left : 0;
right : 0;
bottom : 0;
}
/* — 背景透かし文字の定義 ———————————–*/
.baseBox .backStr {
position : absolute; /* 親要素からの相対位置 */
display : inline-block; /* インラインブロック化 */
white-space : nowrap; /* 折り返ししない */
font-size : 40pt; /* 背景透かし文字サイズ */
font-weight : bold; /* 太字 */
color : rgba(255, 102, 255, 0.80); /* 背景透かし文字色 */
/* 中心寄せ＆角度 */
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
}
– test –
https://www.realord.co.jp/
・ボタンエリア→FVの下のように、地図か英語を背景に
・ロゴエリア→サービスのように背景を青にして、上に白背景でロゴを配置
https://career.all-different.co.jp/
・背景グレー
・見出し
・背景グレー斜め
https://actanyway-try.jp/recruit/
・インタビューの背景半分グレー
https://www.smwautoblok.co.jp/
・reasonの箇所
https://www.gwt-corp.jp/
・背景の英語
・トピックスとカンパニーの箇所
https://nishitoku.co.jp/project/
・3つのreason
https://www.kantodenka.co.jp/company/
・ロゴの所
https://www.fukudaco.co.jp/
・テクノロジー通信の箇所
https://boo-ster.co.jp/
・背景紺
https://evolve.ne.jp/
・赤だけど全体的なレイアウト
・reason
https://www.kyoei-fw.co.jp/
・reason
・背景の地図
https://quatre-plan.co.jp/
・pointの箇所→求人例に
・紫だけどreason
https://www.nihon-ma.co.jp/
・緑だけどreason
https://bpsr.jp/
・サービス内容→求人例に
https://kitaoji-law.com/
・3つ横並びエリア
ロゴの所
全体の色
