HTML/CSS のどんな質問にも優しく答えるｽﾚ 50

**Name_Not_Found** · 2022/02/25(金) 16:42:48.40

https://mevius.5ch.net/test/read.cgi/hp/1636434627/

**Name_Not_Found** · 2022/02/25(金) 17:38:33.31

PENIS

**Name_Not_Found** · 2022/03/01(火) 22:11:44.85

まったくの初心者です。
いま社員バイトのみんなが手書きしたり会社PCにあるエクセルファイルに入力してる日報を、
在宅の人も共通にできるようweb上で入力してもらう仕組みを作ろうとしています。
年末までに完成させるよう、勉強しています。

お聞きしたいのですが、ユーザーに自由文字列を入力してもらうのはinput type=textしかないのでしょうか？
エクセルのシートで縦に50個くらい並んでるセルに入力してもらってるのですが、これをwebページ（html文書）にするなら、
input type=textを50個書き連ねておくものなんでしょうか？
tableで表を作っておくとしても、その表内で入力を受け付けるなんてありえないですよね？
やはり、input type="text"を並べて、そのひとつひとつに名前を付けておかないと処理できないと考えてよいでしょうか？

エクセルだと、VBAで、カウントしながらループで全行を走査してたのですが。

**Name_Not_Found** · 2022/03/01(火) 22:23:24.29

inputで合ってる
改行含めた複数行に対応させたいならtextarea

でも、ExcelをWebで使えるようにするだけなら
業務用のGoogleアカウント作るor作ってもらってスプレッドシート共有の方が楽じゃないかな？

**Name_Not_Found** · 2022/03/01(火) 22:27:03.81

>>3
ワークシートっぽい入力ができるように作るとおもう
初心者とのことなので正直かなり難易度が高いんじゃないかな

たとえばこんな感じ
handsontableのデモ(ちなみに仕事で使うなら有償)
https://handsontable.com/docs/demo/

フリーでもあるだろうけど結局html+cssだけじゃなくて
javascriptの知識も必要になるんじゃないかな

**Name_Not_Found** · 2022/03/01(火) 22:28:01.19

>>4
ありがとうございました！

グーグルスプレッドシートというアイデアはありませんでした。
会社のお金と時間でwebプログラムの勉強ができるならラッキーだと思ってたので。
ほんと、ありがとうございました。

**Name_Not_Found** · 2022/03/01(火) 22:30:11.92

>>5
ありがとうざいました！

たしかにこれを使いこなせたら、エクセルからwebシステムに見た目そっくりのまま移行できそうですね。

**Name_Not_Found** · 2022/03/02(水) 01:35:48.82

Sassからコンパイルする所まで理解し、
BEMやFlocssの命名は迷いなくていい利点も何となくわかってきたところですが、
しかしいくつもCSSファイルを細分化する必要性があるかわかりません。
大規模サイトならメリットあるのはわかるが
LPや名刺サイト系でもブロック別にCSS分割沢山するものですか。

**Name_Not_Found** · 2022/03/02(水) 03:19:46.77

>>8
FLOCSSなどの命名ルールにはそれぞれ設計者がどれくらいの規模、と想定してるから
まず規模に見合う設計を選ぶべきだが
こういうルールというのは他の人が同じ規則に準じて把握・推測できることに意味がある
極端に言えば自分しか更新しないならなんでもいい

慣れ親しんだ設計がやりやすいのであれば必要に応じてコンパクトにすればいいんだよ
フォルダじゃなくて_foundation.sassや_component.sassみたくまとめたり
プロジェクトとコンポーネントはどっちかしか使わず細分化をやめるとかね

**Name_Not_Found** · 2022/03/02(水) 22:20:23.66

>>3
ちょっと古いけど、Stefanov のReact の入門書がある。
table タグで、Excel を真似た、whinepad という表アプリを作る

Github に、whinepad3 のデモもある

Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://www.oreilly.co.jp/books/9784873117881/

Stefanov のGithub
https://github.com/stoyan/reactbook

ただし、React, Vue.js, Electron などは、Ruby on Rails などを使う人が使う、
プロのウェブ系開発者向きのアプリだから、難易度は高い

**Name_Not_Found** · 2022/03/03(木) 19:13:14.50

>>1 テンプレ

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

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

■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 49
https://mevius.5ch.net/test/read.cgi/hp/1636434627/

■関連スレ
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

**Name_Not_Found** · 2022/03/04(金) 12:28:01.89

タグを閉じ忘れても、後方に影響しない方法ってありでしょうか？
例えばワードプレスの記事内で閉じ忘れが発生した場合、sidebarやfooterのテンプレートにも影響しちゃいますね。
今はブロックエディタだからんなこともないのかしら。

**Name_Not_Found** · 2022/03/04(金) 13:00:17.41

>>12
> 方法ってありでしょうか？

あるでしょうか？なら省略可能なタグ以外は無い
閉じ忘れないようにしたいなら、エディタに機能拡張でも入れて自動的に閉じてもらえ

あとはWordPressスレでやれ

WordPress（ワードプレス）その28
https://mevius.5ch.net/test/read.cgi/blog/1461783816/
WordPressの困った人のスレ 5
https://mevius.5ch.net/test/read.cgi/hp/1643627327/

**Name_Not_Found** · 2022/03/04(金) 15:35:39.82

firefoxってfont family効かないんでしょうか？
おま環でしょうか？

**Name_Not_Found** · 2022/03/04(金) 17:53:56.96

>>14
Firefoxがこの世に出た時からサポートしてるfont-familyが効かないと思うか？

とりあえず書き方間違ってないか確認しろ

font-family - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-family

**Name_Not_Found** · 2022/03/04(金) 18:26:42.39

ブラウザで一回表示してChromeだと検証（デベロッパーツール）とかで
自分の思うように動いてないところがどう解釈されてるか見たほうがいいよ
まあかかってないってことはブラウザに無視されたとかそんなのだろうけど

