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サイト制作
-,

関連記事

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

no image

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

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

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...