CSSフレームワーク

簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー


こんにちは、mayukouです。
お盆も過ぎて、後半戦が始まった感じですねー!
私はお盆の機会に自由ができる!と思って意気込んでたのに、色々な用事であまりできず。
ラスト1日ですこーしだけ頑張りました。

昨年、同じ横幅いっぱいに表示できるスライダーのskipprをご紹介していましたが、レスポンシブ対応にするにはちょっと手間がかかりそうでした。

そこで今回は、レスポンシブ対応で横幅いっぱいに表示できるスライダーを、サクッと簡単にbootstrapで作る方法を発見したのでご紹介します。

スポンサードリンク

 

 

Bootstrapとは?

CSSを記述しなくても、レスポンシブ対応のデザインされたページが
作れるフレームワークです。

※まもなく、bootstrapバージョン4が出るみたいですね!

 

先にデモをご紹介します。

デモ

 

Bootstrapのファイルをダウンロード

Bootstrapのサイトから、Bootstrapファイルをダウンロード

50-boot

51-boot

cssファイルと、jsファイル、fontsファイルが入っています。

53-boot

HTML

54-boot

bootstrapサイトのGetting Startedメニューをクリックしたら、

Basic Template のリンクをクリックし、以下のHTMLコードが表示されるので

HTMLをまるまるコピーします。コピーしたら、新しく作るHTMLファイル(index.htmlなど)にペーストしておきましょう。

 

52-boot

言語を日本語に変換↓

コピーしたHTMLコードの

二行目にある<html lang=”en”>を<“html lang=ja”>に変更します。

 

カルーセルスライダーのコードを挿入

bodyタグ直下の<h1>Hello,world!</h1>を消去し、以下のHTMLを貼り付けます。

<img>ファイルは、任意のパスを挿入してください。

containerのclassにfluid2など名前をつけています。

CSS

cssは書く必要がないと書きましたが、デフォルトのpaddingを調整する必要があります。

※微調整が必要な場合は書くことがあります。
新しくstyle.cssなどを作り、以下のCSSを設定しましょう。

をスタイルシートに追加します。

cssを作成したら、style.cssをhtmlにリンクしておきましょう。

これで、横幅いっぱいのスライダーの完成です!

デモ

 

最後に

いかがでしたか?Bootstrapで作る100%表示可能のスライダーをご紹介しました。
ぜひ参考にされてください。

前回のSkipprの記事で質問がありましたが、まだ検証中です。
以下のサイトで質問が行われていましたが、それらしい質問が見つからず…

https://disqus.com/home/discussion/austenpayan/skippr_a_jquery_plugin_for_creating_tasteful_slideshows_16/
少々お待ちください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  2. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  3. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  4. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

  5. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  6. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方
  2. Mac

    アプリケーションをすぐに起動できる!Alfredの使い方
  3. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット
  4. Illustrator

    自分で作れると便利!illustratorでチェック柄を描く方法
  5. wordpress

    自分のブログを冬仕様に!wordpressに雪を降らせるプラグイン
PAGE TOP