TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼
蕎麦は手打ちじゃないといけないの？PART2
HTML5はなぜ失敗したのか
Google Chrome
Yahoo検索を元に戻せ！！
水産庁のHPを見てヤキモキするスレ
HTML覚える気がない人のためのﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄ
あなたのお勧めなアクセス解析CGI その4
WordPressの困った人のスレ 3
AdobeがMacromediaを34億ドルで買収
【ITギア】ＩＴギアアクセス解析

HTML/CSS のどんな質問に必ず優しく答えるスレ 32


1 ：2018/02/25 ～ 最終レス ：2020/05/17
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術もOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.2ch.sc/test/read.cgi/hp/1517028608/

■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.sc/test/read.cgi/hp/1494150188/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html

2 ：
■Haml
http://haml.info/

■Sass / Scss
https://sass-lang.com/

■LESS
http://lesscss.org/

■Stylus
http://stylus-lang.com/

■PostCSS
http://postcss.org/

3 ：
も抜け……

4 ：
もぬけの空

5 ：
■回答はSass/Scssを前提としないこと
　CSSでの回答とし、要望があった場合のみSass/Scssでも可

6 ：
あげ

7 ：
勝手にSCSS入れやがったから前の>>1内容のままで立て直した↓

HTML/CSS のどんな質問にも優しく答えるスレ 32
http://mevius.2ch.sc/test/read.cgi/hp/1521035557/

8 ：
おすすめのテキストエディタ教えて。
予算3000円ぐらいだす。
マクロ使いたいんだけど、解説本充実してたらうれしい。

9 ：
ちなみに俺の中で最強エディタはエクセルになりつつある。

10 ：
>>8
atomでいいんじゃない？

11 ：
一長一短で、これってのがないんだよね
決めてに欠ける
とりあえずVisual Studio Codeにしとこって感じ

12 ：
>>11
htmlやcss書くならvscodeでそうそう不足ない気がするけど
なにが足りないのかな?

13 ：
HTML/CSSならBracketsお勧め
コードがすぐブラウザに反映されるライブプレビューって言う機能が便利すぎる

14 ：
この板で
BootstrapやFoundationのスレが見当たらないんですが
使ってる人少ないんですかね。

15 ：
いや、普通に使ってる
もう当たり前すぎて話すことない

16 ：
CSSでtable要素のborderを指定したいのですが、
下記のようにコードを書いてもまったく変更されません。

table {border:solid 1px;}

index.html内にはlink でスタイルシート(index.CSS)へのリンクを書いており、
他の要素へのCSSは問題なく反映されているのですが、tableだけ反映されないのです。
何が原因なのでしょうか？

17 ：
>>16
色は？

18 ：
>>17
table {
border:solid 1px;
color:red;
}
のように指定しても反映されません。

19 ：
ボーダーのカラーやぞ

20 ：
border-collapseとかいうオチ？

21 ：
>>19
こうですか？
table {border:solid 1px black;}
これでもだめですね。

22 ：
>>20
collapseも特に設定していません。

23 ：
もうこれだけじゃ分からん！
コード全部晒せ！

24 ：
>>23
index.css
header {
background-color:##0B3861;
color: white;
width: 100%;
margin: 0 auto;
padding-left: 5px;
}
body {
margin: 0;
}
a:link {color:white}

table {
border: solid 1px black;
}

25 ：
>>23 index.html(1)
<html>
<head>
<title>*****</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h3>*****<br></h3>
<a href="todo_test.php">ToDo</a> / <a href="todo_readme.php">ReadMe</a><br>
</header>
<a href="todo_show.php">▼ToDoの追加<br></a>
<?php
require_once("MYDB.php");
$pdo = db_connect();
//TODOを表示
try{
$pdo->beginTransaction();
$sql = "SELECT * from todo";
$stmh = $pdo->query($sql);
echo "<table>";
foreach ($stmh as $row){
//echo "<table border='1' >"."<tr>".$row['todo'].':'.$row['status'].":".$row["period"]."</table>"."</tr>";
echo "<tr>"."<th>".$row['todo']."</th>".':'."<th>".$row['status']."</th>".":"."<th>".$row["period"]."</th>"
."<th>"."<a href='todo_test.php?action=delete&id=".$row['id']."'>".$row['id']."</a>"."</th>"."</tr>";
}
}catch(PDOException $Exception) {
$pdo->rollBack();
print "エラー:".$Exception->getMessage();
}
echo "</table>";
?>>>23

26 ：
>>23

<?php
$pdo = db_connect();
if(isset($_GET['action']) && $_GET['action'] == 'delete' && $_GET['id'] > 0){
try{
$pdo->beginTransaction();
$id = $_GET['id'];
$sql = "DELETE FROM todo WHERE id=:id";
$stmh = $pdo->prepare($sql);
$stmh->bindValue(':id',$id,PDO::PARAM_INT);
$stmh->execute();
$pdo->commit();
require_once "todo_test.php";
} catch(PDOException $Exception) {

print "エラー:".$Exception->getMessage();
}
}
?>
</body>
</html>

27 ：
>>26
PC再立ち上げしてlinkでスタイルシート指定しているところを書き直したら反映される様になりました。
ご迷惑おかけして申し訳ありません。

28 ：
なーに、いいってことよ

29 ：
自分はホームページを作り始めてから間もないのですが
一応トップページだけは公開出来たのですが、ディレクトリのアップロードの仕方が分かりません。
例えば、http://aaaa.netというトップページがあったとして、
その下層にhttp://aaaa.net/xxxxやhttp://aaaa.net/xxxxxx、xxxxxxxx等と言ったカテゴリがあるじゃないですか。
それの作り方、と言うかアップロードの仕方がどんなに調べても分からないので教えていただけるとありがたいです。
因みにアップロードにはFFFTPを利用しています。

30 ：
ファイルと同じとしか良いようが…

31 ：
池

32 ：
>>29
本読め
http://www.sbcr.jp/products/4797372960.html

33 ：
「フォルダ upload」で検索！

34 ：
頑張れ！

35 ：
おはようございます。
CSSでwindowのサイズに合わせてマージン幅の調節をしたいのですが、何か良いやり方はありますでしょうか？

36 ：
paddingで%指定

37 ：
警察と創価、在日マフィアによる集団ストーカーの証拠動画
:(警察車両ナンバー入り)
https://www.youtube.com/watch?v=gTOBN1AkSz0
https://www.youtube.com/watch?v=bbPcpPwO3ug
https://www.youtube.com/watch?v=de1jeSPGGNo

怖ろしくてお漏らししそう´・ω・｀

38 ：
ページの中のそれぞれに要素に対して、display:noneで別のリストがあるんですけど、これって何なんでしょうか？

39 ：
>>38
見せたく無いリストなんでしょ。

