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

： Name_Not_Found [sage] 2018/02/25(日) 17:27:17.09ID:???

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

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

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

■次スレについて
基本的にレスナンバー

>>980

を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（

>>980

を取った場合も）
立てられない事が予め分かっている場合は、

>>980

付近の書き込みは自重しましょう

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

■関連スレ
Webサイト制作初心者用質問スレ part248
外部リンク

ttp://mevius.2ch.net/test/read.cgi/hp/1494150188/

■HTML
HTML Living Standard 日本語訳
外部リンク

ttp://https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
外部リンク

ttp://https://triple-underscore.github.io/selectors4-ja.html

： Name_Not_Found [sage] 2018/02/25(日) 17:27:33.05ID:???

■Haml

ttp://http://haml.info/

■Sass / Scss
外部リンク

ttp://https://sass-lang.com/

■LESS
外部リンク

ttp://http://lesscss.org/

■Stylus
外部リンク

ttp://http://stylus-lang.com/

■PostCSS
外部リンク

ttp://http://postcss.org/

： Name_Not_Found [sage] 2018/03/13(火) 17:31:39.25ID:???

も抜け……

： Name_Not_Found [sage] 2018/03/14(水) 15:46:20.65ID:???

もぬけの空

： Name_Not_Found [sage] 2018/03/14(水) 21:42:13.41ID:???

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

： Name_Not_Found [] 2018/03/14(水) 22:53:47.77

:Wy8dwLmr

あげ

： Name_Not_Found [sage] 2018/03/14(水) 22:58:24.47ID:???

勝手にSCSS入れやがったから前の

>>1

内容のままで立て直した↓

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

： Name_Not_Found [] 2018/03/15(木) 16:02:28.10

:22GNR5AB

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

： Name_Not_Found [] 2018/03/15(木) 18:38:41.35

:/qaWw3ti

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

： Name_Not_Found [sage] 2018/03/15(木) 21:44:39.74ID:???

>>8

atomでいいんじゃない？

： Name_Not_Found [sage] 2018/03/15(木) 22:56:14.56ID:???

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

： Name_Not_Found [sage] 2018/03/16(金) 00:15:53.96ID:???

>>11

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

： Name_Not_Found [sage] 2018/03/16(金) 07:30:53.52ID:???

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

： Name_Not_Found [] 2018/03/27(火) 23:07:18.49

:YvTsZ4Aw

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

： Name_Not_Found [sage] 2018/03/28(水) 02:52:12.44ID:???

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

： Name_Not_Found [] 2018/03/28(水) 10:21:03.65

:Ls4MzNfq

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

table {border:solid 1px;}

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

： Name_Not_Found [sage] 2018/03/28(水) 16:34:33.48ID:???

>>16

色は？

： Name_Not_Found [] 2018/03/28(水) 18:36:53.32

:Ls4MzNfq

>>17

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

： Name_Not_Found [sage] 2018/03/28(水) 18:40:42.70ID:???

ボーダーのカラーやぞ

： Name_Not_Found [sage] 2018/03/28(水) 19:30:06.67ID:???

border-collapseとかいうオチ？

： Name_Not_Found [] 2018/03/28(水) 19:31:16.50

:Ls4MzNfq

>>19

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

： Name_Not_Found [] 2018/03/28(水) 19:34:22.15

:Ls4MzNfq

>>20

collapseも特に設定していません。

： Name_Not_Found [sage] 2018/03/28(水) 19:34:55.17ID:???

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

： Name_Not_Found [] 2018/03/28(水) 19:39:16.72

:Ls4MzNfq

>>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;
}

： Name_Not_Found [] 2018/03/28(水) 19:42:38.95

:Ls4MzNfq

>>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

： Name_Not_Found [] 2018/03/28(水) 19:43:07.16

:Ls4MzNfq

>>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>

： Name_Not_Found [] 2018/03/28(水) 20:18:23.11

:Ls4MzNfq

>>26

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

： Name_Not_Found [sage] 2018/03/28(水) 20:37:11.56ID:???

なーに、いいってことよ

： Name_Not_Found [] 2018/03/30(金) 19:20:46.07

:GvWrcUbx

自分はホームページを作り始めてから間もないのですが
一応トップページだけは公開出来たのですが、ディレクトリのアップロードの仕方が分かりません。
例えば、外部リンク

ttp://http://aaaa.netというトップページがあったとして、
その下層に外部リンク

ttp://http://aaaa.net/xxxxや外部リンク

ttp://http://aaaa.net/xxxxxx、xxxxxxxx等と言ったカテゴリがあるじゃないですか。
それの作り方、と言うかアップロードの仕方がどんなに調べても分からないので教えていただけるとありがたいです。
因みにアップロードにはFFFTPを利用しています。

