サイト制作メモ

スライドショーの画像を切り抜いたように表示する

投稿日:2017年8月24日 更新日:

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回制作時に忘れないようにメモ。 サンプルページ 1.まずは全てを囲むdivを作成 2.中の要素は2つ(上下切り抜く場合は3つ)  切り抜いたpng画像とスライドショー 3.それぞれにスタイルシートを適応
<div id="content"><!--任意のidやclassを与える -->


	<div class="ue"></div><!--スライドショーの上の部分 -->

<!-------------------------------------------------------
この中にスライドショーのタグを入れる
---------------------------------------------------------->
	<div class="slide-container">
                            
		<div class="slide-wrapper">
			<!-- Slides -->
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
		</div>

	</div>
    
<!-------------------------------------------------------
スライドショーここまで
----------------------------------------------------------> 

	<div class="sita"></div><!--スライドショーの下の部分 -->
         
         
</div> 
スタイルシート。 全体の指定はこれ。
#content{
	width:1200px;/* 任意の横幅を指定 */
	height:600px;/* 任意の高さを指定 */
	position:relative;
	margin:0 auto;}
上に置く画像のスタイルシートはこちら 下に置きたい場合、top:0;をbottom:0;に変更
.ue{
	display:block;
	background:url(..画像のパス)0 0 repeat-x;
	background-positioin:center top;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	height:120px;/* 画像の高さを指定 */
	margin:0 auto;
	}
これで1つのdivの中に スライドショー・画像の順番に重なっているので 切り抜いた間からスライドショーが見えます。 あ、スライドショーの.jsや.cssはあらかじめ設定しておいてください。

- サイト制作メモ
-,

関連記事

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 まずはhtml 何でもいいので適当なクラスか何かあたえておいてください。 <p class="text-kirinuk ...

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...
no image

cssで作るタイトルやテキストの装飾色々メモ

タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲気がつくれる。 ただ、背景に柄が入ると中のテキストが読みにくくなるので、色は注意! HTMLは入れ子にしています。 ...

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenuあまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。オプションで色々設定もできるみたいなので、初 ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する