40 ：
プチエンジェルの顧客リストかな？

41 ：
最新のCSS（3.2？）参考書はまだ出てない？

42 ：
CSS3.x というものは実際は無い
唯一CSS2のみがあって 「CSS3」 はそれ以外のCSS全部
バージョンは個別のモジュールごとにあるが
CSS全体としては living standardみたいなもの

量的にはCSS2の数十倍くらいあるだろうから
細かい所まで網羅するような参考書は無理だろうな

43 ：
CSS3を求めるなら、モジュール単位で指定しないと

44 ：
コーダペインにあるような
すっごいエフェクトとか動きのCSSかけるようになりたいんだけど
本屋にいっても初歩とか基本のCSSの本しかない
こういうのどこで勉強すればいいの？

45 ：
>>44
ソース見て研究したらいいじゃない。

46 ：
>>45
やっぱりそれしかないのかぁ
独学でやってんだけど
WEBの学校とか高度なこととか教えてくれたりすのかなーとか
ソース見てすらすらわかるようになるのだろうかとか

47 ：
>>46
聞いてるようじゃはなから無理だよ馬鹿

48 ：
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

V610Q

49 ：
V610Q

50 ：
最近になって色指定のとき16進数でもアルファを指定できることを知った
これって実装状況ってどうなってんの？
調べてもよくわからないんだけど

51 ：
ええ、逆に出来なかったときなんてあったの？？

52 ：
>>50,51
level 4 から追加された
level 3 時代にはできなかったはず

実装状況：
https://developer.mozilla.org/en-US/docs/Web/CSS/color

53 ：
52 に追加
color 型一般の互換性
https://developer.mozilla.org/ja/docs/Web/CSS/color_value#Browser_compatibility

54 ：
いつの時代の話してんだよｗｗｗ

55 ：
https://i.imgur.com/DX6FK1G.png
edgeとopera mini非対応じゃねーか

56 ：
いやオペラミニには変な期待すんなよ…

57 ：
Opera miniは切り捨てろ

58 ：
Edgeは言えば対応するよ
Microsoftが「EdgeではWebKitと動作が異なる場合はバグ」って明言してるからね

59 ：
透明度のことを考えるとrgbで覚えた方がいいんだろうけど
#で慣れてしまった体にはもう

60 ：
オペラミニはどうでもいいけど
IE11も見たら対応してなかったぞ

61 ：
IEなんかもういらないだろ

62 ：
Opera miniは軽くていいよ
桜もいい

63 ：
すいません，質問です。特定のクラスの内側全てを否定するCSSの書式を教えてください。
あるHTML文書に対して
* { all: initial }
というCSSによって全ての要素を初期化したいのですが，その際
<span class="katex-display">
[以後大量の階層構造...]
</span>
という領域だけは初期化の影響を与えたくありません。
しかし例えば
*:not(.katex-display) { [...] }
という指定だと除外したい領域の最上部しか実際は除外できておらず，内側の<span>などが初期化されてしまいます。
ですので，「“katex-display”クラスのspan要素以下の階層全てを除外する」方法が知りたいのです。
どうかお知恵を貸してください。

64 ：
scss使うしかないかな

65 ：
出たｗ

66 ：
他にいい解決方法があるのならどうぞ

67 ：
他にいい解決方法？
いまのところひとつも解決方法出てないが。
> CSSの書式を教えてください。
という質問にSCSS使えと答えたバカはいたようだがｗ

68 ：
>>63
仕様上は
:not( .katex-display * ) { all: initial; }
のように書けばいけるはずだが（ .katex-display 自身は除く）、
この形のセレクタ引数はまだサポートされてないか

69 ：
>>68
ありがとうございます。
Google ChromeおよびMozilla Firefoxの最新版で試してみましたがいずれも対応していないように見えました。
https://developer.mozilla.org/ja/docs/Web/CSS/:not
↑ここにも一通り目は通したのですが，助けになる情報はありませんでした……。
とりあえずあきらめます。
仕事ではなく個人的な案件なので，最新の特定のブラウザさえ対応していればそれでいいんですが，Google ChromeもMozilla Firefoxも対応していないとなると厳しいですよね。

70 ：
頓珍漢覚悟で書くがinheritで何とかならないかな？

71 ：
>>69
すみません。どなたかこの解決方法知りませんでしょうか。

72 ：
>>71
英語で検索しても解決方法が出てこないなら、あきらめて
別の手段や発想の転換で解決しよう
そういうことは山ほどあるよ

73 ：
CSSに書くプロパティの順番は
アルファベット順かFireFoxのモジィーラ順かで別れると思うのですが
その1つ上のタグの表記の順番はどういう決まりになっているのでしょか？

HTML側で上から順番に書くタグに合わせて
CSSも同じ順番に書いていくのですか？

74 ：
質問させてください。
<time datetime="2018-06-09">2018年6月9日</time>
というような形式と同じように
<sometag someattr="30000">3万</sometag>
というような「数値の統一解釈」みたいなことってできませんかね。

75 ：
カスタムエレメント作るとか

76 ：
SASS
SCSS
LESS
・・・・まだ他にもありますね。どれおぼえればいいの？あるいは覚える必要ない？CSSで十分？

77 ：
PostCSSで必要な機能だけ選んで漸次導入していくのがナウいやり方。
PostCSSでもフルアーマーするとSass/Less/Stylusすべての機能同等のものができるがそれは筋が悪いやり方。
本当に必要なものだけ選んで入れる。
余計なものは入れない。

78 ：
>>76
https://postd.cc/actualize-networkmodern-css-explained-for-dinosaurs-3/
こういうページを読むといいかも

79 ：
記述の仕方が微妙に違うだけで
CSSはCSSやで

80 ：
>>75
それくらいしかないですよね……。

81 ：
CSS3とHTML5で
スクロールしたら文字浮き出たりするのは
無理ですか？
jsなしで、jsありならできるのはわかります。

82 ：
無理っぽいな。検索してもないね。

83 ：
大枠:hover 浮き出る要素
とかでそれっぽくできんじゃね？
スマホには対応しないけど

84 ：
スクロールしたらなのになんでhoverが出てきたしｗ

85 ：
>>83
ありがとう、hoverしかないですよね。
なんか色々探したらJavaScript使用するのはありました。
ま、無理そうなので諦めます。
勉強になりましたわ。

86 ：
>>76-79
SASS で良い

ただし、SASSとは、SCSS の事です。
昔のSASSではない

87 ：
cssをもう一度基礎からやりたいんだけどおすすめの本を教えて

88 ：
>>87
本も知識かたよってるからね。信頼できる師匠見つけて、仕事手伝って覚えるのがいい

89 ：
師匠も知識偏ってるからね

90 ：
好きなページ模写が速い

91 ：
>>89
うん。どうやったって偏るから、信頼できる人のを学ぶのがいい