： Name_Not_Found [sage] 2018/03/30(金) 21:33:48.69ID:???

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

： Name_Not_Found [] 2018/03/30(金) 23:43:02.40

:lnUukLli

池

： Name_Not_Found [sage] 2018/03/31(土) 05:17:47.21ID:???

>>29

本読め

ttp://http://www.sbcr.jp/products/4797372960.html

： Name_Not_Found [sage] 2018/03/31(土) 23:53:59.32ID:???

「フォルダ upload」で検索！

： Name_Not_Found [sage] 2018/04/01(日) 19:54:49.03ID:???

頑張れ！

： Name_Not_Found [] 2018/04/02(月) 10:35:24.25

:5FDSyIpD

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

： Name_Not_Found [sage] 2018/04/02(月) 13:57:42.54ID:???

paddingで%指定

： Name_Not_Found [] 2018/04/02(月) 14:35:01.60

:41m4qg1d

警察と創価、在日マフィアによる集団ストーカーの証拠動画
:(警察車両ナンバー入り)
外部リンク

ttp://https://www.youtube.com/watch?v=gTOBN1AkSz0
外部リンク

ttp://https://www.youtube.com/watch?v=bbPcpPwO3ug
外部リンク

ttp://https://www.youtube.com/watch?v=de1jeSPGGNo

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

： Name_Not_Found [sage] 2018/04/11(水) 18:11:10.16ID:???

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

： Name_Not_Found [sage] 2018/04/12(木) 22:35:46.39ID:???

>>38

見せたく無いリストなんでしょ。

： Name_Not_Found [sage] 2018/04/12(木) 23:31:05.14ID:???

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

： Name_Not_Found [sage] 2018/04/13(金) 02:15:16.15ID:???

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

： Name_Not_Found [sage] 2018/04/13(金) 18:09:13.07ID:???

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

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

： Name_Not_Found [sage] 2018/04/15(日) 10:27:16.81ID:???

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

： Name_Not_Found [sage] 2018/04/17(火) 01:40:25.76ID:???

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

： Name_Not_Found [sage] 2018/04/17(火) 18:47:45.77ID:???

>>44

ソース見て研究したらいいじゃない。

： Name_Not_Found [sage] 2018/04/18(水) 01:28:23.65ID:???

>>45

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

： Name_Not_Found [sage] 2018/05/01(火) 08:10:27.97ID:???

>>46

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

： Name_Not_Found [] 2018/05/01(火) 18:33:39.69

:l1wYHpV1

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

V610Q

： Name_Not_Found [sage] 2018/05/02(水) 14:25:08.99ID:???

V610Q

： Name_Not_Found [sage] 2018/05/06(日) 13:58:58.00ID:???

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

： Name_Not_Found [sage] 2018/05/06(日) 15:08:57.27ID:???

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

： Name_Not_Found [sage] 2018/05/06(日) 16:33:30.13ID:???

>>50

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

実装状況：
外部リンク

ttp://https://developer.mozilla.org/en-US/docs/Web/CSS/color

： Name_Not_Found [sage] 2018/05/06(日) 16:41:21.28ID:???

52 に追加
color 型一般の互換性
外部リンク

ttp://https://developer.mozilla.org/ja/docs/Web/CSS/color_value#Browser_compatibility

： Name_Not_Found [sage] 2018/05/06(日) 17:41:02.45ID:???

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

： Name_Not_Found [sage] 2018/05/06(日) 22:10:48.03ID:???

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

： Name_Not_Found [sage] 2018/05/07(月) 01:05:35.00ID:???

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

： Name_Not_Found [] 2018/05/07(月) 20:52:38.32

:h0Tvtlu9

Opera miniは切り捨てろ

： Name_Not_Found [sage] 2018/05/07(月) 21:43:47.65ID:???

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

： Name_Not_Found [sage] 2018/05/07(月) 22:25:17.76ID:???

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

： Name_Not_Found [sage] 2018/05/08(火) 00:15:36.61ID:???

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

： Name_Not_Found [sage] 2018/05/08(火) 00:26:38.98ID:???

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

： Name_Not_Found [sage] 2018/05/08(火) 23:11:21.05ID:???

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

： Name_Not_Found [] 2018/05/09(水) 19:16:32.58

:DP7KUipI

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

： Name_Not_Found [sage] 2018/05/09(水) 20:46:50.68ID:???

scss使うしかないかな

： Name_Not_Found [sage] 2018/05/09(水) 20:54:09.80ID:???

出たｗ

