質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2418閲覧

cakePHP+bootstrapのカルーセル時にボタンが潰れる現象

pecchan

総合スコア555

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1グッド

1クリップ

投稿2016/07/07 17:23

bootstrap単体時は問題ないですが、
cakePHPから出力した際に左右のページ送りボタンが潰れてしまいます。

ボタンだけが潰れていて、ページ送りの動きは問題ないです。

イメージ説明

同様の現象を経験された方や、原因分かる方居ましたら
情報いただけますでしょうか?

宜しくお願い致します。

ctp

1 <div id="my" class="carousel slide" data-ride="carousel" data-interval="3000"> 2 3 4 <!-- 中央に表示される丸いボタン --> 5 <ol class="carousel-indicators"> 6 7 <!-- 8 Carouselのid名を合わせる、スライダーの数だけ用意する 9 data-slide-toで何番目のスライドへ移動するか指定する、0から始めるので1つめのスライドなら0を指定 10 --> 11 <li data-target="#my" data-slide-to="0" class="active"></li> 12 <li data-target="#my" data-slide-to="1" class=""></li> 13 <li data-target="#my" data-slide-to="2" class=""></li> 14 15 </ol> 16 17 18 <!-- ここからCarouselの中身 --> 19 <div class="carousel-inner"> 20 <div class="item active"> 21 <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+"> 22 </div> 23 <div class="item"> 24 <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg=="> 25 </div> 26 <div class="item"> 27 <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+"> 28 </div> 29 </div> 30 </div> 31 32 <!-- ページ送りボタン、ここもCarouselのid名を合わせる --> 33 <a class="left carousel-control" href="#my" data-slide="prev"> 34 <span class="glyphicon glyphicon-chevron-left"></span> 35 </a> 36 <a class="right carousel-control" href="#my" data-slide="next"> 37 <span class="glyphicon glyphicon-chevron-right"></span> 38 </a> 39
mondaminZ👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Bootstrapのアイコンはアイコンフォントを使用して表示されています。それが何らかの原因で読み込まれていないのでしょう。

フォントの場所はbootstrap.css内で相対パスで呼ばれているため、そこにフォントファイルが無い場合やCSSがまとめて出力され、パス自体が変わってしまっている場合は読み込まれないと思います。

CSS

1@font-face { 2 font-family: 'Glyphicons Halflings'; 3 src: url('../fonts/glyphicons-halflings-regular.eot'); 4 src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 5}

【BootstrapのGlyphIconを使うとリモートでアイコンが出ないという話 - Azureはじめました】
http://10.hateblo.jp/entry/2014/03/24/152408

あとは、下記のような例も見つけました。

【BootstrapのGlyphiconsが表示されない対処法(クロスオリジンリクエスト) - Qiita】
http://qiita.com/osamu1203/items/77ef14a006415d566359

投稿2016/07/07 18:07

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2016/07/07 18:09

有難う御座います。 仰るとおりでした。 fontsフォルダを置いたところ表示されました。 参考URLまで有難う御座います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問