**Name_Not_Found** · 2022/03/04(金) 18:36:18.96

chromeだとちゃんと効きますからね
書き方の間違いではないかと、、、

**Name_Not_Found** · 2022/03/04(金) 18:38:20.91

検証ツールみても横線で消されていることはないですね
importantしてみても駄目です

他のスタイルは適用されるので、セレクタの間違いではないようです

**Name_Not_Found** · 2022/03/04(金) 18:45:22.69

クロスドメインになるwebフォントとか？

**Name_Not_Found** · 2022/03/04(金) 18:48:23.07

とりま値込みで当該箇所のCSSコピペしてみ

**Name_Not_Found** · 2022/03/04(金) 19:02:29.86

超基本的な質問で恐縮なのですが調べてもわからないので助けてください・・
https://ekitan.com/transit/route/sf-2590/st-2856?sfname=東京&stname=東神奈川&sfcomp=1&sf=2590&st=2856&dt=20220304&tm=1855&sr=0&ic=1&rp=0&tu1=1&tu2=1&tu3=1&dc=1&tp=0&cv=0&cs_flg=0
上記のようなページから運賃データなどをスクレイピングしたいのですが、その中で
<div class="payment-method ek-payment" data-ek-ic-type="2" data-ek-fare-ic="473" data-ek-fare="480" data-ek-fare-icr="946" data-ek-fare-r="960"></div>

このような記述において、意味としては「div」タグ、そこにclass属性があり、そのクラス名が「payment-method ek-payment」
ここまではわかるのですが、「data-ek-fare-ic="473" data-ek-fare="480"」
この部分は何に当たるのでしょうか？　ここの記述を手掛かりにスクレイピングしたり、ここのデータ自体を取得したいのですが、
タグやクラス名で指定しても取得できません

**Name_Not_Found** · 2022/03/04(金) 19:18:26.41

すみません　allow page choice fontの設定でした(´・ω・`)すまん、、、

**Name_Not_Found** · 2022/03/04(金) 19:27:43.96

>>21
datasetでぐぐった？

**Name_Not_Found** · 2022/03/04(金) 20:01:39.69

>>23
ありがとうございます！　これです！　attrsで取得できました！！
お手数おかけしました

**Name_Not_Found** · 2022/03/05(土) 22:51:49.04

>>9
遅くなりましたがご回答ありがとうございます
小規模サイトでひとりで構築するなら自由に…ということですね

1ページ完結名刺サイト、LPサイトだと、昔みたいに、
reset、base、customizeのファイルくらいしかいらないと思ってしまうんだけど
今時の作り方じゃないから、同業者から見ると格好悪いのかなと気になっています

**Name_Not_Found** · 2022/03/05(土) 23:35:08.71

Bootstrap でも使ってみれば？

**Name_Not_Found** · 2022/03/05(土) 23:38:32.99

使わなくていい

**Name_Not_Found** · 2022/03/06(日) 11:44:04.81

https://jsfiddle.net/bgegg/g0vw3qn7/1/
codeタグを使ってもレンダリングされるんですが、ソースコードをそのまま表示させる方法はありますでしょうか？
htmlとjavascritp、cssなどのソースを使います。

**Name_Not_Found** · 2022/03/06(日) 11:52:51.36

pre

**Name_Not_Found** · 2022/03/06(日) 12:10:26.51

pre使っても駄目ですね

**Name_Not_Found** · 2022/03/06(日) 12:11:29.36

ありません
<を<に置換しましょう

**Name_Not_Found** · 2022/03/06(日) 12:13:41.70

置き換えずにやる方法ってないんですかね？
textareaくらいですか？

**Name_Not_Found** · 2022/03/06(日) 12:54:27.04

とりあえず「html シンタックスハイライト」でググれ

**Name_Not_Found** · 2022/03/06(日) 13:05:11.96

https://code-kitchen.dev/html/code/#code%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88

**Name_Not_Found** · 2022/03/06(日) 13:10:19.22

>>32
手動置き換え面倒ならjsの文字列としてhtmlを入れて
replaceを2回かけるミニプログラムでも書いておけばいいんじゃないの？

**Name_Not_Found** · 2022/03/06(日) 13:33:47.48

https://jsfiddle.net/s81v2wna/

**Name_Not_Found** · 2022/03/06(日) 13:50:59.59

>>32
たいていはうまくいってしまうけど正しくはtextarea内もべたで書く時は特殊文字を置換しないとだめよ

**Name_Not_Found** · 2022/03/06(日) 13:55:59.87

>>35
置き換えないとだめなんですねこれ
ありがとうございました

簡易的になのでtextareaでもokでしょうか？

>>36

**Name_Not_Found** · 2022/03/06(日) 17:45:32.21

ちょっと何言ってるか分からない

**Name_Not_Found** · 2022/03/07(月) 01:04:34.02

>>28
ソースを別ファイルにしてもよければ
<iframe src="./hoge.txt"></iframe>
とか

**Name_Not_Found** · 2022/03/07(月) 05:44:22.27

>>1乙

**Name_Not_Found** · 2022/03/07(月) 09:35:26.87

bootstrap5で、modal-headerに右寄せした閉じるボタンをつけたいのですが、
もっとスマートな書き方はありますでしょうか。

text-endなどでbuttonが右寄せにならないので困って以下みたいな書き方になりました

<div class="modal" style="max-width:80%; height:80%;">
<div class="modal-content" id="sample-modal">
<form class="form-horizontal">
<div class="modal-header" >
<div class="aligin-keep float-end">
<div class="row">
<button type="button" class="btn-close" @click="close()" aria-label="Close">
</button>
</div>
</div>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-outline-secondary" data-dismiss="modal">戻る</a>
</div>
</form>
</div>
</div>

---css---
.aligin-keep {
width: 99%
}

**Name_Not_Found** · 2022/03/07(月) 11:59:57.61

>>40
ありがと
素直にワードプレスにします(´・ω・`)
無料ブログはつらい