： Name_Not_Found [sage] 2018/05/09(水) 21:04:17.18ID:???

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

： Name_Not_Found [sage] 2018/05/09(水) 21:09:14.06ID:???

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

： Name_Not_Found [sage] 2018/05/09(水) 21:20:38.61ID:???

>>63

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

： Name_Not_Found [sage] 2018/05/09(水) 22:14:39.14ID:???

>>68

ありがとうございます。
Google ChromeおよびMozilla Firefoxの最新版で試してみましたがいずれも対応していないように見えました。
外部リンク

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

： Name_Not_Found [sage] 2018/05/09(水) 23:22:12.04ID:???

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

： Name_Not_Found [] 2018/05/22(火) 12:15:57.61

:CIBcCH05

>>69

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

： Name_Not_Found [sage] 2018/05/22(火) 12:24:46.17ID:???

>>71

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

： Name_Not_Found [sage] 2018/05/23(水) 15:22:33.60ID:???

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

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

： Name_Not_Found [] 2018/06/09(土) 04:49:30.90

:fG0JU7eJ

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

： Name_Not_Found [sage] 2018/06/09(土) 12:34:15.84ID:???

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

： Name_Not_Found [sage] 2018/06/11(月) 02:57:41.22ID:???

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

： Name_Not_Found [sage] 2018/06/11(月) 03:10:56.01ID:???

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

： Name_Not_Found [sage] 2018/06/11(月) 14:29:12.62ID:???

>>76

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

： Name_Not_Found [sage] 2018/06/11(月) 17:47:45.84ID:???

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

： Name_Not_Found [sage] 2018/06/12(火) 21:59:24.97ID:???

>>75

それくらいしかないですよね……。

： Name_Not_Found [] 2018/06/16(土) 18:26:20.05

:yMVXQ93H

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

： Name_Not_Found [sage] 2018/06/16(土) 18:43:37.26ID:???

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

： Name_Not_Found [sage] 2018/06/16(土) 20:42:14.38ID:???

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

： Name_Not_Found [sage] 2018/06/16(土) 21:04:46.00ID:???

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

： Name_Not_Found [sage] 2018/06/16(土) 22:38:11.64ID:???

>>83

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

： Name_Not_Found [sage] 2018/06/16(土) 22:56:02.24ID:???

>>76-79

SASS で良い

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

： Name_Not_Found [sage] 2018/07/12(木) 21:33:55.70ID:???

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

： Name_Not_Found [sage] 2018/07/13(金) 00:04:38.94ID:???

>>87

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

： Name_Not_Found [sage] 2018/07/13(金) 00:38:25.95ID:???

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

： Name_Not_Found [sage] 2018/07/13(金) 00:39:25.32ID:???

好きなページ模写が速い

： Name_Not_Found [sage] 2018/07/13(金) 00:50:59.54ID:???

>>89

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

： Name_Not_Found [sage] 2018/07/13(金) 02:19:46.33ID:???

>>87

CSS辞典

： Name_Not_Found [sage] 2018/07/13(金) 03:27:53.56ID:???

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

： Name_Not_Found [sage] 2018/07/13(金) 09:28:33.96ID:???

>>88

>>89

人によって書き方にはクセがあるからね

： Name_Not_Found [sage] 2018/07/14(土) 21:15:41.68ID:???

媒体wwwwwwwwww

： Name_Not_Found [sage] 2018/07/14(土) 22:21:47.20ID:???

師匠wwwwwwwww

： Name_Not_Found [sage] 2018/07/15(日) 11:37:16.75ID:???

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

： Name_Not_Found [sage] 2018/07/16(月) 23:53:22.02ID:???

里に修行にいかねば

： Name_Not_Found [sage] 2018/08/23(木) 22:50:37.31ID:???

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

100

： Name_Not_Found [sage] 2018/09/06(木) 11:58:07.40ID:???

>>99

インラインでCSS書いたら？

101

： Name_Not_Found [] 2018/09/07(金) 20:47:30.99

:8XauzAuS

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

102

： Name_Not_Found [sage] 2018/09/08(土) 00:21:32.50ID:???

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

103

： Name_Not_Found [sage] 2018/09/09(日) 15:25:12.33ID:???

トップの飛び散るフォントタイルの仕組みとは？
HTML、CSS、JSコピペしたのにできない　
外部リンク

ttp://https://learncssgrid.com/?ref=designrevision.com#naming-grid-lines

104

： Name_Not_Found [sage] 2018/09/09(日) 16:00:30.28ID:???

>>103

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

105

： Name_Not_Found [sage] 2018/09/09(日) 16:09:41.62ID:???

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

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

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

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

外部リンク

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

106

