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

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

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

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

CSS

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

Q&A

解決済

1回答

1311閲覧

タイトルを中央に持ってきたい

sobue

総合スコア329

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/10/15 13:47

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>タイトル</title> 7 <meta name="description" content="ディスクリプション" /> 8 <meta property="og:type" content="website" /> 9 <meta property="og:title" content="タイトル" /> 10 <meta property="og:image" content="/img/icon.png" /> 11 <meta property="og:url" content="http://example.net/" /> 12 <meta property="og:site_name" content="サイト名" /> 13 <meta property="og:description" content="ディスクリプション" /> 14 <meta name="robots" content="noarchive"> 15 <link rel="shortcut icon" href="/img/favicon.ico"> 16 <link rel="stylesheet" type="text/css" href="css/main.css"> 17 18 </div> 19 </head> 20 <body> 21 22 23 24 <h1><div id="nav-drawer"> 25 <input id="nav-input" type="checkbox" class="nav-unshown"> 26 <label id="nav-open" for="nav-input"><span></span></label> 27 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 28 <div id="nav-content">ここに中身を入れる</div>タイトル</h1> 29 30 31 32 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 33 <script type="text/javascript" src="js/main.js"></script> 34 <body> 35 <html> 36

css

1@charset "UTF-8"; 2@import url(/css/sanitize.css); 3@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 4.clearfix:after { 5 content: "."; 6 display: block; 7 clear: both; 8 height: 0; 9 visibility: hidden; 10} 11 12@media screen and (max-width: 300px) { 13 html { 14 font-size: 62.5%; 15 } 16} 17 18@media screen and (min-width:300px)html { 19 font-size: 100%; 20} 21 22*, *::before, *::after { 23 box-sizing: border-box; 24} 25 26a:link, a:visited, a:hover, a:active { 27 color: #0000ff; 28 text-decoration: none; 29} 30 31body { 32 font-family: 'Noto Sans Japanese', serif; 33 overflow-y: auto; 34 padding: 0px; 35 margin: 0px; 36} 37 38h1 { 39 padding: 5px; 40 color: #010101; 41 background: #eaf3ff; 42 border-bottom: solid 3px #516ab6; 43 margin: 0px; 44} 45 46.makerStyle { 47 margin-left: 5px; 48 } 49 50@charset "UTF-8"; 51@import url(/css/sanitize.css); 52@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 53body { 54 background: #ededed; 55 font-family: 'Open Sans', sans-serif; 56} 57.center { 58 position: absolute; 59 display: inline-block; 60 top: 50%; left: 50%; 61 transform: translate(-50%, -50%); 62} 63 64/*ヘッダーまわりはご自由に*/ 65header { 66 padding:10px; 67 background: skyblue; 68} 69 70#nav-drawer { 71 position: relative; 72} 73 74/*チェックボックス等は非表示に*/ 75.nav-unshown { 76 display:none; 77} 78 79/*アイコンのスペース*/ 80#nav-open { 81 display: inline-block; 82 width: 30px; 83 height: 22px; 84 vertical-align: middle; 85} 86 87/*ハンバーガーアイコンをCSSだけで表現*/ 88#nav-open span, #nav-open span:before, #nav-open span:after { 89 position: absolute; 90 height: 3px;/*線の太さ*/ 91 width: 25px;/*長さ*/ 92 border-radius: 3px; 93 background: #555; 94 display: block; 95 content: ''; 96 cursor: pointer; 97} 98#nav-open span:before { 99 bottom: -8px; 100} 101#nav-open span:after { 102 bottom: -16px; 103} 104 105/*閉じる用の薄黒カバー*/ 106#nav-close { 107 display: none;/*はじめは隠しておく*/ 108 position: fixed; 109 z-index: 99; 110 top: 0;/*全体に広がるように*/ 111 left: 0; 112 width: 100%; 113 height: 100%; 114 background: black; 115 opacity: 0; 116 transition: .3s ease-in-out; 117} 118 119/*中身*/ 120#nav-content { 121 overflow: auto; 122 position: fixed; 123 top: 0; 124 left: 0; 125 z-index: 9999;/*最前面に*/ 126 width: 90%;/*右側に隙間を作る*/ 127 max-width: 330px;/*最大幅*/ 128 height: 100%; 129 background: #fff;/*背景色*/ 130 transition: .3s ease-in-out;/*滑らかに表示*/ 131 -webkit-transform: translateX(-105%); 132 transform: translateX(-105%);/*左に隠しておく*/ 133} 134 135/*チェックが入ったらもろもろ表示*/ 136#nav-input:checked ~ #nav-close { 137 display: block;/*カバーを表示*/ 138 opacity: .5; 139} 140 141#nav-input:checked ~ #nav-content { 142 -webkit-transform: translateX(0%); 143 transform: translateX(0%);/*中身を表示*/ 144 box-shadow: 6px 0 25px rgba(0,0,0,.15); 145} 146

上記のソースでタイトルを中央に持ってきたいのですが、text-align:centerにするとバーガーメニューまで中央に来てしまうので困っています。
わかる方、ご教示ください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

やり方はたくさんあります。1例として
タイトルはdivでくくって、

<div class="title">タイトル</div> に修正し、あとはcssでfloatで並べます。 ```css #nav-drawer .title { text-align: center; width: calc(100% - 30px); padding-right: 30px; float: right; } ``` 他にも、position: absoluteを使う方法とか、いくらでもあります

投稿2018/10/15 14:54

kaba

総合スコア314

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

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

sobue

2018/10/15 15:16

position: absoluteはそのままではうまくいきませんでした。 が、最初の回答で解決しました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問