HTML・CSS(19ページ目)

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

回答数

気になる

HTMLのコードに、コメント入れすぎはダメですか？

初心者なのに、会社でweb更新を任されました。どうにか一仕事は終えましたが、人様が書いたコードはわかりづらく大変でした。 F12キーを押して管理者画面に色をつけて、該当画面を探して、どのような設定がされてるのか確認しながら作業するも、基本的にコードは文字の羅列です。〈div〉が何度出てきたことか！classやidがいくつ設定されてんだ！等々、正直まだ解決できてないことがたくさんあります。私の方でも新しくページを作ったのですが、どうせならこのページのコードに、コメントアウトをたくさん入れたら見づらいでしょうか？理由は、誰が見てもわかりやすくするためです。しかし、コメントアウトをたくさん入れたら、他の部分は触ってないはずなのに、表示ズレを起こしました。コメントアウトがコード上の他のパーツに影響を与えることってないですよね？

質問日時: 2019/08/06 12:49 質問者: inspi

解決済

2

0
CSSでbodyの背景に自作SVGのフィルターを適用させる

CSSでbodyの背景に自作SVGのフィルターを適用させるにはどうしたら良いでしょうか？出来れば、そのSVGを50%ほど透過したいのですが、それも併せて書いて頂けるとありがたいです。検索しても海外サイトばかりで困っております・・・・

質問日時: 2019/08/06 10:01 質問者: hgdjl0jklh

解決済

1

0
Geo Recorder

Geo Recorder 携帯をタップしたときその位置の緯度・経度、そこから離れたところで再度タップすると、2点間の距離も、更に点を増やすと、面積も求まる便利ものです。ここで教えてもらい、計測までは出来るようになりましたが、この計測結果を、Excelに取り込む方法が分かりません。ここで、optionとして、Continue recording、Share、Cancel の3つの選択肢があります。この内、Shareを選ぶとホーム画面に戻ってしまいます。 help画面も問い合わせ先も見つかりません。よろしくお願いします。

質問日時: 2019/08/04 23:31 質問者: aerio

ベストアンサー

2

0
【wordpress】【HTML】特定の記事だけリンクが働かない

お世話になります。特定の記事だけ<a href=""></a>でくくったリンクが働きません。結果は　Not foundとなります。（添付のエラー）このリンクをほかの記事や、新規投稿にコピペすると働きます。こういったことははじめてなのですが、どんなことが理由として考えられますでしょうか？調べてもさっぱりわからないので質問させていただきました。

質問日時: 2019/08/03 08:04 質問者: kumanokokumanoko

解決済

1

0
HTML:utf-8とUnicodeとどちらで保存すべきか

会社のwebサイト更新を任されたものです。万が一失敗したら怖いので、更新前に、コードを丸々コピーし、メモ帳に貼り付けて保存し、その上で編集しています。メモ帳を「名前をつけて保存」する際、保存ボタンの脇に「文字コード」なるものを選択できるボタンがあります。デフォルトは「ANSI」というものになっており、このまま何も手を加えず保存しようとすると、下記のようなエラーメッセージが出ます (※それでも保存はできます)。 ----------------------------------------------------------------------- このファイルは、ANSIテキストファイルとして保存すると失われてしまうUnicode形式の文字を含んでいます。 Unicodeの情報を保存するには、文字コードから「Unicode」を選択してください。 ----------------------------------------------------------------------- しかし、コード上に設定しているのは<meta charset="utf-8">です。エラーメッセージが、「文字コードから「utf-8」を選択してください。」と出ないのはどうしてでしょうか？ネットでいろいろ調べたところ、Unicodeは文字集というもので、utf-8はその文字集を数字化する一つの方法だということはわかりました。メモ帳を保存する際に、どちらを選んで保存すべきでしょうか？今までは、メモ帳を保存する際、エラーメッセージに従ってUnicodeで保存をしていました。が、メモ帳に保存したコードを再度貼り付けし直すと、画像のサイズが変わっていたり行間がずれていたり、何かがおかしいんです。保存する形式の問題なのかと、ふと思いました。

質問日時: 2019/08/02 13:05 質問者: inspi

解決済

4

0
HTML：同じページなのに、1列あたりの文字数が違うのはどうしてですか？

教えてください。 <p>あいうえおかきくけこさしすせそたちつてと</p> <p>あいうえおかきくけこさしすせそたちつてと</p> というコードを書きました。表示をさせると、なぜか ---------------------------------------------- 　あいうえおかきくけこさしすせそたちつてと　あいうえおかきくけこさしすせ　そたちつてと ---------------------------------------------- のように、同じページ内で、文字の大きさを変えたわけでも、使ったタグを変えているわけでもないのに、1列あたりの文字数が違い、勝手に改行される現象が起きてしまいます。これはなぜでしょうか？ちなみに、同じような見た目にしたいと思い、<br>を追加しました。 <p>あいうえおかきくけこさしすせ<br>そたちつてと</p> <p>あいうえおかきくけこさしすせそたちつてと</p> すると、こうなりました・・・ ---------------------------------------------- 　　あいうえおかきくけこさしすせそたちつてと　あいうえおかきくけこさしすせ　そたちつてと ---------------------------------------------- 要は、何もしていないのになぜか1文字目の文字が引っ込んだり、飛び出たり、文字列がバラバラで見た目が悪くなります。原因や解決方法があれば教えてください。

