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. jQuery

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

    みなさんこんにちは、mayukouです。だいぶ春らしくなってきました…

  2. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  3. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  4. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  5. jQuery

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

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

  6. Illustrator

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

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 現像すると写真が生き生きする!Macの写真アプリが素敵
  2. 売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を…
  3. 購入して半年♪iPad Proで描いたイラストをご紹介。(主…
  4. ブロガーの味方?高級コンデジ、Panasonic LX9を買…
  5. デザインが成功するテンプレがここに。「なるほどデザイン」を読…

facebook更新中!

  1. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法
  2. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ(有料)
  3. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法
  4. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2
  5. グッズ

    アナログ手法も極めたい!私が使っている水彩画道具のご紹介
PAGE TOP