92 ：
>>87
CSS辞典

93 ：
学びの媒体を限る必要ある？

94 ：
>>88
>>89
人によって書き方にはクセがあるからね

95 ：
媒体wwwwwwwwww

96 ：
師匠wwwwwwwww

97 ：
そんなことでは悪党の儂一人倒すことも出来んぞっ！

98 ：
里に修行にいかねば

99 ：
Bootstrap 使っているサイト内のロゴをcinzelというフォントとstyle.cssで文字組みしてデザインしたいんですが、h1を使うとbootstrapのh1が反映されてしまい、!importalを付けても反映されませんでした。
どうしたらいいかお願いします

100 ：
>>99
インラインでCSS書いたら？

101 ：
https://www.nadsukimikadsuki.com/
こちらのサイトの上部４つのリンク(【手帳活】～)のようにマウスオーバーで変化するcssが知りたいです。
よろしくおねがいします。

102 ：
ホバーした時にトラジョンで画像拡大

103 ：
トップの飛び散るフォントタイルの仕組みとは？
HTML、CSS、JSコピペしたのにできない　
https://learncssgrid.com/?ref=designrevision.com#naming-grid-lines

104 ：
>>103
必要なのはHTMLとCSSのみ
期待通り動かないのはコピーする場所が間違っているか、不足している

105 ：
ずーっと気になってて、以前から調べても解決できなかったんですが、疑似要素を使った矢印とかで、モバイル版のchromeでみると必ず隙間ができるのはなんでだろう…

PCのブラウザだと問題ないから、ブラウザ依存なら諦めるしかないのかなぁ

本体と疑似要素の間をつめても線が入っちゃうから隙間とは違うのかな

どなたか解決方法を知ってますか？

https://i.imgur.com/n2XO4HC.jpg

106 ：
ピクセルパーフェクトじゃないんだろうな

107 ：
>>102
ありがとうございます。

記載したサイトそのままの動きにするにはどのようなcssを書けばいいでしょうか。
ソースを見てみましたが探せませんでした。

108 ：
<div class="pickup-image"> の所の、transform, transition に色々書いてある

サイトを表示して、右クリックメニューから要素の検査をすれば、F12 開発者ツールが起動する

109 ：
>>108
ありがとうございます。
探していろいろと触ってみたのですが他の要素も混ざっていたりと難しく、
ソースを参考にするのは断念してしまいました。

http://www.cssdesk.com/6JLsA
自分で調べながら理想の形になるように組み合わせてみたのですが、
当たり前ですがそれぞれの要素にマウスが重なったときしか反応しません。
画像にマウスオーバーしたら枠線や中央のテキストの効果も全て反応するようにしたいのですが、
なにか良い方法はありませんでしょうか。
それともこの方法では無理ですか？
無知で申し訳ないです。どなたかご教示いただければ幸いです。
よろしくお願いします。

110 ：
度々すみません。
>>109です。
検索してみて
https://mementoo.info/archives/777
https://coliss.com/articles/build-websites/operation/css/css-hover-on-everything-but.html
この方法でできるのではと思い、
http://www.cssdesk.com/6JLsA
こちらで試してみたのですが(下の画像の方です)
変化がありません。
ずぶの素人でどこをどうすれば同時に変化するようになるのか分かりません。
cssの書き方が間違っているのでしょうか。
ご教示いただけましたら幸いです。
何度も申し訳ないです。

111 ：
DOMイベント伝播(バブリング)の順番は、孫 → 子 → 親。
つまり内側から外側へ、伝播される

外側のイベント発生時に、内側へイベントを発生させるには、
Vue.js などのJavaScript を使わないとできないのでは？

1. 外側(親)の要素がイベントをキャッチする
2. 内側(子)の要素へイベントを投入すると同時に、自分(親)のイベントを消化する

112 ：
>>111
ご丁寧にありがとうございます。
https://mementoo.info/archives/777
こちらのURLで紹介されているデモでは、
外側の#testにマウスオーバーする事で
内側の#innerも変化しているように見えるのですが
これはまた別なのでしょうか？
私の書き方が間違っているわけではないのでしょうか。

113 ：
君は、101 かい？
書き込みを続けるなら、名前欄に、101 と入れてくれ

>>112
:hover で他の要素とも、連動できるのか。
そのサイトを参考にして作れば？

114 ：
>>109
.text { }
#sample:hover > .text { }

この2つは、内容が同じだから、変わらないのでは？
もっと、内容を変えてみれば？

それと、もっとポイントを絞って、狭い範囲で質問してほしい。
量が多すぎて、何が悪さしているのか、ちょっとわからない

それと、このサイトを使わない方がよい。
動きがおかしい。バグってる

CSS が一番下まで表示されないし、特に、Edge ではコピペもできないし、
ろくにテストもしていないし、技術力が低すぎて使えない

115 ：
【アフィ】元宇宙人のスピリチュアルブログ【詐欺】
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232

116 ：
>>112
www.cssdesk.com/bTqgy
何やりたいかよくわかんなかったけどこんな？

117 ：
　私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。

118 ：
コアアドインフィニティ
吉田篤史 ニート歴10年
経歴詐称で入社、ただいま職歴ロンダリング中

119 ：
チェックボックスのチェックありなしで
tableのthを消したりtableそのものをdisplay:blockで並びを変えたいのですが
cssの記述がわかりません

チェックボックスのチェックありなしの時に設定したいcssそのものは出来上がってて現在はhtmlを分けて動かしてます。

120 ：
これだけの情報ではいかんともしがたい
まずコードがわからない
チェックボックスとtableの位置関係は？
tableそのものの並びを変えたいとは？
できあがってるcssとは？
htmlを分けてるとは？

121 ：
いずれこっちに統合予定でチェックボックスでテーブルの切り替え機能付ける予定
https://excelog.web.fc2.com/2018.html
↑このページを基本としてチェックボックスにチェックついたら↓のページのhtmlのヘッダのところに書いてあるcssで↓のページのように縦長にcssでやりたいけどうまく動いてくれないというのが質問です。
https://excelog.web.fc2.com/2018_test.html

スクリプトでゴリゴリ書いてもいいんだけどcssでできそうだからと試したら泥沼状態

122 ：
>>121
は
>>119
の件です

123 ：
しかしWPFやsilverlightやってたときもそうだがこの手の技術はブラックボックス納得させるのに苦労するね
コードは割となんとでもなるんだがビュー周りがきつい

124 ：
質問しておいてあれですが自己解決しました

>>119
>>121
は取り下げします

125 ：
初歩的な質問でごめん、

ulでliのメニューがあるんだけど、これを画像の幅にピッタリ連動するように

するコードを書くようにするにはどうしたらいい？できれば中央揃いで。

参考になるサイトがあったらよろしく。