： Name_Not_Found [sage] 2018/09/09(日) 17:15:53.30ID:???

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

107

： Name_Not_Found [] 2018/09/09(日) 19:09:16.35

:krrFsyUq

>>102

ありがとうございます。

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

108

： Name_Not_Found [sage] 2018/09/09(日) 19:25:01.16ID:???

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

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

109

： Name_Not_Found [] 2018/09/09(日) 20:30:28.65

:krrFsyUq

>>108

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

外部リンク

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

110

： Name_Not_Found [] 2018/09/10(月) 18:43:48.16

:FqfOLkxG

度々すみません。

>>109

です。
検索してみて
外部リンク

ttp://https://mementoo.info/archives/777
外部リンク

ttp://https://coliss.com/articles/build-websites/operation/css/css-hover-on-everything-but.html
この方法でできるのではと思い、
外部リンク

ttp://http://www.cssdesk.com/6JLsA
こちらで試してみたのですが(下の画像の方です)
変化がありません。
ずぶの素人でどこをどうすれば同時に変化するようになるのか分かりません。
cssの書き方が間違っているのでしょうか。
ご教示いただけましたら幸いです。
何度も申し訳ないです。

111

： Name_Not_Found [sage] 2018/09/11(火) 00:57:52.47ID:???

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

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

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

112

： Name_Not_Found [] 2018/09/11(火) 07:13:11.24

:Sng3FchW

>>111

ご丁寧にありがとうございます。
外部リンク

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

113

： Name_Not_Found [sage] 2018/09/12(水) 03:30:07.15ID:???

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

>>112

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

114

： Name_Not_Found [sage] 2018/09/12(水) 04:15:39.97ID:???

>>109

.text { }
#sample:hover > .text { }

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

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

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

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

115

： Name_Not_Found [] 2018/10/02(火) 21:09:16.31

:x0gKZze6

【アフィ】元宇宙人のスピリチュアルブログ【詐欺】
外部リンク

ttp://https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232

116

： Name_Not_Found [sage] 2018/10/03(水) 12:44:33.91ID:???

>>112

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

117

： Name_Not_Found [sage] 2018/10/18(木) 02:26:28.09ID:???

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

118

： Name_Not_Found [] 2018/10/29(月) 23:57:28.09

:Loigsw5F

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

119

： Name_Not_Found [sage] 2018/11/02(金) 08:28:26.39ID:???

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

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

120

： Name_Not_Found [sage] 2018/11/02(金) 09:42:21.09ID:???

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

121

： Name_Not_Found [sage] 2018/11/02(金) 10:17:48.54ID:???

いずれこっちに統合予定でチェックボックスでテーブルの切り替え機能付ける予定
外部リンク

ttp://https://excelog.web.fc2.com/2018.html
↑このページを基本としてチェックボックスにチェックついたら↓のページのhtmlのヘッダのところに書いてあるcssで↓のページのように縦長にcssでやりたいけどうまく動いてくれないというのが質問です。
外部リンク

ttp://https://excelog.web.fc2.com/2018_test.html

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

122

： Name_Not_Found [sage] 2018/11/02(金) 10:18:15.78ID:???

>>121

は

>>119

の件です

123

： Name_Not_Found [sage] 2018/11/02(金) 10:53:16.72ID:???

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

124

： Name_Not_Found [sage] 2018/11/02(金) 11:48:55.44ID:???

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

>>119

>>121

は取り下げします

125

： Name_Not_Found [] 2018/11/02(金) 16:53:46.11

:mwI/3Qa2

初歩的な質問でごめん、

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

： Name_Not_Found [] 2018/11/02(金) 17:00:05.75

:mwI/3Qa2

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

： Name_Not_Found [sage] 2018/11/02(金) 20:55:47.78ID:???

display: flex;

128

： Name_Not_Found [sage] 2018/11/02(金) 21:01:04.92ID:???

>>125

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

129

： Name_Not_Found [] 2018/11/03(土) 08:49:54.46

:tkZgNsuQ

>>128

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

修正版は

<div id="container">
　　<div class="center">
<ul class="menu" id="gnav">
<li class="*">
</li>
</ul>
</div>
<div class="*">
<img src="*">
</div>
</div>

130

： Name_Not_Found [sage] 2018/11/03(土) 09:23:59.51ID:???

>>129

プラグイン含めて

jsfiddleにUPしたら？

ところで、

こういう文章が

見やすいと思ってるの？

131

： Name_Not_Found [sage] 2018/11/04(日) 18:49:04.51ID:???

cssたのしー

132

： Name_Not_Found [sage] 2018/11/04(日) 23:40:00.21ID:???

