HTML/CSS のどんな質問にも優しく答えるスレ 50
■ このスレッドは過去ログ倉庫に格納されています
まったくの初心者です。
いま社員バイトのみんなが手書きしたり会社PCにあるエクセルファイルに入力してる日報を、
在宅の人も共通にできるようweb上で入力してもらう仕組みを作ろうとしています。
年末までに完成させるよう、勉強しています。
お聞きしたいのですが、ユーザーに自由文字列を入力してもらうのはinput type=textしかないのでしょうか?
エクセルのシートで縦に50個くらい並んでるセルに入力してもらってるのですが、これをwebページ(html文書)にするなら、
input type=textを50個書き連ねておくものなんでしょうか?
tableで表を作っておくとしても、その表内で入力を受け付けるなんてありえないですよね?
やはり、input type="text"を並べて、そのひとつひとつに名前を付けておかないと処理できないと考えてよいでしょうか?
エクセルだと、VBAで、カウントしながらループで全行を走査してたのですが。 inputで合ってる
改行含めた複数行に対応させたいならtextarea
でも、ExcelをWebで使えるようにするだけなら
業務用のGoogleアカウント作るor作ってもらってスプレッドシート共有の方が楽じゃないかな? >>3
ワークシートっぽい入力ができるように作るとおもう
初心者とのことなので正直かなり難易度が高いんじゃないかな
たとえばこんな感じ
handsontableのデモ(ちなみに仕事で使うなら有償)
https://handsontable.com/docs/demo/
フリーでもあるだろうけど結局html+cssだけじゃなくて
javascriptの知識も必要になるんじゃないかな >>4
ありがとうございました!
グーグルスプレッドシートというアイデアはありませんでした。
会社のお金と時間でwebプログラムの勉強ができるならラッキーだと思ってたので。
ほんと、ありがとうございました。 >>5
ありがとうざいました!
たしかにこれを使いこなせたら、エクセルからwebシステムに見た目そっくりのまま移行できそうですね。 Sassからコンパイルする所まで理解し、
BEMやFlocssの命名は迷いなくていい利点も何となくわかってきたところですが、
しかしいくつもCSSファイルを細分化する必要性があるかわかりません。
大規模サイトならメリットあるのはわかるが
LPや名刺サイト系でもブロック別にCSS分割沢山するものですか。 >>8
FLOCSSなどの命名ルールにはそれぞれ設計者がどれくらいの規模、と想定してるから
まず規模に見合う設計を選ぶべきだが
こういうルールというのは他の人が同じ規則に準じて把握・推測できることに意味がある
極端に言えば自分しか更新しないならなんでもいい
慣れ親しんだ設計がやりやすいのであれば必要に応じてコンパクトにすればいいんだよ
フォルダじゃなくて_foundation.sassや_component.sassみたくまとめたり
プロジェクトとコンポーネントはどっちかしか使わず細分化をやめるとかね >>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 などを使う人が使う、
プロのウェブ系開発者向きのアプリだから、難易度は高い >>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 タグを閉じ忘れても、後方に影響しない方法ってありでしょうか?
例えばワードプレスの記事内で閉じ忘れが発生した場合、sidebarやfooterのテンプレートにも影響しちゃいますね。
今はブロックエディタだからんなこともないのかしら。 >>12
> 方法ってありでしょうか?
あるでしょうか?なら省略可能なタグ以外は無い
閉じ忘れないようにしたいなら、エディタに機能拡張でも入れて自動的に閉じてもらえ
あとはWordPressスレでやれ
WordPress(ワードプレス)その28
https://mevius.5ch.net/test/read.cgi/blog/1461783816/
WordPressの困った人のスレ 5
https://mevius.5ch.net/test/read.cgi/hp/1643627327/ firefoxってfont family効かないんでしょうか?
おま環でしょうか? >>14
Firefoxがこの世に出た時からサポートしてるfont-familyが効かないと思うか?
とりあえず書き方間違ってないか確認しろ
font-family - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-family ブラウザで一回表示してChromeだと検証(デベロッパーツール)とかで
自分の思うように動いてないところがどう解釈されてるか見たほうがいいよ
まあかかってないってことはブラウザに無視されたとかそんなのだろうけど chromeだとちゃんと効きますからね
書き方の間違いではないかと、、、 検証ツールみても横線で消されていることはないですね
importantしてみても駄目です
他のスタイルは適用されるので、セレクタの間違いではないようです 超基本的な質問で恐縮なのですが調べてもわからないので助けてください・・
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"」
この部分は何に当たるのでしょうか? ここの記述を手掛かりにスクレイピングしたり、ここのデータ自体を取得したいのですが、
タグやクラス名で指定しても取得できません すみません allow page choice fontの設定でした(´・ω・`)すまん、、、 >>23
ありがとうございます! これです! attrsで取得できました!!
お手数おかけしました >>9
遅くなりましたがご回答ありがとうございます
小規模サイトでひとりで構築するなら自由に…ということですね
1ページ完結名刺サイト、LPサイトだと、昔みたいに、
reset、base、customizeのファイルくらいしかいらないと思ってしまうんだけど
今時の作り方じゃないから、同業者から見ると格好悪いのかなと気になっています https://jsfiddle.net/bgegg/g0vw3qn7/1/
codeタグを使ってもレンダリングされるんですが、ソースコードをそのまま表示させる方法はありますでしょうか?
htmlとjavascritp、cssなどのソースを使います。 置き換えずにやる方法ってないんですかね?
textareaくらいですか? とりあえず「html シンタックスハイライト」でググれ >>32
手動置き換え面倒ならjsの文字列としてhtmlを入れて
replaceを2回かけるミニプログラムでも書いておけばいいんじゃないの? >>32
たいていはうまくいってしまうけど正しくはtextarea内もべたで書く時は特殊文字を置換しないとだめよ >>35
置き換えないとだめなんですねこれ
ありがとうございました
簡易的になのでtextareaでもokでしょうか?
>>36 >>28
ソースを別ファイルにしてもよければ
<iframe src="./hoge.txt"></iframe>
とか 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%
} >>40
ありがと
素直にワードプレスにします(´・ω・`)
無料ブログはつらい >>42
右寄せにならないのはmodal-headerがflexboxになってて、justify-contentがspace-betweenになってるから
モーダルのヘッダー部分にタイトルとか入れないなら、<div class="row">の前にダミーで<h5></h5>とか入れるか
もしくはmodal-headerのclassにjustify-content-endを入れれば右寄せになるんじゃない? >>44
なるほど、参考にさせていただいてもうちょい試行錯誤してみます!
ありがとうございました! https://imgbox.com/73H4GsmU
画像をfloat leftで寄せて、文字を回り込ませているのですが、文字と画像の余白はpaddingもマーディンも効きません
何を使うといいんでしょうか? >>47
>>48
あっ ありがとう(´・ω・`) Webページで日付表示の指定方法があったら教えてください
目的には「2022-03-13」などと指定しておいて
ブラウザの言語指定に基づいて
米国語のブラウザでは「Mar. 13, 2022」
日本語のブラウザでは「2022/03/13」などと
自動的に日付表示させる方法があったら教えてください JavaScriptでブラウザの言語判定して日本語なら〜英語なら〜で表示させないと無理では?? >>51
かなり面倒みたいですね
Javascriptで検索したらtoLocaleDateStringってのがヒットしました
組み込めるかどうか検討してみます。 -webkit-overflow-scrollingっていつのまにか不要になっていた(デフォルトで慣性スクロールが効くようになった)んですね
全然知らんかった もう書く必要ないのか Autoprefixer使ってるから、その辺はあまり気にしなくなった cssなんですが、
例えば
.h1 {
color: #FFF;
}
@media screen and (max-width: 768px) {
h1 {
color: #FFF;
}
}
上記のように、基本のCSSに加えてモバイル向けのメディアクエリも設定する場合、基本のCSSの方には
@media screen and (min-width: 769px)
とかつけた方がモバイルの方は描画が速くなったりするのでしょうか?
基本のCSS適用後にメディアクエリでモバイル用CSSで上書きされるのと、
基本とモバイル用のそれぞれでメディアクエリ適用有無の判定が行われるのと、
どちらがよりよいのでしょうか。 >>56
排他の方が早いが4G回線でも体感できないくらいの差しかない web制作の学習を始めた初心者です。
インプレス社から出版されている「Sassの教科書」で
学習しているのですが利用環境を整えるためのインストール作業で手間取っています。
Node.jsをインストールした後npmコマンドを用いてセットアップ済みの環境を
インストールしていくのですがnpm installコマンドを実行しても
インストールがされません。エラー表記があまりに多くどこを見ればよいかも
わからない状態です。
原因究明のためにはエラー内容をコピペしたほうがいいでしょうか?
自分でも意味があまりわかっておらず不明な説明かもしれませんが
どなたか回答いただければ 今時はvscodeの拡張でコンパイルする方が簡単よ 何だか分からんがnode.jsインストールと同時に
既にnpmもインストールしちゃったとか? 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するのと同じ 「Sassの教科書」は、漏れも読んでいるけど、2017年の本だから、
今では、VSCode の拡張機能で、簡単に出来る
ただし、本格的にプロジェクトを作って制作するなら、
npm, gulp, npm scripts などで、タスクを定義して使う ただし、Live Sass Compiler は、
@import の代わりの新構文、@use, @forward に対応していないらしい
その場合は、他の拡張機能を探すか、
gulp, npm scripts で、Dart Sass を使うかする必要がある
SASSは、Ruby Sass, node-sass(LibSass)は廃止で、Dart Sassへ移行する このキモい句読点はいつもKENTAとかいうYouTuber?をステマしてるやつだな >>57
遅くなったけれどありがとう
0.1秒表示が早いだけでもかなりの影響があると聞いていたのでとことんやるべきかと思ったのですが、それを踏まえてもなおそこまではやらんでもというレベルなのでしょうかね
もうやり尽くした、あとはこれくらいしか...となったら突き詰めてみるくらいで考えてみることにします >>66
究極的にはセレクタの長さとかまで言い出すことになるからな
minifyしときゃなんでもいいよ もう誰も気付かないどころか、自分でも体感的には
全く気付かない誤差レベルの自己満足の世界だな 58です。
vscodeの拡張機能でコンパイルできるのですね。
回答してくださった方々ありがとうございました。 >>63
に書いたけど、
新しい構文、@use, @forward に対応した、VSCode の拡張機能があるらしい
【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方
https://yumegori.com/vscode-dart-sass-setting chromeのインスペクタでcssの編集出来なくなってないですか?
vivaldiなんですけども、どないしたらいいですかね WordPressのCSSの変更を試みています。
ブログで長い縦スクロールのサイト。
上部にメインメニューでプルダウンメニューが有ります。
そのプルダウンメニューにはたくさんのメニュー項目があります。
しかしそのメニューはブラウザのウィンドウの高さを超えることができません。
メニュー要素の高さを3000pxとかにしてもブラウザのウィンドウの高さでカットされています。
縦へのスクロール量はどんなに多くなっても良いので、
メニュー要素の高さは全表示させたいです。
とは言え、メニューの高さ以上にページ自体の高さはありますが。
どうやったら、メニューの高さを設定した数値に保てるでしょうか? どっかにoverflow:hiddenあるんじゃないの 昔frontpageを使っていたときはテーブルの列を消そうと思ったらwordやexcel感覚で列選択して消していたけど
最近はvscodeとか使っていると列を消したいときはソースを行ごとに触るしかないの?
html貼り付けて列のタグを削除とかできるサイトとかあれば便利そう ブログをやっているのですが
ブログタイトルにh1
記事タイトルにh2が使われているテンプレートを使っているのですが、
記事本文で見出しタグを使う場合h1から使うのかh3から使うのかどちらが正しいでしょうか
初心者なので変なこと書いてたらすいません 書籍などの目次(見出し/小見出し)をイメージするとわかりやすいよ
h3 ありがとうございます
書き込んだあとに思ったけどテンプレートできっちり書いてくれてるなら記事本文では下手にhtml記述しないほうがいいような気もしました 質問です
自分が作ったHTMLの中の、
あるフォントで指定した日本語部分を
そのフォントがインストールされていない他人の端末で表示したときに
豆腐文字で表示されますでしょうか、
それとも便宜的に別のフォントで表示されますでしょうか?
また、自分がフォントを指定しなければ、この問題は回避されますでしょうか?
よろしくおねがいします font-familyの優先順位に従う
何も指定してない場合ブラウザやOSの仕様による CSSフレームワークって使わないで書くのが普通なんですか?
たくさんフレームワークあって別の人があとから修正することを考えたらいちいちそのフレームワークの学習コスト取らせるのは現実的ではないから、という理由でしょうか? 基本を知ってればフレームワークは応用にすぎん
学習コストうんぬんを考えるのはそういうレベルの人材 CSSフレームワーク使ってる人はHTML/CSSで書ける
ウェブアプリなんか作る人がそっちよりも機能実装の方に力入れたいからフレームワークを使うんだと思う ほぼ、Bootstrap。
少数派が、Tailwind, Bulma
CSS フレームワークを使わないと、まず無理。
まともに作るのに、とんでもなく時間が掛かる
responsive とか、様々な場合を考えないといけない。
バグを排除できない このキモイ句読点はもしかしてサロンコピペ荒らし野郎か vivaldiなんですが、インスペクタからcssの編集が出来なくなることがあります。
ヘッダーにcssファイルへのリンクがあり、そのリンク先にcssが記述されています。
しかし、ヘッダまでしか追えていないので編集できんのです
chromeは問題ないです 有名どころのサイトなので明言したくないんですが
ページをスクロール等操作していた際に<style id="xxxというのがいきなり現れるのはどういう仕組みなんでしょうか
それを出てくる前に塞いでおきたくてheadやbodyを調べたんですが、id=に続く文字列はどこにも見つかりません
訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか >>95
ある程度わかるけど
そのstyleタグの前後をきちんと書かなきゃ JavaScript, jQuery などでプログラミングして、スクロール位置で判断する
例えば、100 スクロールされて、scrollTop が、100になったら、
id="xxx" の要素を作って、どこかの要素に追加して、
そのid="xxx"の要素に、jQueryで、スタイルを付ける
$( '#xxx' ).css( 'color', '#f00' ); >訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか
これはどういう意味なんだろう ■ このスレッドは過去ログ倉庫に格納されています