ものすごく基本的な事聞いてるかもしれないけど、段々頭が混乱してきたので

書いておく、ちなみにコードは


HTMLは
<div id="container">
　　<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div>

126 ：
cssは
#.center {
width;100%;
}
.center {
width:100%;
margin:0 auto;
}
@media scerrn and (min-width:1680ps) {
.center {
margin:0 auto;
width:73%;
}
}
ul.menu {
zoom:1;
postion:absolute;
z-index:2;
margin-left:15%;
}
なにかわかったら教えてくり

127 ：
display: flex;

128 ：
>>125
どゆこと？
メニュー全体の幅をカルーセルの幅に合わせたい？
っていうかそのhtml、divの閉じタグが足りないが

129 ：
>>128
メニュー全体をカルーセルで幅ぴったりにしたいと思っています。

修正版は

<div id="container">
　　<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
</div>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div>

130 ：
>>129
プラグイン含めて

jsfiddleにUPしたら？

ところで、

こういう文章が

見やすいと思ってるの？

131 ：
cssたのしー

132 ：
蚊の皮～

133 ：
css描く矢印ってボーダーを内股にする方式しか見つからなかったので三つ折り方式作ってしまった

134 ：
>>129
プラグインの内容がわからないし画像の幅って言うけど画像がどこにあるかわからないし…

135 ：
css使いこなすと面白いな

136 ：
http://r2.upup.be/wV2qsULdHm

137 ：
ほとんど知らない
https://qiita.com/rana_kualu/items/96b303307d6435aedf8b

138 ：
>>136
ブラクラ

139 ：
フォームでリセットではなくて
切り取りボタンは設置できますか？
例えば、テキストボックスに入力された文字の一部を
マウスでハイライトして、ボタンを押すとハイライトした部分だけを切り取るような。
ブラウザで言えば、ハイライトしてブラウザの編集-切り取り。という作業の切り取りボタンを
フォームのリセットボタンの隣に置きたいです。

140 ：
jsでならできます

141 ：
>>140　ありがとう

142 ：
>>139
少なくともHTMLとCSSだけではできない。
単純に切り取りたいならここら辺
http://www.html5.jp/tag/elements/forms-textFieldSelection.html

さらに切り取った結果をクリップボードに入れたいならこれも
https://qiita.com/satthi/items/b4123c7683b4c3d93bf4

143 ：
すみません、質問よろしくお願いいたします。
ttp://allfont.net/download/tiranti-solid-let-plain10/
のページにあるwebフォントを使用したいのですが
下部のfor siteにあるとおりhtml/cssを記述してもchromeとoperaに反映されませんでした。
Safariとfirefoxではちゃんとフォントが反映されていました。
ブラウザのこの違いは何が原因で起こりどうすればいいかご教授お願いします。

144 ：
ブラウザの出すエラーメッセージ見た?

145 ：
>>144
ありがとうございます！
エラーについて調べたのですが
Blocked by CORSだそうで色々調べたのですがよくわかりませんでした

146 ：
>>145
調べてないけどプロトコル（http/https）がフォントとサイトで齟齬ってるんじゃ？

147 ：
ほんとにぐぐった？
https://blog.mktia.com/how-to-solve-the-problem-that-access-has-been-blocked-by-cors-policy/

148 ：
うまくいかないページのミニマム版をくれればテストもできるんだがそもそもちゃんと書いてるかどうかすらわからんからなあ

149 ：
調べるより聞いた方が早いかと

150 ：
皆さんありがとうございます。
このフォントでサイト名をヘッダーロゴにして使用したかったのですがウェブフォントは使わずSVGに変換して表示させることにしました。

151 ：
反映されたページ見ながらcssいじれるソフトやウェブツールってありませんか？

152 ：
ブラウザ上でHTMLjscss書けるところはいっぱいあるよ
あの黒系統のUIが合うなら

153 ：
個別の説明めんどいのでこういうところで合うの探して
https://laboradian.com/comp-web-service-html-css-js/

154 ：
ブラウザの開発者ツールでよくね？
htmlもjsもcssも書くとリアルタイムで反映されるぞ
ローカルファイルならファイルを上書き保存できるからエディタ的で便利

155 ：
>>151です
回答ありがとうございます
たくさんありそうですね
cssに100を越える重複があって、それを解消するために反映されたページを見ながら、cssをいじりたいと思いました
何て単語で検索すればいいかわからずここで聞いてしまいました
>>153をヒントに調べてみます

156 ：
>>151
codepenが定番かな？

157 ：
デベロッパーツールっていうすげーソフトがあるよ。
どうしてもっていうなら特別に１０万円で売ってあげるけど？

158 ：
>>157
それ1万円で売ってるやつだろ
しかも機能が全部中途半端
ぼったくりにも程がある

159 ：
>>158
かなわないなぁ…
しょうがない！１万で売ってやる。

160 ：
Chrome「・・・・」

161 ：
SEO マットカッツのセミナー
https://www.youtube.com/watch?v=k46J8zamgvQ

162 ：
VSCode で開発すれば？

open in browser という拡張機能で、ファイル名を右クリックして、ブラウザが起動する。
Live Server では、HTML ファイルを保存すると、自動的にブラウザに反映される

163 ：
何そのどこぞの馬の骨
Live serverだろ普通

164 ：
なんでvertical-alignって使えるdisplayが決まっているのでしょうか？
pでもなんでも使えれば便利だと思うんですが

165 ：
pじゃなかった、display：blockなどですね

166 ：
誰でも頭が良くなる、プログラムが書けるようになる方法が発見される 66945
https://you-can-program.hatenablog.jp

167 ：
スマホとPCの2段階のシンプルなレスポンシブなサイトを作る時、
cssはスマホ用を先に作って、PC用を後から作るのか
その逆か、どちらが作りやすいのでしょうか？

何かこころがけておきたいこと（幅とかレイアウトとか）
があればお勧めを教えてください。

168 ：
>>167
モバイルファースト、スマホ版から作る
もう最近はスマホ版だけにしてPC版なしってサイトも増えてきた
（スマホゲーなど）
PC版無しでもいいんじゃね

まぁ慣れれば同時に作れるけどな

169 ：
> >>986
> はーなるほどなぁ
>
> ここ最近擬似クラス擬似要素やっと覚えてきたから
> むだにIDやclassつかわないで構築してたけど
> これみるとDIVで細かく指定するほうがいいのか

わざとらしすぎ。divは他に変わる要素がない時に
デザインのためだけに使うもので、技術力不足を隠すためのものじゃない

170 ：
ajaxでデータを取ってくる時に中にHTMLが含まれてるから（←馬鹿１ 普通は含めない）
それを変えることが出来ないんですよ！（←馬鹿に２ 変えることはできる）