**Name_Not_Found** · 2022/03/07(月) 13:20:44.02

>>42
右寄せにならないのはmodal-headerがflexboxになってて、justify-contentがspace-betweenになってるから
モーダルのヘッダー部分にタイトルとか入れないなら、<div class="row">の前にダミーで<h5></h5>とか入れるか
もしくはmodal-headerのclassにjustify-content-endを入れれば右寄せになるんじゃない？

42 · 2022/03/07(月) 14:53:42.58

>>44
なるほど、参考にさせていただいてもうちょい試行錯誤してみます！
ありがとうございました！

**Name_Not_Found** · 2022/03/09(水) 21:52:16.65

https://imgbox.com/73H4GsmU
画像をfloat leftで寄せて、文字を回り込ませているのですが、文字と画像の余白はpaddingもマーディンも効きません
何を使うといいんでしょうか？

**Name_Not_Found** · 2022/03/09(水) 22:22:48.64

imgにつけたらどうよ

**Name_Not_Found** · 2022/03/09(水) 22:40:50.70

こうやるんじゃあ
https://jsfiddle.net/6qh380m9/

マーディンって言い方かっこよくて笑った

**Name_Not_Found** · 2022/03/10(木) 06:39:55.37

>>47
>>48
あっ　ありがとう(´・ω・`)

**Name_Not_Found** · 2022/03/13(日) 21:51:11.88

Webページで日付表示の指定方法があったら教えてください

目的には「2022-03-13」などと指定しておいて
ブラウザの言語指定に基づいて
米国語のブラウザでは「Mar. 13, 2022」
日本語のブラウザでは「2022/03/13」などと
自動的に日付表示させる方法があったら教えてください

**Name_Not_Found** · 2022/03/13(日) 22:18:59.97

JavaScriptでブラウザの言語判定して日本語なら～英語なら～で表示させないと無理では？？

**Name_Not_Found** · 2022/03/14(月) 01:09:16.70

>>51
かなり面倒みたいですね
Javascriptで検索したらtoLocaleDateStringってのがヒットしました
組み込めるかどうか検討してみます。

**Name_Not_Found** · 2022/03/16(水) 11:55:21.32

-webkit-overflow-scrollingっていつのまにか不要になっていた(デフォルトで慣性スクロールが効くようになった)んですね
全然知らんかった　もう書く必要ないのか

**Name_Not_Found** · 2022/03/16(水) 14:16:56.42

Autoprefixer使ってるから、その辺はあまり気にしなくなった

**Name_Not_Found** · 2022/03/16(水) 14:19:33.14

って、Autoprefixer関係無い話だったｗ

**Name_Not_Found** · 2022/03/16(水) 20:32:48.96

cssなんですが、
例えば

.h1 {
color: #FFF;
}
@media screen and (max-width: 768px) {
h1 {
color: #FFF;
}
}

上記のように、基本のCSSに加えてモバイル向けのメディアクエリも設定する場合、基本のCSSの方には
@media screen and (min-width: 769px)
とかつけた方がモバイルの方は描画が速くなったりするのでしょうか？

基本のCSS適用後にメディアクエリでモバイル用CSSで上書きされるのと、
基本とモバイル用のそれぞれでメディアクエリ適用有無の判定が行われるのと、
どちらがよりよいのでしょうか。

**Name_Not_Found** · 2022/03/16(水) 21:31:06.89

>>56
排他の方が早いが4G回線でも体感できないくらいの差しかない

**Name_Not_Found** · 2022/03/16(水) 23:54:37.72

web制作の学習を始めた初心者です。
インプレス社から出版されている「Sassの教科書」で
学習しているのですが利用環境を整えるためのインストール作業で手間取っています。

Node.jsをインストールした後npmコマンドを用いてセットアップ済みの環境を
インストールしていくのですがnpm installコマンドを実行しても
インストールがされません。エラー表記があまりに多くどこを見ればよいかも
わからない状態です。
原因究明のためにはエラー内容をコピペしたほうがいいでしょうか？
自分でも意味があまりわかっておらず不明な説明かもしれませんが
どなたか回答いただければ

**Name_Not_Found** · 2022/03/17(木) 00:39:50.64

今時はvscodeの拡張でコンパイルする方が簡単よ

**Name_Not_Found** · 2022/03/17(木) 01:13:55.94

何だか分からんがnode.jsインストールと同時に
既にnpmもインストールしちゃったとか？

**Name_Not_Found** · 2022/03/17(木) 02:37:07.01

Node.js をインストールしたら、パッケージマネージャーのnpm も付いている。
パッケージマネージャーのyarn は、
npm でインストールするのではなくて、OS に直接インストールする

コマンドプロンプトで、

where node
C:\Program Files\nodejs\node.exe

where npm
C:\Program Files\nodejs\npm
C:\Program Files\nodejs\npm.cmd

where yarn
C:\Program Files (x86)\Yarn\bin\yarn
C:\Program Files (x86)\Yarn\bin\yarn.cmd
C:\Program Files (x86)\Yarn\bin\yarn.js

次に、VSCode をインストールして、
拡張機能・Live Sass Compiler をインストールすると、
それが依存している、同じ作者のLive Server もインストールされる

Live Serverは、HTML ファイルをwatch して、編集して保存したら、ブラウザを自動更新する

Live Sass Compiler のwatch機能は、
コードエディタ下部の「Watch Sass」をクリックして、
Sassファイルの変更を監視して、自動的にコンパイルする

タスクランナーのgulp で、Sassファイルをwatchするのと同じ

61 · 2022/03/17(木) 02:37:41.33

「Sassの教科書」は、漏れも読んでいるけど、2017年の本だから、
今では、VSCode の拡張機能で、簡単に出来る

ただし、本格的にプロジェクトを作って制作するなら、
npm, gulp, npm scripts などで、タスクを定義して使う

61 · 2022/03/17(木) 06:17:13.02

ただし、Live Sass Compiler は、
@import の代わりの新構文、@use, @forward に対応していないらしい

その場合は、他の拡張機能を探すか、
gulp, npm scripts で、Dart Sass を使うかする必要がある

SASSは、Ruby Sass, node-sass(LibSass)は廃止で、Dart Sassへ移行する

**Name_Not_Found** · 2022/03/17(木) 16:04:52.74

全く回答になっていない件

**Name_Not_Found** · 2022/03/17(木) 16:45:39.27

このキモい句読点はいつもKENTAとかいうYouTuber？をステマしてるやつだな

**Name_Not_Found** · 2022/03/17(木) 19:59:47.23

>>57
遅くなったけれどありがとう
0.1秒表示が早いだけでもかなりの影響があると聞いていたのでとことんやるべきかと思ったのですが、それを踏まえてもなおそこまではやらんでもというレベルなのでしょうかね

もうやり尽くした、あとはこれくらいしか...となったら突き詰めてみるくらいで考えてみることにします

**Name_Not_Found** · 2022/03/17(木) 20:05:30.55

>>66
究極的にはセレクタの長さとかまで言い出すことになるからな
minifyしときゃなんでもいいよ

**Name_Not_Found** · 2022/03/17(木) 20:18:16.87

もう誰も気付かないどころか、自分でも体感的には
全く気付かない誤差レベルの自己満足の世界だな

**Name_Not_Found** · 2022/03/17(木) 21:02:54.20

58です。

vscodeの拡張機能でコンパイルできるのですね。
回答してくださった方々ありがとうございました。

61 · 2022/03/18(金) 05:51:43.67

>>63
に書いたけど、

新しい構文、@use, @forward に対応した、VSCode の拡張機能があるらしい

【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方
https://yumegori.com/vscode-dart-sass-setting

**Name_Not_Found** · 2022/03/18(金) 18:20:40.00

chromeのインスペクタでcssの編集出来なくなってないですか？
vivaldiなんですけども、どないしたらいいですかね

**Name_Not_Found** · 2022/03/18(金) 18:54:21.76

chrome使え

**Name_Not_Found** · 2022/03/18(金) 19:17:29.30

WordPressのCSSの変更を試みています。
ブログで長い縦スクロールのサイト。
上部にメインメニューでプルダウンメニューが有ります。
そのプルダウンメニューにはたくさんのメニュー項目があります。
しかしそのメニューはブラウザのウィンドウの高さを超えることができません。
メニュー要素の高さを3000pxとかにしてもブラウザのウィンドウの高さでカットされています。

縦へのスクロール量はどんなに多くなっても良いので、
メニュー要素の高さは全表示させたいです。
とは言え、メニューの高さ以上にページ自体の高さはありますが。
どうやったら、メニューの高さを設定した数値に保てるでしょうか？

**Name_Not_Found** · 2022/03/18(金) 19:50:13.97

どっかにoverflow:hiddenあるんじゃないの

**Name_Not_Found** · 2022/03/19(土) 03:29:27.58

昔frontpageを使っていたときはテーブルの列を消そうと思ったらwordやexcel感覚で列選択して消していたけど
最近はvscodeとか使っていると列を消したいときはソースを行ごとに触るしかないの？

html貼り付けて列のタグを削除とかできるサイトとかあれば便利そう

**Name_Not_Found** · 2022/03/19(土) 08:49:38.02

そんなあなたにDreamweaver

**Name_Not_Found** · 2022/03/19(土) 09:39:55.60

>>76
サブスクは勘弁して

**Name_Not_Found** · 2022/03/22(火) 18:52:07.02

ブログをやっているのですが
ブログタイトルにh1
記事タイトルにh2が使われているテンプレートを使っているのですが、
記事本文で見出しタグを使う場合h1から使うのかh3から使うのかどちらが正しいでしょうか

初心者なので変なこと書いてたらすいません

**Name_Not_Found** · 2022/03/22(火) 19:18:55.46

ページ内でhの連番が飛んでなければh3

**Name_Not_Found** · 2022/03/22(火) 20:00:03.97

書籍などの目次（見出し／小見出し）をイメージするとわかりやすいよ
h3

**Name_Not_Found** · 2022/03/22(火) 21:19:53.65

ありがとうございます
書き込んだあとに思ったけどテンプレートできっちり書いてくれてるなら記事本文では下手にhtml記述しないほうがいいような気もしました

**Name_Not_Found** · 2022/03/24(木) 14:24:20.89

質問です
自分が作ったHTMLの中の、
あるフォントで指定した日本語部分を
そのフォントがインストールされていない他人の端末で表示したときに
豆腐文字で表示されますでしょうか、
それとも便宜的に別のフォントで表示されますでしょうか？
また、自分がフォントを指定しなければ、この問題は回避されますでしょうか？
よろしくおねがいします

**Name_Not_Found** · 2022/03/24(木) 14:40:38.99

font-familyの優先順位に従う
何も指定してない場合ブラウザやOSの仕様による

**Name_Not_Found** · 2022/03/24(木) 15:56:19.24

CSSフレームワークって使わないで書くのが普通なんですか？

たくさんフレームワークあって別の人があとから修正することを考えたらいちいちそのフレームワークの学習コスト取らせるのは現実的ではないから、という理由でしょうか？

**Name_Not_Found** · 2022/03/24(木) 16:11:02.08

はい？

**Name_Not_Found** · 2022/03/24(木) 16:16:18.21

基本を知ってればフレームワークは応用にすぎん
学習コストうんぬんを考えるのはそういうレベルの人材

**Name_Not_Found** · 2022/03/24(木) 19:29:13.00

ちんちんシュッ！シュッ！シュッ！

**Name_Not_Found** · 2022/03/24(木) 19:43:32.45

うんこプリッ

**Name_Not_Found** · 2022/03/24(木) 20:04:14.98

CSSフレームワーク使ってる人はHTML/CSSで書ける
ウェブアプリなんか作る人がそっちよりも機能実装の方に力入れたいからフレームワークを使うんだと思う

**Name_Not_Found** · 2022/03/25(金) 01:46:02.15

ほぼ、Bootstrap。
少数派が、Tailwind, Bulma

CSS フレームワークを使わないと、まず無理。
まともに作るのに、とんでもなく時間が掛かる

responsive とか、様々な場合を考えないといけない。
バグを排除できない

**Name_Not_Found** · 2022/03/25(金) 02:04:03.01

このキモイ句読点はもしかしてサロンコピペ荒らし野郎か

**Name_Not_Found** · 2022/03/25(金) 18:29:56.04

vivaldiなんですが、インスペクタからcssの編集が出来なくなることがあります。
ヘッダーにcssファイルへのリンクがあり、そのリンク先にcssが記述されています。
しかし、ヘッダまでしか追えていないので編集できんのです
chromeは問題ないです

**Name_Not_Found** · 2022/03/25(金) 19:17:28.91

(´・∀・｀)ﾍｰ

**Name_Not_Found** · 2022/03/25(金) 19:28:55.41

直りやすた

**Name_Not_Found** · 2022/03/27(日) 03:51:28.87

有名どころのサイトなので明言したくないんですが
ページをスクロール等操作していた際に<style id="xxxというのがいきなり現れるのはどういう仕組みなんでしょうか
それを出てくる前に塞いでおきたくてheadやbodyを調べたんですが、id=に続く文字列はどこにも見つかりません
訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか

**Name_Not_Found** · 2022/03/27(日) 04:18:47.31

>>95
ある程度わかるけど
そのstyleタグの前後をきちんと書かなきゃ

**Name_Not_Found** · 2022/03/27(日) 04:56:27.91

JavaScript, jQuery などでプログラミングして、スクロール位置で判断する

例えば、100 スクロールされて、scrollTop が、100になったら、
id="xxx" の要素を作って、どこかの要素に追加して、

そのid="xxx"の要素に、jQueryで、スタイルを付ける
$( '#xxx' ).css( 'color', '#f00' );

**Name_Not_Found** · 2022/03/27(日) 05:22:17.72

>訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか

これはどういう意味なんだろう

**Name_Not_Found** · 2022/03/27(日) 08:14:32.49

>>98
なんだろうね

**Name_Not_Found** · 2022/03/28(月) 12:21:12.41

このフォント知っている人いますか？

http://imepic.jp/20220328/442500

**Name_Not_Found** · 2022/03/28(月) 12:51:03.90

源界明朝は限界ギリギリ読める源ノ明朝の派生フリーフォント ? デザインのブログ
ttps://flopdesign.com/blog/font/5146/

**Name_Not_Found** · 2022/03/29(火) 01:41:13.49

>>101
ありがとうございます！ずっと探してました！

**Name_Not_Found** · 2022/03/29(火) 15:26:47.37

サイトのソースを見ると
> style.css?ver=202203270623
とかクエスチョンの後に数字が付くものがあります。
これって何ですか？
アクセスする度にそのユーザー用のCSSを動的に一時的に生成しているってことですか？

**Name_Not_Found** · 2022/03/29(火) 15:34:26.86

>>103
それはそのCSSのアドレスを処理してるサーバー側次第じゃ
静的なCSSと単なるパラメータなのかもしれないし
完全動的にCSSを返す仕組みでその判断に使ってる文字列かもしれないし

そのアドレス対して
?以降ないCSSまでのアドレスで中身がわかるか
日付ぽい数字をいじって中身が変わったの返すか
と見比べてみりゃいい

**Name_Not_Found** · 2022/03/29(火) 15:36:15.96

1) style.css?ver=202203270623
2) style.css
3) style.css?ver=202202010900

こういう話ね

**Name_Not_Found** · 2022/03/29(火) 15:55:03.50

リロードするたびに数字が変わる場合は
ただのキャッシュ対策

**Name_Not_Found** · 2022/03/29(火) 16:53:16.09

キャッシュ対策いいかげん改善されないのかね
php使えない環境が面倒すぎ

**103** · 2022/03/29(火) 19:57:39.70

皆さんありがとうございます。
ブラウザやPC変えても、
ver以降の数値は変わらないようですね。
適当な数値を手入力しても内容に変化はありませんね。

**Name_Not_Found** · 2022/03/29(火) 22:10:14.05

キャッシュ対策だね
スーパーリロードとかしなくてもいいやつ

**Name_Not_Found** · 2022/03/30(水) 02:16:26.19

ある広告表示をデベロッパーツールなどで消そうとしても、該当する要素を削除してみた途端にすぐに要素が復活します
こうやって広告などを無限に呼び出す場所はどうやって検出してどう止めればいいのでしょうか？

**Name_Not_Found** · 2022/03/30(水) 03:21:30.39

jsで生成してんだろう

**Name_Not_Found** · 2022/03/30(水) 06:58:30.55

100個ぐらいのJavaScript(JS)を解析しないといけない。
他人のサイトの解析なんて、無限に時間が掛かる

ブラウザで、JS を使わないように設定できるかな？

**Name_Not_Found** · 2022/03/30(水) 07:34:05.27

>>112
ブラウザの設定でスクリプトの禁止できたような

**Name_Not_Found** · 2022/03/31(木) 13:35:05.87

ChromeでQuick Javascript SwitcherってのでJSのON／OFFさせてるよ

**Name_Not_Found** · 2022/04/01(金) 14:09:01.74

URL貼り付けていい

**Name_Not_Found** · 2022/04/01(金) 17:58:53.98

ブログスキンとはどのようなことですか。
恐れいりますが、回答はテキストでください。URLだけではかえって焦点が絞り切れない

**Name_Not_Found** · 2022/04/01(金) 18:12:28.38

服の衣装替えみたいなもん

**Name_Not_Found** · 2022/04/01(金) 18:12:57.86

ムーミン谷にくる人ね

**Name_Not_Found** · 2022/04/01(金) 18:17:22.87

質問です。
<p>〜<br />〜<p/>のような１つの文章の塊が途中で<br />されている場合の文章で、<br />改行後の行頭を1字下げしたいのですが、どうすればいいのかわかりません。

html
<p>むかしむかしあるところに</p>
<p>おじいさんとおばあさんがいました</p>

css
p{text-indent: 1em;}

と書いてあるとして、

html
<p>むかしむかしあるところに<br />
おじいさんとおばあさんがいました</p>

と修正しました。（文章は質問用の例文です）

しかし、CSSのインデント指定が　p{text-indent: 1em;}　なので、２行目「おじいさんとおばあさんが〜〜」が行頭下げされていません。

調べたところ、２行目以降も行頭下げする方法として、

p {
padding-left:1em;
text-indent:-1em;
}

が出てきましたが、これは１行目の先頭が記号であるなど、文頭が１字下げされていない場合に使うものでした。
<p>〜<br />〜<p/>の場合はどうすればいいでしょうか？
　普通に２行目以降も<p></p>するしかないのでしょうか？

**Name_Not_Found** · 2022/04/01(金) 18:32:46.78

https://qumeru.com/magazine/23
なんかしっくりこないね

**Name_Not_Found** · 2022/04/01(金) 18:53:33.20

面倒だから全角スペース入れちゃえば

**Name_Not_Found** · 2022/04/01(金) 19:00:05.70

>>120
試してみます。

>>121
それも考えたのですが、SigilというツールでKndle本を制作しています。
コードはできるだけ最適なものにしたいのです。

**Name_Not_Found** · 2022/04/01(金) 19:05:58.17

できるだけ最適なものをと考えるなら
それこそ行頭字下げする場合はPタグで統一した方がよくね？

**Name_Not_Found** · 2022/04/01(金) 19:11:29.98

>>123
それな
字下げされているということは段落が違うんだからbrを入れてるのがおかしい

**Name_Not_Found** · 2022/04/01(金) 19:12:10.18

そうやね
>>119のなんとかやりたいであろう

<p>むかしむかしあるところに<br />
おじいさんとおばあさんがいました</p>
を簡単なhtml書いてブラウザに表示させてデベロッパーツールで見てみればいいが
cssを引っ掛ける場所がpとbrだけでbrで切られた後半のテキストには
何もないんだわ
jsならテキスト要素を探せるんだがねえ

**Name_Not_Found** · 2022/04/01(金) 19:25:15.50

>>123
最初はそうしていたのですが、ある部分（場面転換の部分）で空白行をつくろうとしたところ、
空白行が<br />や<p><p/>でやるのはよくないと出てきまして。
通常は段落のマージン（例　p{margin-bottom: 1em;}）でやるものだと。

しかし私は

html
<p>むかしむかしあるところに</p>
<p>おじいさんとおばあさんがいました</p>

css
p{text-indent: 1em;}

としているので、<p><p/>の段落のマージンを広げると
全行の間隔が開いてしまうことになります。
そこで調べた末に >>119 の質問に至りました。

質問を変えますが、下記１〜４行の文章があるとして、

１　<p>むかしむかしあるところに</p>
２　<p>おじいさんとおばあさんがいました</p>
３　<p>おじいさんはやまへしばかりに</p>
４　<p>おばあさんはかわへももをとりにいきました</p>

２行目と３行目の間にだけ空白行をつけたい場合、
どうするのがスマートでしょうか？

**Name_Not_Found** · 2022/04/01(金) 19:34:05.59

<p>ほげほげ</p>
<p class="hoge">ふがふが</p>

.hoge{
margin-top: 1em;
}

**Name_Not_Found** · 2022/04/01(金) 19:40:25.79

上で言ったcssを引っ掛けるとは
>>127
のような話

インデント下げのcssを引っ掛けたいタグにクラス名書いてやればいいだけだし
そのためにはbrぶった切りでは厳しい

**Name_Not_Found** · 2022/04/01(金) 19:40:32.03

紙の字下げの法則がそもそもwebのセオリーと合ってないんだからやろうとしてることがおかしい
どうしてもやりたいなら

<section>
<p>むかしむかし</p>
<p>おじおば</p>
</section>

とか

<p>
<span>むかしむかし</span>
<span>おじおば</span>
</p>

**Name_Not_Found** · 2022/04/01(金) 19:41:36.89

>>127
空白行が必要なpタグの前（または後）にマージン設定するパターンですね。勉強になります。今のところ最終手段としています。

**Name_Not_Found** · 2022/04/01(金) 20:50:08.92

久々にhtml4のサイト触っているけど、
昔はhtml5は吐きそうだったけど、今見るとhtml4のほうがうげぇってなるわ

**Name_Not_Found** · 2022/04/01(金) 21:11:21.02

webってC/C++でやった醜態をまたやらかしたイメージしかないんだよな
僕の考えた最強のライブラリとかああいうの

**Name_Not_Found** · 2022/04/01(金) 21:47:54.24

test

**Name_Not_Found** · 2022/04/02(土) 01:25:10.75

> 紙の字下げの法則がそもそもwebのセオリーと合ってないんだからやろうとしてることがおかしい
これな
Webサイトは出版とは違うんだと考えを改めた方がいい

**Name_Not_Found** · 2022/04/02(土) 01:32:10.29

Webでやるなら先頭1文字をデカくするドロップキャップの方が見栄えはいいかな

**Name_Not_Found** · 2022/04/02(土) 02:04:14.09

そもそも
text-indent: 0;
padding: 1rem;
とかじゃあかんの？

**Name_Not_Found** · 2022/04/02(土) 02:05:31.46

いや、padding-left: 1rem; か

**Name_Not_Found** · 2022/04/02(土) 02:30:46.43

そもそも字下げは文節で区切る場合に使用で段落毎に使うものではない

**Name_Not_Found** · 2022/04/02(土) 03:20:32.19

>>136
質問者の説明がわかりづらくてみんな一瞬それ思い浮かべたと思うけど
よく読むとそれだと下げたくないところも下がるってこと

**Name_Not_Found** · 2022/04/02(土) 16:26:36.32

英語のマニュアルを翻訳していて、斜体(italic)を全角でも斜体にしたいのですが、
span+transformするしかなさそうなのでコンポーネント化して独自タグ<nana>を作ってみようかなと思います(バルーンを出すタグは作ったことあるので

でも面倒ですし、何か他に上手い方法ってありませんか？

**Name_Not_Found** · 2022/04/02(土) 16:27:58.52

>>140
なさそう → 二、三ページぱっと見て見つからなかった

**Name_Not_Found** · 2022/04/02(土) 17:28:37.24

>>140
単純にcssに書いて <span class="i"> でいけた

**Name_Not_Found** · 2022/04/03(日) 00:36:53.74

フォントに斜体があるかどうかだから
（あるならiタグでいける）
transformが無難じゃね

**Name_Not_Found** · 2022/04/03(日) 01:03:44.44

Web編集で文字が斜体にならないときの理由と２つの対応方法
ttps://web-365.biz/made_in_wordpress/webfont-how-to-italic

**Name_Not_Found** · 2022/04/03(日) 08:25:19.48

テーブル内に複数の画像を横に並べて自動で画像が左スクロールし
各画像の左端がテーブルの左端に来たら５秒間スクロールし
５秒過ぎたら自動でスクロール再開これを繰り返す
このようなのはcssで作ることはできますか？
できるならどうやればいいんですか？

**Name_Not_Found** · 2022/04/03(日) 08:29:50.40

jsじゃだめなの？

**Name_Not_Found** · 2022/04/03(日) 08:38:05.80

アニメーション機能でそういう画像のスクロールはあったような

**Name_Not_Found** · 2022/04/03(日) 17:04:19.20

すいませんもしわかれば教えていただきたいのですが
ドリームウィーバーを使っておりまして
フォント単位のremを使用するとブラウザプレビューは正しく表記されるのですが
ドリの画面上のフォントサイズがデカく表示されてしまいます。差異がない表示にしたいのですが何か良い方法はないでしょうか

**Name_Not_Found** · 2022/04/03(日) 17:39:04.25

ドリームウィーバー使ったことないから分からないけどremはブラウザの標準フォントサイズを基準に決まるので
bodyにfont-size:10pxにしてremをemにするとかかなあ
例えばpタグで囲んだ文字を1.6em（16px）にしたり見出しを4.8em（48px）とか共通にできるのでは？

**Name_Not_Found** · 2022/04/03(日) 18:08:32.88

ブラウザプレビューできるんならドリームウィーバーのプレビューなんか使うな

**Name_Not_Found** · 2022/04/04(月) 01:57:49.15

ちんちんシュッ!シュッ!シュッ!

**Name_Not_Found** · 2022/04/04(月) 18:06:53.29

声高にドリームウィーバー！

**Name_Not_Found** · 2022/04/04(月) 20:22:29.03

デザインビューだけに適用できるcssの設定があったと思うけど
具体的にどうするかは忘れたし
今も残ってる機能なのかはわからない、、

**Name_Not_Found** · 2022/04/04(月) 20:48:04.13

このフォントは何ですか？
初めてみました。

http://imepic.jp/20220404/589040

**Name_Not_Found** · 2022/04/04(月) 21:11:32.79

マルチ

**Name_Not_Found** · 2022/04/04(月) 23:34:26.70

Google「フォントゴシック割れ」

**Name_Not_Found** · 2022/04/04(月) 23:35:27.24

HTML/CSS無関係定期

**Name_Not_Found** · 2022/04/05(火) 00:40:46.31

>>156
ありがとうございます！

>>155
死ね

**Name_Not_Found** · 2022/04/05(火) 01:43:23.80

>>158
死ね

**Name_Not_Found** · 2022/04/05(火) 02:05:27.90

質問のマルチポストは5chでは忌み嫌われているのでやめましょう
ましてやフォントの質問はスレ違いです

**Name_Not_Found** · 2022/04/05(火) 19:27:38.72

阿部寛が自身のホームページに言及「非常にシンプルで気に入っています」
https://news.livedoor.com/article/detail/21952256/

**Name_Not_Found** · 2022/04/06(水) 13:08:12.72

ニュース見てホームページ観に行ったけど
確かにシンプルやったwインターネット黎明編って感じ

**Name_Not_Found** · 2022/04/06(水) 14:50:46.55

その黎明期に作ったファンサイトが公式化したからね
同事務所の名取裕子のサイトも同じ黎明期designにしてる

**Name_Not_Found** · 2022/04/06(水) 18:24:31.40

>>154
マルチポスト乙

**Name_Not_Found** · 2022/04/06(水) 19:04:31.87

>>162
Win98の時代を思い出すぜ
テーブルでレイアウトとか普通にやってた時代か

**Name_Not_Found** · 2022/04/06(水) 20:48:37.99

いまだにリニューアルできない顧客の
table>tr>tdのタグ内でコンテンツ書いて埋めてるわ

**Name_Not_Found** · 2022/04/07(木) 01:43:04.89

>>166
テーブルレイアウトとはtdのなかにtable作ってその中にtable作っていく作法だぞ

**Name_Not_Found** · 2022/04/07(木) 14:33:13.69

一応スレもある

【爆速】阿部寛のHPから学ぶweb制作【SEO】
https://mevius.5ch.net/test/read.cgi/hp/1604434549/

**Name_Not_Found** · 2022/04/07(木) 18:22:36.43

>>167
もちろんそれ
それやってるぞー、FrontPageで
タグ打ちなんてやってられん

html4なのに、htmlタグの上にdtdのxhtmlって書いているだが昔何も知らずに俺が貼り付けたと思うが、特に不具合は起きないのこれ？

**Name_Not_Found** · 2022/04/07(木) 22:23:02.58

テーブルレイアウトっていうとcolspan rowspan駆使してたようなやつだな

**Name_Not_Found** · 2022/04/09(土) 01:49:35.46

そうそう、もうspanしまくりよ

**Name_Not_Found** · 2022/04/09(土) 04:13:16.72

ｽﾊﾟﾝ!ｽﾊﾟﾝ!

**Name_Not_Found** · 2022/04/09(土) 04:19:16.15

ﾊﾟﾝﾊﾟﾝ! ｽﾊﾟﾊﾟﾝ！

**Name_Not_Found** · 2022/04/09(土) 05:11:13.24

ﾁﾝﾁﾝｼｭｯ!ｼｭｯ!ｼｭｯ!

**Name_Not_Found** · 2022/04/09(土) 13:29:29.80

質問です、
html5のvideoタグでプレイヤー画面の映像とプレイヤーコントロール(下部コントロールではなく画面クリックで再生停止する方)の間にhtmlを仕込むことはできますか？

やりたいことはプレイヤーの上にhtmlコンテンツを重ねながらプレイヤー画面をクリックで再生停止をコントロールできるようにしたいです。

**Name_Not_Found** · 2022/04/09(土) 13:41:57.49

jsで動画のon/offをコントロールしたらできる

**Name_Not_Found** · 2022/04/09(土) 15:38:13.69

>>176
やはりjsで仕込むしかないですか

プレイヤー上に再生の三角マークとか複数のdivなどの要素が重なってるのでどれが再生停止のコントロールに紐づいてるのか分かりませんがcssで上手い具合に重なりの順序変えたりすればいけるのかなとか思ってました...

**Name_Not_Found** · 2022/04/09(土) 15:57:43.16

pointer-events:none

**Name_Not_Found** · 2022/04/09(土) 17:14:07.45

生のcssはiframeやobjectの中身にはアクセスできんよ
pointer-eventsなどで包括要素ごと操作禁止とかなら制御できるが

**Name_Not_Found** · 2022/04/09(土) 21:21:02.89

ありがとうございました
pointer-events:none で対応できました

不勉強でこんな便利なのが追加されてたとは知りませんでした......
これを機会に脳内のアップデートしておきます

**Name_Not_Found** · 2022/04/10(日) 00:48:45.79

ふつうに知識のアップデートどいいでしょ、何だよ脳内のアップデートって

**Name_Not_Found** · 2022/04/10(日) 00:51:22.72

どっちでもいいだろ

**Name_Not_Found** · 2022/04/10(日) 06:47:10.09

今のネットって古い書き方のジャンク情報とかも溢れてるからきついよな
無駄に広帯域の回線契約してジャンク情報の中からあたり情報探す
時間とか考えるとまとめてある本買ったほうがいいまでの時代になってしまった

**Name_Not_Found** · 2022/04/10(日) 07:20:06.39

>>183
Qiita「今日はこういう事例を投稿します・・・おぉっとここでトラブル発生、うまくいかないので次回へ続く」

みたいな情報はなんとかして欲しい

**Name_Not_Found** · 2022/04/10(日) 07:42:51.48

>>184
ほんと

**Name_Not_Found** · 2022/04/10(日) 09:14:14.46

クソ記事クソサイトはChromeの拡張機能で検索結果に出てこないようにしてる
イラッとしたら登録
二度と出会わなくて済むし収益への貢献も防げる
沙汰していくべき

**Name_Not_Found** · 2022/04/11(月) 01:19:04.58

サイトNG機能は全ブラウザに既定であって欲しい

**Name_Not_Found** · 2022/04/11(月) 01:49:25.32

naverまとめはドメインごと当時ブロックしてた

**Name_Not_Found** · 2022/04/11(月) 09:56:59.93

コメント欄あるだろ
古いって書きまくってこいよ

**Name_Not_Found** · 2022/04/11(月) 17:58:27.21

>>189
そんなゴミページを相手にする時間がもったいない

**Name_Not_Found** · 2022/04/11(月) 19:54:28.60

コメントも承認されないだけだろう
野次っても意味ない

**Name_Not_Found** · 2022/04/13(水) 08:30:43.07

H1：野菜の紹介
section>H2：根菜類
ul>li>figure>img 写真
figcaptionにタマネギ、説明にpタグで○○と入れたい時

タマネギって何のタグ使えば良い？
H3は見出しだからちょっと違う感じがするような・・
セマンティック的には何が良いんだろう

**Name_Not_Found** · 2022/04/13(水) 10:58:49.71

ｄｌタグでdtがタマネギでddに説明でもいいだろう

**Name_Not_Found** · 2022/04/14(木) 00:38:44.56

dlあんま使ったことない
これ便利そう

**Name_Not_Found** · 2022/04/14(木) 00:52:58.60

めんどくせーから全部Div
どうせH3以下と他タグの構造なんてSEOに影響しないし
グーグルも大して判定しない

**Name_Not_Found** · 2022/04/14(木) 09:33:48.07

でも同業者にソース見られてこいつレベル低いなｗとか思われる

**Name_Not_Found** · 2022/04/14(木) 10:04:24.08

綺麗にタグ書いても別にいいことないんだよな
どこかの案件に入ろうとする時に断られるかもしれないけど

**Name_Not_Found** · 2022/04/14(木) 10:28:22.63

divの入れ子って昔良く見た景色だが
今見ると狂気に見える

**Name_Not_Found** · 2022/04/14(木) 10:29:54.44

>>195
そういう問題じゃなくなんか気持ち悪くならないか？
性格の問題かねえ

**Name_Not_Found** · 2022/04/14(木) 10:44:50.15

tableよりマシじゃね
エンジニアが書くと全部divになる
classにスタイルつけるから要素はなんでもいいんだよな