回答数
気になる
-
文字の表示のさせかた
7.350を セル内で 添付のように入力したら表示させたいのですがどうやればいいのでしょうか? 教えてください。 作成された方が退職されて聞ける方がいません・・・;; 写真はセルをまたいでいますが、これは1つのセルの中です。 同じように別のセルに7.350と入力しても写真のようにならないのです。 教えてください。;;
質問日時: 2021/10/15 16:56 質問者: tttaaa7
ベストアンサー
4
2
-
webサイト制作についてです。記述したHTMLとCSSについてFirefox、Edge、IE、Goo
webサイト制作についてです。記述したHTMLとCSSについてFirefox、Edge、IE、Google Chromeで表示を確認してみたところ、Google Chromeでしか正しくレイアウトされません。リセットCSSも記述したのに…。何か可能性のある原因があったら教えていただきたいです。
質問日時: 2021/10/12 08:44 質問者: aira10
ベストアンサー
4
0
-
Dreamweaverで、ul要素の下に写真を挿入したいんですけど、何回やっても ・○○ ・○○ 写
Dreamweaverで、ul要素の下に写真を挿入したいんですけど、何回やっても ・○○ ・○○ 写真 ・○○ となってしまうんです。 上、下、などを押した後に何か操作しますか?
質問日時: 2021/10/11 12:34 質問者: きょもきょも
解決済
2
0
-
webデザイナー現場の方に質問です。 音読して実際コードを打って見ってブラウザーを表示すると実感が沸
webデザイナー現場の方に質問です。 音読して実際コードを打って見ってブラウザーを表示すると実感が沸きました。作品制作迄たどり着けるようになりたいのですがこのやり方で良いのでしょうか?分からないことは調べてます。動作しないコードがある時はどうやって解決してますか?調べたのですが動作しません。困りました
質問日時: 2021/10/05 11:04 質問者: 景色が好き
ベストアンサー
2
1
-
Webデザイナー現役の方に質問です。 実務未経験です。 実務を積められるレベルになる為にあることをし
Webデザイナー現役の方に質問です。 実務未経験です。 実務を積められるレベルになる為にあることをしています。それは下記の通りです。 ジョギングをした後Webデザイナーのテキストを音読しながら実際打って見ようと思います。 ジョギングした後、音読をすると頭に残ると言われていますが自分でページ数を決めてやって繰り返す方が良いのか、それともちがいないページを読んで回数を決めるのとどちらが良いですか?
質問日時: 2021/10/04 09:40 質問者: 景色が好き
解決済
3
1
-
WEBページのヘッダーフッターを非表示にした本文のみを表示させたい
お世話になります。 いろいろなサイトを参考にして、現在flexItemを使用して、 左側にリンクメニューを並べて右側にそれぞれの押したリンク先の ページを表示するものを作成しています。 表示しているのはガルーンのポータルサイトです。 メイン画面を左右に分割して、左のリンクを押したら 右に該当のリンク先のページが表示できるようにはなっていますが 右のフレームの中にも、メイン画面のヘッダー部分を含めたページ全体が 表示されています。 リンク先は、同じ掲示板の中の別々の記事で、ページの構成は同じです。 右のフレームには、本文の部分のみ表示させたいのですが、 そんなことは可能でしょうか? どうぞよろしくお願いします。
質問日時: 2021/09/30 14:28 質問者: hori29
解決済
1
1
-
div要素と横並び
htmlとcssについての質問です。div要素とdiv要素を横に並べて、画面の中央に表示させたいのですが、どのようにCSSを表示すればいいですか? <div class="abc"> <div class="def"> 1 </div> <div class="ghi"> 2 </div> </div>
質問日時: 2021/09/29 16:36 質問者: オバケイ
ベストアンサー
5
0
-
cssで 〇〇あいうえお (〇〇は空白) としたい場合、padding-left: 30px;かma
cssで 〇〇あいうえお (〇〇は空白) としたい場合、padding-left: 30px;かmargin-left: 30px;だとどちらが良いのでしょうか?また違いはなんですか?教えてください。
質問日時: 2021/09/25 21:03 質問者: kimkim0408
解決済
4
1
-
画像の上にテキスト配置で、拡大縮小でずれないようにする方法についてアドバイス願います。
何度も話題になっている内容だと思うのですが、色々と調べてみてもやっぱり理解しきれないので、申し訳ありませんがアドバイスをお願いいたします。 タイトルの通りなのですが、行いたいことは、画像の上にテキストを掲載し、ブラウザの拡大縮小、またはスマホなどでも同じような比率で表示する方法についてです。 添付した画像を見て頂きたいのですが、白いテキストフィールド風のところに文字(テキスト)を配置したい場合に、どのように行えばレスポンシブ時に、画像の拡大縮小が生じても、文字を同じ状態(比率)で表示することができますでしょうか? またこれを実現するためには、仮に、 <div class="box"></div> 背景画像として? <div class="box"><img src="hoge.png" …></div> 直接画像をセットするのか?? のようなボックスを用意し、そもそも画像をこの中に実態として入れてしまって、position:relative;を 親のboxに定義して、中の画像をposition:absolute;で指定するのか? そうでは無く、画像をbackgroundとして背景にし、その上にテキストとして白枠内のテキストを被せて設定するのか、どちらが良いのか?そもそもどちらも正しくないのかもしれませんが、根本的な方法が良くわかりません。 調べていく中で、こういった場合には、vw vh といった単位で指定するのが便利なような情報を拝見いたしますが、こちらも試すのですが、いまいち、どのときにvwを使うのか?vwを使った場合には、vhは使わなくてよいのか? この辺りの2つの使い方、定義方法も良くわからず試してみましたが、余白などやはり拡大と縮小で変わってしまいます。 大変申し訳ありませんが、背景画像にテキストを乗せて比率を保持する方法についてアドバイスを頂けないでしょうか? 何卒よろしくお願いいたします。
質問日時: 2021/09/24 22:01 質問者: yuyukina
解決済
2
0
-
Chrome HTML Document (.html)が開けない
GoogleChromeでページ保存したChrome HTML Document (.html)が開けないです。 開こうとすると、青い丸がマウスポインタの近くで回るだけです。 Chrome HTML Document (.html)のファイルの他に、 .phpのフォルダもあるため、開けるはずなのですが開きません。 この.htmlファイルを開くには、どのようにすればいいでしょうか? よろしくお願いいたします。
質問日時: 2021/09/21 03:21 質問者: hatehatewa
解決済
2
1
-
googleのモバイルユーザビリティ「テキストが小さすぎて読めません」について
トップページに、画像上に乗るようにキャッチフレーズをいれております。 キャッチフレーズですので読ませることよりもデザイン性を重視して改行をいれたく、文字サイズを小さく(13px)しているのですが… 今日きた問題検出で、トップページがついに引っかかってしまいました。 その他の箇所に13pxよりも小さいところはないため、おそらくキャッチフレーズ部分が引っかかっていると思われます。 この部分が「本文とは関係ない」や「飾り的な文章である」という信号をgoogle botに与えられるタグなどはありませんでしょうか? 詳しい方にお力を貸していただきたいです。
質問日時: 2021/09/13 16:41 質問者: わかりません。。
ベストアンサー
2
0
-
HTMLファイルのフォント
HTMLファイルを書くときにメモ帳のフォントをけいふぉんとに変えたら、webで開くときもけいふぉんとに変わりますか?
質問日時: 2021/09/12 16:20 質問者: derutaの汚部屋
ベストアンサー
1
0
-
301リダイレクトが使えないサーバーでの移転について
301リダイレクトが使えないサーバーでの移転についてです。 次のような形でやろうと思っていますが、 <html> <head> <meta http-equiv=”refresh” content=”5;URL=https://example.com/access/”> <link rel=”canonical” href=”https://example.com/access/”> <title>当ページは移転しました</title> </head> <body>当ページは<a href=”https://example.com/access/”>こちら</a>に移転しました。</br>5秒後に強制的に移動します。 </br>大変お手数ですが、ブックマーク、リンク先の変更をお願い致します。</br></body> </html> 旧ページの内容は消してしまって、上記のHTMLだけでいいでしょうか? それとも旧ページの内容も全部残しておくべきですか?
質問日時: 2021/09/10 22:03 質問者: wabisabio
解決済
1
0
-
HTML5 最新の <head> 内の書き方 ( 最小 )
最新の <head> 内の書き方 ( 最小 ) は以下でよいと思いますか ? <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href=""> <script src=""></script> <title>hoge</title> <meta name="description" content=""> </head>
質問日時: 2021/09/09 18:54 質問者: i-d-a-i
ベストアンサー
1
0
-
リンクボタンにgifアニメを使えるか
webサイトののリンクボタンにgifアニメを使うことは可能でしょうか。 ボタンA ↓ (ホバー時)ボタンB ↓ (クリック)gifアニメ再生 ↓ (再生が終わってから)リンク先へ遷移 という動きにしたいのですが、webデザインの勉強を始めたばかりで、やり方が分かりません。 htmlとcssの記述の仕方を教えていただけるとありがたいです。
質問日時: 2021/09/07 00:06 質問者: くろねこ9625
ベストアンサー
1
0
-
CSSが分からず困っています
画像AとBを横に2枚並べています。その下に同じく、CとDを横に2枚並べています。しかし、DIVで囲んでいるABの画像と同じくDIVで囲んでいるCDの画像の間に謎のスペースが出来ています。 下記のようなものをコピーして利用しているのですが、何が誤っているのか分かりません。コピペしか出来ない初心者ですが、ご教授お願いします <style>.myrow{display:-webkit-flex;display:flex;} .mycol-1{flex:1;} .mycol-2{flex:2;} .mycol-3{flex:3;} .mycol-4{flex:4;} .mycol-5{flex:5;} .mycol-6{flex:6;} @media screen and (max-width:700px){ .myrow{-webkit-flex-direction:column;flex-direction:column;} } </style> <div class="myrow"> <div class="col-1" style="margin: 1em;"> Aの画像 </div> <div class="col-1" style="margin: 1em;"> Bの画像 </div> </div> <div class="myrow"> <div class="col-1" style="margin: 1em;"> Cの画像 </div> <div class="col-1" style="margin: 1em;"> Dの画像 </div> </div>
質問日時: 2021/09/06 17:34 質問者: sp_murakami
解決済
4
0
-
Premiere Proのタイムラインのトラック表示の余白
Premiere Proのタイムラインのトラック表示の上段に余白ができています(画像参照) これはなんのためにあるんでしょうか?また非表示にできるものでしょうか? できるならやり方を教えてください
質問日時: 2021/09/06 09:44 質問者: yanyanyanyan
ベストアンサー
1
0
-
背景の図の上に別の図を重ねて表示するHTMLを作るフリーソフト
WYSIWYG対応のホームページエディター alphEDIT を使ってWEBページ書いています。 https://freesoft-100.com/review/soft/alphaedit.html 背景の図の上に別の図を重ねて表示させたいのですが、 alphEDIT では対応していないようです。 背景の図の上に別の図を重ねて表示させるには、たとえば 日本地図の西之島の位置に赤丸を重ねる には、下のようなHTMLを書けばよいことはわかっていますが、 重ねる位置の top : 220px; left : 203px; の座標位置を求めるのが面倒で、画面を見ながらマウスで場所を指定するとその座標が入力できるようなフリーソフトをご存じの方、教えてください。 <div style="position: relative;"> <img src="img/HP_HTML_000004.png" width="300" height="300" border="0" alt="日本周辺地図"> <div style="position: absolute; top : 220px; left : 203px;"> <img src="img/HP_HTML_000005.png" width="12" height="12" border="0" alt="西之島"> </div> </div>
質問日時: 2021/09/05 23:15 質問者: usa3usa
ベストアンサー
4
2
-
最近HTMLとCSSを勉強し始めました。 Webの勉強は全くの初心者です。 文字の羅列が呪文のように
最近HTMLとCSSを勉強し始めました。 Webの勉強は全くの初心者です。 文字の羅列が呪文のように見えて なんじゃこりゃーの状態です。 こんな私でも上達する方法ってありますか?
質問日時: 2021/08/31 00:24 質問者: さんまの佃煮
解決済
5
0
-
画像にリンクするには? 説明するのが難しいのですが、例えば添付した画像でいうと、画像のネギや牛乳パッ
画像にリンクするには? 説明するのが難しいのですが、例えば添付した画像でいうと、画像のネギや牛乳パックにマウスカーソルをあわせると、「ネギ」と表示させてリンクを飛ばせるようにしたいです。 これは何て検索すればスタイルシート?やり方、タグ?がでますでしょうか? ツールチップかなとおもったのですが、リンクをする方法がでません。
質問日時: 2021/08/30 00:16 質問者: トン子トン子
解決済
1
0
-
HTMLのバリデーション
HTML5の入力値バリデーションを使用して、 各入力項目のinputタグを記述するとどのようになりますか? 各項目のチェック条件 ・氏名:必須チェック ・郵便番号:必須チェック、半角数字3桁、半角ハイフン、半角数字4桁の形式(例:123-4567) ・年齢:必須チェック、半角数字のみ入力、0~120までの入力のみ可能 ・URL:url形式 <body> <main id="content"> <form method="post"> <div> <label for="name">氏名</name> <input id="name" /> </div> <div> <label for="zipcode">郵便番号</name> <input id="zipcode" /> </div> <div> <label for="age">年齢</name> <input id="age" /> </div> <div> <label for="url">URL</name> <input id="url" /> </div> <div> <input type="submit" value="送信" /> </div> </form> </main> </body>
質問日時: 2021/08/29 16:55 質問者: オバケイ
ベストアンサー
2
0
-
htmlの位置調整について
htmlで2つの数値をそれぞれ線で四角に囲って、並べたいのですが、 数値は可変の値で、枠線と枠線の間の幅は変えずに下のようなレイアウト作成をしたいです。 CSSを使って、うまくできないでしょうか。画面上のの右上角らへんに配置したいです。 ↓ちょっと変ですが、こんなイメージです。数値が四角で囲ってある感じです。 ------------ ---------------- | 99999 | | 39949434 | ------------ ---------------- <ー> 数値が変わり、四角の幅が変わっても ここの幅を常に同じにしたいです。 topやrightで位置を指定してしまうと、数値の桁が変わると場合、間の幅が変わってしまい困っております。 よろしくお願いします。
質問日時: 2021/08/23 19:57 質問者: ahahahabrain
解決済
1
0
-
【ホームページ、Webページ開発者に質問です】 アンケートのWebページで設問をラジオボタンの4択で
【ホームページ、Webページ開発者に質問です】 アンケートのWebページで設問をラジオボタンの4択で選択しないと送信ボタンを押しても未入力があるとエラーが出て送信できません。 Webページの開発者に連絡して、Webページを修正して貰わずに、公開されているサーバーにあるWebページのソースにラジオボタンのオプションを追加して送信サーバーに直接送りたいのですがソースを修正して送信ボタンを押してエラーを回避して送信する簡単なやり方を教えて下さい。 HTMLとCSSはわかります。修正して送信する方法を教えて下さい。
質問日時: 2021/08/18 19:12 質問者: gooproton
ベストアンサー
4
1
-
入力フォームに文字を入力するときに、フォーム内をタップやクリックしたときに、フォームの枠の色が変わる
入力フォームに文字を入力するときに、フォーム内をタップやクリックしたときに、フォームの枠の色が変わるのですが、付属画像参考。 緑の枠が黒になっている。黒のフォームの場合はスマホだとオレンジっぽい色がついてしまいます。PCではでは黒いフォームのみ色が付きません。 この変化する色を何とかしたいです。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="syoki.css"> <link rel="stylesheet" href="responsive.css"> <style> /* 入力フォームの位置 */ .auto-style1 { margin: auto; text-align: center; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> </script> </head> <body> <form action ="hpform1.php" method ="post" class="auto-style1"> <div class="auto-style1"> <p class="px-num"> 名前:※ </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/> </form> </body></html> ◎◎◎cssのコード /* 入力フォームのスタイル */ #name { border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 27.8em; /* 横幅 */ height: 36px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ } /* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/ .px-num{ line-height: 0px;/* 文字の行間 */ font-size: 22px;/* 文字の大さ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; }
質問日時: 2021/08/15 07:56 質問者: pjdmgam
解決済
1
0
-
webデザイナーで月収20万円稼げるレベルになるまでどれくらいの勉強必要ですか? 独学では難しいです
webデザイナーで月収20万円稼げるレベルになるまでどれくらいの勉強必要ですか? 独学では難しいですか?
質問日時: 2021/08/14 02:25 質問者: 雪村駿介
解決済
4
1
-
PHPでHPを書く際のCSSが適応されなくて困っています!
PHP でHP作成の勉強をしているのですが、色々なサイトを調べながらCSSを書き、headerに読み込ませているのですが、一番左上のプレビューの通り、 赤色の文字が赤にならなかったり、ナビのカ中点や下線の無効化などがそのままで、 全く反映されていません。 何か原因や根本的にここが違う等、お知恵をいただきたく、よろしくお願いします。
質問日時: 2021/08/13 17:14 質問者: yuppiiiiii
ベストアンサー
5
0
-
画像を2列にしたいのと、グレー色のfooterをサイトの下の方に表示させたいです!わかる方お願い
html cssのコードは以下のリンクに貼ってあります! https://hiro245.github.io/goo/ 1つ目は画像を縦2列にするやり方をお願い致します。 (yahoojapanが左上、yahooが右上、amazon.co.jpが左下、amazonが右下でお願い致します。) あと画像が6個入る予定です。 2つ目はグレー色のfooterを画像の下、ページの下の方にしたいです! reset.cssもかけてます 情報が足りないかもしれないので何なりとお申し付けください。
質問日時: 2021/08/11 04:15 質問者: hiro_saya
ベストアンサー
2
0
-
HTMLで表を作成する際のcolspan属性について質問です。 colspanはセルを横方向に結合す
HTMLで表を作成する際のcolspan属性について質問です。 colspanはセルを横方向に結合するための属性名だったと思いますが、columnの意味は「柱」とか「円柱」でしたよね?イメージすると、縦方向を表す単語のように思えますが、colspanでは横方向なのですね…。なんだか腑に落ちなくて…。それでもって、rowspanのrowは「(横に並んだ)列、行」ですよね?でも「rowspan」では縦方向…。 そして別の記事には、「行」は横方向で、「列」は縦方向のことを言うという記述がありましたが、必ずしもそうとは限らないのでは…と思いました。 ややこしすぎて頭混乱してます。納得したいです。よろしくお願いいたします。
質問日時: 2021/08/10 17:15 質問者: aira10
ベストアンサー
1
0
-
CSSのcalc 計算を行う際の単位はどのように指定すればよいでしょうか?
上手く定義ができず、また調べてみるのですが、計算自体はいくつもあるのですが、最終的な計算された数字の単位の定義が分からずアドバイスをお願いいたします。 例えば、%で位置を指定したいばあい、現在のピクセルの単位から計算を行って%になった値をセットするかと思います。 現在はあらかじめ計算した値をCSS側に●●%といった具合で記述していますが、calcを使えば計算しなくても良いかと思ったのですが、悩んでしまいました…。 80/1500*100=5.333…%の場合、配置一の高さの場合 top:5.333% と定義します。 この計算自体をセットしたいのですが、 top:calc(80px/1500px*100); でセットするのですが、うまくいきません。 また、この場合計算された値は何になるのでしょうか?px?? ちなみに今回は、出された数字を%として扱いたいのですが、こういった場合、どうやって計算された数字に%やpxなどの単位をセットしたらよいのでしょか? 宜しくお願いいたします。
質問日時: 2021/08/10 13:30 質問者: 404not_found
ベストアンサー
2
0
-
指定位置に来たら要素をボーダーで囲むには?
色々と試してみるのですが、いまいち仕組みが理解できず実装ができずアドバイスをお願いできればと思います。 行いたいとこは、特定の要素が画面に入った際に、borderがアニメーションで始まって囲んでいくというものです。borderが上から、 →↓←↑の流れで動いていくイメージです。 スクロールの検知は実装しています。 ただ、どのようにボーダーの線を走らせるのかが理解できておらずうまくいきません…。 動きのイメージとしてはこちらのサイトに掲載されている、 https://goworkship.com/magazine/css-border-effects/ CSS Border Transitions内の、Drowの動きになります。 ただ、こちらのサイトで紹介されているものは、マウスオーバー時に発火するため、なんとなくhoverというのは理解できるのですが、スクロールで表示された際に走らせるにはどうしたらよいものでしょうか? おわかりになる方いらっしゃいましたらアドバイスを頂けますと幸いです。 宜しくお願いいたします。
質問日時: 2021/08/08 15:54 質問者: yuyukina
ベストアンサー
1
0
-
html初めてです、教えてください!
添付してある写真のようなものを作りたいのですが、いくつか質問があります! ①↓だと、「さしすせそ」と「たちつてと」との間がなくなって詰まってしまいます。 ②「あいうえお」の部分だけフォントサイズを大きくしたいです。 ③上下の中央寄せにしたいです。 ④「かきくけこ」「さしすせそ」「たちつてと」の文字の長さに関わらず、後ろの図形の大きさが一定になるようにしたいです(「○○○○」と、「○○○○○○○○」では、後ろの図形の横幅が長くなって変わってしまうので、同じ長さになるようにしてほしいです。) 以前教えて!gooで作ってもらったのを基盤に、部分的に自分で変更したものなので「ん??」となる部分があるかもしれないです... 全体の形はこのままで進めたいです!説明不足な部分もあるかもしれないですがよろしくお願いします! <html> <center> あいうえお</p> <a class=linked-button href="リンク"> <b>かきくけこ</b> </a></p> <a class=linked-button href="リンク"> <c>さしすせそ</c> </a></p> <a class=linked-button href="リンク"> <d>たちつてと</d> </a> <style> a.linked-button { display:inline-block; text-align:center; } a.linked-button:any-link { text-decoration:none; color:black; } a.linked-button > b { display:block; margin:2px; padding:0.5em 6em; border-radius:2em; background:#660066; color:white; box-shadow:0 0 1px darkorange; } a.linked-button > b:after { content:" \27A4" } a.linked-button > c { display:block margin:2px; padding:0.5em 6em; border-radius:2em; background:#00acee; color:white; box-shadow:0 0 1px darkorange; } a.linked-button > c:after { content:" \27A4" } a.linked-button > d { display:block margin:2px; padding:0.5em 6em; border-radius:2em; background:#3b5998; color:white; box-shadow:0 0 1px darkorange; } a.linked-button > d:after { content:" \27A4" } </style> </center> </html>
質問日時: 2021/08/08 12:28 質問者: taiseihoukan1867
ベストアンサー
1
0
-
HTMLについてです
htmlとかは初心者なのですが、調べても出てこないのでどのようにしたらいいのか教えてほしいです。 下の画像は例なのですがこのような文字入りの図形みたいなところをクリックするとほかのリンクに飛べるようにしたいです。 回答よろしくお願いします
質問日時: 2021/08/07 02:54 質問者: taiseihoukan1867
ベストアンサー
3
1
-
レスポンシブコードの意味なのですが、 max-width min-widthについて。 @media
レスポンシブコードの意味なのですが、 max-width min-widthについて。 @media screen and (max-width: 640px) { 640以下の幅のレスポンシブ対応のコード 640px丁度も含みますでしょうか? それとも639pxなら適応でしょうか? /* 画面幅(641px以上の時までの適応)指定 */ @media screen and (min-width: 641px){ 641以上の画面幅でのレスポンシブ対応のコード 641px丁度も含みますでしょうか? それとも642px以上なら適応でしょうか?
質問日時: 2021/08/05 18:13 質問者: pjdmgam
ベストアンサー
1
0
-
IEでmargin:autoが効かない
ページを作り動作確認しています。 IEで上下中央揃えにしたい箇所があるのですが、上寄せ表示されます。 現在、「@media all and (-ms-high-contrast: none) 」でmargin-topを150pxにして少しmarginを取って(上下中央揃いではないですが)表示させているのですが、他の方法でIEで上下中央揃いにする方法を教えて頂けますか。よろしくお願いします。 <section class="w3l-banner-3-main"> <div class="banner-3"> <div class="wrapper"> <div class="cover-top-center-9"> <div class="w3ls_cover_txt-9"> /*ここがIEでは左右中央揃えのみで上下中央揃えにならず上寄せされる*/ <div class="svgwrap"> </div> </div> </div> </div> </div> </section> 〇CSS .w3l-banner-3-main { } .w3l-banner-3-main .banner-3 { background: url(../images/1.jpg) no-repeat left; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; position: relative; background-repeat: repeat-x; animation: slideleft 10000s 5s infinite linear; -webkit-animation: slideleft 10000s 5s infinite linear; z-index: 0; } .w3l-banner-3-main .banner-3:before { content: ""; background: rgba(16, 16, 16, 0.46); position: absolute; top: 0; min-height: 100%; left: 0; right: 0; z-index: -1; } .w3l-banner-3-main .cover-top-center-9 { min-height: 36em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 72vh; } .w3l-banner-3-main .w3ls_cover_txt-9 { max-width: 750px; text-align: center; margin: auto; } .svgwrap { position: relative; width: 100%; height:100px; } /*IE*/ @media all and (-ms-high-contrast: none) { .w3l-banner-3-main .w3ls_cover_txt-9 { max-width: 750px; text-align: center; margin:150px auto auto auto; } }
質問日時: 2021/08/04 10:58 質問者: apricot1101
ベストアンサー
1
0
-
ポップアップ中に動くカウントダウンを作りたい
htmlやCSSで作ったカウントダウンがポップアップ中に止まる。 こんばんは。自作のTRPG(対話ゲーム)の演出のため「10分間をカウントダウンするタイマー」を作りたく、右も左もわからない初心者ですがひとつずつ調べながら以下のところまで作ることができました。 ※現時点ではテスト用に30秒のカウントダウンで書いています。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title data-ori="test">タイトル</title> </head> <body> <br> <h2 style="text-align:center"><font size="48">プログラムの削除状況の<br>進捗を表示しています</font><h2> <hr> <h2 style="text-align:center"><form name="test" onSubmit="return false;"> <input type="text" name="counter" style="width:300px;height:100px; font-size:50px; text-align:center"> <input type="button" name="b_start" size="20" value="停止" onlik="count_start"()> </form><h2> <script type="text/javascript"> //初期設定 def_count = 30; timer_reset(); count_start(); function timer_reset() { //タイマーの初期化 timerID = 0; document.test.counter.value = def_count; document.test.b_start.disabled = false; } function set_timer(num) { //規定時間の設定 if (timerID > 0) { count_stop(); } document.test.counter.value = num; count_start(); } function count_start() { //カウント開始 count = document.test.counter.value; document.test.b_start.disabled = true; timerID = setInterval('countdown()',1000); } function countdown() { //カウント表示 count--; document.test.counter.value = count_format(count); if (count <= 0) { count_stop(); } } function count_stop() { //カウント停止 clearInterval(timerID); timer_reset(); } function count_format(num) { //カウント表示の書式設定 var tm,ts; tm = Math.floor(num / 60); //分 ts = num % 60; //秒 if (ts < 10) ts = "0" + ts; return tm + ":" + ts; } </script> </div> <h2 style="text-align:center"> <script type = "text/javascript"> <!-- function matchPass() { var inpass = document.forms[ "pass" ].elements[ "inpass" ].value; var validpass = "正答"; if( inpass == validpass ) location.href = "goodplus.html"; else alert( "パスワードが認証できません" ); } </script> </head> <body> <form name = "pass"> <div> <input type = "text" value = "" name = "inpass" placeholder="回数制限なし" > <input type = "button" value = "認証" onclick = "matchPass();"> </div> <br> <font size="6">強制デリートを実行中です<br> 停止するにはパスワードを入力してください<br> <br> </font><h2> <HTML> <HEAD> <font size="1"> <STYLE Type="text/css"> .txtstyle { border-style: none} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var start=new Date(); var cnt_val=30; start=Date.parse(start)/1000; function count_down(){ var now=new Date(); now=Date.parse(now)/1000; var x=parseInt(cnt_val-(now-start),10); if(document.form1){document.form1.c_down.value = x;} if(x>0){ timerID=setTimeout("count_down()", 100) }else{ location.href="good.html" } } window.setTimeout('count_down()',100); //--> </SCRIPT> </HEAD> <BODY> <center> <FORM NAME="form1"> <INPUT TYPE="text" NAME="c_down" SIZE="2" VALUE="30" class=txtstyle>seconds left</font> </FORM> </center> </BODY> </HTML> </body> </html> ・何月何日まで、ではなくURLアクセス時点から10分間を強制カウントダウン ・誤答をするとメッセージがポップアップ ・正答か時間切れで各リンク先へ としたいのですが、ポップアップ中カウントダウンが停止してしまい、しかし内部では動いていて表示とズレが発生します。ポップアップを10秒表示させた場合『残り10秒』表示時点で時間切れリンクが作動したり。 これをポップアップ中もカウントダウンする、またはポップアップ終了時に経過時間を反映させるようにしたいです。自分でも調べましたが調べ方が悪いのか上手くわからず、お知恵を貸して頂けませんでしょうか。
質問日時: 2021/08/04 03:00 質問者: 荷台島
ベストアンサー
4
0
-
HTMLについての質問です。 僕はbに加えてdも間違ってないと思ったのですが、dはなぜ誤りなのでしょ
HTMLについての質問です。 僕はbに加えてdも間違ってないと思ったのですが、dはなぜ誤りなのでしょうか? 5列×50行=250文字ではないのですか?
質問日時: 2021/08/03 21:49 質問者: 助けてミクロマクロ
ベストアンサー
4
0
-
CSS ul liを横並びにする際に・・・。
現在HTMLが <li><a href="index.html" class="btn btn-radius-solid">ホーム</a></li> CSSが header{ z-index: 9999; width: 100%; height: auto; text-align: center; position: fixed; overflow: hidden; background-color: rgba(255, 255, 255,); } a { color: #000000; } a:hover { color: #c0c0c0; } .header-ul{ clear: both; min-width: 320px; } .header-ul li{ display: inline-block; margin-top: 15px; margin-bottom: 10px; height: auto; } a.btn-radius-solid { border: 1px solid #ccc; background: #f1e767; background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee)); background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%); background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%); -webkit-box-shadow: inset 1px 1px 1px #fff; box-shadow: inset 1px 1px 1px #fff; } a.btn-radius-solid:hover { background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee)); background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%); background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%); } __ __ __ |文字|文字|文字|  ̄ ̄  ̄ ̄  ̄ ̄ この形式で横並びになっているのですが、 __ |画像| |文字|  ̄ ̄ このように画像(ロゴみたいな小さいpng)を入れるとなると <li><a href="index.html" class="btn-radius-solid"><img src="">ホーム</a></li> ここに画像を入れる事になると思いますが、 後入れするとCSSが崩れてしまいます。 なにかいい方法は無いでしょうか? 宜しくお願い致します。
質問日時: 2021/08/03 17:01 質問者: Cotton03
解決済
2
1
-
添付画像のような画面を作成してみたんですがうまいこといきません
添付画像のような画面を作成してみたんですがうまいこといきません 下記の解答を参考に作ったのですが行き詰っていますか どなたか補正していただけませんでしょうか 私の掲載したコードを全く無視してコーディングしていただいてもかまいません すみません。。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=""> <style> #page { display: grid; width: 100%; grid-template-columns: 150px 1fr; grid-template-areas: "nav" "main"; } nav { background-color: lightblue; grid-area: nav; } main { background-color: rgb(226, 188, 204); grid-area: main; display: grid; width: 100%; grid-template-rows: 200px 200px; grid-template-areas: "main-search" "main-list"; } .main-search{ grid-template-areas: "main-search" } .main-list{ grid-template-areas: "main-list" } .main-search td:first-child { background-color: rgb(223, 115, 27); width: 28%; } .main-search table tr td { border-collapse: collapse; border: 1px solid green; } .main-search table { border-collapse: collapse; border: 1px solid green; } .main-list td:first-child { background-color: rgb(223, 115, 27); width: 28%; } .main-list table tr td { border-collapse: collapse; border: 1px solid green; } .main-list table { border-collapse: collapse; border: 1px solid green; } </style> </head> <body> <section id="page"> <nav>Navigation</nav> <main> <div class="main-search"> <table> <tr> <td>ss</td> <td>ss</td> <td>ss</td> <td>ss</td> </tr> </table> </div> <div class="main-list"> <table> <tr> <td>ff</td> <td>ff</td> <td>gg</td> <td>gg</td> </tr> </table> </div> </main> </section> </body>
質問日時: 2021/08/03 05:42 質問者: 39OK
解決済
1
0
-
ネットやプログラミング(?)に詳しい方に聞きたいんですが Mozilla/5.0 (iPhone;
ネットやプログラミング(?)に詳しい方に聞きたいんですが Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Mobile/15E148 これってなんですか? 違うメールアドレス・名前の人から来た2つのメールのそれぞれにこの文が書いてありました 同じ携帯から送られて来たメールって解釈していいんでしょうか(iPhoneとかversionとか書いてあるので…)
質問日時: 2021/08/02 20:28 質問者: pizza_time
解決済
3
0
-
スマートフォンやタブレットのレスポンシブデザインについて
私は不動産業界で勤めておりますが、多少HTMLの知識があるので今回会社で扱う分譲地の特設サイトを商用利用可能なテンプレートを使って作りました。 試行錯誤しながらなんとか形になりましたが、どうしてもスマホで見た時に表示がズレてしまいます。 私がWEB業界にいた時は20年近く前なのでレスポンシブデザインに不慣れです。 色々調べましたがどこを直せばよいのか分からず投稿致しました。 操作の上で支障は無いのですが素人なりにここまで頑張ったのでキッチリ作りたいと考えておりますのでご教授よろしくお願いいたします。 添付画像のように横に白い空白ができてしまします。 URL https://randslife.jp/bunjou/tomiai/
質問日時: 2021/07/31 16:04 質問者: ランズライフ
ベストアンサー
1
0
-
添付画像のような画面を作成してみたんですがうまいこといきません
添付画像のような画面を作成してみたんですがうまいこといきません 下記の解答を参考に作ったのですが行き詰っていますか どなたか補正していただけませんでしょうか 私の掲載したコードを全く無視してコーディングしていただいてもかまいません すみません。。。 https://oshiete.goo.ne.jp/qa/12486408.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=""> <style> #page { display: grid; width: 100%; height: 1000px; grid-template-rows: 100px 50px 100px 100px; grid-template-columns: 500px 1fr; grid-template-areas: "main-left-row1 main-right-row1" "main-left-row2 main-right-row2" "main-left-row3 main-right-row3" "main-row4 main-row4"; gap: 40px 100px; } main-left-row1 { background-color: yellow; grid-area: main-left-row1; border: 1px solid green; } main-right-row1 { grid-area: main-right-row1; background: #aaf; border: 1px solid green; } main-left-row2 { background-color: yellow; grid-area: main-left-row2; border: 1px solid green; } main-right-row2 { grid-area: main-right-row2; background: #aaf; border: 1px solid green; } main-left-row3 { background-color: yellow; grid-area: main-left-row3; border: 1px solid green; } main-right-row3 { grid-area: main-right-row3; background: #aaf; border: 1px solid green; } main-row4 { grid-area: main-row4; background: #aaf; border: 1px solid green; } </style> </head> <body> <section id="page"> <main-left-row1><table border="1px" width="300px"><tr><td></td><td></td></tr></table></main-left-row1> <main-right-row1><table border="1px" width="300p"><tr><td></td><td></td></tr></table></main-right-row1> <main-left-row2><table border="1px" width="300p"height="100px"><tr><td></td><td></td></tr></table></main-left-row2> <main-right-row2>Main area</main-right-row2> <main-left-row3>Main area</main-left-row3> <main-right-row3>Main area</main-right-row3> <main-row4>Main area</main-row4> <main-row4>Main area</main-row4> </section> </body> </html>
質問日時: 2021/07/31 06:38 質問者: 39OK
解決済
2
0
-
WEB制作。文字の改行について
クライアント様から「文章が中途半端に次の段落に続いています」とご指摘を受けました。 でも文章ってフォント、ブラウザ、端末等によって変わりますよね? 「ユーザー様が使用している端末によって改行の位置が変わるので~」 という返答でいいですか?
質問日時: 2021/07/30 20:21 質問者: fdsぎjrgpろい
ベストアンサー
7
0
-
添付画像のような画面を作成するCSSとHTMLを教えてください
私はCSSのスキルがないので添付画像のような画面はテーブルを入れ子にして 作成する古いテーブルレイアウトの方法しかわかりません 今のトレンドがわからないので現在のトレンドのCSSとHTMLを教えてください
質問日時: 2021/07/30 00:16 質問者: 39OK
解決済
2
0
-
HTMLにCSSを反映されません
HTML/CSS初心者です。 現在HTMLにCSSを反映させようとしているのですが 反映されません。どこかおかしい構文がありますか? CSSの方では、背景を灰色にする文しか書いていません。
質問日時: 2021/07/29 21:27 質問者: ゆう11223421
ベストアンサー
2
1
-
HTMLを勉強をしています。最近はaudio要素の記述を練習しているのですが、コントロールバーはブラ
HTMLを勉強をしています。最近はaudio要素の記述を練習しているのですが、コントロールバーはブラウザに表示されるものの、再生時間が表示されず、そのため再生ボタンを押しても再生されなくて困っています。エラー メッセージは表示されなかったので、ブラウザが対応していないということはないと考えていますが、調べても何が原因かさっぱり分かりません。ブラウザはfirefoxで、コンテナはmp3です。流す音楽は、フリーbgm素材のサイトからダウンロードしたものです。ファイルに保存して、そのファイル名に.mp3をつけて記述していますが、間違っていないはずです…。考えられる原因は何かありますでしょうか?
質問日時: 2021/07/29 14:45 質問者: aira10
解決済
2
0
-
HTML 上部を固定したい(スクロール)
情報量が多い表の為 スクロールして閲覧しますが、 そのままだとヘッダー情報が隠れてしまい見えづらくなってしまいます ヘッダーを固定したいのですが それだけならばcss にて実現できていますが テーブル1 テーブル2が存在し、 テーブル1はすべて固定 テーブル2のthのみ固定にしたいのです よろしくお願いします
質問日時: 2021/07/27 16:03 質問者: ppp2122
ベストアンサー
2
0
-
このようなHTMLのコードがあったとして、JavaScriptを使って数値の入ったcountという変
このようなHTMLのコードがあったとして、JavaScriptを使って数値の入ったcountという変数を作り、spanタグで囲んでいます。 この時、spanタグの中のcount変数を取得する方法はありますか? <div class=“test”> <p>xxxxxxxx</p> <span id=“testID”>count<span> </div>
質問日時: 2021/07/26 18:58 質問者: シロ-
ベストアンサー
3
0
-
IE11へグリッドを対応させたい
IE11にグリッドを対応させようとしています。 色々見ながら、以下のようにCSSを設定し、現在、縦に4つ「card」要素が並んでいます。これを横に4つ並べたいのですが、どこか確認する箇所などありましたら教えて頂けますか。 〇CSS .d-grid { display: grid; display: -ms-grid; } .w3l-category-main .categories-sec { padding: 80px 0; } .w3l-category-main .grid-sec { -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; } .w3l-category-main .card:nth-child(1) { margin-top: 2em; -ms-grid-row: 1; -ms-grid-column: 1; } .w3l-category-main .card:nth-child(2) { margin-top: 100px; -ms-grid-row: 1; -ms-grid-column: 3; } .w3l-category-main .card:nth-child(3) { margin-top: 2em; -ms-grid-row: 1; -ms-grid-column: 5; } .w3l-category-main .card:nth-child(4) { margin-top: 2em; -ms-grid-row: 1; -ms-grid-column: 7; } 〇HTML <section class="w3l-category-main"> <div class="categories-sec"> <div class="wrapper" id="info"> <div class="right-models text-center"> <div class="d-grid grid-sec"> <a href="A.html"> <div class="card"> <div class="card-body"> <p class="para-design">A</p> </div> </div> </a> <a href="B.html"> <div class="card"> <div class="card-body"> <p class="para-design">B</p> </div> </div> </a> <a href="C.html"> <div class="card"> <div class="card-body"> <p class="para-design">C</p> </div> </div> </a> <a href="D.html"> <div class="card"> <div class="card-body"> <p class="para-design">D</p> </div> </div> </a> </div> </div> </div> </div> </section>
質問日時: 2021/07/26 13:17 質問者: apricot1101
ベストアンサー
2
0
-
web制作中にQRコードを入れるには
保存したQRコードの画像を、HTMLコーディングならimg、ノーコードなら画像ブロックに載せるだけでいいんですか?
質問日時: 2021/07/25 09:43 質問者: fdsぎjrgpろい
ベストアンサー
1
0
-
htmlのボタンを左寄席にしたい
hmtl初心者です テストと書かれたボタンを中央寄せから左寄せに変更したいです 下記のコードをどう編集したらよいでしょうか? <table class="ta02"> <tbody> <tr> <td class="btn000"><a href="https://px.a8.net/svt/ejp?a8mat=3HGII6+FQ792Q+3250+6K736" rel="nofollow">テスト</a> <img border="0" width="1" height="1" src="https://money-animation-dorama.hatenablog.com" alt="" /></td> </tr> </tbody> </table>
質問日時: 2021/07/24 23:10 質問者: みかしずか
解決済
2
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
最新のコラム/記事
-
マッチングアプリで出会ったカップルは成婚率が高い!?結婚カウンセラーに聞いてみた
パートナーとの出会いの場として、もはや主流となったネット婚活やマッチングアプリ。中でも手軽に登録できるマッチングアプリは、10代から50代と幅広い年代が利用している。一方で、“相手の目的が投資関係の詐欺や...
-
メダロット:第250話「Vol.250※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
メダロット:第249話「Vol.249※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
日本古来の伝統工芸「金継ぎ」で修復した食器は前と同じように使えるの?
大切にしている食器が割れてしまったら、きっと誰もが「元に戻したい」と願うだろう。「教えて!goo」にも「割ってしまったお気に入りの食器を復活できる?」という質問があり、最適な方法について様々な意見が寄せら...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
HTMLです。画像をHTMLで表したいで...
-
HTML ul li で横並びにナビゲーショ...
-
テーブルの行を折りたたみたいので...
-
テーブルのセルデータを自動改行さ...
-
css初心者 フレックスボックスの適...
-
角丸画像の背景色を透明にしたいです
-
HTMLでこの画像を表示したいです 教...
-
静止画画像をクリックすると音楽が...
-
疑似要素で背景画像に指定したSVG画...
-
メモ帳の段落の揃え方
-
WEBページを強制的に横画面で見るよ...
-
HTMLのdlとul どちらが正しいと思い...
-
HPに文章で改行はすべてBRタグとか...
-
列のどこをクリックしてもソートで...
-
スマホ(android)のタッチパネル、...
-
コードを書いて下さい( ; ; )写真...
-
CSSで謎の現象
-
テーブルタグのセルの幅の一部だけ...
-
ウェブサイトにアップされているPDF...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたいので...
-
WEBサイトの作成で、imgタグには現...
-
webデザインの勉強で、HTML/CSSから...
-
私、Paiza Cloudやっているのだけど...
-
静止画画像をクリックすると音楽が...
-
css初心者 フレックスボックスの適...
-
角丸画像の背景色を透明にしたいです
-
WEBページを強制的に横画面で見るよ...
-
メモ帳の段落の揃え方
-
テーブルタグのセルの幅の一部だけ...
-
iPhoneで HTMLファイルを閲覧
-
先日ウェブデザイン技能検定三級を...
-
指定した演算を実施の結果を表示さ...
-
テーブルのセルデータを自動改行さ...
-
HTMLタグのあるCSVファイルを利用す...
-
スマホで、左右にスワイプしてウェ...
-
指定した演算を実施の結果を表示さ...
-
CSSファイルの日本語コメントが文字...
-
HTMLで特定の文字だけ色を変えたい...
おすすめ情報