171 ：
>>167
人それぞれやりやすい方でいいよ
もしくは会社のコーディング規約に則る
俺の場合はスマホから作ってる
スマホは絶対いるし逆にPCはいらない時もあるしスマホのレイアウト違いだけのデザイン増えてきたから
ちなみにメディアクエリ出てきた頃のIE(バージョンは忘れた)はメディアクエリに対応してなかったからPC先に作ってメディアクエリでスマホ作る必要かあった
なので今でもその流れの人は多い

172 ：
スマホサイト→PCサイト
・グローバルメニューを左メニュー
・body　width100%→width960px

もうめんどくさくて最近全部これ
以上！終了！

173 ：
ライブドアブログとFC2ブログでDMMアダルトのアフィリエイトサイトを始めたのですがわからないことがあります。

無料動画のアフィリエイトのHTMLが以下なのですが、
PCとスマホで確認したところ右カラム等にはみ出してしまいました。
サイズは４種類あり以下は一番小さい476×306です。

<iframe width="476" height="306" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>

PCとスマホでそれぞれ適切な大きさに表示させることは可能でしょうか？

可能でしたら記述を教えてください。よろしくお願いします。

174 ：
<iframe width="476" height="306"
↓
<iframe width="100%"
か
<iframe width="100%" height="auto"
多分前者で行けるけど念の為

175 ：
>>174
レスありがとうございます。

書いてみたのですが横幅は良くなるのですが、
縦が上半分のみになってしまいます・・・。

width="100%"で画像はできたのですが、動画が上手く表示できず質問しました。

引き続きよろしくお願いいたします。

176 ：
calc(calc(306 / 476) * 100%)

177 ：
>>176

レスありがとうございます。

calc(calc(306 / 476) * 100%)

は下記のどこに書けばよいのでしょうか？

<iframe width="476" height="306" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>

皆様、お手数おかけいたします。

178 ：
こうかな
<iframe width="100%" style="height: calc(calc(306 / 476) * 100%);" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>

179 ：
>>178
ありがとうございます。

先程と同じく横幅は良くなるのですが、
縦が上半分のみになってしまい画面全体が映りません。
scrolling="no"　を　yes にするとバーの上下で出てくる感じです。

ありがとうございました。

180 ：
<iframe width="100%" height="500"
もう決め打ちでいいんじゃね

181 ：
>>180
スマホで上手く再生できないようなので諦めます。
ありがとうございました。

182 ：
<div class="outer">
<iframe width="476" height="306" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.outer {position:relative;width:100%;max-width:640px;}
.outer::before {content:"";display:block;width:100%;padding-top:calc(100% / 476 * 306);}
.outer iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
</style>

iframeのアスペクト比を保ったままのリサイズならpaddingハックつかうのが普通じゃね？
::beforeとか使えない状況なら、代わりに下に476x306のダミー画像しいて、表示するボックスを確保しないといかんけど

183 ：
afterでdivやその他のタグを追加することは出来ませんか？

184 ：
リンクというリンクが全部リストタグになってるページあるんだがSEO上有利なのかな

185 ：
以前聞いたことあるけど今でもそうなのか？
SEO競争にGoogleが終止符を打ってオワコンと化したイメージ

186 ：
変なSEO対策やると修復が大変
死ぬまで置い続ける覚悟があるならいいけど

187 ：
うむ。コンテンツに精を出して欲しいところ。

しかし怪しい健康サイトがSEOを徹底して検索上位に来てたなんて事件もあったしなー。世の中は理不尽である。

188 ：
ではないでしょうか？
どうでしょうか？
なクソ記事コンテンツも撲滅してほしい

189 ：
キーワード連呼して極限まで薄く延ばした乞食サイトがはびこって
検索が使い物にならない

190 ：
もはやググレバカスだからな

191 ：
ちょっとした疑問ですが、

2ch のスレは、書き込んだ文字列が長いと、右側の広告の下に潜り込んで、見えなくなってしまうのですが、
この文字列を折り返して表示するには、どうすれば良いですか？

192 ：
適当なとこで
改行を
する

193 ：
もう何年もアプリでしか見てないからどうなってるかよくわからんな

194 ：
隣あった要素の高さを揃えるのって昔はmatchHeight使ってて今はflexboxでやってるんだけど
隣あった要素の中の子要素を揃えたい時はいまだにmatchHeightを使ってるんだよね
<div class="item">
<div class="child"></div>
</div>
<div class="item">
<div class="child"></div>
</div>
これの .childの高さを揃える
これってflexboxでできる？

195 ：
2ch のスレは、右側の広告がページではなく、ディスプレイ画面に固定で貼り付いている

書き込みを囲む<div> の横幅が、広告の直前で止まらない。
広告の下まで、潜り込んでしまう

でも、この板のスレでは、潜り込まない。
サーバーによって違うのだろう

一般的には、潜り込まないようにするには、CSS で、どう設定するの？

196 ：
広告を消せば

197 ：
>>194
外側(item)の高さが揃ってるなら、内側(child)に高さ指定してやればいいだけでは
https://jsfiddle.net/m8Lthq1x/1/

198 ：
大きい画像をcssで小さくすればページって軽くなったりします？

199 ：
>>198
なるわけない

200 ：
2ch のスレの右側の広告は、フローティング追従広告ですね

左側の文字列が、広告の下に潜り込まないようにするには、
CSS で、どのように書けば良いですか？

201 ：
padding-right: XXXpxとかwidth:calc(100% - XXXpx)とか
右側に一定のスペース空けとけばいいだけ

202 ：
.thread { word-break: break-all; }

広告をdisplay:none;してしまった方が捗る気がするが

203 ：
html + CSS で、行ごとに色を変えて、しましまにする方法はあるのでしょうか

nth-child を試してみましたが、うまく行きません
https://jsbin.com/jugecok/edit?html,css,js,output

JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：https://konohazuku.net/css/css_nth-child_tbl_border/

204 ：
>>203
._p なんかどこにもないが

205 ：
>>203
これじゃあかんの？

div {
background-color: #ff5;
}
div:nth-child(even) {
background-color: #55f;
}

tr:nth-child(even) {
background-color: #555;
}

table {
background-color: #eee;
}

206 ：
ありがとうございました
https://jsbin.com/xapekam/5/edit?html,css,output

CSS の基本的な所が分かっていなかったようです
お手数をおかけしました

207 ：
ええんやで

208 ：
スレタイ通りで良いスレだな

209 ：
スレ本来の趣旨から離れる質問なのですが、よろしいでしょうか

「個人として弄る」分には >>203 のように
「単純な html + CSS で書く方法が思いつかないときに JavaScript で」というのも選択肢かなあと思ってしまうのですが
実務的にはどうですか？


・CSS だけで書けるんだから CSS で書け！
・JS で書くなら vanilla JS なんて使うな！　jQuery で書け！