蚊の皮～

133

： Name_Not_Found [sage] 2018/11/05(月) 05:13:21.46ID:???

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

134

： Name_Not_Found [sage] 2018/11/05(月) 11:14:27.41ID:???

>>129

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

135

： Name_Not_Found [sage] 2018/11/06(火) 14:24:13.12ID:???

css使いこなすと面白いな

136

： Name_Not_Found [] 2018/11/10(土) 21:19:41.31

:sysZOBce

ttp://http://r2.upup.be/wV2qsULdHm

137

： Name_Not_Found [sage] 2018/11/11(日) 14:23:20.69ID:???

ほとんど知らない

ttp://https://qiita.com/rana_kualu/items/96b303307d6435aedf8b

138

： Name_Not_Found [sage] 2018/11/11(日) 15:51:27.22ID:???

>>136

ブラクラ

139

： Name_Not_Found [] 2018/11/29(木) 02:22:03.03

:ClDJIjKY

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

140

： Name_Not_Found [sage] 2018/11/29(木) 02:28:33.33ID:???

jsでならできます

141

： Name_Not_Found [] 2018/11/29(木) 02:29:38.77

:ClDJIjKY

>>140

　ありがとう

142

： Name_Not_Found [sage] 2018/11/29(木) 02:34:25.41ID:???

>>139

少なくともHTMLとCSSだけではできない。
単純に切り取りたいならここら辺
外部リンク

ttp://http://www.html5.jp/tag/elements/forms-textFieldSelection.html

さらに切り取った結果をクリップボードに入れたいならこれも
外部リンク

ttp://https://qiita.com/satthi/items/b4123c7683b4c3d93bf4

143

： Name_Not_Found [sage] 2018/11/30(金) 18:18:53.00ID:???

すみません、質問よろしくお願いいたします。
外部リンク

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

144

： Name_Not_Found [sage] 2018/11/30(金) 18:40:26.92ID:???

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

145

： Name_Not_Found [sage] 2018/12/02(日) 13:47:50.30ID:???

>>144

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

146

： Name_Not_Found [sage] 2018/12/03(月) 10:24:20.80ID:???

>>145

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

147

： Name_Not_Found [] 2018/12/03(月) 11:07:11.74

:4wYsvQ7f

ほんとにぐぐった？

ttp://https://blog.mktia.com/how-to-solve-the-problem-that-access-has-been-blocked-by-cors-policy/

148

： Name_Not_Found [] 2018/12/03(月) 11:14:12.54

:4wYsvQ7f

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

149

： Name_Not_Found [sage] 2018/12/03(月) 16:49:08.63ID:???

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

150

： Name_Not_Found [sage] 2018/12/03(月) 19:12:10.87ID:???

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

151

： Name_Not_Found [] 2018/12/04(火) 00:31:39.24

:XbNL8uMo

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

152

： Name_Not_Found [sage] 2018/12/04(火) 00:35:03.56ID:???

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

153

： Name_Not_Found [sage] 2018/12/04(火) 00:36:53.19ID:???

個別の説明めんどいのでこういうところで合うの探して
外部リンク

ttp://https://laboradian.com/comp-web-service-html-css-js/

154

： Name_Not_Found [sage] 2018/12/04(火) 00:47:36.39ID:???

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

155

： Name_Not_Found [] 2018/12/04(火) 10:55:24.51

:zxWKIu5g

>>151

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

>>153

をヒントに調べてみます

156

： Name_Not_Found [sage] 2018/12/04(火) 19:28:37.78ID:???

>>151

codepenが定番かな？

157

： Name_Not_Found [sage] 2018/12/04(火) 19:36:29.39ID:???

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

158

： Name_Not_Found [sage] 2018/12/04(火) 21:20:40.24ID:???

>>157

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

159

： Name_Not_Found [sage] 2018/12/04(火) 22:30:51.49ID:???

>>158

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

160

： Name_Not_Found [sage] 2018/12/05(水) 00:22:44.16ID:???

Chrome「・・・・」

161

： Name_Not_Found [] 2018/12/05(水) 02:31:09.45

:h1FtZrCK

SEO マットカッツのセミナー
外部リンク

ttp://https://www.youtube.com/watch?v=k46J8zamgvQ

162

： Name_Not_Found [sage] 2018/12/05(水) 13:45:07.69ID:???

VSCode で開発すれば？

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

163

： Name_Not_Found [sage] 2018/12/05(水) 14:43:40.16ID:???

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

164

： Name_Not_Found [sage] 2019/03/13(水) 13:13:45.30ID:???

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

165

： Name_Not_Found [sage] 2019/03/13(水) 13:14:05.37ID:???

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

