超初心者向け！WEB制作に役立つ小ネタ集
主にブログなどのWEB制作に役立つ、初心者の方向けの小ネタを紹介します。
WordPressなどCMS全盛の時代にあまり使用する機会も少なくなってきたとは思いますが、誰かのお役に立てれば幸いです。
目次
影を付ける【box-shadow】
まず最初は要素に影を付ける方法からご紹介です。
影を付ける代表的な方法はbox-shadowを使用します。
box-shadowの解説
影を付けたい要素{
box-shadow: [左右の向き]px [上下の向き]px [ぼかし]px [広がり]px 色;
}
具体例として、以下のボタンに影を付けて立体的にしてみたいと思います。
<body>
<div class="button">button</div>
</body>
.button{
border-radius:50px;
background:#ffa500;
width:250px;
padding:20px 0;
text-align:center;
box-shadow:3px 3px gray; /*ぼかしと広がりは0のため省略*/
}
影が付いたことでただのボタンより立体的になり、ユーザーの目にとまりやすくなりそうですね。
オンカーソルで別のスタイルを適用する【hover】
hoverはカーソルが特定の要素に乗った時に、設定したスタイルが適用される小技です。
よく使用される例として、カーソルがボタンに乗った際に色や形を変えたり、効果を付けるものがメジャーですね。
hoverの解説
効果を付けたい要素:hover{
[適用したい効果]
}
具体例として、以下のボタンにカーソルが乗ったら、色を薄くなるようにしたいと思います。
スマホでもhoverが効くように「ontouchstart=""」を追加します。
<body>
<div class="button" ontouchstart="">button</div>
</body>
.button{
border-radius:50px;
background:#ffa500;
width:250px;
padding:20px 0;
text-align:center;
box-shadow:3px 3px gray;
transition:0.8s; /0.8秒かけて戻すため*/
}
.button:hover{
opacity:0.7; /*30%透過させる*/
transition:0.8s; /0.8秒かけて効果適用*/
}
カーソルを乗せると色が薄くなり、ユーザーにとってオンカーソルしていることが分かりやすくなります。
オンカーソルで画像を拡大する【transform】
オンカーソルで画像が拡大する小技です。視覚的にインパクトを与えることができます。要素の拡大にはtransformプロパティのscaleを使用します。
具体例として、以下のような関連記事のリンクがあるとして、画像にカーソルが乗ったら画像が拡大するようにしたいと思います。
超初心者向け！WEB制作に役立つ小ネタ集
<div class="transform_wrapper">
<div class="transform_img_box">
<img src="画像のパス.png" class="transform_img">
</div>
<div class="transform_title_box">
超初心者向け！WEB制作に役立つ小ネタ集
</div>
</div>
.transform_wrapper{
width:95%;
max-width:500px;
display:flex; /*画像とタイトルを横並びに*/
justify-content:center;
align-items:center;
border:solid 1px #e0e0e0;
margin:20px auto;
padding:0;
box-shadow:3px 3px #e0e0e0;
}
.transform_img_box{
width:40%;
overflow:hidden; /*はみ出る部分を非表示にする*/
display:flex; /*不要な余白を消すために子要素にもflexを付ける*/
}
.transform_img{
width:100%;
transition:1s;
}
/*画像にカーソルが乗ったら*/
.transform_img:hover{
transform:scale(1.2,1.2); /*水平方向に1.2倍、垂直方向に1.2倍拡大*/
transition:1s; /*1秒かけて変化*/
}
.transform_title_box{
width:60%;
padding:0 5px;
}
画像にカーソルを乗せると画像が拡大され、外すと元に戻ります。
GoogleMap埋め込み【iframe】
スポットの紹介記事などで、もはや必須といってよいGoogleMapの埋め込み。マップの埋め込みはiframeというタグを使用しています。
iframeはインラインフレームの略で、現在のページに他のページを埋め込むことができるタグです。
サイズなどうまく設定できれば、ヘッダーなど共通部品を1つの元ページで各ページに表示させたり、全く違うデザインやcssのページを簡易に表示させることができるため、非常に便利なタグです。
iframeの解説
<iframe src="埋め込みたいページのURL"><iframe>
まずはGoogleMapで埋め込みたい住所を検索し、共有→地図を埋め込む→HTMLをコピーで地図情報を取得します。
例として東京都庁を目的地として埋め込んでみたいと思います。
HTMLをコピーすると<iframe></iframe>タグも含まれてコピーされているため、そのまま貼り付けるだけでOKです。
但し、レスポンシブ対応のため、widthは100%に変更しておきましょう。
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.486897005138!2d139.68991201508388!3d35.689634180192414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1656999726679!5m2!1sja!2sjp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
動画埋め込み【video】
自分で撮影した動画や、素材として提供されている動画などをWEBページにアップするにはvideoタグを使用します。
Youtubeをアップする場合はvideoタグではなく、Youtubeからiframeコードを取得する必要があり、今から説明する方法ではアップできませんのでご注意ください。
videoの解説
<video src="埋め込みたいページのURL" controls></video>
最低でもcontrolsの記載がないと閲覧することができませんので注意してください。
その他、以下のようなオプションが用意されています。
- autoplay：ページを開いたら自動再生する
- muted：デフォルト音声をミュートにする
- loop：繰り返し再生する
- playsinline：スマホで動画を再生した場合に全画面表示にさせない
- poster：開始画面の画像を設定
※Safariではplaysinlineを付与していないとautoplayを有効にしていても自動再生されない
上記を踏まえ、音声はミュートで自動でループ再生される設定にします。
<body>
<video src="img/009/sample.mp4" controls autoplay muted loop playsinline"></video>
</body>
video{
width:100%; /*可変にする*/
max-width:700px; /*最大サイズに設定*/
}