みたいなかんじなのでしょうか

210 ：
バニラで問題なく書けるならわざわざjQueryで重くすることはない

211 ：
jQueryが重いって思ったこと無いけど、
それよりも開発コストが減るほうが重要なんじゃないの？

212 ：
どんなサイトか次第でしょ
ECサイトで無駄な負荷はかけたくないな

213 ：
ECサイトでかけたくない負荷は、
サーバー側であって、クライアント側じゃないよｗ

ってか重いと思ったこと無いんで
余計な負荷はないと考えて良いんじゃねーの？

214 ：
フロントエンドを重いと思うかどうかは開発者ではなくユーザー(閲覧者)
バックエンドが重いのは誰が見ても同じだがフロントエンドは閲覧してるデバイスによるので開発者が「重いと思わない」というのはなんの役にもたたない
バニラでするかjQueryでするかでは実際にjQueryの方が重いことはよくある
逆にバニラでした方が開発コストかかるかどうかは仕様(処理の複雑さ)による
実務としては多少コストがかかる程度なら見積り時にバニラで実装する想定で見積りを出す(見積書には明言しないが)
それで発注がもらえればコストの面は気にしなくていいので設計時にどうするかを決める
こんな感じ

215 ：
まぁ書き方にもよるけどな
速度にそんな差が出る処理って例えばどんなん？

216 ：
>>214
でもさ、お前、古いブラウザすぐに切り捨てるじゃん？

新しいブラウザを搭載してるのは、性能がいい端末なので
jQuery程度、なんの生涯にもならんよ

そもそも、ほとんどのサイトが使っていて
今まで問題起きてない

217 ：
複数タブ開くのは普通だし少しでもリソース無駄にしたくない派と
性能いいんだから開発楽するためになんでも使うバッテリーの持ちなんて知ったことじゃねー派は常に相容れない

218 ：
jQueryをやめてもバッテリーの消費は誤差程度の違いしか生まれなかったよ

219 ：
jQuery覚えるのめんどくさいから、vanillaで済ましてる
この仕事始めてすぐにVistaとIE9のサポート切れたんで、なくても困ったことがない
ライブラリもjQuery非依存のやつが一通りそろってるし、
定番プラグインだったらしいのは軒並みメンテナンス放棄されてるしな
使うのは他人が書いたコードをメンテするときだけ

220 ：
jQueryのメリットなんてもう薄っぺらいもんな
使う必要かなくなってきた

221 ：
ってかここってHTML/CSSのスレじゃん
jQuery云々はさすがにスレチだろ

222 ：
Bootstrap を使ったら、依存関係で、jQuery も必要！
Bootstrapの機能は、jQueryで作られているから

だから、Bootstrapのユーザーが増えるに従って、jQueryのシェアも増えていく

223 ：
今はbulmaだぞ

224 ：
メンテの面からCSSですむならCSSかな

225 ：
他人が書いたコードをメンテするときに使うから
結局jQueryを使う。この業界にいて覚えないなんて選択肢はないよ

226 ：
jQueryの話はjQueryのスレに行ってください

227 ：
>>223
そうなの？　Googleのじゃなくて？

228 ：
>>222
まあこういうドミノ倒しばかりだな　ゼロから作るならそもそもbootstrapを使わない。

229 ：
今の時代は〇〇だとか言う人って絶対システム屋のプログラマだよな。
ただのWeb屋はそんな会話になかなかならない。

いつもいつも新しい技術に追われて追ってお疲れ様だわ。

230 ：
デザイナーだけど普通になるぞ
今の時代はXDだ

231 ：
>>230
ここデザインの話してないから。

