回答数
気になる
-
htmlの文字が縦書きになる
htmlは <div class="ochawanpage"> <h1 class="ochawan-subtitle"> お茶碗 </h1> </div> <img src="./images/ochawan" alt> </div> cssは .ochawanpage { font-size: 50px; font-family: "HannariMincho"; color: #212529; margin-top: calc(5/1366 * 100vw); margin-left: calc(233/1366 * 100vw); } というものを書いたのですが、「お茶碗」という言葉がなぜか縦書きになってしまいます。ある程度margin-leftの値が小さければ横向きなのですが、ある程度大きくなると勝手に縦書きになってしまいます。なぜでしょうか?
質問日時: 2023/03/01 21:31 質問者: riribestwanko
ベストアンサー
2
0
-
HTMLです。画像をHTMLで表したいですどうすれば良いですか?教えてください。お願いします
HTMLです。画像をHTMLで表したいですどうすれば良いですか?教えてください。お願いします
質問日時: 2024/07/26 14:09 質問者: WhereMonthName
回答受付中
3
0
-
HTML ul li で横並びにナビゲーションを設置したが、背景色がきっちり横幅に合わない
ul li で横並びにナビゲーションを設置したが、背景色がきっちり横幅700pxに合いません。 どうしたらいいでしょういか? 700pxの背景画像を入れてもだめです。 https://nihonjinji.jp/index.php/servicemuke/ HTML <ul class="umuke"> <li> 研修コース </li> <li ><a href="https://nihonjinji.jp/index.php/kangomuke/">< 訪問介護サービス事業向け </li> <li><a href="https://nihonjinji.jp/index.php/eventmuke/">< イベントプロデュース企業向け</a> </li> <li ><a href="https://nihonjinji.jp/index.php/servicemuke/">< サービス事業向け </a> </li> </ul> CSS ul.umuke { list-style:none; margin: 0 auto; padding: 0px; width: 700px; color: #ffffff; /*background: #03006b;背景色*/ background-image: url(images/var_muke.jpg); } ul.umuke li{ float: left; background: #03006b;/*背景色*/ color: #ffffff; margin-bottom: 3px;/*下のバーとの余白*/ border-bottom: solid 1px #dadada;/*下に灰色線*/ list-style-type: none!important;/*ポチ消す*/ text-align: left; padding-left: 10px; padding-right: 5px; line-height: 30px; vertical-align: middle; } ul.umuke a { color: #ffffff; } ul.umuke a :hover{ color: #ffff00; }
質問日時: 2024/07/26 18:56 質問者: kurobon619
回答受付中
2
0
-
4
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませんでした。 テーブル全てならうまくいきました。 例えば情報4〜6のtrタグだけを折りたたむことは出来ないのでしょうか。 どうかご教示ください <table> <tr> <td>情報1</td> <td>情報2</td> <td>情報3</td> </tr> <tr> <td>情報4</td> <td>情報5</td> <td>情報6</td> </tr>
質問日時: 2024/03/18 14:47 質問者: piraniaman
ベストアンサー
3
1
-
5
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
いつもお世話になっています。 テーブルで、スマホ等の横幅が狭い画面で見た場合には、自動改行するのでなく、1行で表示できるように後尾を非表示にするには、どうすれば良いですか。 一番簡単な方法をご教示ください。
質問日時: 2024/03/31 05:19 質問者: zyousuke
ベストアンサー
15
0
-
6
css初心者 フレックスボックスの適用を一部適用除外したいですが方法が分かりません。
添付画像のように、フレックスボックスを使って、「小」かつ「大」部を横のセンター配置しようとしているのですが、フレックスボックスを使うと、「文字サイズ」部まで一緒に横並びしてしまいます。「文字サイズ」部だけを適用を外したいです。画像は私のコーディングの#fsize でフレックスボックスをコメントアウトしています。 html*********************** div class="out-wrapper" id="fsize"> <p>文字サイズ</p> <ul> <li id="small"><a href="#" onclick="setActiveStyleSheet('default'); return false;" title="文字サイズ「小」"></a></li> <li id="large"><a href="#" onclick="setActiveStyleSheet('change'); return false;" title="文字サイズ「大」"></a></li> </ul> /div> ****************************** css**************************** /*文字サイズ変更ボタン(※文字サイズを「大」にした時の設定はchange.cssで行う) ---------------------------------------------------------------------------*/ /*ボタンブロック全体*/ #fsize { position: absolute; right: 1%; /*ヘッダーブロックに対して右からの配置指定*/ top: 0vmin; /*ヘッダーブロックに対して上からの配置指定*/ width: 120px; /*ブロック幅*/ background: #fff; /*背景色*/ box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/ padding: 10px 0px; /*上下、左右へのボックス内の余白*/; /*display: flex; align-items: center; justify-content: center;*/ } /*「文字サイズ」のテキスト*/ #fsize p { font-size: 18px; /*文字サイズ*/ padding: 0 12px; /*上下、左右への余白*/ } /*文字サイズボタン1個あたり*/ #fsize ul { display:flex; background: #fff; align-items: center; } #fsize ul a { overflow: hidden; text-decoration: none; color: #fff; /*文字色*/ height:100%; } #fsize ul li#small a::before { display:inline-flex; align-items: center; justify-content: center; content: "小"; /*「小」の文字を出力*/ font-size: 16px; /*文字サイズ*/ height: 25px; width: 25px; background: #779eec; /*背景色*/ margin-right: 10px; } /*「大」ボタン設定*/ #fsize ul li#large a::before { display: inline-flex; align-items: center; justify-content: center; content: "大"; /*「大」の文字を出力*/ font-size: 20px; /*文字サイズ*/ background: #ccc; /*背景色*/ width: 30px; /*幅*/ height: 30px; /*高さ*/ } /*マウスオン時の「大」ボタン設定*/ #fsize ul li#large a:hover::before { background: #779eec; /*背景色*/ }
質問日時: 2023/11/27 00:13 質問者: denpataro
ベストアンサー
2
0
-
7
角丸画像の背景色を透明にしたいです
角丸画像の背景色を透明にしたいです。figureタグに角丸のjpg画像を入れて表示したところ角丸の四隅の余白部分が白くなり透明になりません。 img要素にbackgroun-color:transparentを書いたのですが反映されませんでした。pngではなくjpgを使いたく、 また mix-blend-mode: multiply;を書けば透明化されますが、なぜtransparetでは透明にならないのか教えて頂きたいです。img要素ではなく親要素に書いても反映されませんでした。検証ツールにはbackgroun-color:transparentが記載されています。キャッシュクリアも行いシークレットウィンドウでも反映されませんでした。よろしくお願いします。
質問日時: 2023/06/23 23:15 質問者: cafesweets
解決済
1
0
-
8
ベストアンサー
5
0
-
9
静止画画像をクリックすると音楽が鳴るスクリプトってありますか?
<audio>タグを使わないで、リンクもつけないで、演奏動画にしないで、その場で音楽再生音のみが聴けるような表示をつくりたいのですが・・
質問日時: 2024/03/31 22:49 質問者: odasaga09
ベストアンサー
1
0
-
10
疑似要素で背景画像に指定したSVG画像の色変更
ある要素の::afterの背景画像として、SVG画像を指定しました。 ----- background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31.2"><path d="M28,15.6,2,31.2,17.111,15.6,2,0Z" transform="translate(-2)" fill="white"/></svg>' ); ------ この"fill"の部分なのですが、「red」や「white」とすればきちんと表示されますが、「#ffffff」のようなカラーコードにすると表示されません。fillは普通にカラーコード指定できるかと思うのですが、なぜかわかる方いらっしゃいますでしょうか。 ご教授いただけると幸いです。 よろしくお願いします。
質問日時: 2023/01/30 22:45 質問者: sanaeeeee
ベストアンサー
2
0
-
11
メモ帳の段落の揃え方
Windowsのメモ帳で、全角スペースと半角スペースを使い分けて段落をキレイに揃えても、それを保存して再度開くと段落がガタガタになっていてガッカリします。 ガタガタにならないでキレイに保存できる方法はありますでしょうか?
質問日時: 2023/08/01 08:15 質問者: shimurakentaro
解決済
2
0
-
12
WEBページを強制的に横画面で見るように回転させる HTML CSSコード
こんにちは、PCサイトをスマホでも見れるように調整して作成しました。 ですが、横画面限定で見てもらわないと、見た瞬間離脱されそうです なので、アクセスした瞬間からスマホを回転させないと見れない仕様にしたいと思います。 こういった場合、どういうコードを書けばよいのでしょうか? 詳しい方、よろしくお願いします。
質問日時: 2023/03/13 09:56 質問者: gekikaraou
ベストアンサー
7
0
-
13
HTMLのdlとul どちらが正しいと思いますか
あるスクールのホームページを作成するとします。 各クラスの詳細説明のリストに使うのはどちらの書き方が正しいですか? ① <dl> <dt>〇〇クラス</dt> <dd> 料金ややることの説明(長めの文章) </dd> <dt>〇〇クラス</dt> <dd> 料金ややることの説明(長めの文章) (必要があればpなどのタグ) </dd> ・ ・ ・ </dl> ② <ul> <li> <h3>〇〇クラス</h3> <div> <pなどのタグ>料金ややることの説明(長めの文章))</p> </div> </li> <li> <h3>〇〇クラス</h3> <div> <pなどのタグ>料金ややることの説明(長めの文章))</p> </div> </li> ・ ・ ・ </ul> よろしくお願いします。
質問日時: 2023/02/23 11:20 質問者: sanaeeeee
解決済
3
0
-
14
HPに文章で改行はすべてBRタグとかで改行しなきゃだめなのですか?改行が活きたまま書く方法ないの?
ホームページにテキストの文章を書いた場合に、 <タグ> このようにタグで囲んで、改行は 普通に、改行しているだけで 改行が反映されるという方法はないのですか? <タグ> <タグ> このようにタグで囲んで、改行は<BR> 普通に、改行しているだけで<BR> 改行が反映されるという方法なないのですか?<BR> <タグ> のように書かなければダメなのですか? CSSとかで設定すればできるのですか?(´・ω・`) アドバイスよろしくお願いします。 (*´ω`*)
質問日時: 2022/12/03 21:00 質問者: otasuke3900z
ベストアンサー
1
0
-
15
列のどこをクリックしてもソートできるようにするには
いつもお世話になっています。 テーブルの先頭行(タイトル行)をクリックしたときにソートできるようにしていたのですが、行数が増えてきて先頭行をクリックするのがしんどくなってきたので、列中のどこをクリックしてもソートするサンプルコードをご教示ください。
質問日時: 2024/01/27 16:54 質問者: zyousuke
ベストアンサー
7
0
-
16
スマホ(android)のタッチパネル、指以外で反応させる方法ありますか?
なんらかの肉体接触、静電気反応という仕組みらしいですけど、体から離れた何かの物体で鍵盤アプリの長音を通低音として維持したいのですが。。
質問日時: 2024/01/18 17:14 質問者: odasaga09
ベストアンサー
2
0
-
17
コードを書いて下さい( ; ; )写真有り
添付している写真の html cssのコードを書いていただきたいです 白長方形の幅は1200px 画像の大きさ幅600px 縦408px テキスト内につきまして タイトルはh3 上部の余白56px 右側の余白75px(写真との余白) 下側の余白134px 左側の余白100px ノーコードで作成していたのですが、 うまくいかず、、、分かる方コードを手入力しようと思っています…よろしくお願いします( ; ; )
質問日時: 2024/03/28 18:55 質問者: Jijtmdp745j
解決済
2
0
-
18
CSSで謎の現象
お世話になっております。 ワードプレスのcocoonテーマでWEBサイトを作成しています。 テーマのデフォルトではヘッダーロゴが中央寄せになっています。 ヘッダーロゴを左寄せにしたかったので以下のコードを追加CSSに記述して左寄せにしていました。 /*ヘッダーロゴ左寄せ*/ .logo{ text-align:left; } しかし、1ヶ月くらい経過してからやはり中央寄せが良いと思い、上記を削除しました。 ところが、ヘッダーロゴは左寄せのまま戻らないんです。 四苦八苦していたところ、ある発見をしました。 削除する前の元々の記述があった位置に「.」を記述すると中央寄せになるんです。 この「.」はもともとあった場所に記述しないとダメなんです。 違う位置に記述しても左寄せのままです。 「.」を記述しなくても中央寄せに戻したいのです。 「.」だけというのは気持ち悪いので。 この現象がわかる方、解決できる方がいましたらお願いいたします。
質問日時: 2023/09/12 00:52 質問者: poqwpoq
ベストアンサー
1
0
-
19
テーブルタグのセルの幅の一部だけを指定
こんにちは、画像のようなテーブルを親要素の98%で表示させています。 表示自体は問題なくできているのですがB~Iの各セルの横幅を小さくしたくて <td width="2px">B2</td> もしくは <td width="3%">B2</td> などとやってみたのですが、何も変わらないようです。 やって居る事は適切でしょうか? もしくは、こういう場合どこに何を与えれば良いでしょうか? 詳しいかた、よろしくお願いいたします。 ■HTML <table align="center"> <tr> <td class="bg_black">A1</td> <td colspan="8">B1</td> <td colspan="7">J1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> <td>E2</td> <td>F2</td> <td>G2</td> <td>H2</td> <td>I2</td> <td>J2</td> <td>K2</td> <td>L2</td> <td>M2</td> <td>N2</td> <td>O2</td> <td>P2</td> </tr> ■CSS table tr td { font-size : 1em ; color : #ffffff ; text-align : center ; background : #444444 ; } table { margin-top : 10px ; margin-bottom : 10px ; width: 98%; table-layout: fixed; word-break: break-all; word-wrap: break-all; }
質問日時: 2023/03/12 12:02 質問者: gekikaraou
ベストアンサー
1
0
-
20
ウェブサイトにアップされているPDFファイルのハイパーリンク先に飛ぶ時、新しいタブを開きたい
ウェブサイト中にハイパーリンクが設定されているPDFファイルがあります。 そのハイパーリンク先に飛ぶ時、同じタブの中で遷移するのではなく、新しいタブで開きたいのですが、何をどのように設定すればいいでしょうか。
質問日時: 2022/12/13 13:57 質問者: bari_saku
解決済
3
0
-
21
初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。
まずは、添付画像を見ながら質問を見てほしいのですが、画像のような状況からwebブラウザのウィンドウ右端を掴み、幅を縮小していくと、緑部左端がメニューバーに当たると、青部領域が縮んで行き、メニューバーの左端がウィンドウの左端に当たるあたりから、緑領域および文字サイズブロックが隠れていき、ウィンドウの右端がメニューバーの右端を過ぎたあたりからコンテンツが縮小していく動きになるのですが、これをウィンドウ右端から縮小していったときに青部は隠れていってもよく、緑部及び文字サイズブロックは隠れずに縮小して行き、同じくメニューバーおよび会社ロゴ、所在地ブロックも隠れずに縮小させるには、どのようにすればよいのでしょうか? コーディングは全部は載せられないので、だいたいこんな感じで作っているというぐらいを記載します。テキストエディタ等で見てほしいです。 html <body> <div class="out-wrapper-container"> <div class="out-wrapper-left"></div> <div class="wrapper" > <header class="header-container"> <div class="h-left"> <div id="image1"></div> </div> <div class="h-center"> <div id="image2"></div> <div id="image3"></div> </div> <div class="h-right"> <address class="char-no-wrap"> <div><span class="font-adapt1">所在地 : </span><span class="post font-adapt2">***-****</span></div> <div><span class="font-adapt2">*******</span></div> <div> <span class="font-adapt1">受付時間 : </span><span class="colored">AM9:00〜PM5:00</span> <span class="tel colored right">***-***-****</span> </div> <div id="sns"> <ul> 省略 </ul> </div> </address> </div> </header> <div class="main"> <div class="nav-fix-pos"> <nav id="menubar"> <ul> 省略 </ul> </nav> </div> </div> </div> <div class="out-wrapper-right"> <!--文字サイズ変更ボタン--> <div id="fsize"> <p>文字サイズ</p> <ul> 省略 </ul> </div> </div> </div> </body> </html> css ******ここから********* /*サイトの設定*/ ul {list-style-type: none;} /* out-wrapperコンテナ */ .out-wrapper-container { display:flex; justify-content: center; } .out-wrapper-left{ width:11vmin; background-color: blue; } .out-wrapper-right{ width:11vmin; background-color: green; } /*文字サイズ変更ボタン*/ /*out-wrapper-rightボタンブロック*/ #fsize { /*out-wrapper-right中央配置*/ margin-right: auto; margin-left: auto; width: 11vmin; /*ブロック幅*/ height:5vmin; background: #fff; /*背景色*/ box-shadow: 0 0 0.8vmin rgba(0,0,0,0.2); padding: 1vmin 0; /*上下、左右へのボックス内の余白*/; } /*wrapperとout-wrapperがある)*/ /* そのうちのwrapperヘッダー部 */ header { opacity: 0.7; height: 15vmin; width:115vmin; margin-left: auto; margin-right: auto; z-index:10; } /*wrapperヘッダー部のcontainer*/ header.header-container { display:flex; align-items: center; flex-wrap: nowrap; } /*ヘッダー部位置*/ header .h-left{ display:flex; align-items: center; height: 15vmin; width: 20%; background:orange; flex-wrap: nowrap; } header .h-center{ display:flex; align-items:center; height: 15vmin; width: 50%; background:yellow; flex-wrap: nowrap; } header .h-right{ height: 15vmin; margin-left: auto; margin-right: auto; width: 30%; z-index: 20; position: relative; } /*ヘッダー部の中身left*/ .h-left #image1{ height: 100%; width: 100%; background-size: contain; background-position:center; background-image:url("../images/会社ロゴ字.png"); background-repeat: no-repeat; } /*ヘッダー部の中身center*/ .h-center #image2{ 省略 } .h-center #image3{ 省略 /*ヘッダー部の中身right*/ /*address部*/ .h-right address { display:flex; flex-wrap:nowrap; flex-direction: column; box-sizing: border-box; height: 15vmin; width: 100%; font-style: normal; line-height: 1.5; /*行間を少し狭く*/ } /*SNSのリンクボタン集*/ #sns{ margin-top: auto; } .h-right #sns{ 省略 } #sns ul { 省略 } li#Instagram a{ 省略 } li#Line a{ 省略 } li#Facebook a{ 省略 } /*メインメニュー*/ /*メニューブロックの設定*/ #menubar { margin: 20px auto 20px; height: 45px; } ul{ display:flex; padding:40px; } /*メニュー1個あたりの設定*/ #menubar li { width: 16.66%; line-height: 1; /*行間を少しだけ狭く*/ } #menubar li a { text-decoration: none;display: block; text-align: center; height: 30px; /*高さ*/ padding-top: 15px; /*上に追加する余白*/ color: #fff; /*文字色*/ background: #779eec; /*背景色*/ }
質問日時: 2023/12/18 19:52 質問者: denpataro
ベストアンサー
1
0
-
22
CSS初心者です。わかる方教えてください。
画像の左上の背景色(plum-親要素)に重なるように、同位置で子要素の画像(xxx.png)を同高さ左詰め中央で配置したいのですが、表示できません。原因と対処法がしりたいです。htmlに<img src=xxx は避けたいです。 よろしくお願いいたします。 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> 省略 <title>ホームページ</title> <link rel="stylesheet" href="cssA/styleA.css"> </head> <body> <div class="wrapper" > <header class="container"> <div class="header-left">h-left <div id="image1">image1</div> </div> <div class="header-center">h-center</div> <div class="header-right">h-right</div> </header> <div class="main">main</div> <footer class="footer">footer</footer> </div> </body> </html> CSS @charset "utf-8"; /*全体の設定 ---------------------------------------------------------------------------*/ .wrapper { max-width: 1200px; margin: 0 auto; } header { background: tomato; opacity: 0.7; max-width: 1200px; height: 150px; margin-left: auto; margin-right: auto; } .container { display:flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .header-left{ height: 150px; width: 40%; background:plum; position: relative; } .header-center{ margin-left: auto; margin-right: auto; height: 150px; width: 40%; background:gold; } .header-right{ margin-left: auto; margin-right: auto; display:flex; height: 150px; width: 20%; background:lime; } header-left #image1{ position:absolute; top:0; bottom:0; margin:auto; background-image:url("../images/xxx.png"); background-position:center; background-size: contain; background-repeat: no-repeat; } .main { margin: 0 auto; /* 外側の余白:上下 左右; auto で左右センタリング */ box-sizing: border-box; /* 幅を padding も含めた幅にする */ max-width:1200px; background: blue; } footer { background:olive; }
質問日時: 2023/09/08 22:04 質問者: denpataro
ベストアンサー
3
0
-
23
HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」
HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」という単語だけを赤色にしたいのになぜか全く違う色になってしまいます。 どうすればいいでしょうか? <div style="text-align: center," ›span style="font-size: 30pt,"> font color = "#GE6666" span style="background: linear- gradient(transparent 70%, #8ED7DA 0%);">利用開始<font color=" #F28585”>前く/font>についてく/span></font></span></div>
質問日時: 2023/06/27 12:08 質問者: ひなたまる
解決済
5
0
-
24
HTMLを正しく表示させるには
HTMLファイル(JS, CSS含む)をアップロードしても、ツリー状のファイルリスト(HTMLファイル名)しか表示されません。 「Please enable JS」と 表示されたHTMLファイルのトップに記載されています。 JSファイルは、正常にUPされています。 実は、最初はひどい文字化けと、レイアウトのかなり乱れたページが表示されていました。 テスト用のディレクトリに移動させたら、上記のツリーファイル表示のみに なってしまいました。 解決方法がわかる方、どうぞよろしくお願いします。
質問日時: 2023/06/18 09:12 質問者: PlsHelpMe
解決済
2
0
-
25
iPhoneで HTMLファイルを閲覧
こんにちは、iPhoneのファイルアプリに index.html と style.cssを保存しました どうやって見たら良いですか? index.html 見たけど、スタイルシートが反映されてないようです
質問日時: 2023/03/12 02:35 質問者: gekikaraou
ベストアンサー
3
0
-
26
サイトにコンテンツを並べる際の CSS についてアドバイスお願い致します。
現在Q&A掲示板を作成しておりコンテンツを横に4列並べているのですが、ブラウザの横幅が変わる際にどう対応すべきか悩んでおります。 2つの方法で悩んでいて参考サイトを探してみたところYoutubeの動画一覧表示は➀の方法でコードが書かれているという記事を見つけました。 こちらのコードで CSS を設定した場合並べることは出来たのですが、ブラウザの横幅でコンテンツが右端に追加される仕組みなので、スペースが足りない場合に間隔が空いてしまいデザインが崩れるのではないかと心配しております。 どのように複数のブラウザ用に CSS を書くべきでしょうか? ➀ブラウザによって横に並べるコンテンツ数を変化させる(減らす・増やす) ➁横に並べるコンテンツ数は維持して横幅を広げる ※参考サイト https://ecsiter.com/limage ※該当コード <html> <div class="image-inline-player"> <div class="image-card-wrap" style="display: inline-block;"> <a href=""><div class="image-thumbnail-card"> <img src=""> </div> <div class="image-title-link">タイトルテスト1タイトルテスト1タイトル... </div> </a> </div> <div class="image-card-wrap" style="display: inline-block;"> <a href=""><div class="image-thumbnail-card"><img src=""> </div> <div class="image-title-link">タイトルテスト2タイトルテスト2タイトル... </div> </a> </div> <div class="image-card-wrap" style="display: inline-block;"> <a href=""><div class="image-thumbnail-card"><img src=""> </div> <div class="image-title-link">タイトルテスト3タイトルテスト3タイトル... </div> </a> </div> <div class="image-card-wrap" style="display: inline-block;"> <a href=""><div class="image-thumbnail-card"><img src=""> </div> <div class="image-title-link">タイトルテスト3タイトルテスト3タイトル... </div> </a> </div> </div> </html> <style> /* 雑談掲示板 一覧表示画面本体定義 */ .image-inline-player { width: 1140px; margin: 0 auto 50px; background-color: #fff; border: 2px solid #999; clear: both; } /* 雑談掲示板 一覧表示画面本体定義 */ .image-inline-player .image-card-wrap { width:260px; /* 枠の横幅 */ margin: 23px 0px 23px 19px; /* 枠のスペース */ vertical-align:top; /* 上端に揃える */ word-wrap:break-word; /* 文字を改行し枠内に収める */ display:inline-block; /* <li>要素を横に並べる */ /* display:inline; */ zoom:1; } /* 雑談掲示板 一覧表示画面配置位置 */ .image-inline-player .image-card-wrap .image-title-link { font-size: 150%; font-weight: 700; letter-spacing: .1em; } /* 雑談掲示板 一覧表示画面の画像配置位置 */ .image-inline-player .image-card-wrap .image-thumbnail-card { height: 150px; /* 画像の高さ */ width: 260px; /* 画像の横幅 */ } </style>
質問日時: 2024/07/08 21:39 質問者: 初心者サイト作成
ベストアンサー
5
0
-
27
webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは
webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは勉強か、どちらを最初にするのがおすすめですか?
質問日時: 2024/06/14 12:36 質問者: あめはれの
解決済
4
1
-
28
私、Paiza Cloudやっているのだけど 上手くいきません どこかが間
私、Paiza Cloudやっているのだけど 上手くいきません どこかが間違ってますよね? 教えてください。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>正規表現情報取得・表示</title> </head> <body> <?php $val=$_POST['val'];//regex1.phpからvalを受け取り if(preg_match('/123|/',$val)){//もし,$valが123という数字ではあったら} echo"入力された数字"$val.は、123と一致しました。<br/>"; echo '<a href="regex1.php">再度,入力</a>'; }else{ //そうでなかった場合 echo "入力された数字".$val."は,123とは一致しません。再度,入力してください.<br />"; echo'<a href="regex1.php">再度,入力入力</a> } ?> </body>
質問日時: 2024/06/08 13:44 質問者: WhereMonthName
ベストアンサー
1
0
-
29
WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか?
お詳しい方アドバイスを頂けないでしょうか? タイトルの通りなのですが、現在サイトの作成を行っているのですが、何やらSEO対策の一環として、すべての画像へwidthとheightの指定を行うとのことなのですが、ここで質問です。 現在でもwidthとheightの指定を行うことは、HTMLのマークアップの観点、SEOの観点からして有効、また推奨されていることなのでしょうか?(GoogleやMozillaはこれらについて公式に何か出されていますでしょうか?) というのが、現在レスポンシブでの設定が一般的なので、PCでwidthとheightの指定を行っても、スマホサイトではこの指定した数字の意味はなくなると思います、その逆もしかりだと思います。 特にスマホサイトの場合には、親要素に対しての相対的な数字の指定が一派的ですし、それら多くの指定はHTMLの数字を上書きするという意味でもCSS側で行っていることがほとんどだと思います。 こういった状況を踏まえたうえでも、やはり画像へwidthとheightの指定は行うのが良いのでしょうか? 必要かつ有効ということであればすべてに定義したいと思いますが、その際はPCの際の画像として表示する際のサイズを指定した方がよいのでしょうか? 逆に、現在は記載しないのが一般的、推奨や指定しない分容量が少なくなるので記載しない方がよいなど、逆のご意見等ございましたら合わせてお伺いできればと思います。 宜しくお願いいたします。
質問日時: 2024/06/07 17:16 質問者: 404not_found
ベストアンサー
1
1
-
30
先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由が
先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由がわかりません。わかる方答えていただけないでしょうか。 Q.次のHTMLのリンク部分の表示についての適切な説明はどれか。以下より1つ選択しなさい。 HTML ----------------------------------------------------------------------- <! DOCTYPE html> <html lang="ja"> < head> <meta charset="utf-8"> <title>ウェブデザイン技能検定</title> ‹style > body { background-color: #FFF; } h1{ color: rgb (255, 0, 0); text-decoration: none; } a {color: rgb(0, 255, 0); } </style> </head> < body> <h1> <a href="index.html">ウェブデザイン技能検定</a> </h1> </body> </html> ----------------------------------------------------------------------- ①文字色は赤色で下線が引かれる。 ②文字色は緑色で下線が引かれる。 ③文字色は赤色で下線は引かれない。 ④文字色は緑色で下線は引かれない。
質問日時: 2024/05/27 13:04 質問者: tam_pp
解決済
3
0
-
31
X の仕様変更? 埋め込みフレーム、アカウントないと中身表示されない?
X サイトガイドでは、公開設定しとけばアカウントない誰のアクセスでも表示される と書いてあるけど。。 インフレーム設置側でどういう設定を確認すればいいですか?
質問日時: 2024/05/26 19:10 質問者: odasaga09
ベストアンサー
2
0
-
32
指定した演算を実施の結果を表示させるにはどうしたらいいですか?
指定した演算を実施の結果を表示させるにはどうしたらいいですか?
質問日時: 2024/05/25 13:37 質問者: WhereMonthName
ベストアンサー
1
0
-
33
指定した演算を実施の結果を表示させるにはどうしたらいいですか?HTMLです
指定した演算を実施の結果を表示させるにはどうしたらいいですか?HTMLです <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>指定した演算を実施の結果を表示</title> </head> <body> <?php $num1 = $_POST['num1']; $num2 = $_POST['num2']; $res = $num1+$num2; echo $num1.'+'.$num2.'='.$res."です。"; ?> </body> </html>
質問日時: 2024/05/25 13:34 質問者: WhereMonthName
ベストアンサー
1
0
-
34
htmlソース編集で、各タグを何かアイコン表示一覧クリック一つで自動で生成してくれるソフト?
現在さくらエディター常用ですが、タグ打ちをキーボード入力変換ではなく、よく使う主要なタグ(テキスト)一覧をあらかじめツールバーで常灯表示させておいてクリック一つで自動生成するエディター をどこかで1回試用した記憶があるのですが・・ もういちどそういうの使い勝手試したいのですが。。オススメのありますでしょうか?
質問日時: 2024/05/21 11:43 質問者: odasaga09
ベストアンサー
1
0
-
35
<!DOCTYPE html>あってますか?スペル間違ってませんか?
あってますか?スペル間違ってませんか? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学籍番号チェック</title> </head> <body> <?php $stunum = $_POST['stunum']; // request1.phpから学籍番号を受け取り echo"あなたの学籍番号は".$stunum."です。 ", ?> </body> </html>
質問日時: 2024/05/12 18:59 質問者: WhereMonthName
ベストアンサー
3
0
-
36
<!DOCTYPE html>あってますか?スペル間違いしてませんか?
あってますか?スペル間違いしてませんか? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学籍番号チェック</title> </head> <body> <form method="=POST" action="request2.php"> 学籍番号 : <input type="text" name="stunum" /> <input type="submit" value="送信" /> </form> </body> </html> 教えてください。
質問日時: 2024/05/12 18:52 質問者: WhereMonthName
ベストアンサー
2
0
-
37
<!DOCTYPE html>あってますか?↑
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学籍番号チェック</title> </head> <body> <?php $stunum = $_POST['stunum']; // request1.phpから学籍番号を受け取り echo"あなたの学籍番号は".$stunum."です。 ", ?> </body> </html> あってますか?↑
質問日時: 2024/05/07 10:05 質問者: Wohinfahrensie
解決済
1
0
-
38
Duolingo のソースコードの名前、教えてください。
学習ソフト Duolingo のソースコードを、「Ctrl+U」で表示させたのですが、このソースコードの名前、教えてください。 <!doctype html><html dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="robots" content="NOODP"><noscript><meta http-equiv="refresh" content="0; url=/nojs/splash"></noscript><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style"
質問日時: 2024/04/29 09:28 質問者: 五体投地
ベストアンサー
2
0
-
39
ベストアンサー
2
0
-
40
、URL化させるにはどうしたらいいですか?
<!DOCTYPE html> <html lang="ja"> <head> <title>ページタイトル</title> </head> <body> 寿司は美味しい </body> </html> ↑を、URL化させるにはどうしたらいいですか? 教えてください
質問日時: 2024/04/27 13:17 質問者: Wohinfahrensie
ベストアンサー
3
0
-
41
goo は、放置?
https://beginreturnonassets.com/products/auric-spreader?utm_term=nPlamFeL3J0HqcrUAs9iU&adset_name=23&fbclid=IwAR3vJIHfh6Q-OYP4zgmMOIgABsh_s_PAJ45_XpJALqrB7EHIqnpQiiCtaGk_aem_AWoGuN07iOJhJpN0WYEf58C8Z-7ikE29METVt51SlKw2aH4sIMiohRnY5rizC6wLjuYvh5kl-WAHXk1VOatawuZx
質問日時: 2024/04/24 19:30 質問者: odasaga09
解決済
1
0
-
42
CSSについて教えてください。 こちらのサイトを参考にしているのですが、ナンバーを自動で付けているの
CSSについて教えてください。 こちらのサイトを参考にしているのですが、ナンバーを自動で付けているのを解除して、ナンバーではなく直接任意のテキストを表示したいです。 spanに入れただけだと白枠の中に表示されてしまうのですが、どうすれば良いかご教授いただけないでしょうか。 画像の上に要素を重ねるレイアウトの実装方法 https://tips-log.com/css-layout/ (コード貼り付けようとしたのですが文字数が足りませんでした) <span class="p-textImgBox__number"></span> .p-textImgBox__number::before { position: absolute; font-size: 70px; letter-spacing: 0.1em; line-height: calc(84/70); color: var(--base-color); right: 25px; font-weight: 100; content: "0"counter(number) " "; top: 0; } content: "0"counter(number) " "; を消せばいけるかと思いましたが、ダメでした…。
質問日時: 2024/04/19 17:23 質問者: 彩いろどり
ベストアンサー
3
0
-
43
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトするならrowとcolだけでいいですよね?
質問日時: 2024/04/18 19:03 質問者: だいぬ
ベストアンサー
3
0
-
44
HPレイアウトが同じページのヘッダー画像だけ変えたい
ホームページの作成にあたって、ホームページビルダーでレスポンシブルも出来るタイプのテンプレートを利用しました。 おおよその全体の作成が出来たのですが、メインページ以外のページでタイトル画像を入れ替えたいと思ったのですが、うまく行きません。 CSSを見て、メインページ用の「layout01」 と サブページ用の「layout02」でページのデザインが作られていると分かりました。(私はその程度の素人です…) この layout02 の中の「title2.jpg」を、ページ2・3・4で titie_2・3・4.jpgとして入れ替えたいのですが、どのようにCSSを変えれば可能でしょうか? 一応、CSSエディターで layout02 が関係していそうなあちこちの箇所を layout03としてコピペして、HTMLのbodyでclassをlayout03に変えてみたのですが、それでは画像すら出なかったり、何とか画像が出てもレスポンシブルではサイズが小さくならなかったりメニューが出なかったりと、うまく行きません… できれば layout02 を基本としたまま、各ページの画像だけが変わるように出来れば、今後ページが増えても対策しやすいのですが、可能でしょうか? みなさんは、どのように各ページを作られているのでしょうか… ネットで検索しても希望のものが見つからず、こちらでアドバイスを頂ければと思い投稿しました。 よろしくお願いいたします。
質問日時: 2024/04/14 14:41 質問者: RG_yoshi
ベストアンサー
2
0
-
45
htmlソース文の 各行 改行位置や行頭位置 タグがばらっばらになるのはどうして?
terapad や サクラ、またwysiwygのbluegrifonなんかの、その時々ばらばらアプリで開いてソース編集してるから?? 特にちょいめんどくさい時 wysiwyg でいじっちゃうから? の影響がでかいような気が・・
質問日時: 2024/04/09 22:06 質問者: odasaga09
ベストアンサー
3
0
-
46
1つの「ホームページビルダー22」のソフトでホームページは何個作れますか?
妻の勤める会社(訪問介護)のウェブサイトの作成を依頼され「ホームページビルダー22-SP」で作ってみました。その後、別の会社からもウェブサイトの作成を依頼されています。そこで質問ですが、このソフトウェアで、何個までウェブサイトを立ち上げることができるのでしょうか? 自分でも丸1日かけて調べてみたのですが、どうしても回答が見つかりません。どなたかご存知でしたら教えてください。
質問日時: 2024/04/01 00:16 質問者: 日々勉強
ベストアンサー
4
0
-
47
CSSデータの作成方法について(FTP内)
専門の方にショップページを作成していただき、その後ちょっとしたページのレイアウト編集は、自力でしております。 FTP内に、CSSデータが組み込まれていますが、一部デザインの色を変更したいと考えております。 FTPをのぞいてみると、CSSファイルがあったのですが、そちらはメモ帳で開くことができました。 メモ帳でCSSデータを作成することは可能でしょうか。 ファイル名は「カスケードスタイルシートドキュメント」と記載されています。 どうぞ、よろしくお願いいたします。
質問日時: 2024/03/26 15:55 質問者: mikaco333
ベストアンサー
5
0
-
48
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
する方法はあるでしょうか? <html><head></head><body> <form><button>ok</button></form> <form><button>ng</button></form> <form><button>xy</button></form> </body></html>
質問日時: 2024/03/18 06:24 質問者: reiman
ベストアンサー
3
0
-
49
HTML入門でもう躓いてしまった。
https://www.tohoho-web.com/wwwbeg1.htm#Display 上記サイトを参考にメモ帳ファイル(ファイル名はtest.html)に下記のコードをコピペした。 <!DOCTYPE html> <html> <head> <title>HTMLの練習</title> </head> <body> 初めてのWebページです。 </body> </html> 保存後、再度test.htmlファイルをダブルクリック。すると、「初めてのWebページです。」とブラウザで表示された。ここまでは順調だったけど、これ以降前に進みません。サイトの説明では、 「初めてのWebページです。」という文章を修正してみましょう。 メモ帳で、「初めてのWebページです。」を、「私の初めてのWebページです。」に変更してください。 と説明してありますが、テキスト変更する画面がありません。「私の」という文字を追加したいですが、どこで追加すればいいですか? この参考サイトにはそこまで説明していません。全然前に進めなくなってしまった。
質問日時: 2024/02/16 14:19 質問者: hまる子
解決済
10
0
-
50
青い枠のみのHTML
ログインとか、検索とか フチなしの青い枠(窓)がありますが、 この枠(窓)のHTMLを教えてくれませんか? 言うまでもなく、ログイン等、テキス文字が 入っていても構いません。
質問日時: 2024/01/28 15:45 質問者: toufu-mental
ベストアンサー
4
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で特定の文字だけ色を変えたい...
おすすめ情報