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

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

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

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

HTML

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

CSS

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

Q&A

1回答

2918閲覧

shuffle.jsを使い、レスポンシブ対応のHPを作成しているが要素を中央寄せにできなくて困ってます

daichanman

総合スコア6

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/01/07 14:25

編集2022/01/12 10:55

HTMLでホームページを作っているのですが、画面を狭くしたときに、liの要素が中央寄せに出来なくて困っております。

レスポンシブで要素が1つしかない時に、中央寄せにしたいです。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" type="text/css" href="style.css" /> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7 <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> 8</head> 9 10<body> 11 <div class="header-box"> 12 <ul id="btns"> 13 <li data-group="all" class="active btn">ALL</li> 14 <li data-group="a" class="btn">A</li> 15 <li data-group="b" class="btn">B</li> 16 <li data-group="other" class="btn">OTHER</li> 17 </ul> 18 </div> 19 20 <section class="works"> 21 <ul id="sortlist"> 22 <li data-groups='["other","all"]'> 23 <div class="work-title">1</div> 24 <p class="work-message">Lorem </p> 25 </li> 26 27 <li data-groups='["other","all"]'> 28 <div class="work-title">2</div> 29 <p class="work-message">Lorem </p> 30 </li> 31 32 <li data-groups='["other","all"]'> 33 <div class="work-title">3</div> 34 <p class="work-message">Lorem </p> 35 </li> 36 37 <li data-groups='["b","all"]'> 38 <div class="work-title">4</div> 39 <p class="work-message">Lorem </p> 40 </li> 41 42 <li data-groups='["b","all"]'> 43 <div class=" work-title">5</div> 44 <p class="work-message">Lorem </p> 45 </li> 46 47 <li data-groups='["a","all"]'> 48 <div class=" work-title tag">6</div> 49 <p class="work-message">Lorem </p> 50 </li> 51 52 <li data-groups='["a","all"]'> 53 <div class="work-title tag">7</div> 54 <p class="work-message">Lorem </p> 55 </li> 56 </ul> 57 </section> 58 59 <script src="js/shuffle.min.js"></script> 60 <script> 61 $(function() { 62 $('#btns li').on('click', function() { 63 var $this = $(this), 64 $grid = $('#sortlist'); 65 $grid.shuffle($this.data('group')); 66 }); 67 68 $('#sortlist').shuffle({ 69 group: 'all', 70 speed: 700, 71 easing: 'ease-in-out' 72 }); 73 }); 74 75 </script> 76</body></html> 77

css

1@charset "utf-8"; 2 3body { 4 color: #666666; 5 width: 100%; 6 max-width: 1120px; 7 margin: 0 auto; 8} 9 10.btn { 11 display: inline-block; 12 width: 150px; 13 height: 36px; 14 background-color: #eee; 15 text-align: center; 16 line-height: 36px; 17} 18 19.header-box { 20 position: relative; 21} 22 23#btns { 24 position: absolute; 25 top: 20px; 26 right: 0; 27} 28 29.works{ 30 padding-top: 100px; 31} 32 33#sortlist li { 34 background-color: #eee; 35 margin: 30px; 36 list-style:none; 37 width: 330px; 38 height: 330px; 39 border-radius: 20px; 40} 41 42.work-title { 43 padding-top: 100px; 44 text-align: center; 45 font-weight: bold; 46}

現行バージョンではshuffle.jsが動かなかった為
古いバージョンを使わせてもらっております。
こちらのリンクと同じshuffle.min.js持ってきました。
コードが長い為リンクを貼っています。
shuffle.jsのデモ

683px以下や2つ並んでいる時、中央寄せにしたいのですが、やり方がわかりません。
marginやtext-alignでは上手く出来ませんでした。
liの要素は出来ることなら収縮させずに実現したいと思っております。

初心者のため、汚いコードですがご教授していただけたら助かります。

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

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

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

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

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

m.ts10806

2020/01/07 21:45

強いてなら「長いコードをべたっと全部」ではなく、「問題のところだけを再現できるミニマムコード」にすると問題切り分けもしやすくなるし、コードも外部サービス使わずに提示できるかなと。 ご自身でも「長いコードだ」と思うのでしたら他人はもっと長く感じます。
daichanman

2020/01/08 03:05

回答ありがとうございます。 おっしゃる通りです。修正させていただきました。 shuffle.min.jsのみ長い為、リンクを掲載させてもらってます
guest

回答1

0

ライブラリ内で一定のCSSを制御してしまっているので、微調整は難しそうです。ですが、コンテンツと部品の間にマージン調節用のブロック要素をかませて、それをメディアクエリで調節すれば、まあだいたいは行けそうです。いちおう、Chromeの開発コンソールでiPhone4ポートレイト(縦向き)、iPad Proのランドスケープ(横向き)までは見た目上、制御はできました。

html

1<div class="wire"><!-- リストのマージン調節用 --> 2 <ul id="sortlist"> 3 <li data-groups='["other","all"]'> 4 <div class="work-title">1</div> 5 <p class="work-message">Lorem </p> 6 </li> 7 8 <li data-groups='["other","all"]'> 9 <div class="work-title">2</div> 10 <p class="work-message">Lorem </p> 11 </li> 12 13 <li data-groups='["other","all"]'> 14 <div class="work-title">3</div> 15 <p class="work-message">Lorem </p> 16 </li> 17 18 <li data-groups='["b","all"]'> 19 <div class="work-title">4</div> 20 <p class="work-message">Lorem </p> 21 </li> 22 23 <li data-groups='["b","all"]'> 24 <div class=" work-title">5</div> 25 <p class="work-message">Lorem </p> 26 </li> 27 28 <li data-groups='["a","all"]'> 29 <div class=" work-title tag">6</div> 30 <p class="work-message">Lorem </p> 31 </li> 32 33 <li data-groups='["a","all"]'> 34 <div class="work-title tag">7</div> 35 <p class="work-message">Lorem </p> 36 </li> 37 </div> 38 </ul> 39</div>

CSS

1/*付け加える*/ 2@media( max-width: 1024px){ 3 .wire{ 4 margin-left: auto; 5 marign-right: auto; 6 max-width: 1024px; 7 width: 90%; 8 } 9}

もっとSassやBootstrapに精通した人がいれば、その方の意見を仰ぎたいところですね。

投稿2020/01/13 02:04

FKM

総合スコア3608

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問