232 ：
　　　／⌒ヽ
　　/　´_ゝ`） HTML,CSSベタうちのおっちゃんがここを通りますよ・・・
　　|　 　　/
　　| /|　|
　 //　| |
　Ｕ　 .Ｕ

233 ：
iPhoneのセーフエリアにCSSで対応することは出来ますか？
XとXRだけでも違うので、あっちに合わせればこっち合わずみたいになります

234 ：
>>233
font-size、padding、widthなどの単位をpxではなくvwでやってみ。

235 ：
viewport-fit=contain
とか
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
とかではなく？

236 ：
>>235
あ、勘違いしたわ。

237 ：
>>227
Materializeも独自のjsとセットになってる
jsがついていないシンプルなCSSフレームワークで多分一番人気あるのがbulma
yahooのpure.cssってのも一応ある

238 ：
position:absoluteを設定した要素が左上に移動する場合と、場所はそのままで右や下の要素が重なって表示される場合の２パターンあるのですが違いは何ですか？
leftやtopは指定していません

239 ：
基本的なことが全然わかっていないので質問させてください。
グリッドレイアウトで３つの領域A、B、Cに分けました。領域Bに置いたリンク（<a href="article.html">B</a>）を押して、
C内に表示させたいのですが方法がわかりません。どういうコードで実現するのでしょうか？
黎明期のフレームを使ったホームページにあったりした、上に看板画、左に長細いメニュー、その右横のペインにリンク先が表示される、
といった基本的なことがしたいのです。よろしくおねがいします。

●HTML
<div id="container">
<div id="itemA">A</div>
<div id="itemB"><a href="article.html">B</a></div>
<div id="itemC">C</div>
</div>

240 ：
●CSS
#container {
display: grid;
grid-template-rows: 50px 200px;
grid-template-columns: 100px 1fr;
grid-template-areas:
"areaA areaA"
"areaB areaC";
}
#itemA {
grid-area: areaA;
background: #f88;
}
#itemB {
grid-area: areaB;
background: #8f8;
}
#itemC {
grid-area: areaC;
background: #88f;
}

長々とすみません。

241 ：
>>240
君の知識じゃそれをやるには遠そうだ。

242 ：
>>241
レスありがとうございます。
私には難しいことがわかったので、iframe試して駄目なら
諦めます。
スレ汚し失礼いたしました。

243 ：
>>242
jQueryはいける？

244 ：
>>243！
残念ながらjQueryはほとんどわかりませんが、
>243さんのレスでJavaScriptをつかえばいいのかと、
強引ですが以下でなんとか希望の動作をしました。ありがとうございます。
<div id="itemB">B <a href="javascript:void(0);" onclick="OnLinkClick();">Link</a></div>
<div id="itemC">C <div id="c"></div></div>
function OnLinkClick() {
document.getElementById("c").innerHTML = ' <iframe src="example.html" </iframe>'
}
他に標準的な手法がありましたらお教えください。よろしくお願いします。

245 ：
>>244
！とか入っちゃってすみません。

246 ：
昔のframeと同様にiframeにname付けてaでtarget指定すればいいだけなんだけど

247 ：
bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ

248 ：
> bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
使える。jQueryは他のライブラリと混ぜて使えるように設計されており
jQuery.noConflict(true); をすれば $ はprototype.jsに解放される。
その状態でもbootstrapはjQueryを使って動作するし、
$の代わりにjQueryを使うことで自分もjQueryを使ったコードを書くことができる。

> bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ

prototype.jsは標準のJavaScriptオブジェクトを拡張している。
そのせいでprototype.jsで追加拡張されたreduceと、
標準で作られたreduceで仕様が異なっており互換性問題が発生した。
これはプロトタイプ汚染やオブジェクト汚染と呼ばれバッドプラクティスとなった。

その問題もあり、prototype.js よりも安全で使いやすいjQueryが登場し
prototype.js は急速に使われなくなった。prototype.js は1.7系が9年前に公開され
あとはバグ修正のみでそれも3年前でもはやメンテナンスされてない状態
最新のブラウザで動くかどうかも怪しく使う意味がない。

それに対してjQueryは3.4.0が今年の4月、3.4.1が5月にリリースされており、
4.0がリリースされることもアナウンスされている

249 ：
>>248
はえー、マジか
じゃあprototype.jsは使わない方がいいのね？
使えてるから使ってるんだけどいつ問題が出てもおかしくないのか
ちゃんと理由あるんだねえ
jQueryに乗り換えないとなのか、めんどくさいなあ
とりあえず jQuery.noConflict(true); ってすれば使えるらしい？のでやってみよう
ありがとう

250 ：
prototype.jsのプロトタイプ汚染でjQueryにのりかえって、10年前かって感じだな

あ、jQuery使うなら、1.8か1.9にしとけよ
jQuery2や3は、後方互換性壊しただけの「メンテナンス続けてます」詐欺みたいなもんだからね
2や3使うくらいなら、もうjQueryなしでやったほうがいいから

251 ：
>>250
へ？
君のブラウザ対応どこまで広範囲なんだよ。

252 ：
>>250
1系の最後は、1.9じゃなくて、1.12.4だからな
Internet Explorer 6-8, Opera 12.1x or Safari 5.1+ に対応するなら1.x系
必要ないなら3.x系だ。

2.x系は、3.x系のプレビュー版みたいなもん。今はもう使う必要がない

IE6-8対応 ○ 　　×
　：
jQuery　　1.8
jQuery　　1.9
jQuery　　1.10　(≒ 2.0.x）
jQuery　　1.11　(≒ 2.1.x)
jQuery　　1.12　(≒ 2.2.x)
jQuery　　 　　　　3.0
jQuery 　　　　　　3.1
　：

253 ：
>>250
https://pc.watch.impress.co.jp/docs/article/960722/ie30b2j1.htm
IE3も切り捨てないで対応してくれますか？(´・ω・｀)

254 ：
>>253
jQueryを使わずにIE3もサポートしてくれって言ったら断られたよ。
なんでだろう？

255 ：
古いJavaScriptは互換性がないからな。
互換性を吸収するjQueryを使ったとしてもIE6が限界。
jQueryなしでIE3に対応するとか正気の沙汰じゃない。

例えばIE3だと外部スクリプトすら読み込めない。
try-catchに対応してない（文法エラーですべて実行できない）

256 ：
jQuery使ってどうにかクロスプラットフォームが実現できていたものを
jQueryを使わないとか地獄やろうなぁ

257 ：
まあIEももうMSが使うのやめてくれって声明出したし
よほどのアホ企業じゃないと切り捨てる方向だろうけどな

258 ：
つまり、日本企業の99%以上はアホ企業ってことだな

259 ：
スマホアプリ
EDGEブラウザくん「こんにちはﾌﾞﾋﾋ」

260 ：
>>258
そう
上の世代の連中が根本を理解できてないから未だにIE対応しろとか言い出す
実際問題今のWebの閲覧はスマホを基準に考えないとダメ

261 ：
まぁ今45歳以上のオッサンが若い頃にネットとかないしな

262 ：
そもそもの問題は多分、年齢や世代ではなくて
文系の口が達者なだけのバカ営業な気が

263 ：
>>261
団塊ジュニアは大学時代にネット使ってる最初の世代

264 ：
ネスケ暗黒時代も乗り切ってるしな

265 ：
大学でしかEメール読めなかった
家にネット回線ある人はまれであったな

266 ：
昔話いらね
こういうやつらが会社で老害になるんだよな

267 ：
260-261でおっさんが問題とか言い出す
262-265でおっさんの反論（？）が始まる
266が昔話するこいつらが老害と断じる

何がどうなろうとおっさんが悪い風潮

268 ：
今、老害だの言ってオッサンを叩く若い連中こそが
同じ様な老害になるから大丈夫。
どうせそのうち「最近の若い奴は」とか言い出す。

269 ：
最近の若い奴はすごいなぁ

270 ：
content=''
これの使い道がわかりません。
どんな意味があるんでしょうか？

271 ：
cssでよく:beforeの後にみかけるものです

272 ：
基礎39. 回り込みの解除（floatの解除）
https://web-manabu.com/html-css39/

clear: both; は、floatを指定した要素の、次の要素に指定するけど、
clearfix は、親要素に指定できる

clearfixで、:before, :after に、content: ""; を指定する奴だろ？

273 ：
とりあえず、これでも読んでみたら？
ttps://www.webcreatorbox.com/tech/content-property

274 ：
>>271
::beforeや::afterはcontentを設定しなければなにも起こらない
しかし装飾のために使う場合など、contentに指定したい文字列や画像がない場合は多々ある
そういうときはcontent:''; のように空(長さ0の文字列)を設定する

275 ：
beforeやafterを擬似クラス(:1つ)で書いてるの見るとモヤっとする
まあ初心者さんなんだろうけど

276 ：
古いブラウザにも対応するために1つだけにしている可能性もある
IE8とかな

277 ：
いやあ、今更そんな必要ないし、ましてやここに書くのにそんなこと考慮しないだろ
初心者さんがネットの古い記事で見知った書き方してるんだと思う

278 ：
271です。
装飾とは例えばどんなものの事でしょうか？
初心者ですみません

279 ：
いろいろあるけど、例えばグロナビのそれぞれの前にアイコンついてたり、見出しの前に装飾ついてたり
構造化的には意味がないものとかはhtmlでは何も置かずにcssで要素を置きたいとかがある
そういう時に
.foo::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
}
みたいな感じにするとあたかもそこに要素があるようにできる

280 ：
>>279
そういうことだったんですね。ありがとうございます！

281 ：
あと★とかアイコンとか
更新情報の頭にNewつけるとかな

282 ：
複数のページである事柄を説明する時に
同じ内容の見出しと記事を使うと
検索順位的によくないのでしょうか？

～の仕方で複数の記事を書く時に
共通の事柄を説明しないといけないんですが
こういう時ってみんなどうしてるんでしょうか？

283 ：
すいません、書き込む場所を間違いました。

284 ：
げりのときにがすがたまりまくってるじょうたいでといれいったらといれがやばいことになるげんしょう

285 ：
https://i.imgur.com/eb4RLOB.jpg

286 ：
>>282
そこで構造化データですよ

287 ：
初めて書き込みさせていただきます。

添付画像のように、トピックスが10個表示されているうちの下7つをCSSで非表示にしたいのですが、うまくいきません。
わかる方がいらっしゃいましたらご教授頂けないでしょうか？
https://dotup.org/uploda/dotup.org2036569.png.html

試したコードは以下になります。
①
.loop-item-3,
.loop-item-4,
.loop-item-5,
.loop-item-6,
.loop-item-7,
.loop-item-8,
.loop-item-9
{
display: none;
}

②
.loop-item-3.user-id-1.bbp-parent-forum-51.even .post-136.topic.type-topic.status-publish.hentry
{
display: none;
}

288 ：
SASS なら、ループで、

このサイトに入力してみ
https://www.sassmeister.com/

@for $i from 3 through 9 {
.loop-item-#{$i} { display: none; }
}

出力
.loop-item-3 { display: none; }
.loop-item-4 { display: none; }
中略
.loop-item-9 { display: none; }

289 ：
>>287
ul.bbp-topic >li
をdisplay: noneにして


ul.bbp-topic >li:nth-child(1)
ul.bbp-topic >li:nth-child(2)
ul.bbp-topic >li:nth-child(3)
をdisplay: blockでどうよ

290 ：
>>287
(1)に!important付けてみても効かないようなら何か間違ってるんじゃ?

.bbp-body > ul:nth-child(n+4) { display: none !important; }

291 ：
>>290
こちらの!importantをつける方法でできました！
スタイルシートの優先順位があるんですね！

nth-child()やfor文で書く方法もあるんですね。
とても勉強になります！

皆さんありがとうございました！

292 ：
あと追加でお聞きしたいのですが、

「＞」←この記号を付ける付けないで表示って変わる場合がありますか？
ただ分かりやすくするために明示的に記載しているだけでしょうか？

293 ：
.a .b
.a > .b

空白なら、.a のすべての子孫の.b で、
> なら、.a の子(直下のみ)の.b

> は、直下の子のみに限定される

CSS の基礎を勉強してください！

294 ：
>>293
なるほど！ありがとうございます！

基礎すら勉強せずにホームページ作り初めてみたので苦戦しまくりです...
ちゃんと勉強してきます！

295 ：
VScodeとブラケッツってとっちが使ってる人多いのかなー？

296 ：
>>295
圧倒的に前者

297 ：
"ホームページ作り"って今はもう既に懐かしい言葉に聞こえるな

298 ：
サーバーのFTPマネージャーでアップロードしたファイルをスマホからエディタで編集しながらサイトを作っているのですが、急にアップロードしたファイルが文字化けしてしまったのですが、どうしたら治るでしょうか？
あと、/public_htmlの下にディレクトリを2つ分けて2つのサイトを作りたい為それぞれにパスワード設定したいのでそれぞれのディレクトリに.htaccessと
.htpasswd入れたところ、どちらもパスワードの認証画面は出るのですが、二番目のサイトの方も一番目のIDとパスワードじゃないと入れなくて困ってます。
どうしたら良いでしょうか？

299 ：
文字化け
https://i.imgur.com/QyfCuRY.jpg

300 ：
今見たら文字化けは直ってました！

301 ：
今って、皆さんIE対応どこまでしてるんですか？
IE11のみ？

302 ：
ようつべでアップしないでvideoタグでMP4アップすると音は出てるけど動画が映らないんだけどなんで？

303 ：
>>301
いちおie9～
アクセスログ見ると、macと同じくらいいるから

304 ：
>>301
ie11のみ
flex使いまくり
書き方少しだけie用に気を使うけど

305 ：
>>301
趣味サイトはIE11のみ、仕事なら料金次第
「どんな環境でも問題なく読める」ということと、「どんな環境でも全く同じ表示になる」は
どちらも「対応している」と言えると思うけど、対応の仕方は違いますよ

306 ：
IEなんかポイっだよｗ
今時の素人はスマホで見れれば満足する

307 ：
みんな仕事依頼を初めて受けるためにポートフォリオをアップする時、サーバー代を払ってサイト作りましたか？

308 ：
無料のレンタルサーバーとかでも良いんでね？

309 ：
【悲報】SEO JAP で有名な在日外国人の瀧日伴則さん、日本人女性を売春婦呼ばわりで大炎上
https://itest.2ch.sc/mevius/test/read.cgi/hp/1558934167

310 ：2020/05/17
>>308
無料のレンタルサーバーがあるんですね;探してそれ使ってみます！ありがとうございます！

JavaScript Tips コレクション
色々なHTML
【ラクできず】楽天RMS【儲からないシステム】
ホームページNinja 総合スレ【スーパー全自動】
素材屋やる上で気をつけること２
CSSデザインのサイトを評価するスレ
熊本のWeb制作会社について語ろう
【ｱｸｾｽUP】■携帯電話検索エンジン ３■【ﾎﾟｰﾀﾙ】
初期費用0円商法には注意！
写真サイト管理人の集い　3枚目
--------------------
【本体防水】DRIFT HD GHOST／GHOST-S【ｱｸｼｮﾝｶﾒﾗ】
終了しそうなスマホゲームの情報共有所
ノーベル賞の受賞大学
今どきの小学生「ニンテンドーなんてダッセーよなw荒野行動やろうぜ！」
女様「性器呼びを見かけるとはらわたが煮えくりかえる」 [495714689]
格闘技業界ゴシップ総合4【選手、ジム、団体、関係者】
ラグビーは紳士のスポーツとかよくそんな大嘘をｗ
北海道で20代女性がコロナウイルスにより重篤
【国内】 広島平和公園で「韓半島平和のためのロウソク祈祷会」開催[06/13]
【SUPER☆GiRLS スパガ】 iDOL Street アイスト総合【わーすた】13章目
【野球】パ･リーグ H8-4F[8/10]　6回甲斐内川デスパ適時打！7回敵失逆転8回福田適時打ソフトバンク勝利　有原捕まり失策絡み日ハム4連敗
【嘘つき豚の毎日】あいぽん隔離スレ☆30【社会的地位0】
高知の高校野球105
（　＾ω＾）・・・
(･ω･)
作画を語るスレ5313
【急募】歯医者に行かずに虫歯を治す方法
「サンカ」の起源
群青のマグメルは、パクリ満載の糞アニメ
【ビルボード】ももいろクローバーZ『MOMOIRO CLOVER Z』が総合アルバム首位　竹内まりやベストが急上昇
TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