研修用サイト

文字サイズ

あいうえお
あいうえお
あいうえお

<span style=”font-size: 12px;”>あいうえお</span>
<span style=”font-size: 16px;”>あいうえお</span>
<span style=”font-size: 20px;”>あいうえお</span>

文字色

あいうえお
あいうえお
あいうえお

<span style=”color: #000000;”>あいうえお</span>
<span style=”color: #ff0000;”>あいうえお</span>
<span style=”color: #0000ff;”>あいうえお</span>

文字位置

あいうえお

あいうえお

あいうえお

<p style=”text-align: left;”>あいうえお</p>
<p style=”text-align: center;”>あいうえお</p>
<p style=”text-align: right;”>あいうえお</p>

文字フォント

あいうえお ABC
あいうえお ABC
あいうえお ABC

<span style=”font-family: ‘Hiragino Sans’, ‘ヒラギノ角ゴ ProN’, ‘Hiragino Kaku Gothic ProN’, 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif;”>あいうえお ABC</span>

<span style=”font-family: ‘Times New Roman’, 游明朝, ‘Yu Mincho’, 游明朝体, YuMincho, ‘ヒラギノ明朝 Pro W3’, ‘Hiragino Mincho Pro’, HiraMinProN-W3, HGS明朝E, ‘ＭＳ Ｐ明朝’, ‘MS PMincho’, serif;”>あいうえお ABC</span>

<span style=”font-family: ‘courier new’, courier;”>あいうえお ABC</span>

アンカーポイント

アンカーでは設定した箇所まで移動できます。

リンク先
<a href=”#a”></a>

アンカーリンク先
<a id=”a”></a>

アンカーリンクここまで

文字や画像を被せる

この画像2枚を重ねる

<p style=”margin-top: -50px;”><img src=”写真URL” /></p>

<div class=”wide-section” style=”margin:0px calc(50% – 50vw); padding:3em 0 3em; background-color:#ffffff;”>
<div class=”container”>
入れたい写真や動画URL
</div></div>

マウスオーバー

HTML

<div class=”img_wrap”>
<img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”size-full wp-image-11 aligncenter” />
</div>

CSS
.img_wrap{
margin: 0 auto;
overflow: hidden;
}
.img_wrap img{
width: 100%;
cursor: pointer;
transition-duration: 0.3s;
}
.img_wrap:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}

画像横並び

HTML

<div class=”img-flex-2″>
<img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”alignnone size-full wp-image-11″ />
<img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”alignnone size-full wp-image-11″ />
</div>

CSS
[class^=”img-flex-“] {
margin-bottom: 0px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.img-flex-2 img { width: 50%; }

画像横スクロール

• 

  タイトル

  ここにテキストが入ります

• 

  タイトル

  ここにテキストが入ります

• 

  タイトル

  ここにテキストが入ります

• 

  タイトル

  ここにテキストが入ります

HTML

<ul class=”scroll_content”>
<li>
<a href=”#”><img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”alignnone size-full wp-image-11″ /></a>
<h2><p style=”text-align: left;”><span style=”font-family: ‘Hiragino Sans’, ‘ヒラギノ角ゴ ProN’, ‘Hiragino Kaku Gothic ProN’, 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif; font-size: 20px;”>タイトル</span></p></h2>
<p>ここにテキストが入ります</p>
</li>
<li>
<a href=”#”><img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”alignnone size-full wp-image-11″ /></a>
<h2><p style=”text-align: left;”><span style=”font-family: ‘Hiragino Sans’, ‘ヒラギノ角ゴ ProN’, ‘Hiragino Kaku Gothic ProN’, 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif; font-size: 20px;”>タイトル</span></p></h2>
<p>ここにテキストが入ります</p>
</li>
<li>
<a href=”#”><img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”alignnone size-full wp-image-11″ /></a>
<h2><p style=”text-align: left;”><span style=”font-family: ‘Hiragino Sans’, ‘ヒラギノ角ゴ ProN’, ‘Hiragino Kaku Gothic ProN’, 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif; font-size: 20px;”>タイトル</span></p></h2>
<p>ここにテキストが入ります</p>
</li>
<li>
<a href=”#”><img src=”https://renest-sample.com/wp-content/uploads/2024/02/image_840x560.gif” alt=”” width=”840″ height=”560″ class=”alignnone size-full wp-image-11″ /></a>
<h2><p style=”text-align: left;”><span style=”font-family: ‘Hiragino Sans’, ‘ヒラギノ角ゴ ProN’, ‘Hiragino Kaku Gothic ProN’, 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif; font-size: 20px;”>タイトル</span></p></h2>
<p>ここにテキストが入ります</p>
</li>
</ul>

CSS
.scroll_content { /* リスト全体のスタイル */
display: flex;
max-width: 800px;
margin: auto;
overflow-x: auto;
}

.scroll_content li { /* 各リストのスタイル */
width: 90%;
padding: 8px;
margin: 3px;
flex-shrink: 0;
list-style: none;
}

.scroll_content img { /* 画像のスタイル */
width: 100%;
max-height: 200px;
object-fit: cover;
}

.scroll_content::-webkit-scrollbar {
height: 12px; /* スクロールバーの高さ */
}

.scroll_content::-webkit-scrollbar-thumb {
background: #aaa; /* ツマミの色 */
border-radius: 6px; /* ツマミ両端の丸み */
}

.scroll_content::-webkit-scrollbar-track {
background: #ddd; /* トラックの色 */
border-radius: 6px; /* トラック両端の丸み */
}

@media screen and (min-width: 450px) {

.scroll_content li {
width: 45%;
}

}