166

： Name_Not_Found [sage] 2019/03/26(火) 19:52:56.24ID:???

誰でも頭が良くなる、プログラムが書けるようになる方法が発見される 66945
外部リンク

ttp://https://you-can-program.hatenablog.jp

167

： Name_Not_Found [sage] 2019/04/13(土) 02:13:05.26ID:???

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

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

168

： Name_Not_Found [sage] 2019/04/13(土) 02:41:32.97ID:???

>>167

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

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

169

： Name_Not_Found [sage] 2019/04/13(土) 07:30:24.22ID:???

>>986

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

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

170

： Name_Not_Found [sage] 2019/04/13(土) 07:32:26.76ID:???

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

171

： Name_Not_Found [sage] 2019/04/13(土) 12:32:03.43ID:???

>>167

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

172

： Name_Not_Found [sage] 2019/04/13(土) 12:44:41.05ID:???

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

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

173

： Name_Not_Found [sage] 2019/04/15(月) 21:11:49.64ID:???

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

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

<iframe width="476" height="306" src=" 外部リンク

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

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

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

174

： Name_Not_Found [sage] 2019/04/15(月) 21:21:53.43ID:???

175

： Name_Not_Found [sage] 2019/04/15(月) 21:40:19.71ID:???

>>174

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

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

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

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

176

： Name_Not_Found [sage] 2019/04/16(火) 00:53:44.93ID:???

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

177

： Name_Not_Found [sage] 2019/04/16(火) 10:14:37.86ID:???

>>176

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

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

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

<iframe width="476" height="306" src=" 外部リンク

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

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

178

： Name_Not_Found [sage] 2019/04/16(火) 14:15:15.92ID:???

こうかな
<iframe width="100%" style="height: calc(calc(306 / 476) * 100%);" src=" 外部リンク

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

179

： Name_Not_Found [sage] 2019/04/16(火) 14:46:44.85ID:???

>>178

ありがとうございます。

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

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

180

： Name_Not_Found [sage] 2019/04/16(火) 14:48:03.87ID:???

181

： Name_Not_Found [sage] 2019/04/16(火) 15:07:38.77ID:???

>>180

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

182

： Name_Not_Found [sage] 2019/04/17(水) 20:59:46.93ID:???

<div class="outer">
<iframe width="476" height="306" src=" 外部リンク

ttp://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

： Name_Not_Found [] 2019/05/14(火) 18:22:43.77

:kGY3IxPa

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

184

： Name_Not_Found [] 2019/05/29(水) 12:18:12.91

:J16+m6pE

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

185

： Name_Not_Found [sage] 2019/05/29(水) 14:51:14.87ID:???

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

186

： Name_Not_Found [sage] 2019/06/04(火) 16:46:40.21ID:???

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

187

： Name_Not_Found [] 2019/06/04(火) 23:15:50.94

:4xkr/mar

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

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

188

： Name_Not_Found [sage] 2019/06/05(水) 00:20:05.30ID:???

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

189

： Name_Not_Found [sage] 2019/06/05(水) 04:21:53.11ID:???

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

190

： Name_Not_Found [sage] 2019/06/05(水) 23:30:41.81ID:???

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

191

： Name_Not_Found [sage] 2019/06/07(金) 21:41:36.11ID:???

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

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

192

： Name_Not_Found [sage] 2019/06/07(金) 22:33:02.06ID:???

適当なとこで
改行を
する

193

： Name_Not_Found [sage] 2019/06/07(金) 22:38:25.35ID:???

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

194

： Name_Not_Found [sage] 2019/06/08(土) 12:27:25.72ID:???

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

195

： 191 [sage] 2019/06/08(土) 23:50:58.70ID:???

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

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

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

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

196

： Name_Not_Found [sage] 2019/06/09(日) 00:01:37.07ID:???

広告を消せば

197

： Name_Not_Found [sage] 2019/06/09(日) 16:06:55.00ID:???

>>194

外側(item)の高さが揃ってるなら、内側(child)に高さ指定してやればいいだけでは
外部リンク

ttp://https://jsfiddle.net/m8Lthq1x/1/

198

： Name_Not_Found [] 2019/06/10(月) 17:05:39.08

:1aGcNMl0

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

199

： Name_Not_Found [sage] 2019/06/10(月) 19:12:39.47ID:???

>>198

なるわけない

200

： 191 [sage] 2019/06/12(水) 00:34:58.33ID:???

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

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

201

： Name_Not_Found [sage] 2019/06/12(水) 14:49:41.85ID:???

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

202

： Name_Not_Found [sage] 2019/06/12(水) 15:07:18.20ID:???

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

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

