回答数
気になる
-
入れ子関係の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
-
ベストアンサー
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>が4個 </div>2個 なので、つりあっていません!?
以下のプログラムはHTMLのプログラムの抜粋です。 <div>4個:</div>2個の割合です。 この場合 <div>3個:</div>3の割合で丁度つり合いがが取れます。 なので、どこか一か所<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年1月</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> <!-- #header --></div> ~以下省略~ <!-- #wrapper --></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 以上のURL先のプログラムですが、私が数えたところ <div>が5個で</div>が3個です。 <div>が5個あれば</div>が5個ないけないと思います。 素人なので、詳しくわからないのですが! 残りの</div>を後2個設定しないと、プログラムが成り立た ないのだろうと思います。 もし</div>を追加する場合は何処に追加すればいいのでし ょうか?よろしくお願いいたします。
質問日時: 2019/07/02 06:07 質問者: Campus2
ベストアンサー
4
0
-
アフィリエイトサイトを作るのに、 まずは1つのテーマ(美容など)で30記事程度の簡単なサイト構築を考
アフィリエイトサイトを作るのに、 まずは1つのテーマ(美容など)で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を生成し、5つの異なった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にしています。 すると、黒丸は消えてしまいます。 どうやったら黒丸もありつつ横並びにできるでしょうか。 この2つ、どちらかでも、また両方わかるかたいたら教えてください!
質問日時: 2019/06/18 21:29 質問者: ト琶
解決済
1
0
-
最近よく見るホームページのページについて
最近、HTMLも進化し、ホームページ、ECサイトなどが増え、 バリエーションも様々になりましたね。 特に、HTMLや、CSS知識なくとも、ドラッグで画像や、見出しのブロックなどが配置できるサイトもあります。 そこで、ごくごく普通のサイトではなく、最近見かける、スクロールで、 ページが変わったり、画像が変わったりするサイトを見かけます。 1カラム?ではなく、シングルページというのでしょうか? 下記のサンプルにもあるよう、こういうのは、簡単作成のサイトではなく(Wixなど)、 テンプレをお借りするのはもちろん、自分で操作するのは難しいでしょうか? https://www.megapx.com/tmpl/tmpl_001/ https://www.megapx.com/tmpl/tmpl_002/ また、こういうシングルページ、動きあるページと、従来の2~3カラムの、上段や、左にメニューがあるサイトとどちらがオススメですか? 当方、一応、Dreamweaver CC で作業してますが・・・(使いなれてない) あとは、WordPressが今の時代でしょうか? もしくは、もうDreamweaverや、ホームページビルダーなど使うのは古いのでしょうか・・・。 (今の時代、Wixなどが理想なのでしょうか) みなさんのアドバイスいただければ幸いです。 よろしくお願いします。
質問日時: 2019/06/08 04:59 質問者: ankorogd
解決済
2
0
-
JavaScriptで何を使っているのか教えて欲しいです
https://www.shiftbrain.com/ こちらのサイト内の4スクロールめの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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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キーを押していくと、 自フォーム内の項目だけを移動するのではなく、 ブラウザのタブなどに移動してしまいますし、 フォーカスがどこにあるのか探さないとわからないことがあります。 つまり、 Aフィールド→Bフィールド→Cボタン→Aフィールド→Bフィールド→… とTabキ押下の繰り返しでページ内の項目だけを 移動するような動きにさせたいのですが、 web上でいろいろ調べても、これまた行き詰っています。 ブラウザのタブに飛んでしまうのは仕様なのかな、と思いつつ、 何とか実現できないものか悩んでいます。 どうかお知恵の拝借をよろしくお願いいたします。 ブラウザはIEを使用しており、クローズしたネットワーク内の イントラネットですので他のブラウザを使用することはありません。
質問日時: 2019/05/20 10:05 質問者: MIHO0821
ベストアンサー
2
0
-
inputのフィールドのデフォルト文字をドラッグ(選択)した状態で表示したい
社内でブラウザを使ったイントラネット(グループウェアもどき)を開発しています。 ある入力フィールドに「value=」で初期値を表示しているのですが、 ドラッグ(選択して反転)した状態での表示は可能なのでしょうか? web上では実現しているサイトも多いので可能なのだとは思っていますが…。 これは、ユーザが初期値と異なるものを入力したいときに、 すぐに上書きできることと、Deleteボタンひとつで消去できること、 これらの実現依頼をされているものでして、 web上でいろいろ調べても、どうにも行き詰ってしまいました。 お知恵の拝借をよろしくお願いいたします。 ブラウザはIEを使用しており、クローズしたネットワーク内の イントラネットですので他のブラウザを使用することはありません。
質問日時: 2019/05/20 09:53 質問者: MIHO0821
ベストアンサー
1
0
-
スマホンでも、閲覧容易なブログを作成するにあたり!
以前使用していたHTMLの著書が古すぎです。 現在のブラウザに対応していませんでしたので 間違えて[Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉 単行本 – 2016/2/2] https://www.amazon.co.jp/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E6%95%99%E7%A7%91%E6%9B%B8-%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E8%A6%9A%E3%81%88%E3%82%8B%E3%80%81%E6%B7%B1%E3%81%8F%E7%90%86%E8%A7%A3%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82%E3%80%88HTML5%E3%80%81CSS3%E3%80%81%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%89-%E3%81%93%E3%82%82%E3%82%8A%E3%81%BE%E3%81%95%E3%81%82%E3%81%8D/dp/4844365630/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E6%95%99%E7%A7%91%E6%9B%B8&qid=1558251235&s=books&sr=1-1 を購入してしまいました。 ところが、これって!作りながら学べる著書ではありませんでした。 恐らく。ホームページを作る人が、参考書にする著書ではないでしょうか? それで、サンプルリストである、実際にプログラムを入力しながら学べる 著書を探しています。 アマゾンの☆の 評価だけではいまいちわかりません? 何かおすすめの著書はないでしょうか? よろしくお願いいたします。
質問日時: 2019/05/19 16:44 質問者: Campus2
ベストアンサー
2
0
-
HTMLで、画像の横比率が変えられません。
HTMLで画像のスライドと説明文をつけたのですが、横比率が画面一杯一杯になってしまい、Widthを変えても小さくなってくれません。どうしたら変えることができますか? 画像一枚一枚のタグはこちらです。 <img src="1.jpg" width="140" height="auto" alt="画像"> どこか間違っていましたらご教授願います。 回答お待ちしております。よろしくお願いします。
質問日時: 2019/05/15 12:58 質問者: caramelcity
解決済
3
0
-
webデザイン 文章が右に回り込みません
画像を左に、文字列を右に配置したいのですが、floatを使ってもどうしても回り込みません。 いろいろ調べてやってみましたが全然効きません。わかる方いらっしゃいますか? 以下ソースです html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title></head> <body> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="#" rel="stylesheet"> <div class="logo" margin="200"> <header><h1> <a href="リンク"><img src="#" alt="#" width="300" class="logo"> </a></h1> </header> </div> <body id="info"> <body id="info"> <div id="wrap"> <div class="main-center"> <div class="profile-photo"> <section class="profile clearfix"> <img src="#" width="400px" alt="#" class="profile-image"> </section></div> <div class="profile-txt"> <img src="name.png" width="200" alt="なかやまぽむ" class="name-image"><br><br><p>文</p> </div> </div></div> </body></body></body> </html> _______________________________________________________________________________ css @charset "utf-8"; body { font-family: 'Lato', sans-serif; margin: 0; padding: 80px 80px; background-color: #ffffff; color: #e3ddd8; font-size: 15px; line-height: 1.75; background-image: url(./bg.png); background-repeat: repeat; background-position: center center; } head { width: 900px; } header { width: 300; } img { vertical-align: bottom; } p,h1,h2,h3,h4,h5,h6 { font-family: 'Lato', sans-serif; color: #eddbbd; margin-top: 0; } #wrap { padding: 50px 50px; width: 870px; background-color: #ffffff; margin: 0 auto; } .profile-txt { float:right; } .main-center { width: 870px; margin: 0 auto; }
質問日時: 2019/05/13 19:03 質問者: pome-0101
解決済
1
0
-
HTML、CSS、テキストの上下の不明な余白について
以下のコードですが、テキストの上下に余白が出来てしまいます。 Chrome で見ても要素にマージンもパディングも無いのですが、、、。 フォントの余白かと思ったのですが、h1 自体が余白を持っているような気がします。 余白をなくしたいのですが、どのようにすれば良いでしょうか ? どうぞ、宜しくお願いいたします。 (HTML) <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="content-language" content="ja"> <meta charset="UTF-8"> </head> <body> <header> <h1>ダミーテキスト</h1> </header> </body> </html> (CSS) body, h1, h2 { margin: 0; } header { background-color: rgba(182, 80, 119, 1); } header h1 { color :#ffffff; font-size: 4rem; }
質問日時: 2019/05/06 19:38 質問者: nraxis
ベストアンサー
2
0
-
【sass(scss)】mixinを使用するとcssファイルでのDRY性は失われませんか?
何か解決方法がある書き方があるのでしょうか?
質問日時: 2019/05/04 13:45 質問者: kzn3
解決済
1
0
-
解決済
2
0
-
Web系のプログラミングを始めてみたいのですが、言語は何から始めたらいいですか?? とあるYouTu
Web系のプログラミングを始めてみたいのですが、言語は何から始めたらいいですか?? とあるYouTuberの方は 『HTML』『CSS』『JavaScript』『jQuery』『PHP』 がいいと言っていたのですが、Web系のプログラミングをするにあたってコレは覚えた方がいいって言う言語を1位〇〇 2位〇〇 3位〇〇 みたいな感じでランキングにしてください!!
質問日時: 2019/04/25 00:43 質問者: 蒼武
解決済
3
0
-
amebaブログのページ内ジャンプのhtml記述について
<p><a herf="#8888">てててて</a></p> <p><a id="8888">ここ</a></p> HTML表示で上記のように記述しました。そして、通常表示に戻り、「てててて」をクリックすると 変更 削除 というボタンが現れてしまいます。 どこが間違っているのでしょうか? HTML記述するためには何か設定でもあるのでしょうか? 全くの素人ですので、よろしくお願いします。
質問日時: 2019/04/23 16:56 質問者: teuti-udon
ベストアンサー
1
0
-
このtableの幅を均等に分けることはできないでしょうか?
tableのthやtdの幅が偏ってしまいます。 ブラウザを広げたり縮めたりする際に、それぞれのthがtd均等とだけいうか平等に可変することはできないのでしょうか? 以下のHTMLを見て頂けないでしょうか? 一番最初のthやtdだけやたら幅が広くなります。こういった表示でthやtdを均等に広げたり縮めたりしたいです。アドバイスをお願いいたします。>< <html> <head> <style> table,td,th {border:1px solid #000;width:100%;} </style> </head> <table> <tr> <th>No.</th> <th>項目名</th> <th>No.</th> <th>項目名</th> <th>No.</th> <th>項目名</th> </tr> <tr> <td>ああああああ</td> <td>いいいいい</td> <td>ううう</td> <td>ええええ</td> <td>おおおおお</td> <td>んんんんんんんん</td> </tr> </table> </html>
質問日時: 2019/04/19 17:35 質問者: yuyukina
解決済
2
0
-
[css]tableのtr、10行ごとに背景色をつける方法
特定クラスのtrだけを数えて10行ごとに背景色をつけたいのですが、思ったような結果にならず悩んでいます。 <table>タグの<tbody>内に、 ①<tr class="pickup">②<tr class="number">③<tr class="list"> という3種類のクラス名をつけた<tr>があります。 ーーーーーーーーーー 1行目:<tr class="pickup">○○</tr> 2行目:<tr class="pickup">○○</tr> 3行目:<tr class="pickup">○○</tr> 4行目:<tr class="pickup">○○</tr> 5行目:<tr class="pickup">○○</tr> 6行目:<tr class="pickup">○○</tr> 7行目:<tr class="pickup">○○</tr> 8行目:<tr class="pickup">○○</tr> 9行目:<tr class="number">○○</tr> 10行目:<tr class="list">○○</tr> 11行目:<tr class="list">○○</tr> 12行目:<tr class="list">○○</tr> 13行目:<tr class="list">○○</tr> 14行目:<tr class="list">○○</tr> 15行目:<tr class="list">○○</tr> 16行目:<tr class="list">○○</tr> 17行目:<tr class="list">○○</tr> 18行目:<tr class="list">○○</tr> 19行目:<tr class="list">○○</tr> 20行目:<tr class="list">○○</tr> ・ ・ ・ ーーーーーーーーーー 1行目から9行目の<tr class="pickup">や<tr class="number">はカウントせず、10行目の<tr class="list">から数えて10行目ごとに(最初は19行目)に色をつけたいのですが、cssで #list-table tbody .list:nth-of-type(10n){ background-color: #F6F4F4; } と設定すると10行目に背景色がついてしまい、19行目にはつきません。 class="list"だけをカウントし、10行ごとに背景色をつけるにはどのように設定するのでしょうか? 20行目以降にもclass="pickup"やclass="number"を設定したtrが所々に入っています。 それはとばしてclass="list"だけ10行ごとに背景色を設定したいです。 質問の仕方が下手で申し訳ありません。 cssの設定方法などご教授をおねがいします。
質問日時: 2019/04/19 15:44 質問者: tamono44
ベストアンサー
2
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
【HTML・CSS】に関するコラム/記事
-
メダロット:第242話「Vol.242※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
タスク管理を使いこなして仕事がデキる人へ!タスク管理術を使えば生活にも応用可能!
やるべきことを整理し実行する「タスク管理」。仕事や勉強を効率的に進めるために有効な手法である。「仕事ができる人」は「タスク管理ができる人」というイメージを持つ人も少なくないだろう。「教えて!goo」には、...
-
イチゴの品種はどうしてこんなに多いの?海外では野菜としてサラダに使われることも!
冬から春にかけて、スーパーや青果店に様々な種類が並ぶイチゴ。以前に比べて生産される期間が長くなったのでは、と感じている人はいないだろうか。実際、継続的に品種改良が行われており、生産時期や味が多様化して...
-
メダロット:第241話「Vol.241※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたいので...
-
CSS のみのタブ切り替えについて
-
静止画画像をクリックすると音楽が...
-
CSSが効かずどのように指定すれば良...
-
cssの display: flex;で横並びにな...
-
css初心者 フレックスボックスの適...
-
詐欺メールがまた来ました。5月に入...
-
HTMLタグのあるCSVファイルを利用す...
-
WEBページを強制的に横画面で見るよ...
-
ウェブサイトにアップされているPDF...
-
角丸画像の背景色を透明にしたいです
-
Chromeのパスワードマネージャーで...
-
HTMLで画像をポップアップで表示す...
-
テーブルタグのセルの幅の一部だけ...
-
<!DOCTYPE html>あってますか?スペ...
-
<!DOCTYPE html>あってますか?スペ...
-
Duolingo のソースコードの名前、教...
-
テーブルのセルデータを自動改行さ...
-
HTMLですCSSです この画像のように ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改行さ...
-
goo は、放置?
-
htmlソース文の 各行 改行位置や行...
-
1つの「ホームページビルダー22」...
-
HPレイアウトが同じページのヘッダ...
-
CSS、Bootstrapについて container...
-
CSSについて教えてください。 こち...
-
静止画画像をクリックすると音楽が...
-
、URL化させるにはどうしたらいいで...
-
テーブルの行を折りたたみたいので...
-
css初心者 フレックスボックスの適...
-
WEBページを強制的に横画面で見るよ...
-
Webページのリンクの貼り方を教えて...
-
Duolingo のソースコードの名前、教...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネル、...
-
コードを書いて下さい( ; ; )写真...
-
HTMLで画像をポップアップで表示す...
-
角丸画像の背景色を透明にしたいです
おすすめ情報