Webサイト制作

投稿日: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はあらかじめ設定しておいてください。

- Webサイト制作
-,

関連記事

no image

サイト制作に役立つTips_リンク集

目次1 スタイルなどの装飾1.1 ボタンのホバーアニメ1.2 角丸とシャドウのジェネレーター1.3 グラデーションジェネレーター1.4 CSS三角形作成ツール1.5 吹き出し作成のジェネレーター1.6 ...

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かってい ...

no image

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

目次1 タイトルの背景を斜めボーダーにしたい2 タイトルの左右に画像を配置3 タテキストにグラデーションをかけたい タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲 ...

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

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

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...