203

： Name_Not_Found [sage] 2019/06/13(木) 02:35:33.65ID:???

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

nth-child を試してみましたが、うまく行きません
外部リンク

ttp://https://jsbin.com/jugecok/edit?html,css,js,output

JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：外部リンク

ttp://https://konohazuku.net/css/css_nth-child_tbl_border/

204

： Name_Not_Found [sage] 2019/06/13(木) 02:50:58.89ID:???

>>203

._p なんかどこにもないが

205

： Name_Not_Found [sage] 2019/06/13(木) 02:51:51.76ID:???

>>203

これじゃあかんの？

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

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

table {
background-color: #eee;
}

206

： Name_Not_Found [sage] 2019/06/13(木) 03:22:06.60ID:???

ありがとうございました
外部リンク

ttp://https://jsbin.com/xapekam/5/edit?html,css,output

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

207

： Name_Not_Found [sage] 2019/06/13(木) 03:26:50.17ID:???

ええんやで

208

： Name_Not_Found [sage] 2019/06/13(木) 07:27:00.31ID:???

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

209

： 203 [sage] 2019/06/13(木) 10:27:45.23ID:???

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

「個人として弄る」分には

>>203

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

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

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

210

： Name_Not_Found [sage] 2019/06/13(木) 12:18:10.49ID:???

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

211

： Name_Not_Found [sage] 2019/06/13(木) 13:34:04.14ID:???

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

212

： Name_Not_Found [sage] 2019/06/13(木) 16:09:04.70ID:???

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

213

： Name_Not_Found [sage] 2019/06/13(木) 17:44:14.71ID:???

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

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

214

： Name_Not_Found [sage] 2019/06/13(木) 18:46:40.63ID:???

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

215

： Name_Not_Found [sage] 2019/06/13(木) 19:44:42.91ID:???

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

216

： Name_Not_Found [sage] 2019/06/13(木) 19:55:38.60ID:???

>>214

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

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

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

217

： Name_Not_Found [sage] 2019/06/13(木) 20:11:05.94ID:???

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

218

： Name_Not_Found [sage] 2019/06/13(木) 21:17:39.16ID:???

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

219

： Name_Not_Found [sage] 2019/06/13(木) 23:04:58.41ID:???

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

220

： Name_Not_Found [sage] 2019/06/13(木) 23:06:58.22ID:???

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

221

： Name_Not_Found [sage] 2019/06/13(木) 23:09:48.58ID:???

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

222

： Name_Not_Found [sage] 2019/06/14(金) 00:11:51.81ID:???

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

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

223

： Name_Not_Found [sage] 2019/06/14(金) 00:57:33.62ID:???

今はbulmaだぞ

224

： Name_Not_Found [sage] 2019/06/14(金) 02:35:07.70ID:???

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

225

： Name_Not_Found [sage] 2019/06/14(金) 04:56:00.13ID:???

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

226

： Name_Not_Found [sage] 2019/06/14(金) 09:54:25.14ID:???

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

227

： Name_Not_Found [] 2019/06/15(土) 01:53:39.00

:Fc2SWzYL

>>223

そうなの？　Googleのじゃなくて？

228

： Name_Not_Found [sage] 2019/06/15(土) 12:29:20.27ID:???

>>222

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

229

： Name_Not_Found [sage] 2019/06/15(土) 13:11:36.02ID:???

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

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

230

： Name_Not_Found [sage] 2019/06/15(土) 14:43:25.70ID:???

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

231

： Name_Not_Found [sage] 2019/06/15(土) 15:00:51.25ID:???

>>230

ここデザインの話してないから。

232

： Name_Not_Found [sage] 2019/06/15(土) 20:20:41.89ID:???

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

233

： Name_Not_Found [sage] 2019/06/15(土) 22:05:19.13ID:???

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

234

： Name_Not_Found [sage] 2019/06/15(土) 22:23:11.77ID:???

>>233

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

235

： Name_Not_Found [sage] 2019/06/15(土) 23:02:05.85ID:???

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

236

： Name_Not_Found [sage] 2019/06/15(土) 23:09:37.52ID:???

>>235

あ、勘違いしたわ。

237

： Name_Not_Found [sage] 2019/06/16(日) 16:35:59.48ID:???

>>227

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

238

： Name_Not_Found [sage] 2019/06/23(日) 14:41:37.15ID:???

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

239

： Name_Not_Found [sage] 2019/06/23(日) 15:34:26.75ID:???

基本的なことが全然わかっていないので質問させてください。
グリッドレイアウトで３つの領域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

： 239 [sage] 2019/06/23(日) 15:35:38.71ID:???

●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

