- 締切済み
99limeの使い方がわかりません。助けてください
私は、Webサイトを作るとき、デザインが苦手で、 bootstrapのCSSフレームワークを使っておりました。 いろいろな物を使ってデザインを試してみたいと思い、 99limeなどをダウンロードしたのですが、使えないのです。汗 全くわからず、ここ三日程、調べているのですが、うまくいかなくてお手上げ状態なのです。 例えば、99limeなどのサイトではもちろんのこと、Web内を調べてもこのような初歩的なことに対して、記述してある記事がなかったので、質問させてください どうすれば、99limeをhtmlに記述してWeb上で使用することができるのか 教えていただけませんか？ 以下現在の私の理解度具合です。 bootstrapの場合ですと、html内において、<head>では <link href="css/bootstrap.min.css" rel="stylesheet"> そして、<body>の最後、すなわち</body>の付近に <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="js/bootstrap.min.js"></script> と記述することで、bootstrapを使用することができました。 この方法はドットインストールという初学者のために公開された動画で解説されたものを そのまま使ったので、bootstrapを使うことができました。 動画添付でも、画像添付でも本当に困っておりまして、どなたか教えてください。 よろしくお願いします。
- nakamura117
- お礼率0% (0/1)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
申し訳ありません。先ほど99lime見てきました。なるほど良いアイデアですね。単にclass名を付加するだけでスタイルシートが適用される。 しかし、その仕組み自体がわからないと言われたら打つ手がありません。とてもじゃないですが、あまりにも基礎的なことでそれをここで説明しようとしたら、字数も足りないし、満足な説明なんてできやしない。 まずデザインのセンスとHTMLやCSSの書き方はまったく別物です。絵の具とそれを調合して希望の色を作ることと、実際にそれで絵が書けるかは別の問題です。そのサイトは「絵の具の調整はできる」けど「面倒くさい」、そして「絵を描く能力もない」かたむけのサイトです。 そのため最低限「絵の具の調整はできる」はできる必要があります。 1) まずHTMLの基本--HTMLはその文書をそれを構成す要素に分解して、それぞれの要素がその文書にとって何であるかをマークアップする言語であること--デザインのためではありません。そのマークアップができること。 2) スタイルシートはその文書構造をどのように表現するかを指定するもので、それぞれ、どの要素にどのスタイルを指定するかは、カスケーディング機能やセレクタなどを使うこと。特にセレクタの知識はとても重要です。 それらに的を絞って、まず基礎を身につけてください。そうしたら、「スタイルを適用したい要素にclass名をつけるだけです。」と言う意味が理解できるようになります。
関連するQ&A
- CSS含めてアップロードしても反映しない。
デスクトップ上でwebサイトをTwitter bootstrapのフレームワークを使いながら構築しました。ローカル上は何の問題もなかったのですが、サーバーにアップロードした途端に、CSSや画像の読み込みがされなくなってしまいました。 The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions. というようなメッセージがfirefoxで確認されました。 ディレクトリ構造は、下記のような感じです。 index.html bootstrap/css bootstrap/js bootstrap/img 実際のindex.htmlのヘッダー (ちなみにhtml5の記法に従ってます。) <head> <meta charset="utf-8"/> <title>Twitter bootstrap practice</title> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/> <script src="bootstrap/js/jquery.js"/></script> <script src="bootstrap/js/bootstrap.min.js"/></script> <style type="text/css"> body{padding-top:40px} </style> </head> なぜかさっぱりわかりません。 教えてください。 よろしくおねがいします。
- ベストアンサー
- CSS
- Twitter Bootstrap初期設定
ドットインストールのソースをそのままコピーして 実行したところ、段組が崩れます。同じソースコードデモボタンから実行すると綺麗に動作している。 ＵＴＦ－８で保存もしています。 バージョンが違うためその他の設定が必要なのでしょうか？ ｊquery,cssなどがうまく動いてくれません。 1.<!DOCTYPE html> 2.<html lang="ja"> 3.<head> 4. <meta charset="utf-8"> 5. <title>Bootstrap 101 Template</title> 6. <link href="css/bootstrap.min.css" rel="stylesheet"> 7.</head> 8.<body> 9. 10.<div class="row"> 11. <div class="span4" style="background:red">Sidebar</div> 12. <div class="span8" style="background:green"> 13. Main 14. <div class="row"> 15. <div class="span4">aaa</div> 16. <div class="span4">bbb</div> 17. </div> 18. </div> 19.</div> 20. 21.<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 22.<script src="js/bootstrap.min.js"></script> 23.</body> 24.</html>
- ベストアンサー
- CSS
- jQuery Mobile バージョン
jQuery Mobileでスマホサイトを作成しているのですが 現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。 私のバージョンが古いのでしょうか？ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ 書き換えたほうが良いのでしょうか？
- ベストアンサー
- CSS
- さくらVPS css外部ファイル読み込みNG!
スマホのホームページを作成中ですが、なぜか外部ファイルの読み込みがうまく行きません。 【さくらVPSサーバではNG】 <link rel="stylesheet" href="../css/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="../js/jquery-1.9.1.min.js"></script> <script src="../js/jquery.mobile-1.3.2.min.js"></script> 【他サーバからはOK】 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 「nkf -g jquery.mobile-1.3.2.min.css」で漢字コードを確認し、EUCおよびUTF-8の両方試しましたがどちらともNG。 でも他サーバから読み込みは、OK。 LinuxOS設定で、設定すべき点があるのかなぁ～と思っていますが、手詰まり状態です。 1.パソコンのブラウザ(IE/Chrome)からは、読み込みOK。 2.スマホは、Android端末を使用、標準ブラウザ/ChromeともにNG。 どなたか教え願えないでしょうか、宜しくお願い致します。 ※FTPサーバは、ProFTPDを構築し、これを利用しています。
- 締切済み
- Linux系OS
- 教えてください! lightboxとskitter
javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>
- ベストアンサー
- JavaScript
- HTMLをWordPress化 CSSをどこに？
HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか？ function sample_scripts() { // CSSの読み込み wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' ); wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' ); // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true ); // サイト内のjsの読み込み wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true ); wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか？ 宜しくお願いします。
- ベストアンサー
- PHP
- IE対応 HTML5 こちらでよろしいでしょうか。
IE対応 HTML5 こちらでよろしいでしょうか。。。 様々なサイトを見て ■ reset.cssは使わず normalize.css を使用。 ■ modernizr.jsではなく selectivizr.js を使用。 ■ cssの拡張に CSS3 PIE を 使用。 http://css3pie.com/ としております。 読み込ます順番が違うなどありますでしょうか。 併用するとエラーになるファイルはありますでしょうか。 よろしくお願いいたします。。。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="format-detection" content="telephone=no"> <meta name="robots" content="all"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"><!-- 自分の記述するcss --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script><!-- 自分の記述するjs --> <!--[if (gte IE 6)&(lte IE 8)]> <script src="js/selectivizr.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> </head> <body> ～ </body> </html>
- ベストアンサー
- HTML
- jqueryが動作しない
jqueryが動作しません。 私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。 ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。（拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- jquery lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>
- ベストアンサー
- JavaScript
- lightboxの設置
<html lang="ja"> <head> <link href="css/lightbox.css" rel="stylesheet" media="all" type="text/css" /> <script src="jquery-3.1.1.min.js" type="text/javascript"></script> <meta charset="UTF-8"> <title></title> </head> <body><a href="img/bb123.jpg" data-lightbox="group" data-title="S001"><img src="img/bb123.jpg" alt="" width="256" /></a> <script src="css/lightbox.js" type="text/javascript"></script> <script> lightbox.option({ 'fitImagesInViewport' : true, 'wrapAround': false }) </script> </body> </html> とりあえずテストで、lightbox2の設置をしようとしているのですが、 サイトに書いてあるのと同じように、入力してみたのですが、 サムネイル画像が、プレビュー機能で拡大して見れるようにしたいのですが、 lightbox２が機能してくれません。 http://www.oikawa-sekkei.com/web/design/js/lightbox_v2_8_1.html 因みに、jqueryは、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。
- 締切済み
- その他（プログラミング・開発）
