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

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

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  2. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  3. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  4. CSS

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

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

  5. Web Design

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuok…
  2. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト
  3. Illustrator

    webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法
  4. 書評

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

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