： Name_Not_Found [sage] 2019/06/23(日) 21:07:18.27ID:???

>>240

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

242

： 239 [sage] 2019/06/23(日) 23:17:50.88ID:???

>>241

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

243

： Name_Not_Found [sage] 2019/06/24(月) 01:25:10.48ID:???

>>242

jQueryはいける？

244

： 239 [sage] 2019/06/24(月) 12:14:11.18ID:???

>>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

： 239 [sage] 2019/06/24(月) 12:16:07.18ID:???

>>244

！とか入っちゃってすみません。

246

： Name_Not_Found [sage] 2019/06/24(月) 14:11:36.86ID:???

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

247

： Name_Not_Found [sage] 2019/06/25(火) 12:38:13.27ID:???

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

248

： Name_Not_Found [sage] 2019/06/25(火) 14:18:34.53ID:???

> 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

： Name_Not_Found [sage] 2019/06/25(火) 14:49:02.71ID:???

>>248

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

250

： Name_Not_Found [] 2019/06/26(水) 13:46:48.95

:6bhcQlRF

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

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

251

： Name_Not_Found [sage] 2019/06/26(水) 13:49:00.57ID:???

>>250

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

252

： Name_Not_Found [sage] 2019/06/26(水) 14:16:50.78ID:???

>>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

： Name_Not_Found [sage] 2019/06/26(水) 20:36:41.43ID:???

>>250

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

254

： Name_Not_Found [sage] 2019/06/26(水) 20:54:43.60ID:???

>>253

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

255

： Name_Not_Found [sage] 2019/06/26(水) 20:59:08.00ID:???

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

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

256

： Name_Not_Found [sage] 2019/06/26(水) 21:11:22.13ID:???

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

257

： Name_Not_Found [sage] 2019/06/26(水) 21:12:50.36ID:???

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

258

： Name_Not_Found [sage] 2019/06/26(水) 22:06:08.16ID:???

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

259

： Name_Not_Found [sage] 2019/06/27(木) 09:18:05.39ID:???

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

260

： Name_Not_Found [sage] 2019/07/01(月) 10:47:32.01ID:???

>>258

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

261

： Name_Not_Found [sage] 2019/07/02(火) 01:00:37.15ID:???

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

262

： Name_Not_Found [sage] 2019/07/02(火) 05:05:40.78ID:???

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

263

： Name_Not_Found [sage] 2019/07/03(水) 15:18:39.68ID:???

>>261

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

264

： Name_Not_Found [sage] 2019/07/03(水) 19:56:32.79ID:???

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

265

： Name_Not_Found [sage] 2019/07/03(水) 21:57:47.15ID:???

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

266

： Name_Not_Found [sage] 2019/07/04(木) 01:06:56.80ID:???

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

267

： Name_Not_Found [sage] 2019/07/04(木) 01:37:01.97ID:???

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

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

268

： Name_Not_Found [sage] 2019/07/04(木) 10:03:24.47ID:???

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

269

： Name_Not_Found [sage] 2019/07/04(木) 15:09:14.82ID:???

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

270

： Name_Not_Found [] 2019/07/05(金) 17:48:58.74

:NNvt5xh7

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

271

： Name_Not_Found [] 2019/07/05(金) 17:58:25.87

:NNvt5xh7

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

272

： Name_Not_Found [sage] 2019/07/05(金) 20:11:08.62ID:???

基礎39. 回り込みの解除（floatの解除）
外部リンク

ttp://https://web-manabu.com/html-css39/

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

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

273

： Name_Not_Found [sage] 2019/07/05(金) 22:29:34.44ID:???

とりあえず、これでも読んでみたら？
外部リンク

ttps://www.webcreatorbox.com/tech/content-property

274

： Name_Not_Found [sage] 2019/07/06(土) 11:48:17.56ID:???

>>271

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

275

： Name_Not_Found [sage] 2019/07/06(土) 12:39:12.79ID:???

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

276

： Name_Not_Found [sage] 2019/07/06(土) 14:18:54.44ID:???

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

277

： Name_Not_Found [sage] 2019/07/06(土) 15:28:01.32ID:???

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

278

： 271 [] 2019/07/06(土) 15:46:30.55

:zM/nUym8

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

279

： Name_Not_Found [sage] 2019/07/06(土) 16:37:28.90ID:???

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

280

： Name_Not_Found [] 2019/07/06(土) 19:15:23.11

:zM/nUym8

>>279

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

281

： Name_Not_Found [sage] 2019/07/07(日) 01:10:24.44ID:???

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

282

： Name_Not_Found [] 2019/07/08(月) 20:15:20.67

:E4KyX0A9

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

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