HTML/CSS のどんな質問にも優しく答えるｽﾚ 52
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html
前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/ >>406
何も指定しなければブラウザが持っているデフォルトのスタイルで、コンテンツが装飾される訳だけど
デフォルトのliの左余白は、olやulのpadding-leftで決まり（chromeやfirefoxではデフォルトで40px）
更に番号や中黒は、list-style-positionがoutsideになっているため、liの外側（olやulのpadding領域内）に表示される
なので、list-style-positionをinsideにしてもいいんだが、liのテキスト量が多い場合に改行位置がズレるので
デフォのoutsideのままでulやolのpadding-leftを、例えばcalc(40px + ○em)とかで指定すると改行されてもズレない
（使用するフォントに合わせて○は1.2とか1.3ぐらい？で番号や中黒の分を位置調整）
以上まとめるとpをliの位置に合わせるなら、pにはpadding-left:40px;、olにはpadding-left:calc(40px + 1.3em);を指定
というのが簡単でオススメ
具体的にはこんな感じ
https://jsfiddle.net/zjt3vxf1/
というわけで上記を応用すれば、お好みの位置で色々と調整できるはず >>410
詳しくありがとうございます！
しっかりと確認して実装してみます
本当にありがとうございます 画像のようにh2の下に50px距離をあけたい場合
h2のpadding-bottomなのか
h2のmargin-bottomなのか
iconのpadding-topなのか
iconのmargin-bottomなのか
どれが適切なんでしょうか？
その辺がよく分かってなくて、なんとなく感覚で選んでいます
よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg >>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく
iconのmargin-topなのか、です 内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう 質問お願いします
この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした
ただ写真を見ると高さの合計が200でした
なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした
よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg heightを200にして
paddingを40にすると
footerの高さが高くなってしまいます >>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます >>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる 質問させてください
下記URL先の画像のように作りたいです
画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…
どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m
https://imepic.jp/20240418/637200 display:flexを使えばいいよ
とりあえずググってみよう >>422
flex使えばいけるね
そういうのは専門学校の宿題か何か？
良かったら教えて
課題とかでそういうのが出てるの？ レスありがとうございます、試してみたらできました！
フレキシブルを使った自由課題でしたm(_ _)m
<div class="outline">
<div class="box1"></div>
<div class="greenbox"></div>
<div class="box2"></div>
</div>
.outline {
width: 100%;
height: auto;
display:flex;
}
.box1 {
width: 50px;
height: 50px;
float: left;
background: #da5f2b;
}
.box2 {
width: 50px;
height: 50px;
float: right;
background: #da5f2b;
}
.greenbox {
width: 100%;
height: 50px;
float: left;
background: #76c03d;
} >>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校？
ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う gridはいいんだけど
orderやgrid-areaで順番をゴチャゴチャ変えないと成立しないスマホデザインとかはうんこ
スクリーンリーダーなどアクセシビリティ的にも良くない 以下のようなテーブルがあります。
実際にはこの三行を1グループとして複数グループが下に続いています。
┌┬┐ ここで、左側の行にカーソルをのせた時に
│├┤ ハイライトするようにしたいです。
│├┤ この時、カーソルを載せている右列だけでなく
└┴┘ 左の列もハイライトするようにするには
どうすればよいですか？
今はbootstrapを使っているのですが、
1行目のときしか左列がハイライトされなくて困っています。 jqueryのほうが早いな
cssでやるのはちとつらいのでは？ その3行ごとにtbodyで囲ってtbody:hoverでできそうではあるが、別の問題が発生しそう 質問です
個人経営の店ですが取引業者のサービスでホームページ作りました
業者のサービスはWordPressベースでｓｓｌ対応です
ただurlが業者の名前＆ディレクトリ以下に無機的な数字が続きビミョーです
お名前.comでドメインを用意してurl転送サービスでフレーム転送にしました
これでOKと思いきや設定したurlでホームページを表示してもssl対応になりません
個人情報を扱わないサイトですがセキュリティソフトが信用できないサイトとか警告が出ます
http → https のフレーム転送でssl対応にする方法は有りますか？ 過去にやったの調べたら>>434と同じでtbody:hover{}してた
css的に問題はなかったしjQueryでtbodyを抽出しても問題なかった
でもこういうtbodyの乱用はどうなんだろうとは思うし、将来いきなりNGになるかもしれんよね 質問です
親要素にdisplay:flexを設定して
子要素1は左に配置
子要素2は右に配置したいです
どのように書けば実現できるでしょうか？ <div class="parent">
<div class="child01">子1</div>
<div class="child02">子2</div>
</div>
.parent{
display:flex;
justify-content:space-between;
} >>438
ありがとうございます
その書き方は出でこなかったので勉強になりました
結果ですが子要素1と子要素2のサイズが違うこと？で子要素2の配置が真ん中やや右に表示されてしまいました 他のcssなければ子要素は同じサイズのはず
（子要素内の文字数一緒なので）
子要素2が真ん中より右ってのは他のCSSが影響してると思うよ
justify-content:space-between;
は子要素を均等に配置するなので
parentの左右にそれぞれピッタリ配置されてるはず ある WEB サイトに入力する場所が２つあるとして、其処に指定の値を入力した状態でそのサイトを開くには、どの様に書けば良いのでしょうか？
例えば ttp://www.aaa.com/bbb/ というサイトだとして、其処に、foo と bar が入力された状態でブラウザで開きたいのですが…
ttp://www.aaa.com/bbb/ だけを実行すると、入力欄は空のままで開かれますよね。 >>442
サイト側でクエリなりなんなりを反映する仕組みがないと無理やで >>443
> サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
それを確かめるには、どんな事をすればいいのですか…？ 自分でURLから何か受け取れるように実装したもの以外は基本的にありません >>446
> chromeの何かのアドオンでそれができたような
サイト側で受け取る準備がされてなくても、入力した状態で開けるのですか？
それは欲しい… フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？ >>448
> フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？
いやそれが希望です。
あるサイトに入力する場所があり、其処に指定した文字列を入力した状態でブラウザで開きたい、と…
例えば www.google.co.jp を実行すると検索する語句が入力待ちになりますが、
その欄に、検索する語句が入力された状態で開きたい、と。
グーグルなら、「ttps://www.google.co.jp/search?q=あいうえお」とやると、
「あいうえお」を入力して検索実行した後の状態で開きますよね。
別に実行後の状態でも、入力しただけで実行待ちの状態でもどちらでもいいのですが… それはgoogleがURLパラメータを受け取れるようにしてるからって話が>>443
そういう仕様で作られてないなら拡張機能で対応するかフォーム自動入力ツール使えばいい
自分でHTML書く話じゃないならスレ違いだから詳しくは該当スレでどうぞ 『html input 初期値』でぐぐって出てくる話じゃダメなん？
textだったらvalueに書いとく、てやつ 対象フォームに値を入力するJS書いてブックマークレットにしとけばいいんじゃね 掲示板に同じ書き込みしまくって荒らすんじゃないか？ <div class="test" style="background:#ff00ff">てすと</div>
のようにclassとstyleを混ぜて書くのはだめなんですか？
背景色だけperlやphpなどで入力された値にしたいので >>456
ダメではないが古い
jsやphpならcss変数に値を格納できるから自分ならそれ使うな ロジック内で直接指定してあると後から面倒なことになるしなー
テーマみたいに値が決まってるならクラス切り替えた方がいいと思う <div class="test magenta">てすと</div> 