質問日時: 2019/07/31 23:41 質問者: inspi

解決済

3

1
HTMLのクラス名はただの名前で、命令ではないですよね？

初心者なのに自社のサイト更新を任された者です。教えてください。ずばり、クラス名はクラス名だけであって、いくらクラス名を変えたからといって、「文字の太さを変える」とか、「ここで改行する」のような命令(=タグ？）にはなりませんよね？今、商品ごとにタグを作り、そのタグをクリックすると、各商品の詳細ページが表示されるというコードを作成しています。まず、3つのタグを作りました。 <civ class="tag"> <div class="tabItem" id="tab1-1"> <spam>商品1</span> <civ class="tag"> <div class="tabItem" id="tab1-2"> <spam>商品2</span> <civ class="tag"> <div class="tabItem" id="tab1-3"> <spam>商品3</span> これを作ったことで、１つのページに横並びで、「商品１」「２」「３」のタグが表示されました。問題はこのあとです。それぞれのタグをクリックしたら表示される商品ごとの詳細ページを作成しようと、下記のようなコードを書きました。 <div class="parsys tabInPagePar1"> この、最後の「1」を「2」に変えたら("parsys tabInPagePar2")商品2へ、「３」に変えたら("parsys tabInPagePar3")商品3に飛べるようになりました。ただ、これってあくまでも<div class>とあるように、"parsys tabInPagePar1"というのは、ただのクラスの名前です。<br>とか<a href>のようなタグではないのに、なぜ末尾の数字を1,2,3と変えるだけで、それぞれのタグの詳細を設定できるようになるのか謎です。名前にそんな権力があるのでしょうか？別ページのコードをコピペし、極力同じ作りの部分を壊さないようにして、テキストやリンク先だけ買えるようにしているので、コード全体のどこかで、きちんと設定がなされているのかもしれません。とにかく今は、それぞれの詳細ページが作れるので、結果的にはラッキーなのですが、やはり仕組みをきちんと理解しないといけないと思っています自分なりに調べましたがよくわからないので教えてください。

質問日時: 2019/07/31 07:32 質問者: inspi

解決済

2

0
webサイト制作が初めてです。この意味がわからないので教えてください。

web制作で『ワイヤーの域が脱していない』とはどうことなのでしょうか？教えてください！

質問日時: 2019/07/29 08:50 質問者: リオンくん

解決済

3

0
タイトルをmouse overするとアイコンが現れてページの上に行くやつについて

こんばんわ github qiita　で見かけるタイトルをmouse overするとアイコンが現れてページの上に行くやつはなんというやつなのでしょうか？どうやって実装すればよいでしょうか？例えば下記のサイトにようにです。 Markdown記法チートシート https://qiita.com/Qiita/items/c686397e4a0f4f11683d GraphQL API v4 https://developer.github.com/v4/ ちなみに、ブラウザーは　chrome の　最新版です。

質問日時: 2019/07/28 22:22 質問者: JosephWalden

ベストアンサー

2

0
CSSのtext-align:centerはブロックレベル要素にも効きますよね？

css初心者です。教材によると、text-align:centerは、「中央寄せしたい要素がインライン要素であること。」が効く条件のようですが、実際、中央寄せしたい要素が「h1」や「p」タグ等のブロックレベル要素でも効きますよね？となると、「中央寄せしたい要素がインライン要素であること。」…これは誤りですか？

質問日時: 2019/07/25 19:59 質問者: J-009

ベストアンサー

2

0
a要素の色を複数使い分ける方法

一つのページ内に、2種類以上のa要素を設定することはできますか？ページ内に、他のページにリンクするa要素とページ内のセクションにリンクするa要素があって、それぞれの色を変えたいのですが、 html <a class="color1" href=・・・> ＜a class="color2" href=・・・> css a:link{ font-weight:bold; } .color1{ color:#fff; } .color2{ color:#000; } これではだめでした。どうすれば、色を変えれるのでしょうか？どなたか、教えてください。よろしくお願いします。

質問日時: 2019/07/25 09:48 質問者: kyouko

解決済

4

0
入れ子関係のdivで質問させてください。

入れ子関係のdiv（外側）にwidthを指定し画面の中央に配置した場合、div（内側）がdiv（外側）からはみ出て画面100％に表示させることは可能でしょうか？現在div（外側）は左右マージンをFreeで中央に表示させています。宜しくお願いします。

質問日時: 2019/07/22 00:35 質問者: adamsswat

ベストアンサー

2

0
svg画像を使ったローディング画面について

こんにちは。どなたかお詳しい方に、ご質問です。今、svg形式の画像（動物のロゴマーク）を持っています。その画像に少し動きをつけて、それをローディング画面にしたいのですが、どのようにしたら思い通りのものができるでしょうか？一応自分で調べたのですが、もともとあるローディング中っぽいsvgを使うのではなく、今持っている素材を使って作りたいのです、、初心者のため、初歩的な質問ですみません。 HTMLでの記述、jsやcssのサンプルコードを参考に書いてもらえると、理解しやすくて助かります。

質問日時: 2019/07/18 19:11 質問者: w2

解決済

3

0
【html/css/jq】スマホとPCで文章の一部を変更させる方法を知りたいです

cssやjQueryを使って、スマホとPCで文章を使って変更させたいのですがどのようにしたらいいのでしょうか？ ◆パソコンでの表示左の画像をご覧ください ◆スマホでの表示上の画像をご覧くださいのように変更したいです。どなたかよろしくお願いします。

質問日時: 2019/07/15 15:32 質問者: kzn3

解決済

1

0
HTMLは何ができますか

HTML & CSS JavaScript jQuery Ruby Ruby on Rails5 PHP Java Python Swift Command Line Git SQL Sass Go React これらは何に特化した物ですか。

質問日時: 2019/07/15 06:04 質問者: t89w5

ベストアンサー

2

0
echo結果をhtmlで表示したい

echo 'Hello World' などで、html表示したいです。教えてください。

質問日時: 2019/07/12 11:04 質問者: 全速力おもち

ベストアンサー

2

0
Webページ作成の際に、固定ヘッダの下へのリンク

Web作成初心者（ド素人）です。今、Webページを固定ヘッダーを使って作成しているのですが、固定ヘッダにあるリンク元からリンクをクリックした際に、固定ヘッダの下部分にリンクをしたいと思っています。図のように、固定ヘッダの「(1)」のリンクをクリックすると、画面下部のみ「(1)」の画像が表示されるページへ遷移し、「(2)」のリンクをクリックすると、画面下部のみ「(2)」の画像が表示されるページへ遷移をさせたいです。固定ヘッダにそのままリンクを書くと、当然ではありますがブラウザの全体ページとしてリンク先の画像があるページへ移動してしまいます。固定ヘッダ部分は何も遷移せずに、下部分のみ変更させたいです。すいませんが、ご教授をお願いできませんでしょうか。よろしくお願いいたします。

質問日時: 2019/07/08 20:39 質問者: ろでます

ベストアンサー

3

0
CSS display table, table-cell について

以下のようなコードの場合、全 2 行になり、 1 行目は 3 列で、各およそ 33% 2 行 2 列で、各 50% 1,2 行目がずれてしまいます。ずれないように均等幅で並べるにはどのようにすればよいでしょうか ? 通常のテーブルのようにしたいのですが、分かる方おりましたら、ご教授下さい。宜しくお願い致します。 ( HTML ) <div class="box"> <div class="pane">A</div> <div class="pane">B</div> <div class="pane">C</div> </div> <div class="box"> <div class="pane">D</div> <div class="pane">E</div> </div> ( CSS ) display: table; width: 100%; table-layout: fixed; } .pane { display: table-cell; border: solid 1px #333333; }

質問日時: 2019/07/07 20:56 質問者: 東京ノミコト

ベストアンサー

1

0
ワードプレスの公開済み記事の自動更新をとめる方法

お世話になります。ワードプレスで現在サイトを作成しているのですが、記事を書いている途中で自動更新されてしまいます。そのため、本来更新したいタイミングで更新がされず、記事が途中で消えてしまうことがあります。プラグインや設定で、ワードプレスの公開済み記事の自動更新をとめる方法を教えていただけませんでしょうか。ワードプレス自体のバージョン更新ではなく、公開済み記事の自動更新を止めたいですよろしくお願いします。

質問日時: 2019/07/07 08:35 質問者: nickname1215

ベストアンサー

1

0
<div>が４個 </div>2個なので、つりあっていません！？

以下のプログラムはHTMLのプログラムの抜粋です。 <div>４個：</div>２個の割合です。この場合 <div>３個：</div>３の割合で丁度つり合いがが取れます。　なので、どこか一か所<div>~</div>に変更しないといけないです。私は、著書でCSS関連を学んでいる途中なので、初心者であり、参考書通りに、転記したのかも疑問もあります。取り分け、以下のプログラムですが！もし、</div>に変更する場合、何処を変更すればいいでしょうか？　現在プログラムが著書通りに動いてくれいませんので、原因としては</div>のバランスが取れていないのからだろうと思っています。よろしくお願いいたします。 -------------------------------------------------- <div id="wrap" <div class="content"> <div class="main-center"> <h1>About</h1> <p>SNAPPERS代表、織姫　彦星のプロフィールや経歴の紹介ページです。</p> <section class="profile clearfix"> <div class="profile-txt"> <h2 class="icon">Profile</h2> <p><span>SNAPPERS 代表:織姫　彦星</span><br>アナログ、デジタルを問わず、トイカメラやぽらポラロイド、ビデオカメラに至るまで、あらゆるカマラに夢中になって遊んでいるうちに自然とカメラマンとして道を志すようになる。</br>大学卒業後、有名なカメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影する中で、現在のアウトアカメラマンとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映画作品などにもカメラマンとして参加するなど幅広く活躍している。</p> </div> <img src="images/about-profile.png" alt="織姫　彦星プロフィール画像"class="profile-image"> </section> <section class="career"> <h2 class="icon">Caree and job history</h2> <table> <tr> <th>1944年3月</th> <td>〇▽角形芸術大学写真家　卒業彦星写真研究所に入社、彦星英明氏に師事</td> </tr> <tr> <th>2012年3月</th> <td>彦星写真研究所を退社して欧米、世界各国を放浪しながら撮影を続ける</td> </tr> <tr> 　<th>2012年8月</th> <td>イタリア・ミラノで開催されたコンクールにて、審査特別賞受賞</td> </tr> <tr> <th>2016年１月</th> <td>帰国し「SNAPPERS」を設立</td> </tr> <tr> <th>2016年4月</th> <td>Aichi Musimにて初の写真展「Snap!Snap!」を開催</td> </tr> </table> </section> </div>

質問日時: 2019/07/07 07:10 質問者: Campus2

ベストアンサー

3

0
cssのセレクタの指定方法について教えて下さい。

基礎的な質問なんですが… ①タグにidやclass名がついてる場合、セレクタは必ずタグ名ではなくidやclass名で指定する、という認識で正しいんですか？ ▼例html <p class="example">ああああ</p> ▼css ◯正しい .example { color: #fff; } ▼css ✖間違ってる p { color: #fff; } ②子孫セレクタは全ての先祖から指定する必要があるんですか？例えば下記のhtmlコードの、li要素の文字色を指定したい場合、ⒶとⒷどちらが本来の正しい記述なんでしょうか？ ▼html <body> <div id="wrapper"> <div id="header"> <h1>ああああ</h1> <ul class="box"> <li class="nav1"><a href="aaaaaa">ああああ</a></li> <li class="nav2"><a href="aaaaaa">ああああ</a></li> <li class="nav3"><a href="aaaaaa">ああああ</a></li> </ul> </div> ～以下省略～ </div> </body> ▼cssⒶ .box li { color: #000080; } ▼cssⒷ #wrapper header .box li { color: #000080; }

質問日時: 2019/07/05 21:19 質問者: J-009

ベストアンサー

4

0
【HTML ・CSSについて】Web初心者です。

質問です。画像の上に画像を乗せ、上の画像を下の画像の中央に持ってくるにはどうすればよいのでしょうか。よろしくお願いいたします。

質問日時: 2019/07/03 17:49 質問者: echizenhyaku86

解決済

2

0
【HTML・CSSについて】Web初心者です。

すみませんが先ほどおかしな質問をしてしまったようですので再度質問いたします。 DreamweaverCC 2015でWebサイトを作成しています。 @media screen and (max-width:〜px) { } でスマホサイズ、タブレットサイズをCSSに反映しました。ページに画像とテキストを配置したいのですが、 PCサイズでは画像の右にテキストが来るように。スマホサイズでは画像の下にテキストが来るようにしたいです。（イメージ画像を添付いたします。）この際、どのようにコードを書き込めば良いのでしょうか。すみませんが、よろしくお願いいたします。

質問日時: 2019/07/02 17:59 質問者: echizenhyaku86

解決済

2

0
【HTML・CSSについて】Web初心者です。

質問です。いま「DreamweaverCC 2015」を使用してWebサイトを作っていて、 @media screen and (max-width:〜px) { } を使ってスマホサイズ、タブレットサイズ、PCサイズに分けるところまで出来ています。ページには画像とテキストを配置したいのですが、 PCサイズでは画像の右にテキストが来るように。スマホサイズでは画像の下にテキストが来るようにしたいのです。この際、どのようにコードを書き込めば良いのでしょうか。 @media screen and (max-width:〜px) { } で分けてあるので大丈夫かと思い大本（PCサイズ）のソースに「align="top”」を加えたところ、モバイル、スマホにも反映されてしまったので混乱してしまいました。すみませんが、よろしくお願いいたします。

質問日時: 2019/07/02 14:43 質問者: echizenhyaku86

解決済

1

0
<div>があれば</div>は必ずないといけないのですか？

http://afurieitohannei.la.coocan.jp/sns/div.htm 以上のＵＲＬ先のプログラムですが、私が数えたところ <div>が５個で</div>が３個です。 <div>が５個あれば</div>が５個ないけないと思います。素人なので、詳しくわからないのですが！残りの</div>を後２個設定しないと、プログラムが成り立たないのだろうと思います。もし</div>を追加する場合は何処に追加すればいいのでしょうか？よろしくお願いいたします。

質問日時: 2019/07/02 06:07 質問者: Campus2

ベストアンサー

4

0
アフィリエイトサイトを作るのに、まずは１つのテーマ(美容など)で30記事程度の簡単なサイト構築を考

アフィリエイトサイトを作るのに、まずは１つのテーマ(美容など)で30記事程度の簡単なサイト構築を考えています。html.cssは学校に行ってたので理解しています。最適なのは、html+cssかwordpress どちらでしょうか？

質問日時: 2019/07/01 00:14 質問者: fm1771

解決済

1

0
HTML CSSに関してです！！リンクなど、マウスを乗っけたときに、ゆっくり色が変わり、マウスが離

HTML CSSに関してです！！リンクなど、マウスを乗っけたときに、ゆっくり色が変わり、マウスが離れたときはゆっくり色が元に戻るようなまのをつくりたいです。しかし、transitionプロパティなど使うと、サイトをリロードなどするときに要素が動きます。（ジュワッとする感じです。）固定したままで色の変化をつけたいのですが、リロードするたびに要素が動きうまくいきません。どうやったらいいのでしょうか？

質問日時: 2019/06/30 22:27 質問者: ト琶

解決済

1

0
htmlで画像を振り分ける方法

パソコンとスマホで表示する画像を変えたくて、パソコン用の大きい画像とスマホ用の小さい画像を用意して、ソースを書いたところ、スマホでは小さい方の画像が表示されて、OKなのですが、パソコンでもスマホ用の画像になってしまいます。ソースのどこがいけないのかわからなくて、困っています。どなたか、教えてください。profile-fot-spがスマホ用、profile-fot-pcがパソコン用です。 htmlのソース <picture> <source media="(min-width: 320px)" srcset="images/profile-fot-sp.jpg"> <source media="(max-width: 600px)" srcset="images/profile-fot-pc.jpg"> <img src="images/profile-fot-pc.jpg"></picture> パソコン用cssのソース picture{ width:300px; height:370px; float:left; margin-top:20px; margin-left:50px; } スマホ用のcssのソース picture{ width:170px; height:250px; float:left; } ちなみに、max-width:600pxを、min-600pxにしたり、min-2000pxにしてもだめでした。よろしくお願いします。

質問日時: 2019/06/30 16:37 質問者: kyouko

解決済

2

0
複数のサイトに同じ画像を表示

1枚の画像をサーバーにアップします。その画像からリンクのURLを生成し、５つの異なったWebサイトに画像表示させたいです。このような場合、どのサーバーを使い、どのようなHTMLを作成したらよろしいでしょうか？

質問日時: 2019/06/29 09:00 質問者: 672345

ベストアンサー

3

0
ホームページウィンドウ縮小メニューバーの位置を設定

下記のURLのように画面を縮小させていくとメニューバーも合わせて左に移動していくメニューバーを作りたいです。 http://xn--dck0a5dvc1escc2961m271b.jp/ どのような設定をすればいいのでしょうか？詳しい方教えてください。よろしくお願いいたします。

質問日時: 2019/06/25 23:35 質問者: anpan7474

解決済

1

0
【HTML/CSS 欧文テキストについて】webデザイン初心者です

質問です。欧文テキストを配置したいのですが、スマホ版サイズにした際にスペースの空間が空いてしまうのを改善したいのですが（画像添付いたします。）どうすれば良いのでしょうか。 PCサイズにした場合は気にならないのですがスマホ版にすると間隔が広く空いてしまいます。すみませんがよろしくお願いいたします。

質問日時: 2019/06/24 18:10 質問者: echizenhyaku86

ベストアンサー

1

0
選択することでさらに選択出来るようなテキストボックス

<html> <head> <TITLE>フロー</TITLE> <script type="text/javascript"> function clicli(){ document.frm.target.value = "あああ";←ここにあああと選択ボタンが表示されるようにしたい } </script> <body> <form name="frm">　　　　　←ここも枠内に文字とその下に選択ボタンが表示されるようにしたい <input type="button" value="実行" onclick="clicli()" /> <input type="text" name="target"> </form> </body> </html> 枠(<p><div>のテキストボックスでもいいのですが）内に文章が表示されその下にボタンではなくてもCSS偽装でボタンのようにみえるリンクでもいいのですが表示され、そのボタンをクリックするとまた文章とボタンが表示されるようにしたいと思ってます。ようするに選択フローのように進んで行きたいのです。自分の今のレベルですとhtmlファイルを沢山作りリンクで入れ替えて行く方法しか出来ません。この方法だと1～2行の文章のhtmlファイルを作らないといけないので大変でそれでいろいろ調べていたら過去の質問で上記のようなのを見つけてこの方法ならなんと出来るかなと思いましたが、やはり自分の能力では無理でした。すいませんが誰か助けてくださいお願いいたします。

質問日時: 2019/06/23 13:56 質問者: az_masa

解決済

2

0
【CSS】縦横スクロールテーブルのキャプションを左上に固定したい

テーブルを横にスクロールさせても見出し（tbody th）は固定させていますが、左上に表示されているキャプションは td と一緒にスクロールされて見えなくなります。テーブルのキャプションを固定させる方法で、何か良いアイデアはないでしょうか？・左に固定しているtbody th と同じCSSにしてもダメだった・align は非推奨なので避けたい・caption-side ではムリ・position は「absolute」「relative」「sticky」を試したけど上手くいかず（位置の指定方法が間違っていた可能性はアリ）そもそもキャンプションの固定なんてムリなんでしょうか？

質問日時: 2019/06/22 22:00 質問者: アリグー

解決済

1

0
HTML テーブルの一部を半透明にしたい

宜しくお願い致します。 HPにテーブルを作り、その一部のセルの背景を半透明にしたいのですが、上手くいきません。一部のセルの指定が難しかったため、テーブルの中にテーブルを作って背景を不透明にしようとしているのですが、どこが悪いでしょうか。 <td style="filter:alpha(opacity=50)">をつかって半透明にできると思ったのですが・・ CSSを入れてみてもテーブル全体が白くなったりして上手くいきませんでした。どなたか詳しい方宜しくお願い致します。 <table width="100%"> <tr> <td width="18"></td> <td background="../image/wall_water2.jpg"> <p style="margin:20px 0px 0px 0px; font-weight:bold; font-size:27px; color:#191970; line-height:130%" align="center">～商品名～ <br>定期発行 </p> <table width="85%"><td bgcolor="white" style="filter:alpha(opacity=50)"> <p style="margin:12px 0px 0px 0px;font-size:22px; color:#0050AA; line-height:130%" align="center">  今回ご紹介する新商品は<br><br> <font color="#dc143c">*********************** </font><br> </p> <p style="margin:12px 0px 0px 0px; font-weight:bold; font-size:18px; color:#0050AA; line-height:130%"> 　●***********************<br> 　●*********************** </p> </td></tr></table> </td> <td width="18"></td> </tr> </table>

質問日時: 2019/06/21 09:56 質問者: あちるば

ベストアンサー

3

0
CSSで要素を中央揃えしたい時に使う margin: 0 auto; の0の部分はpxをつけた方がい

CSSで要素を中央揃えしたい時に使う margin: 0 auto; の0の部分はpxをつけた方がいいのでしょうか？

質問日時: 2019/06/21 09:42 質問者: スプラっひゅ

ベストアンサー

1

0
.btn a{ ・・・のaですが！a要素ですか！？

以下プログラムはファイル名がstyle.css,ですがファイル名がindex.htmlからstyle.cssにリンクを張り遠隔操作で index.htmlの文字の背景色の等を変更するプログラムです。 .btn a{　の a ですが、a要素タグですかね！　c に変更したところ機能しませんでした。a　じゃにといけない理由を知りたいです。　よろしくお願いいたします。 ----------------------------------- .btn a{ background-color: #009cd3; color: #ffffff; font-size: 20x; font-family: 'Bitter',serif; }

質問日時: 2019/06/21 06:11 質問者: Campus2

ベストアンサー

2

0
CSS&HTMLと、CMSと、どちらがサイト構築の勉強になりますか？

仕事で、商品紹介サイトの立ち上げや更新に関わることになりました。元々HTMLとCSSは勉強中でしたが実務経験はなく、開発者画面を見ても読み取れない部分がたくさんあります。最近、CMSという、サイト構築が楽にできるツールの存在を知りました。それがどんなものかまだよく調べられていませんが、初心者がサイト構築に関わる場合、HTMLとCSSを使い一からやるのと、CMSなるものを使うのとどちらが身になりますか？どのみち、CMSでサイト運用していく場合、HTMLソースを書かなければならないというので、HTMLの知識は必要そうですが…

質問日時: 2019/06/20 09:57 質問者: inspi

解決済

5

0
【Web初心者 HTML・CSSについて】

質問です。Web制作初心者です。 https://easyeyesound.com/ 上記は海外の音楽レーベルのWebページなのですがこちらのような、スマホ・タブレット・PCに対応したページを作りたいのですが、一番上の部分のレコードのイラスト部分のように、どの画面サイズにも対応して且つ常に中央に配置されたようなパーツはどんなコードを使えばいいのでしょうか？ソースから解読するのは私のレベルでは不可能でして…。また、main？の部分のように黄色い背景に写真と文章が並ぶようにしたいのですがどうすればよいのでしょうか。すみませんが、よろしくお願い致します。

質問日時: 2019/06/19 10:36 質問者: echizenhyaku86

ベストアンサー

2

0
ホームページ作成についてです！ CSSでページ全体、ボディーの部分にwidthとmarginを指定し

ホームページ作成についてです！ CSSでページ全体、ボディーの部分にwidthとmarginを指定しているので中央寄せになっています。ページ下部で、指定したwidthを超えてbackgroundで色を指定したいのですが、うまくいきません。［指定したwidth幅でしか色は反映されません。］どうやったら、画面横幅いっぱいに指定できるのでしょうか… また、全体を中央寄せにしているため、liの黒丸が離れて表示されます。すぐ横に黒丸が来て欲しいのですが、自分はその箇所を横並びにしたいのでinline-blockにしています。すると、黒丸は消えてしまいます。どうやったら黒丸もありつつ横並びにできるでしょうか。この２つ、どちらかでも、また両方わかるかたいたら教えてください！

質問日時: 2019/06/18 21:29 質問者: ト琶

解決済

1

0
最近よく見るホームページのページについて

最近、HTMLも進化し、ホームページ、ECサイトなどが増え、バリエーションも様々になりましたね。特に、HTMLや、CSS知識なくとも、ドラッグで画像や、見出しのブロックなどが配置できるサイトもあります。そこで、ごくごく普通のサイトではなく、最近見かける、スクロールで、ページが変わったり、画像が変わったりするサイトを見かけます。１カラム？ではなく、シングルページというのでしょうか？下記のサンプルにもあるよう、こういうのは、簡単作成のサイトではなく（Wixなど）、テンプレをお借りするのはもちろん、自分で操作するのは難しいでしょうか？ https://www.megapx.com/tmpl/tmpl_001/ https://www.megapx.com/tmpl/tmpl_002/ また、こういうシングルページ、動きあるページと、従来の２～３カラムの、上段や、左にメニューがあるサイトとどちらがオススメですか？当方、一応、Dreamweaver CC で作業してますが・・・（使いなれてない）あとは、WordPressが今の時代でしょうか？もしくは、もうDreamweaverや、ホームページビルダーなど使うのは古いのでしょうか・・・。（今の時代、Wixなどが理想なのでしょうか）みなさんのアドバイスいただければ幸いです。よろしくお願いします。

質問日時: 2019/06/08 04:59 質問者: ankorogd

解決済

2

0
JavaScriptで何を使っているのか教えて欲しいです

https://www.shiftbrain.com/ こちらのサイト内の４スクロールめのABOU USのマウスオーバーした際に全体の背景も変わる動きをどなたか教えていただきたいです。

質問日時: 2019/06/07 17:11 質問者: yanchan3737

解決済

1

1
htmlとcssの質問です。 bodyタグ内のheaderタグ以外にスクロールバーを付けたいのですが

htmlとcssの質問です。 bodyタグ内のheaderタグ以外にスクロールバーを付けたいのですが、footerタグにスクロールバーが入りません。 divとfooterの間に空白？が入るのですが、どうすればdivのメインエリアとfooterだけにスクロールバーを入れられるでしょうか？

質問日時: 2019/06/05 15:02 質問者: fulltimeEBC

ベストアンサー

2

0
画像の幅に合わせて画像下にテキスト配置、画像の幅より右折り返しが短くなります。

HTML5 Flexbox 詳しい方どうぞご教授宜しくお願い致しますm(__)m　ノートパソコンで作業しております。肝心なソース部分を抜粋します ↓ ↓ ↓ <div class="flex-items"> <div class="content2"> <div id="zukan"> <p><img src="aoji001.jpg" alt="アオジ"></p> <p>スズメ目ホオジロ科ホオジロ属（日本中に分布、<strong>体長16cm、体重16～25g</strong>）、北海道～本州中部より北で繁殖し、冬になると関東より南、四国・九州へ移動し越冬します。</p><p><a href="../../Wild-bird.html"><strong>戻る</strong></a></p> </div> 肝心CSSな部分を抜粋します ↓ ↓ ↓ #zukan p { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 17px; color: #082203; text-align: left; max-width: 642px; line-height: 1.7em; letter-spacing: 0.1em; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } 画像サイズがVGA(640＊480)で、max-width: 640px; にしますと更に右にスペースができてしまいます。仕方なくmax-width: 642px;にしております。 ●上記ページURL → http://urx.red/lV0u (短縮URLで変なページへ飛びませんで安心して下さい) ●テキスト文「体重で折り返され」右に大きな空白ができてしまい、一週間ほど似たようなケースやヒントないか探しましたがありませんでした(汗) HTML5に詳しい方、何かわかりましたら何でも宜しいので、どうぞ宜しくお願い致しますm(__)m

質問日時: 2019/06/01 19:23 質問者: Fkujusou

ベストアンサー

1

0
html: テキストボックスへの入力の不可

htmlによる記述で、テキストボックスへの入力をdisableにする場合、次の二通りの書き方があるようです。自分の環境でテストすると、どちらも同じように入力不可になりますが、どうして二通りの書き方があるのでしょうか？両者はまったく同じ機能と考えてよいと思いますか？【書き方1】 <input type="text" name="sample" disabled="disabled" /> 【書き方2】<input type="text" name="sample" disabled>

質問日時: 2019/05/30 04:24 質問者: ken2547

ベストアンサー

3

0
ie firefox chrome対応、携帯対応のコーディング

現在、ウェブサイトを構築しておりまして、下図のように画像の右にテキストが配置されたコンテンツの塊が、複数個あります。 (スマホからの投稿ですので、分かりにくい図でご容赦下さいませ) (問題1) この配置でie、Firefox、Chromeに対応するコーディングが出来なくて困っています。 DIVやTABLEタグで色々試しましたが、うまくいきません。特にieでの表示で、他ブラウザーと比べてフォントのサイズが違うなどの影響で改行位置が大きく異なり、各ブロック(塊)間のスペースが大きく異なってしまったり。 (問題2) 携帯対応も必須な為、ブラウザーの幅を狭めた時、テキストが各画像の下に潜り込んで表示されるようにしたいのです。どうぞお知恵をお貸しいただけませんでしょうか。よろしくお願い申し上げます。

質問日時: 2019/05/27 13:43 質問者: Sobokujin

ベストアンサー

1

0
HTML5 レスポンシブ画像を「center」に文字を「left」にすると画像も左に・・・

レスポンシブ作成初めてで一ヶ月ほど似たケース探しましたが分かりませんでした。 HTML5 に詳しい方ご指導どうぞ宜しくお願い致しますm(__)m 色々試しましたが画像をcenterにし「画像下の文字をleft」にすると画像もleftに移動してしまいます。 ●HTML → http://ur0.work/vXI2 リンク先ソースにCSS全文書いてあります。 ●CSS ↓ ↓ ↓ /* ページ全体 */ body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; margin:0; background-color: #E9E9E9; } .title { color: #eeeeee; font-size: 19px; text-align: center; line-height: 2em; font-weight: normal; letter-spacing: 0.05em; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; } /* 全体のリック色 */ a:link { text-decoration: none; color: #1414ac; } a:visited { text-decoration: none; color: #5f5f67; } a:hover { text-decoration: none; color: #F00; } a:active { text-decoration: none; color: #F00; } .flex-cotainer { display: flex; flex-direction: column; } .wrapper{ display: flex; min-height: 100vh; flex-direction: column; } .flex-items { flex: 1 0 auto; background-color: #c1f4ca; display: flex; flex-wrap: wrap; } h1 { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 21px; color: #FFFFFF; text-align: center; padding-top: 15px; font-weight: 500; letter-spacing: 0.05em; } .blue { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 25px; color: #FFFFFF; text-align: center; padding-top: 15px; font-weight: 500; letter-spacing: 0.05em; } /* h1リンク色 */ h1 a:link { text-decoration: none; color: #FFFFFF; } h1 a:visited { text-decoration: none; color: #FFFFFF; } h1 a:hover { text-decoration: none; color: #dbf4f3; } h1 a:active { text-decoration: none; color: #FFFFFF; } header{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 14px; text-align: center; margin-top: 0px; background: #100451; background: -moz-linear-gradient(top, #100451 0%, #09057f 63%, #1d27b7 100%); background: -webkit-linear-gradient(top, #100451 0%,#09057f 63%,#1d27b7 100%); background: linear-gradient(to bottom, #100451 0%,#09057f 63%,#1d27b7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#100451', endColorstr='#1d27b7',GradientType=0 ); } .content1 { flex: 1 1 150px; background-color: #aee9a4; font-size: 12px; text-align: center; } .content2 { flex: 3 1 350px; background-color: #c1f4ca; text-align: center; padding-bottom: 20px; } /* トップページ用になります */ #menu { text-align: center; margin-top: 20px; margin-bottom: 5px; font-weight: 200; font-size: 22px; } /* menuクリック色 */ #menu a:link { text-decoration: none; color: #eeeeee; } #menu a:visited { text-decoration: none; color: #eeeeee; } #menu a:hover { text-decoration: none; color: #F00; } a:active { text-decoration: none; color: #F00; } /* トップページ用になります */ /* サイドメニュータイトル */ h2,h3,.mein-taitle { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; color: #003366; text-align: center; margin-top: 40px; font-size: 20px; margin-bottom: 10px; } /* メインコンテンツここの「記述がおかしい」かと思っております */ #zukan p { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 18px; color: #082203; text-align: center; line-height: 1.7em; letter-spacing: 0.05em; } /* メインページ画像ナビゲーション */ .ph { text-align: center; } /* フッター */ footer { background-color:#000080; color: #FFF; text-align: center; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; padding-top: 2px; font-size: 18px; text-align: center; width:100%; } @media (max-width: 700px) { #content { width: auto; } img { max-width: 100%; height: auto; text-align: center; } }

質問日時: 2019/05/23 19:40 質問者: Fkujusou

ベストアンサー

2

0
HTML5の「pattern」属性で前後に空白が存在する入力を制限する方法

HTML5の「pattern」属性で、入力した文字列の先頭もしくは末尾に半角全角を問わず、スペースが存在する場合は送信できないようにしたいのですが、その記述がわかりません。ご教授のほど宜しくお願い申し上げます。

質問日時: 2019/05/22 14:08 質問者: tachibananan

ベストアンサー

2

0
次のページがjsで開かれるも場合に、新しいタブを開きたい

jsで次ページへのリンクが貼られている際(同タブ内への)、元のページと、次のページを見比べたいのですが、別タブで開く方法はありますでしょか？・Windows10 Chromeを使用・右クリック > 新しいタブで開く > ブランクページが開かれてしまう (1)高度なセキュリティが必要なページにおいて、出来ないのは仕方ないですが、そうでないページにおいて無理矢理で構わないので、出来る方法があればと思っています。 (2)スクリーンキャプチャを取って見比べているので、それよりも手間がかからない方法があれば希望です (3)見比べるページ数は5～10ページ程度です

質問日時: 2019/05/22 13:39 質問者: a21se

解決済

1

0
float したボックス内のイメージを、高さ中央にしたい

(html) <html> <body> <div class="box"> <img src="./logo.png"> </div> </body> </html> (style) .box { float: left; } table-cell 等の方法もありまずが、 float したボックス内のイメージを、高さ中央にしたいのです。良い方法はありませんか ? float にこだわる理由があるわけではないですが、勉強のためといった感じです。宜しくお願い致します。

質問日時: 2019/05/21 16:47 質問者: nraxis

解決済

1

0
webページ上のTabキーの動き

社内でブラウザを使ったイントラネット（グループウェアもどき）を開発しています。 Tabキーを押した際の動きが制御できず困っています。ページの表示時に最初にフォーカスを設定したいフィールドにカーソルを置くことはうまくできています。（onload="document.name.hoge.focus"にて）ただ、このあとTabキーを押していくと、自フォーム内の項目だけを移動するのではなく、ブラウザのタブなどに移動してしまいますし、フォーカスがどこにあるのか探さないとわからないことがあります。つまり、Ａフィールド→Ｂフィールド→Ｃボタン→Ａフィールド→Ｂフィールド→… とTabキ押下の繰り返しでページ内の項目だけを移動するような動きにさせたいのですが、 web上でいろいろ調べても、これまた行き詰っています。ブラウザのタブに飛んでしまうのは仕様なのかな、と思いつつ、何とか実現できないものか悩んでいます。どうかお知恵の拝借をよろしくお願いいたします。ブラウザはIEを使用しており、クローズしたネットワーク内のイントラネットですので他のブラウザを使用することはありません。

質問日時: 2019/05/20 10:05 質問者: MIHO0821

ベストアンサー

2

0

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

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

質問する（無料）

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

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

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

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

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

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