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

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

関連記事

  1. illustration

    簡単!Illustratorでキラキラ星を作る方法

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

  2. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  3. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  4. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  5. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作…
  2. モバイルフレンドリーなwebデザインするときにおすすめなツー…
  3. かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(…
  4. 今や欠かせない存在!iPad Pro “9.7を…
  5. iPad Proを液タブに♫Astropad Studioは…

facebook更新中!

  1. Illustrator

    簡単!Illustratorで写真の淵をぼかす方法
  2. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する…
  3. wordpress

    wordpressバックアップツールの決定版!All in one Migrat…
  4. 書評

    超クール!webマーケティングが学べる「沈黙のwebマーケティング」を読みました…
  5. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
PAGE TOP