HTML/CSS のどんな質問にも優しく答えるｽﾚ 40
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
https://mevius.5ch.net/test/read.cgi/hp/1559446058/
■関連スレ
Webサイト制作初心者用質問スレ part251
https://mevius.5ch.net/test/read.cgi/hp/1564414228/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html 例えば
.wrap :hover, a:hover{
opacity: 0.9;
transition: 0.3s;
}
とか
a {
display: block;
}
.wrap :hover {
opacity: 0.9;
transition: 0.3s;
}
とかは？ >>898
セレクタおかしい
.wrap :hover
ではなく
.wrap:hover
こう >>901
コピペしてたから気付かなかった
.wrap:hover, a:hover{
opacity: 0.9;
transition: 0.3s;
}
とか
a {
display: block;
}
.wrap:hover {
opacity: 0.9;
transition: 0.3s;
}
だな 質問したものです。
>>901さんの指摘とおり、不要な改行を消したら
解決しました。
ありがとうございます >>894のとおり
.wrap:hover * {
opacity: 0.9;
transition: 0.3s;
}
でいいじゃん この場合ホバーされた.wrapの下の要素全部に適用される *を付けると、html内のすべての.wrapがホバるってことですか？ えぇ…
>>908をどう読めばそう思うのか・・・
.wrap aは.wrapの下のaでしょ？
.wrap imgは.wrapの下のimgでしょ？
.wrap h1は.wrapの下のh1でしょ？
なので
.wrap *は.wrapの下の全部 途中で送信しちゃった
で、
.wrap:hoverはホバーした.wrapだから
.wrap:hover *はホバーした.wrapの下の全部
なので.wrapの上にマウスカーソルが乗ったらその下の要素全部にスタイルが適用される 試しにワイルドカード付きにして更新したら何も反応しなくなった ていうか、いらんだろ、ワイルドカード
.wrap:hover{
opacity: 0.9;
transition: opacity 0.3s;
}
で良いじゃない >>890-897
列数を割り当てていないのでは？
class="col-画面サイズ-列数"
例えば、class="col-sm-3" >>916
列数は割り当ててありました…。
class="col-12"と指定してもfooter要素と
本文で横幅が違ってしまうので困ってました。
それにしてもbootstrapって<dev></dev>でめちゃくちゃ太りますねw $( ´_ゝ`).hover(function(){ >>924
(*)は入口じゃなくて出口ですよ
っていう医者の話思い出した 思う存分insertしたあとrollbackしたい サイト内で複数のページをリンクしたいんですが、ロリポップの無料sslというのを入れた後からは記述してもエラーページが出て繋がらなくなりました
アドレスhttpsではなく.htmlで繋げたいのですがなんとかならないでしょうか？
<a href="unko.html">テキスト</a> bracketsを使っているのですが、トップページのindex.htmlファイルだけ「UTF-8」に出来ません。
画面右下の
INS・SHIFT JIS・HTML・スペース4
↑この「SHIFT JIS」の部分を「UTF-8（指定なし）」に変えたいです
トップページだけ文字化けしているので原因はこれのせいだと思ってます
やり方を教えて下さい。何卒宜しくお願い致します。 >>930
UTF-8(BOM無し)にして保存し直すだけかと
やり方はエディタによりけりだから何のエディタ使ってるかを書くか、調べて ごめん
bracketsって書いてあったね
bracketsって文字コード指定できたっけ… その「SHIFT JIS」とこをクリックしたら文字コードの選択出てこない？ >>933
出てくるんですけど、何度「UTF-8」を選んでも「SHIFT JIS」のままなんですよね >>934
一度他のフリーのエディタとかでutf-8に変換してから
bracketsで取り込んだら？
もしかしたら変換できない依存の文字コードが混ざっていてエラーを警告してくれるかもしれない >>928
関係をrollbackして割り切ったお突き合い html/cssの合同スレですらこんなペースなのにsass単独スレなんてどうなのかね？
ここでもよかった気がするが。 >>936
メモ帳でやったら出来ました！
ありがとうございました！ 例えばサイトtopに画像を表示させたいときに、CSSでbackground-imageをつかうのと、普通にHTMLにimgのリンクを書き込むのとでは何が違うのでしょうか？ >>953
元々、background-imageは要素の背景などに使うものだったが
今となっては、それぞれなんでもできるから、ざっくり言うとどれでやってもいい。
imgタグはalt属性が入れられたり、解像度で切り替えたり、アスペクト比で可変できたりの特性はある >>953
seoでは基本的にcssは読まないからseo評価はプラスもマイナスもない
htmlで貼れば何かしら評価はある >>954
続き
background-imageは画像の繰り返し表示ができたり
スクロール時の見え方や親要素に合わせたフィッティングなども行える flexってベンダープレフィックスを付けないとSafariでうまく表示されないですか？ >>962
使ってるPCのOSがWindows10で、最新のSafariブラウザをダウンロードできないので、確認方法がないんです。
ちなみにHTML/CSSは趣味でやってる初心者です。 「can i use flex」で検索！
Can I use のサイトで、調べれば？
CSS Flexible Box Layout Module
https://caniuse.com/#feat=flexbox
【2019年版】Flexboxの対応ブラウザとベンダープレフィックスまとめ
https://webdesign-trends.net/entry/8257 あ？ビックキャメラで確認すればいいって言ってるだろ？ before/after要素で、background-imageが表示されない時って、原因として何が考えられますか？
試しにbackground：#fffでやったらちゃんと表示される。
content:' ' に文字を入れてもちゃんと表示される。
background-imageだけは何も出てこないbackgroundに変えても同じ。
でも試しにimgタグで同じソースを入れるとちゃんと表示される。
heightもwidthも入れてるしdisplayもblockやinline-blockを試したけどやっぱり出ない。
原因としては何が考えられますか？ とりあえずコード貼ってみなよ
簡略化したので良いから background-image :url(…) center center no-repeat;
とかやってんじゃないの？ 相対パスの指定がおかしいとかかもな
HTMLファイルからの相対パスを指定しちゃったり CSSでのパス指定ミスはやったことあるｗ
灯台下暗しですわ〜 >>972->>974
あ？偉そうに上から物言うなや
大変お手数ですが、おコードを貼っていただきたくって言えや 9月からweb制作のスクールに通い始めたのですが
すでにHTMLとCSSの内容が覚えきれなくて(特にCSS)落ちこぼれになりそうです
そこで質問をさせて頂きたいのですが
1.効率的な勉強方法を教えて欲しいです
(ノートにひたすらタグを書いて覚えるのがいいのか、パソコンに向かってひたすらタグを打ち続ける方がいいのか等)
2.タグは全て英語or英語の略らしいので出来たら沢山のタグの読み方と英語の意味が分かるリストや辞典が欲しいのですがオススメの本やサイトはないでしょうか？
(中学生以下の英語力なのでタグの意味を理解する事から始めたく…)
長々とすみません
どうぞよろしくお願い致します >>984
1）パソコンに向かってタグ打ち
2）アンクのHTML5＆CSS3辞典 >>984
誰かに見せるなにかを作るのがいいんじゃない?
家族でも恋人でも友達でもいいから見てもらうとなると
わりと真剣に覚えるし考えるんじゃないかな >>984
ワイは数ヶ月前から独学でHTMLとCSSを勉強してるけど、ゲームをプレイするのと同じ感覚で、とりあえず説明書(参考書)をさらっと読んで、とりまプレイしまくるのが一番いいと思う。
途中で基本操作方法わからなくなったり、知りたい事が出てきたらその都度ググって実行する感じ。
モンハンで言うなら
最初はいろんな武器やアイテム、ステージがあって混乱するけど、とりあえずいつかは強いモンスターを狩れる一流ハンターになりたいと目標をもちつつ、まずは目先のヤンクックの討伐に尽力する感じ
つまりHTML/CSSはモンスターハンターってことね >>984
意味も無くひたすらタグを打ったり書いたりしても覚えにくいと思うから、
そのスクールで習った内容をノートにまとめるのではなくて、htmlとcssでまとめて振り返ってみたら？
箇条書きにしてみたい、とか
リンクにしてページで分けたい、とか
ここは中央揃えにしたい、とか
スクールのホワイトボード撮った画像を貼り付けたい、とか
色々とあーしたいこーしたいが出てくると思う
多分自分で何か見やすくまとめようとすると
「じゃあどう書けば目的通りに表示させられるか」
と自然とタグやcssの書き方が身に付くと思う。
元々HTMLっていうのは文書の管理の為に生まれたようなものだし。
的外れな意見だったら申し訳ない。 それで言うと、女性にモテたいです
札風呂に入って札束で女をビシバシひっぱたくのが僕の夢ですね 札束に魅力があるのであって、お前に魅力があるわけではないからな 俺も独学で、その都度調べてたな
未だにうろ覚えなとこ多いからMDN読み返したりするし、タグの読み方とかも適当だけど
英語の意味まで解説してる本なんてあるのかな？
普通の英語の辞書でいいし、それよりHTMLやCSSの辞典買った方が便利
あとは配布されてるチートシートとか、まとまってて良いかもな >>984
サブライムを使えば
それから何文字か打ち込んださ候補のタグを表示してくれる機能入れると
作業が天と地の差になるぞ 最近だとsublimeよりVScodeが推されがち。
というか、未だ候補を表示させる以前の段階だからな。
タグ知らなきゃ1文字目を打てないし。
でも今後のために何かしらの高機能エディタは導入しといて損は無いよね。 英語が苦手なんて言ってる奴はさっさと諦めるべき
話せなくてもいいけど少なくとも読めなきゃ話にならない
一生htmlコーダー(笑)でいいなら別にいいけど コーダーなんて10年もすればAIが代替してるよな
知らんけど サブプライムって低所得者を対象としたヤツですよね？
私をバカにしてるんですか？
確かにセブンイレブンのペイキャンペーンで100円づつ使ってますが、
だからっていきなり失礼じゃないですか >>997
> 私をバカにしてるんですか？
はい。そのとおりです。
だけど、馬鹿にしてるのは貴方だけです。 >>985-988
>>992-994
まとめてですみません
みなさんアドバイス本当に有難うございました！
辞典はアンクのものを買うことにしました
勉強方法もとても参考になりました
ノートに向かうよりも実技あるのみでパソコンで練習した方が効果ありそうなんですね
サブライムはmacでも使えそうなのでこちらも試してみます レス数が1000を超えています。これ以上書き込みはできません。
