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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1402閲覧

この実装を行うにはどうすればいいか

dddd_gond

総合スコア38

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/23 09:43

編集2017/03/02 09:41

boostrapを使って自分の趣味をのせるサイトを作ろうと思いまして、こんな感じのプログラムを書きましたが、2つ解決できないことがあります
1つ...ナビゲーションのリンクが文字にしかかからない
2つ...ウィンドウサイズを小さくするとナビゲーションの並び方がおかしい?
アドバイスなどお願いします。

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"/> 5<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 6<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 7</head> 8<body> 9<div class="container"> 10<div class="row"> 11 <div class="col-xs-12"><h1>ようこそ!</h1></div> 12</div> 13<div class="row"> 14 <div class="col-md-3"> 15 <a href="">リンク1</a> 16 </div> 17 <div class="col-md-3"> 18 <a href="">リンク2</a> 19 </div> 20 <div class="col-md-3"> 21 <a href="">リンク3</a> 22 </div> 23 <div class="col-md-3"> 24 <a href="">リンク4</a> 25 </div> 26</div> 27</div> 28</body> 29</html>

CSS

1.col-xs-12 { 2background-color: blue; 3} 4 5.col-md-3 { 6background-color: red; 7height: 50px; 8}

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

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

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

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

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

kei344

2017/02/23 10:12

「並び方がおかしい」とは具体的にどのような状況でしょうか。
guest

回答1

0

ベストアンサー

このような感じでしょうか。
col-md-を指定すると、画面の幅が992px以上になるとレイアウトが変化します。
そのため、今回はcol-xs-を指定しましょう。

HTML

1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7 <title>タイトル</title> 8 <style type="text/css"> 9 .col-xs-12 { 10 background-color: blue; 11 } 12 13 .col-xs-3 { 14 background-color: red; 15 height: 50px; 16 } 17 18 .col-xs-3:hover { 19 background-color: white; 20 } 21 </style> 22</head> 23<body> 24<div class="container"> 25 <div class="row"> 26 <div class="col-xs-12"><h1>ようこそ!</h1></div> 27 </div> 28 <div class="row"> 29 <a href=""> 30 <div class="col-xs-3"> 31 リンク1 32 </div> 33 </a> 34 <a href=""> 35 <div class="col-xs-3"> 36 リンク2 37 </div> 38 </a> 39 <a href=""> 40 <div class="col-xs-3"> 41 リンク3 42 </div> 43 </a> 44 <a href=""> 45 <div class="col-xs-3"> 46 リンク4 47 </div> 48 </a> 49 </div> 50</div> 51</body> 52</html>

投稿2017/02/23 19:30

s8_chu

総合スコア14731

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問