CSSでちょっとかっこよく見せる

こんな感じのデザインを作ったみたいと思います
かなり簡単に実装出来るので初心者の方はぜひ真似してみてください

前提としてBootstrapのCDNは読み込んでおいてください

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

画像はお好きなものをお使いください
僕と同じものはこちら

HTML部分

<div class="row text-center text-white">
    <div class="cardAria col-md-4">
     <h1>SampleTitle</h1>
     <p>Anyone can easily implement it by adjusting the transparency and borders.</p>
     <p>This code is an example using CSS and BS</p>
    </div>
    <div class="cardAria col-md-4">
     <h1>SampleTitle</h1>
     <p>Anyone can easily implement it by adjusting the transparency and borders.</p>
     <p>This code is an example using CSS and BS</p>
    </div>
 </div>

Bootstrapでグリッドを使ってます
今回Bootstrapの役目はこれだけ

CSS部分

body{
    background-image: url(bgimg.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
}

.row{
    width: 80%;
    margin: 0 auto;
}
.cardAria {
    
    background-color: rgba(255, 255, 255, .3);
    margin: 50px auto;
    border-left: 1px solid #555555;
    border-bottom: 1px solid #555555;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .8);

}

bodyのところで画像を背景に設定しています
１行目で背景にする画像を指定
２行目で画像を繰り返すかどうかという指定(今回は縦方向に繰り返し)
３行目で画像を100%表示にしています

rowは説明不要かと思います

cardAriaは
1行目が背景色です。RGBA指定で透明度を設定しています
最後の行で影をつけています

よかったらTwitterフォローお願いします

JavaScriptとGASの基礎のまとめです💻
だいたい1日から3日で終わると思います✍️
実際に生徒に教えてる内容を記事にしてみました📓

開発環境も何もいりません
Googleアカウントがあればすぐに始められます‼️#プログラミング学習#プログラミング初心者#JavaScripthttps://t.co/5R21UHrOpj

— Webデザイナー:高菜こんぶ (@takana_konbu912) December 1, 2023