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デザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


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

関連記事

  1. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  2. Web Design

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

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

  3. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  4. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  5. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  6. Web Design

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Photoshop

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

    かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(有料)
  3. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方
  4. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」
  5. Web Design

    WordPressブログを同じサーバーに複数作る方法
PAGE TOP