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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2456閲覧

CakePHPでjavascriptのライブラリslider-pro-masterが指定した通りに表示されない

tacchan

総合スコア60

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/02/11 14:56

CakePHPでjavascriptのライブラリslider-pro-masterを使っているのですが、どうしても表示が上手くいきません。

使い方のサンプルがのっているサイト
上のページの横幅いっぱいスライダーの設定を用いているのですが、画像が横に並ばずに縦のままなのです。

下にCakePHPのlayout.ctpファイルのコードを載せておきます。
画像ファイルの大きさは900×250で、webroot>imgファイルの中に置いてあります。
ただのhtmlで記述したときには問題ありませんでした。
何が原因なのでしょうか?よろしくお願いします。

PHP

1<!DOCTYPE html> 2<html> 3<head> 4 5 <?php 6 7 echo $this->Html->script('jquery-1.11.3.min'); 8 echo $this->Html->script('ConnectedSelect'); 9 echo $this->Html->script('slider-pro-master/dist/js/jquery.sliderPro.min.js'); 10 11 echo $this->Html->css('slider-pro-master/dist/css/slider-pro.min.css'); 12 echo $this->fetch('meta'); 13 echo $this->fetch('css'); 14 echo $this->fetch('script'); 15 ?> 16 <script> 17 $(document).ready(function() { 18 $('#wide').sliderPro({ 19 width: 900,//横幅 20 arrows: true,//左右の矢印 21 buttons: false,//ナビゲーションボタンを出す 22 slideDistance:30,//スライド同士の距離 23 visibleSize: '100%',//前後のスライドを表示 24 }); 25 }); 26 </script> 27</head> 28<body> 29 <div id="container"> 30 31 <div id="wide" class="slider-pro"> 32 <div class="sp-slides"> 33 <figure class="sp-slide"> 34 <?php echo $this->Html->image('topimage.jpg', array('class' => "sp-image", 'width' => '900px'));?> 35 </figure> 36 <figure class="sp-slide"> 37 <?php echo $this->Html->image('ginkakuji.jpg', array('class' => "sp-image", 'width' => '900px'));?> 38 </figure> 39 <figure class="sp-slide"> 40 <?php echo $this->Html->image('togetsukyo.jpg', array('class' => "sp-image", 'width' => '900px'));?> 41 </figure> 42 43 </div> 44 </div> 45</body> 46</html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

HtmlHelper::css()に/から始まらないパスを指定した場合は、
/app/webroot/cssをCSSのデフォルトのディレクトリとして出力します。
恐らく次のようなURLで出力されているのではないでしょうか?

HTML

1<!-- echo $this->Html->css('slider-pro-master/dist/css/slider-pro.min.css'); --> 2<link rel="stylesheet" type="text/css" href="/css/slider-pro-master/dist/css/slider-pro.min.css">

slider-pro-master/dist/cssをapp/webroot/cssに移すか、
/jsをパスの先頭に追加してみてください。

PHP

1echo $this->Html->css('/js/slider-pro-master/dist/css/slider-pro.min.css');

投稿2016/02/12 01:18

編集2016/02/12 01:19
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tacchan

2016/02/12 09:54

返答が遅くなってしまい、申し訳ありませんでした。 パスの書き方が確かに間違っていましたね。 なんとくだらない間違いをしてしまったのか、また自分で気づけなかったのか、反省中です。 指摘してくださって本当にありがとうございました。
guest

0

CSSが読み込まれてないのではないかと思います。ご確認ください。

投稿2016/02/11 17:36

amaranthine

総合スコア501

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

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

tacchan

2016/02/12 09:56

確かに読み込まれていませんでした。 エラーになるとどうしても慌ててしまい、目につくところもつかなくなってしまいます。 ご指摘ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問