HTML・CSS(16ページ目)

仕事やプライベートで自分でホームページを作成したいと考えた方。初心者でもわかるHTML・CSSの基本についての本やサイトを教えてほしい、ブロックレベル要素について教えてほしい等こちらに投稿して聞いてみましょう。

回答数

気になる

IEでのみ反映されるcssについて

cssで、IEのみに反映させたい場合、 @media all and (-ms-high-contrast: none) { p { color:#ddd; } } のような記述で実装できると思いますが、これを500px以下（いわゆるスマホ体裁）のIEでのみ反映させるにはどういう書き方をすればよいのでしょうか？よろしくお願いします。

質問日時: 2020/06/26 18:57 質問者: tio.

解決済

1

0
<footer>ですが！CSS側からではなくて、HTML側～

以下のサイトは<footer>の(C)2020 YYY-studio. がスマホ画面で閲覧した場合、かなり下がっていてスクロールしないと見えてきません！そもそもスマホで閲覧すると、バック色の緑が馬鹿みたいに広く他のリンクが画面は、ほぼスマホサイズに収まっているのもあります。だから、<footer>の(C)2020 YYY-studio.はスクロールしないと見えないと思います。それで！　(C)2020 YYY-studio.を上に上げたいのですが！HTML側から以下のHTMLに <td>height="10"</td>を組み込みましたがまったく変化なしです。　どんなソースを組めば、高さの調整ができますか？よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>切り絵作品集</title> <link href="css/style.css" rel="stylesheet"> </head> <body id="index">  <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP"></a> </div> <nav> <ul class="global-nav"> <li><a href="Flo.html">Flower</a></li> <li><a href="hover-Dis.html">Disney's</a></li> <li><a href="Lea.html">Leaf</a></li> </ul> </nav> </header> <div id="wrap"> <h2>切り絵作品絵集</h2> <h2>皆様に、私の作品をお見せすることができとても光栄です。</h2> </div>  <footer> <td>height="10"</td> <small>(C)2020 YYY-studio.</small> </footer> </body> </html>

質問日時: 2020/06/26 04:14 質問者: Campus2

ベストアンサー

2

0
WindowsとMacでのChromeのスタイル差異について

あまり詳しくないのでご教授いただけますでしょうか。 Windowsの環境でWebサイトを作っています。画面にCSSを当てて確認して、win版Chromeでは特に問題ないのですが、Mac環境だとレイアウトが崩れてしまいます。どうしてこのような現象が起こるのでしょうか？また、これを解決する方法についてご教授いただけると幸いです。

質問日時: 2020/06/25 16:37 質問者: yu-gsk

ベストアンサー

3

0
html スクロール要素を下から表示したい

overflow-y:scrollで画面からはみ出した要素があり、最初からスクロールバーが最下部にあり、上にスクロールさせてはみ出した要素を表示させることはできますか？よろしくお願いします。 html <div> <p>あああああああああああああああああああああああああ</p> <div> css div { overflow-y:scroll }

質問日時: 2020/06/22 17:52 質問者: 志村うしろ

解決済

1

0
【HTML/CSS】模写が難しすぎます

HTMLとCSSの勉強をしています。「模写　初心者」などで検索して出てきたサイトを模写しようとしてますが、どこが初心者向けなのか、知らないタグやプロパティがたくさん出てきて、太刀打ちできません。もっと簡単な模写サイトってないものでしょうか。

質問日時: 2020/06/21 19:12 質問者: jamfruits

解決済

4

1
「<IMG> には ALT 属性が必要です。」！？

以下のソースコードですが！ http://www.htmllint.net/html-lint/htmllint.html プログラムチェックをしたところ <a><img src="images/leaf/14365.jpg"></a> <a><img src="images/leaf/14366.jpg"></a> には「<IMG> には ALT 属性が必要です。」とでます！解説も読みましたが、私には気難しいです。以後の処置としてどんなソースを組めばエラーがでなくなるのでしょうか？このソースコードの特徴である [マウスオーバーで画像拡大]はしています。しかし、まだ完璧ではないようです。よろしくお願いいたします。 ------------------------------------------------------ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>.ﾏｳｽｵｰﾊﾞｰで画像を拡大する</title> <link href="css/style.css" rel="stylesheet"> <style> li{ display:inline-block; } .moimg1{ margin:0 auto; width: 1400px; height: 240px; display:flex; flex-wrap:wrap; justify-content: center; } .moimg1 img { width: 24%; transition: 0.5s; object-fit: contain; } .moimg1 img:hover { transform: scale(2.2, 2.2); } </style> </head> <body> <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP"></a> </div> <nav> <ul class="global-nav"> <li><a href="Flo.html">Flower</a></li> <li><a href="Dis.html">Disney's</a></li> <li><a href="Lea.html">Leaf</a></li> </ul> </nav> </header> <div class="img-contain" > <div class="moimg1"> <a><img src="images/leaf/14365.jpg"></a> <a><img src="images/leaf/14366.jpg"></a> </div> </div> <footer> <small>(c)2017 Hattori-studio.</small> </footer> </body> </html>

質問日時: 2020/06/21 04:32 質問者: Campus2

ベストアンサー

3

2
PCにより、HTMLやCSSが正しく表示されないことはあるんですか？

HTMLとCSSを勉強中です。こちらのサイトに掲載されているコードを入力しながら１つずつ行っていますが、たまに表示が見本のようにならないときがあります。 https://saruwakakun.com/html-css/basic/relative-absolute-fixed たとえば、・本当は要素と要素がくっつくはずなのに、余白（margin?)ができてしまう・親要素に指定したCSSが反映されないなどです。打ち間違いなどでもなさそうで、例えば以下のコードをコピペしてみました。一番上に「fixed」という文字の位置を固定する、というコードです。しかし、一番上に表示はされるものの、次の要素「これは文章です」という文字とかぶってしまいます。コピペでもダメとなると、PC本体の設定の問題か、もしくは使っているテキストエディタの設定の問題化と思うのですがいかがでしょうか。ちなみに、ブラウザをIE、chrome、Edgeと変えてみましたが、特に表示には変わりなかったです。【CSS】 #fixed { position: fixed; /*基準を画面の左上に*/ top: 0; left: 0; /*余白が入らないように*/ margin: 0; /*以下装飾*/ width: 100%; background: #FFC778; color:white; } 【HTML】 #fixed { position: fixed; /*基準を画面の左上に*/ top: 0; left: 0; /*余白が入らないように*/ margin: 0; /*以下装飾*/ width: 100%; background: #FFC778; color:white; }

質問日時: 2020/06/13 18:21 質問者: jamfruits

解決済

4

0
既存のサイトを分析•調整しやすいエディターは

社内の一枚ものの広報物を制作しているというだけで、放置状態のウェブサイトの運営を引き継ぐことになりましたが、ウェブサイトの構造やHTMLやCSSの知識が全くありません。既存のウェブサイトを分析して調整できるようなエディターで、現在でおすすめの製品はありますか。有償/無償問いません。環境はWindowsです。昔、DreamWeaverを少しだけ触ったことがありますが、要素をクリックすると可能な設定とかが表示されたような記憶がありまして、便利だなと思いました。例えば大量のテキストが入力されている大きさ固定のフィールドをスクロールバー付きにしたいと言うような要望が多いのですが、そういうことがしやすいかと。 Chromeのデベロッパツールで大量のテキストのボックス？の設定を見てみましたが、何がなんだかわかりませんでした。

質問日時: 2020/06/10 08:53 質問者: すぽっぽ

解決済

2

0
liタグの左寄せ方法を教えてください。 cssでどのように書けば良いでしょうか。

liタグの左寄せ方法を教えてください。 cssでどのように書けば良いでしょうか。

質問日時: 2020/06/10 02:21 質問者: マシュマロにんにく

ベストアンサー

1

0
【メディアクエリについて】 CSS内でand (max-weight: 500px)にしても反応無し

【メディアクエリについて】 CSS内でand (max-weight: 500px)にしても反応無しで、and (max-device-weight: 500px)にすると反応します。device-weightは非推奨と見たのでweightで反応するようにしたいのですができなくて困ってます。キャッシュ系では問題ないと思いますし、CSS内の入力ミスもありませんでした。教えて頂けると助かります。よろしくお願い致します。例) [HTML<meta >内↓] meta name="viewport" content="width=device-width, initial-scale [CSS内↓] @media screen and (max-weight: 500px){ main{background-color: red;} }

質問日時: 2020/06/09 09:04 質問者: KOBA___

解決済

1

0
【マークアップ言語複数画像中央寄せについて】 HTML・CSS学習中です。メインの大きい画像の下

【マークアップ言語複数画像中央寄せについて】 HTML・CSS学習中です。メインの大きい画像の下に小さい画像を複数横並び中央に表示することをやりたいのですが、iPad表示にすると小さい画像複数は中央に移動せず、画像の左に固まったまま表示されます。 iPhoneサイズだと中央に表示されますが、いろんな方法を試してもどうしてもiPadサイズでは中央に表示されません。ソースコードも貼りますので、教えて頂けると助かります。又、まだ学習し始めですのでソースコードを見て頂き他にご指摘があれば学習の励みになります。よろしくお願い致します。「ソースコード↓」【HTML】 <main> <div class="consept"> <h2>consept</h2> </div> <div class="main_img"> <img src="../image/ryouri.jpg"> </div> <ul> <li> <img src="../image/italy.jpg" class="main_img1" width="350px" height="350px"> </li> <li> <img src="../image/pasuta.jpg" class="main_img2" width="350px" height="350px"> </li> <li> <img src="../image/pizza.jpg" class="main_img3" width="350px" height="350px"> </li> <li> <img src="../image/drink.jpg" class="main_img4" width="350px" height="350px"> </li> </ul> 【CSS】 main{ width: 100%; background-color: #ccffff; padding-bottom: 10px; } .main_img{ width: 100%; margin-top: 10px; text-align: center; } main li{ float: left; display: inline-block; } .main_img1, .main_img2, .main_img3, .main_img4{ box-sizing: border-box; } .main_img1{ margin-left: 50px; } .main_img{ margin-right: 50px; } main ul::after{ display: block; content: ""; clear: both; }

質問日時: 2020/06/07 09:00 質問者: KOBA___

ベストアンサー

1

1
google font ですが！？

私の選択したフォントは [Kosugi]です。現在、google fontの[Kosugi]フォントをダウンロードし、私のプロバイダーのウェブサーバに構築してフォント読み出し、スマホ等での閲覧を試みています。つきまして、[google font]サーバーにアクセスしての font借用ではございません。そこで！ https://nelog.jp/download-google-fonts サイトあります、設定方法を参考に準備中です。しかし、初めての試みで、分からないことがあります。以下ですが！以上のURLサイトにあります、 ---------------------------------------------------------------------- あとは、目当てのCSSセレクタを選択して、フォントを設定してやればOKです。 CSS a.evernote-arrow-box-link{ font-family: 'Boogaloo', cursive; font-weight:normal; } ｰｰｰｰｰｰｰｰ---------------------------------------------------------------- 以上ですが、これって何を意味しているのでしょうか？よろしくお願いいたします。

質問日時: 2020/06/05 07:29 質問者: Campus2

ベストアンサー

2

0
Googleフォントをダウンロードし、プロバイダーのサーバーに設置して利用する方法

現在の設定ですが、グーグルフォントがある、グーグルサーバーにアクセスして、そのフォントを借りて表示する設定で閲覧中です。それで！現在の設定は以下です。 CSS側に設定 .global-nav li{ font-family: 'Noto Serif JP', serif; HTML側の設定 <title>○○作品集</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap" rel="stylesheet"> 以上の設定では、パソコンで閲覧すると、それなりのフォントで表示されます。しかし、スマホ画面では、ゴシック体で表示され、設定したはずのフォントが反映されずに、見栄が良くなくて困ています。　なぜ反映されないのかは、まだ分かりません！それで、グーグルフォントをダウンロードして、ファイル自体を作成中のフォルダー内い置いて、フォントを使用できることを知り、これを試みてフォントが反映されれば、これで行こうかと思います。　そこで、ソースコードを変更しないと使えないので、ネットで検索したところ [Googleフォントをダウンロードし、自前のサーバーに設置して利用する方法] しか見当たりませんでした！ https://nelog.jp/download-google-fonts そのソースは以下です。 CSSファイルで呼び出し最後にサイトなどで利用しているCSSファイルに以下のようなフォントの呼び出しを記述します。 CSS @font-face { font-family: フォント名; src: url('フォントファイルの場所') format("フォントの種類"); } WordPressテーマの場合は、style.cssなどでOKだと思います。 -------------------------------------------------------------------- 今回Wordpressテーマに設置した場合は、style.cssファイルに以下のように書きました。 Visual Basic @font-face { font-family: Boogaloo; src: url('webfonts/boogaloo/Boogaloo-Regular.ttf') format("truetype"); } ------------------------------------------------------------------------- あとは、目当てのCSSセレクタを選択して、フォントを設定してやればOKです。 CSS a.evernote-arrow-box-link{ font-family: 'Boogaloo', cursive; font-weight:normal; } ----------------------------------------------------------------------------- 動作確認このように書くことで、Googleサーバーから、Googleフォントを読み込ま無くても、フォントが適用された状態で表示されるようになりました。以上は自宅のサーバーに保存して使用する場合です。私は、ファイルの保存先がプロバイダーサーバーです。そこで！自宅サーバーとプロバイダーサーバーの保存先の違いはありますがソースコードも変更する必要はありますか？以上の設定をそのまま使用できるのでしょうか？　そのまま使用可能でもそのままそっくりは使えないので、私に環境に変更するために、手間暇を要します。まず、手も付ける前に、現行のま使用可能なのか知りたいです。よろしくお願いいたします。

質問日時: 2020/06/03 04:30 質問者: Campus2

ベストアンサー

2

0
Google Fonts の日本語用ですが、アドレスを探しています。

Google Fonts ですが！以下のアドレスは、日本語フォントです。　https://fonts.google.com/?subset=japanese 以上のアドレス～　ｻﾝﾌﾟﾙ内の上段～二番目の[7 styles]の日本語フォントの１）HTMLコード２）CSSコード　以上の１）２）のアドレスを教えていただけないでしょうか？おそらく以下は、１）のHTMLコードへのアドレスではなかと！？ https://https://fonts.google.com/specimen/Noto+Serif+JP?subset=japanese&selection.family=Bitter:wght@700|Noto+Serif+JP:wght@200;300;400;500;600;700;900 以上よろしくお願いいたします。

質問日時: 2020/06/02 07:44 質問者: Campus2

ベストアンサー

1

0
【CSS学習時のブラウザについて】 HTMLの学習が終わりCSSの学習を始めてます。 CSSの仕上が

【CSS学習時のブラウザについて】 HTMLの学習が終わりCSSの学習を始めてます。 CSSの仕上がりを見る時に、ブラウザを更新しても変化なく、新しいブラウザでなら見れますがいちいち新しいブラウザを立ち上げるのは手間で困っています。 HTMLの学習時はスムーズにブラウザ更新で仕上がり状態を見れたのにどうしてでしょうか。教えて頂けると助かります。よろしくお願い致します。

質問日時: 2020/05/28 17:14 質問者: KOBA___

解決済

2

0
画像を、横並びにするには！？

注：以下の------～------ですが！実際のソースコードには入っていません -以下の----～------の範囲の ----------------------------------------------------------------- <section class="leafse"> <a href="hover.html"><img src="images/leaf/14366.jpg" style="width:50%"></a> <a href="hover.html"><img src="images/leaf/14365.jpg" style="width:50%"></a> </section> --------------------------------------------------------------------- 以上のコードが参考書片手に適当に作りましので、そもそもむちゃくちゃでしょう！？つきまして、パソコン画面ですが、 Webサイトのスマートフォン表示用、Google Chromeのデベロッパーツールでエミュレート（Galaxy s5）で見る限り 14366.jpg 14365.jpg の画像が縦並びに、仲良くぴったり重なった状態で表示されます。これでは全くものになりませんので、※せめて14366.jpgの右に 14365.jpgの画像が来るようにし、間隔を約１㎝開けたいのです。この場合、CSS側の設定するコードですが、参考書を見ながら当てずっぽうに .leafse：float: left; しました！これでは全く変化なしでした。以上の※のようにしたいのですが、できるでしょうか？よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Leaf cutting｜○○○「SNAPPERS」</title> <link href="https://https://fonts.google.com/specimen/Noto+Serif+JPsubset=japanese&selection.family=Bitter:wght@700|Noto+Serif+JP:wght@20;300;400;500;600;700;900"> <link href="css/style.css" rel="stylesheet"> </head> <body id="Leaf">  <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP"></a>  </div> <nav> <ul class="global-nav"> <li><a href="Lea.html">Leaf</a></li> <li><a href="Dis.html">Disney's</a></li> <li><a href="Flo.html">Flower</a></li> </ul> </nav> </header>   <div id="wrap" class="clearfix"> <div class="content"> <div class="main"> <h1> ○○を待ってくださっている方のために</h1> <h1>Collection of leaf cuts</h1> </div> ----------------------------------------------------------------- <section class="leafse"> <a href="hover.html"><img src="images/leaf/14366.jpg" style="width:50%"></a> <a href="hover.html"><img src="images/leaf/14365.jpg" style="width:50%"></a> </section> --------------------------------------------------------------------- </div>   <footer> <small>(C)2017 Hattori-studio.</small> </footer>  </body> </html>

質問日時: 2020/05/28 04:15 質問者: Campus2

ベストアンサー

1

0
PCクラッシャーについて

今年の春からHTMLのホームページを始めた初心者です JAVAスクリプトとccsの区別もつかないまま某サイトのJAVAスクリプを複数、合体したりアレンジをして楽しんでいました７つ目のJAVAスクリプトを合体したところ１つのみ指定していない画像が画面左上にも余分に表示されたり真ん中に表示されてた別の画像が左端に表示されたり、on/offのボタンが点滅したりガタガタになってしまいましたそこで、お世話になっている某サイトに質問したところ『これ以上の合体は絶対お勧めしません。　PCクラッシャーになってしまいます恐いので私にHPに訪問させないでください』と言われてしまい検索しましたブラウザークラッシャーと同じ意味でしょうか？私の作ったホームページで誰かのパソコンが壊れてしまう事があるんですか？とてもショックで愕然となりました‼ 知らないという事は本当に怖い事です幸い、このHTMLへのリンクは、まだしていませんので他の方の目に触れる事はありません症状の出なかった６つ目の合体ならば私のHP上でリンクさせても大丈夫でしょうか？そしてPCクラッシャーになるか、ならないか事前に確かめる方法があれば教えてください宜しくお願いします

質問日時: 2020/05/22 10:24 質問者: さちねぇ

ベストアンサー

4

1
Web上でボタンを「クリックのみ」で加算、「shift+クリック」で減算などの機能をアプリで可能?

WEBアプリで、ボタンをクリックすると加算され、同じボタンを「shift+クリック」すれば減算されるような仕組みを作れないかと思っているのですが、そもそもそういったことは可能なのでしょうか? エクセルなどのアプリは可能ですが、WEBブラウザー上でも同じようなことはできるのでしょうか? もしご存知の方がいらっしゃれば、教えてください。よろしくお願い致します。

質問日時: 2020/05/21 16:29 質問者: uuuuta

ベストアンサー

1

0
スマホ画面の背景を縮小したい。

以下のURL～全体のソースが見れます。そのソースの冒頭にあります body { margin: 0; padding: 0; background-color: #3cb371; color: #333333; font-size: 15px; line-height: 2; } のbackground-color: #3cb371; ですが、薄緑を背景画面に使用しています。その背景のサイズが馬鹿みたいに広いので、スマホ画面サイズぐらいに変更するにはどうしたらいいでしょうか？ http://afurieitohannei.la.coocan.jp/Forsmartphone/nsn/%233cb371.small.htm 宜しくお願い致します。

質問日時: 2020/05/21 04:10 質問者: Campus2

ベストアンサー

1

0
fc2ホームページについて

私は今HTMLとCSSを勉強中の初心者なのですが、腕試しがてらホームページを作ってみようと思いfc2ホームページに登録しました。そこまではいいのですが、「ソース表示で編集」をして途中で確認のためプレビューを見たのですが、プレビューには表示されないはずの <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> 　　　　　　. 　　　　　　. 　　　　　　. ↑が表示されて困っています。だれかご教示ください。よろしくお願いします。

質問日時: 2020/05/20 19:44 質問者: purokun

ベストアンサー

1

0
テーブルデータを折り返して表示させたい

いつもお世話になっております。よろしくお願いいたします。一連のテーブルデータを縦に折り返して表示（画像参照）させる方法を探しています。 ※画像の名前はテストデータ・ジェネレータ（https://yamagata.int21h.jp/tool/testdata/）で作成したものです。添付の画像ははcolumn-countを使って表示させたのですが、折り返し行の罫線が中途半端に表示されてしまうため、頭を悩ませております。それ以外は問題ないのですが・・・良い方法はないものでしょうか。どうぞよろしくお願いいたします。

質問日時: 2020/05/20 16:23 質問者: ninnikutips

解決済

2

0
この画像のように、文字の下に線を入れたいんですけど、どうやったらいいですか？

この画像のように、文字の下に線を入れたいんですけど、どうやったらいいですか？

質問日時: 2020/05/19 21:42 質問者: meguroren

解決済

2

0
エクセルで、セルからWEBへ飛べるようにハイパーリンクを貼りたいのですが、うまくいきません。

WEBの履歴にリンクしたいところが出てこないのです。

質問日時: 2020/05/19 09:42 質問者: わて37

解決済

3

0
１文字字下げしたいのですが！？

[皆様に、私の作品をお見せすることができとても光栄です。] [　皆様に、私の作品をお見せすることができとても光栄です。] みたいに一文字字下げするにはどうしたらいいでしょうか？以下プログラムです。よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>切り絵集</title> <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="favicon.ico" rel="shortcut icon"> </head> <body id="index">  <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP"></a>  </div> <nav> <ul class="global-nav"> <li><a href="portfolio.html">Leaf</a></li> <li><a href="portfolio-Dis.html">Disney's</a></li> <li><a href="about.html">Flower</a></li> </ul> </nav> </header> <div id="wrap"> <h2>切り絵集</h2> <h2>皆様に、私の作品をお見せすることができとても光栄です。</h2> </div>  <footer> <small>(C)2017 Hattori-studio.</small> </footer> </body> </html> ---------------------------------------------------------- 以下CSSです。 wrap {/*ｺﾝﾃﾝﾂｱﾘｱ*/ color: #ffffff;/*ｺﾝﾃﾝﾂｱﾘｱﾌｫﾝﾄの色は白*/ } div#wrap{ padding:40px 10px; width:100%; } div#wrap h2, div#wrap p{ margin:0; padding: 0.5em; font-size:24px; font-weight:bold; color:white; line-height:2; margin-top: 30pt; }

質問日時: 2020/05/17 19:33 質問者: Campus2

ベストアンサー

2

0
レスポンシブルです。

レスポンシブルです。 https://oshiete.goo.ne.jp/qa/11629904.html の質問の続きです。以下のプログラムですが！添付画像で確認が取れると思います。 --------------------------------------- 皆様に、私の作品をお見せすることができとても光栄です。 --------------------------------------- 以上ですが、途中改行となります。以下がプログラムのCSS側にあります。 span.sample１～３をすべて消しても、画像は全く変わりませんでした。何故？途中改行するのでしょうか？よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <title>切り絵集</title> <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="favicon.ico" rel="shortcut icon"> </head> <body id="index">  <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP"></a>  </div> <nav> <ul class="global-nav"> <li><a href="portfolio.html">Leaf</a></li> <li><a href="portfolio-Dis.html">Disney's</a></li> <li><a href="about.html">Flower</a></li> </ul> </nav> </header> 以下CSS側です。  <div id="wrap"> <div class="sample"> <h2><span class="sample1">切り絵集</span></h2> <h2><span class="sample2">皆様に、私の作品をお見せする</span></h2> <h2><span class="sample3">ことができとても光栄です。</span></h2> </div> </div>  <footer> <small>(C)2017 Hattori-studio.</small> </footer> </body> </html> #wrap {/*ｺﾝﾃﾝﾂｱﾘｱ*/ color: #ffffff;/*ｺﾝﾃﾝﾂｱﾘｱﾌｫﾝﾄの色は白*/ } div.sample {/*index.html皆様で始まる文字の調整用*/ width:200px; height:150px; position:relative; } .span.sample1 { position:absolute; top:10px; left:10px; } .span.sample2 { position:absolute; bottom:10px; right:10px; } 補足どうもすみません！以上のURLのリンクが切れていましたので、以下でつながります。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q142246965... よろしくお願いいたします。

質問日時: 2020/05/12 07:31 質問者: Campus2

ベストアンサー

3

0
会社サイトのソースコードがまるで読めない

HTML、CSSの知識が不十分ですが、自分が商品ページの管理をすることになりました。変更事項があったので、今直しているところなのですが、毎回表示崩れに悩まされています。たとえば、価格・仕様・色・使い方のビデオ…など項目ごとにタグ分けをしていたとしたら、価格タグ内をいじった後に試験用サイトを表示すると、なぜか仕様タグ以下の情報が、全部くっついて表示されてしまう・・・などです。他にも多々ありますが、とにかくソースコードが膨大で、divもclassも相当設定されています。何をどういじったら、どのように影響がでるのか、見当がつかず辛いです。サイトには、gooのCMSを使っていますが、こういったCMSを読み解けるようになるには、どんな知識が必要ですか？頭がパンクしそうになったので、休憩がてら、こちらに来ました。

質問日時: 2020/05/11 11:31 質問者: jamfruits

解決済

3

0
文字を国語的に調整するプログラムをだと思います。

http://www.htmq.com/style/top.shtml には以下があります。しかし！私が使用してい参考書には --------------------------------------------------------- CSSでclass属性をセレクタに指定する際にはピリオド（.)の後ろにクラス名を記述します。 ------------------------------------------------------- とありましたので　スタイルシート部分は外部ファイル（sample.css）に記述。 div.sample {width:200px; height:150px; position:relative;} span.sample1 {position:absolute; top:10px; left:10px;} span.sample2 {position:absolute; bottom:10px; right:10px;} 以上は冒頭のURL先にあるプログラムで、現行ままですが！　以下のプログラムの先頭に（.）ピリオドを付けてみました。これは、間違いでしょうか？　よろしくお願いいたします。 .div.sample {width:200px; height:150px; position:relative;} .span.sample1 {position:absolute; top:10px; left:10px;} .span.sample2 {position:absolute; bottom:10px; right:10px;}

質問日時: 2020/05/11 07:29 質問者: Campus2

ベストアンサー

2

0
CSSでBOXサイズを、中に入っている要素サイズにするプロパティはありますか？

CSSでBOX（DIVとかで）を定義すると、横幅いっぱいに広がってしまいます。 pxや%で幅のサイズを指定するのではなく、中に入っている要素に対して可変させることは可能でしょうか？中身が10pxであればdivサイズも10px、500pxのものが中に入れば500pxで可変するといった定義は可能でしょうか？何も定義しないと親要素いっぱいになってしまいますし、サイズを指定してしまうと中に入ってくるものによって隙間ができてしまったりするので困っています。こういった場合の定義方法がありましたらアドバイスを頂けないでしょうか？宜しくお願いいたします。

質問日時: 2020/05/09 12:19 質問者: yuyukina

ベストアンサー

2

0
Css側で、文字の位置を数センチ上あげるは！？

以下ですが、参考書を見よう見まねで自分サイトを作成中です。無法地帯的なプログラム状態で蛇足のプログラムが存在しているかもしれません。以下ですが、margin-top: 20px;をいじりましたが全く変化なしです。文字をあと数センチ上げたいのですが、どうしたらいいでしょうか？よろしくお願いします。 .content { float: right; margin-top: 20px; margin-right: -10px; margin: 100 auto; }

質問日時: 2020/05/03 03:36 質問者: Campus2

ベストアンサー

2

0
loat: right;はリンク文字の横画面の位置調整ができる、プログラムです。

.global-nav { float: right; margin-top: -50px; 以上cssのプログラムです。 loat: right;はリンク文字の横画面の位置調整ができる、プログラムです。　あと数センチ、右に移動するにはどうしたらいいでしょうか！？　宜しくお願い致します。

質問日時: 2020/04/30 07:37 質問者: Campus2

ベストアンサー

1

0
.htaccessのリダイレクトの書き方を教えてください

例えば table/ というディレクリがあり、中にindex.htmlとold.htmlがあり googleにはtable/というアドレスと、table/old.htmlが登録されていますこのときindex.htmlのファイル名をnew.htmlにしました。.htaccessに RewriteRule ^table/ table/new.html [L,R=301] と書きましたするとtable/old.htmlまで、table/new.htmlにリダイレクトされてしまいます一体どのように書けばいいのでしょうか？

質問日時: 2020/04/28 23:16 質問者: hidari88

ベストアンサー

1

0
今時HTMLを知らない奴って何なの？ブログ作ったり動画投稿ぐらいしろよ今時の人間なら、って思います

今時HTMLを知らない奴って何なの？ブログ作ったり動画投稿ぐらいしろよ今時の人間なら、って思います。

質問日時: 2020/04/27 18:08 質問者: ヤジュウ

ベストアンサー

3

1
CSS側で、リンク画像を小するにはどうしたらいいでしょうか？

HTML側以下です。 <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP"></a> ----------------------------------------------------------------------------- CSS側は以下です。 .logo { float: left; margin-top: 50px; ----------------------------------- 以上を加味して、top.pnの画像が馬鹿みたいにでかいです。 CSS側で、小さくしたいのですが、どんなプログラムで小さいくなりますか？　宜しくお願い致します。

質問日時: 2020/04/23 19:31 質問者: Campus2

ベストアンサー

3

0
Dreamweaverの置換について

下記のようなコードがあり、①を②のように一斉置換したいと考えています。置換対象となるページは100ページほどあります。 ① ------------------------------------------------------------ <form action="https://www.hoge.cart.cgi"> <input type="hidden" name="name" value="hoge"> ・・・共通でないコードが複数行ある・・・ <input type="hidden" name="number" value="9999"> <input type="submit" value="買い物かごに入れる></td></tr> </table> </form> ------------------------------------------------------------ これを、下記のように変換したいつまり、<input type="hidden" name="name"の下に、<input type="hidden" name="number の行をもってきたいと思っています。 ② ------------------------------------------------------------ <form action="https://www.hoge.cart.cgi"> <input type="hidden" name="name" value="hoge"> <input type="hidden" name="number" value="9999"> 共通でないコードが複数行ある <input type="submit" value="買い物かごに入れる></td></tr> </table> </form> ------------------------------------------------------------ 上記のような置換がDreamweaverにて可能でしょうか？当方Dreamweaver8を使用しています。以上、よろしくお願い申し上げます。

質問日時: 2020/04/23 11:10 質問者: maru11586

ベストアンサー

1

0
テキストエディタ HTML5

HTML5を利用してＨＰを作成しようと思います。超初心者というより、いま、から挑戦したいとおもいます。いろいろテキストエディタあるとおもいますが、好みはあるとおもいますが、どれがおすすめなのでしょうか。

質問日時: 2020/04/21 20:35 質問者: 東西線

ベストアンサー

1

0
何もいじってないのに、表示崩れを起こすのはどうして？

会社サイト内の商品紹介ページの編集を任されています。私がいる部署は全員web周り素人ですが、中でも私が以前プログラミングの学校に行っていたというのが理由で、素人の私に任されました。本日修正依頼があったので、ソースコードを直していたのですが、該当箇所以外のところをいじっていないにも関わらず、表示崩れを起こすのはなぜでしょうか？ページには、5つほどタブ(商品一覧、商品詳細、金額一覧表、PR動画、その他使用例を描いたイラストなど)があり、修正依頼があったのは次の2つです。 ①2つ目のタブ内の商品紹介文の修正 ②3つ目のタブ内に、アコーディオン表示をしている個所があり、それを丸々削除するこのうち、①だけなら問題ありませんが、②をやると、3つ目のタブ以降の内容も消えてしまうんです。ソースコードをくまなく見て、絶対に該当箇所以外触ってないのに、何度やり直しても②をやると他のタブに表示される内容が消えます。 ②をやる際、該当と思われる範囲には、下記のように無数の<div>と</div>があります。 <div class=accordion~~> <div --><div AA> <div BB></div BB> <div CC> <div DD> </div> </div> </div> <div>と</div>はペアであることから、1つずつ数えて、余ったdivのみ削除すればいいのではなど考え、初めは一つずつ数えてましたが、表示が見づらく、結局正確にわかってません。なぜ、修正箇所以降のページに影響が出てしまうんでしょうか。

質問日時: 2020/04/21 19:40 質問者: jamfruits

解決済

2

0
ｃｓｓのスタイルが適用されない

index.phpというファイルが <!Doctype html> <head><link rel="stylesheet" type="text/css" href="stylesheet.css"></head> <body> <div class="header"> <div class="header-left">PROGATE</div> <div class="header-right"> <ul> <li>会社概要</li> <li>採用</li> <li class="toiawase">お問い合わせ</li> </ul> </div> </div> <div class="toko"> <ul> <li>問い合わせ</li> <li>問い合わせ</li> <?php $kik = array('勇者','戦士','魔法使い','賢者'); ?> <select name="category"> <option value='問い合わせ'>問い合わせ</option> <?php foreach($kik as $kiks){ echo "<option value='$kiks'>{$kiks}</option>"; } ?> </select> </ul> </div> </body> </html> --------------------------------------------------------------------------------------------------------- stylesheet.cssというファイルが .header { height:65px; margin-bottom:1px solid blue; } .header-left { float:left; font-size:30px; padding:10px 60px; color:#ED7000; } しかし、ブラウザで確認したところ、styleが適用されておりません。どこが間違っておりますでしょうか。ご回答お待ちしております。

質問日時: 2020/04/15 18:24 質問者: finaltida108070809

ベストアンサー

2

0
cssで、line-heightの指定について

.css { line-height:1.5; } という指定があるとします。この1.5は、ピクセルでもパーセントでもないし、どのような表記なのでしょうか。

質問日時: 2020/04/15 17:44 質問者: finaltida108070809

ベストアンサー

1

0
cssで、marginやpaddingの指定について

.css { margin:5px 2px 5px 3px; } と四つ指定できますが、この書き方で、合っていますでしょうか。それとも、もっと簡単な書き方が存在しますでしょうか。また、この四つは、それぞれ、どの部分の指定でしょうか。

質問日時: 2020/04/15 17:31 質問者: finaltida108070809

ベストアンサー

4

0
cssのborderの色と太さを指定

クラス名が iroとして外部ファイルに .iro { border-color:blue; } だとボーダーの色がブルーになりますが、一緒に、ボーダーの太さを10pxの指定をする場合には、どのように記述すれば、宜しいでしょうか。

質問日時: 2020/04/15 16:20 質問者: finaltida108070809

ベストアンサー

1

0
ホームページのリンク作成について。文字にリンクをつけたいのですが、リンクの下線を消して、文字を黒色

ホームページのリンク作成について。文字にリンクをつけたいのですが、リンクの下線を消して、文字を黒色で表示させたいのですが、やり方教えてください。

質問日時: 2020/04/13 22:42 質問者: pjdmgam

解決済

1

0
数か月ぶりにCSSを再開しました。宜しくお願い致します。

以下CSS側から14376.jpgの画像ををコントロールする、プログラムです。つきまして、以下の　background-position: left top; で、冒頭の画像位置の選択肢として left center　right　その他に　何がありますか？宜しくお願い致します。 #Dis { background-image: url(../images/Dis/14376.jpg); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; background-size: 40% auto;

質問日時: 2020/04/13 17:26 質問者: Campus2

ベストアンサー

1

0
レスポンシブ対応についてホームページプログラミング

ホームページのレスポンシブ対応について質問です。ホームは画像のみで作ったのですが、レスポンシブ対応がうまく行きません。下の写真は左側にHTML右側がCCSコードです。左画像のHTMLの中にある赤い四角で囲ってあるところが画像のコードです。ほとんどはこの画像を貼り付けたホームページです。レスポンシブ対応で iPhone6や7では丁度良いのですが、下の写真のようにiPhone5の場合、写真の右下の絵に注目））のところに隙間ができています。また、iPadでは画像が拡大していてほとんど一部しか見えません。画像をある程度はレスポンシブ対応させたいのですが、どうプログラミングコードを打てばよろしいでしょか？ CCSのコードがおかしいのでしょうか？

質問日時: 2020/04/11 19:19 質問者: ijmdat

解決済

2

0
Webサイト制作のコーディングについて

画面幅に合わせて円が水平に行き来するものを作りたいです。 https://lab.sonicmoov.com/markup/css/css-animation-20/ のサイトの1番目クネクネ動く CSS loading を元に @keyframes rightの数値を100%にしてみたのですが、上手く行きませんでした。どのように設定すれば画面幅に合わせて移動してくれますでしょうか？こちらの赤い玉も水平方向に画面いっぱいで行き来出来ればと色々いじってみたのですが、答えが分かりませんでした。 https://tech.arms-soft.co.jp/entry/2019/11/13/090000 どうかどちらかでもご教示いただければと思います。 html CSS

質問日時: 2020/04/09 18:02 質問者: rakiduta1

ベストアンサー

2

0
cssについて

formのinput fileのスタイルを設定したいですが。書き方がよく分かりません。テキスト『選択されていません』だけがスタイルが適用されていて、ボタンのスタイルが適用されません。 <input type="file" name="file"> input[type="file"] { margin-top: 0px; font-size: 16px; } なにがダメでしょうか？

質問日時: 2020/04/08 15:39 質問者: htaccess_sss

解決済

1

0
wordpressにcssで作ったBOXを表示させたいです

https://saruwakakun.com/html-css/reference/ribbon#section3 の「12. 影をつけた場合」を表示させたくて、ググりながらいろいろ試していますが、うまく表示されなくて困っています。 wordpressには、プラグインの「Simple Custom CSS and JS」を使い、この中にCSSを書き込んでいます。どなたかお詳しい方、どんなふうに変えればうまく表示されるでしょうか？ご教示お願いいたします。

質問日時: 2020/04/07 16:54 質問者: perfume

解決済

1

0
WEBサイト制作について

HTMLでリンクを書く時に、同じ階層のファイルを指定して相対パスで記述する場合 <img src="img/image1.jpg"> <img src="./img/image1.jpg"> 等、このように2パターンあると思います。この./は省略してもどちらでも良いと解釈していたので、基本的にはずっと./は付けずに記述してきました。ですが、上司にパソコン上で見るだけなら良いがサーバーに上げる際は./を付けないとサーバーが認識しないから書き直すように言われました。サーバーによってはそういう場合もあるのでしょうか。いままで勉強した中ではそのような記述は無かったので確認したいです。システムに詳しい方いらっしゃったら是非ご意見お聞かせくださいm(_ _)m よろしくお願いします。

質問日時: 2020/03/30 10:55 質問者: Charly301

ベストアンサー

3

0
記事本文だけのリンクに下線をつけたい

私が書いているブログはPC用とスマホ用に分けてテンプレを試用しているのですが、スマホ用のCSSで、記事本文のリンクにだけ下線をつけたいのですが、どうやってもブログ全体（ブログタイトルや過去記事等も一緒に）下線がついてしまいます。 CSSの記述の中に「/* 記事本文・追記～」という部分があるのですが、この部分に「text-decoration: underline」みたいな記述を入れればいいのでしょうか。

質問日時: 2020/03/17 10:27 質問者: miyu070804

解決済

3

0
datとhtml はどう違いますか？教えてください。よろしくお願いします。

datとhtml はどう違いますか？教えてください。よろしくお願いします。

質問日時: 2020/03/15 01:17 質問者: kr2017

ベストアンサー

2

0
動画サイトにて、間違えて“Downroad”というボタンを押してしまいました。すると、写真のような画

動画サイトにて、間違えて“Downroad”というボタンを押してしまいました。すると、写真のような画面が出てきました。すぐにタブを閉じたのですが、ここでダウンロードを押したらこの動画サイトのHTMLがダウンロードされるのですか。

質問日時: 2020/03/11 21:40 質問者: うおい

解決済

1

0

【プログラミング・Web制作】に関するカテゴリ

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

【HTML・CSS】に関するコラム/記事

弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...