X

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

0001Name_Not_Found
垢版 |
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
https://mevius.5ch.net/test/read.cgi/hp/1517028608/

■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/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
0425Name_Not_Found
垢版 |
2021/05/01(土) 16:00:33.11ID:???
>>424
その画像ファイルはhtmlファイルと同じフォルダにあるの？
同じフォルダ内なら
src=”画像ファイル名“でいい
さらにフォルダ内にあるのなら
src=“フォルダ名/画像ファイル名“でいい
一つ上のフォルダにあるんなら
src=“../ファイル名”
さらにフォルダ内にあるのなら
src=”../フォルダ名/ファイル名”
2つ上なら../../、3つ上なら../../../となっていく
それはあまりよろしくないから普通はフルパスで指定する
ローカル環境の場合は
src=”file:///パス”
webサーバー上の場合は
src=”http://ドメイン名/パス”

とりあえず作ったhtmlファイルと同じフォルダ内に画像置いて試してみては？
0426Name_Not_Found
垢版 |
2021/05/11(火) 19:57:28.33ID:Vj3miyqd
macbook airを使ってます
エディターはmiとAtomならどちらが良いですか？
出来れば理由もお聞きしたいです
0428Name_Not_Found
垢版 |
2021/05/12(水) 01:11:42.73ID:???
atomはとっくの昔に開発終了してるから
多くの人がvscodeに乗り換えてる
0429Name_Not_Found
垢版 |
2021/05/12(水) 01:54:11.47ID:???
今はvscodeかな
macならターミナルでvimも使えるようになるべき
0430426
垢版 |
2021/05/12(水) 18:04:35.88ID:QCKlID4Z
アドバイスありがとうございます
0431Name_Not_Found
垢版 |
2021/05/12(水) 18:06:52.74ID:???
CSSでmarginとかline-heightのピクセルを書く時に０pxの場合は０だけでも良いですか？
何かで不具合でたり0pxと書いた方が良かったりしますか？

例
h2 {
margin :20px 0 20px 0;
}
0432Name_Not_Found
垢版 |
2021/05/12(水) 18:10:11.87ID:???
0pxを0としたところで不具合が出る事は無い
0434Name_Not_Found
垢版 |
2021/05/13(木) 17:02:03.91ID:???
progateでHTML　CSS学習→本を読んで実際にホームページ作ってみるというのを３冊分やりました。
次は何やるのが効果的だと思いますか？
HTML CSSよりもword pressなんかをやって幅広く学習した方が良いですかね？
0435Name_Not_Found
垢版 |
2021/05/13(木) 17:05:36.40ID:???
phpかnode.jsに手を出してみる、とか
0436Name_Not_Found
垢版 |
2021/05/13(木) 17:11:09.70ID:???
wordpressやるなら先にphpやっといた方が役に立つ
0437Name_Not_Found
垢版 |
2021/05/13(木) 18:17:40.85ID:???
HTMLで下記のようになった場合、1番上のh2は、他にもh2があるのでclassを付けるのはわかりますが、
2行目のtableは、他にtableが無いのでclass="info"とclassを付け無くても良いように思います。
class付ける、付けないって何か基準はありますか？



<h2 class="clear">店舗情報</h2>
<table class="info">
<tr>
<th>住所</th>
<td>〒199-9999 或留県九寺楽市九寺楽町3-30-8（<a href="access.html">地図</a>）</td>
</tr>
0439Name_Not_Found
垢版 |
2021/05/13(木) 20:19:52.47ID:???
個別にcssやjsで操作したい時にclass名を付けたりするけど
そうじゃなければh2もclass名は無くてもいいよ
0440Name_Not_Found
垢版 |
2021/05/14(金) 00:00:53.54ID:???
そもそもclassを何故付けるのかを理解してないな
0441Name_Not_Found
垢版 |
2021/05/14(金) 01:29:45.78ID:???
webサイト作るのにnode.js必要かぁ？
アプリ作りたいとかならわかるけど
0442Name_Not_Found
垢版 |
2021/05/14(金) 20:15:15.05ID:???
>>437
reset以外の目的では、要素セレクタは一切使わず、必ずclassをつける
これやっとかないと3年後には!importantまみれになるぞ
0443Name_Not_Found
垢版 |
2021/05/15(土) 00:37:19.89ID:???
Ruby on Rails では、HTML, SASS/CSS, JavaScript,
jQuery, Bootstrap, Node.js(Webpack, Babel)

VSCode, Linux, Docker Compose, CircleCI、データベース

最近のカリキュラムには、YouTube で有名な、雑食系エンジニア・KENTA も言ってるように、
Vue.js, React, AWS Fargate, Terraform も入る

最近のKENTAの教育体制により、Rails の未経験者のレベルが、
10年以上のプロよりも、技術力が上になった！

基本、Udemy とか、どこかの学校のカリキュラムが変わると、
すべての学校が追従するから、技術スタックが永久に上がっていく

就職競争だから、下がる事はない。
皆、KENTA・AWSのくろかわこうへいのサロンを掛け持ちしてる

ES2015 では、VSCode, Node.js(Webpack, Babel), Docker Compose などは必須
0444Name_Not_Found
垢版 |
2021/05/15(土) 03:01:40.45ID:???
Vue.jsとjQuery
なにが違うの？
どっちもライブラリーっしょ？
0445Name_Not_Found
垢版 |
2021/05/15(土) 12:19:14.98ID:???
質問です。メールを送って貰う用にmailtoタグでサイトにアドレスを記述したのですが、リンクをクリックしてもメールソフトにgmailを選んだ場合だけ何故か宛先が空になってしまいます。
フォームだと面倒くさがられるのであえてメールにしてるのですがどうしたらよいですか？記述は間違ってないはずです。
0446Name_Not_Found
垢版 |
2021/05/15(土) 13:51:25.87ID:???
記述はこれです。?subject=質問"やbccを消してもうまくいきません

<DIV align="center">
<a href="mailto:www@yahoo.co.jp?bcc=xxx@e.jp?subject=質問">上手くいかない場合はメールお願いします</a></DIV>
0447Name_Not_Found
垢版 |
2021/05/15(土) 13:54:16.67ID:???
なんか違うメーラーでも無効なアドレスがありますになってしまいます…
0448Name_Not_Found
垢版 |
2021/05/15(土) 15:26:39.96ID:7ACegGTZ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<table border="1">
<tr>
<tb>表1</tb>
<tb>うんこ</tb>
<tb>うんこ</tb>
</tr>
</table>
</body>
</html>

borderが機能してくれません。原因もわかりません。
助けてください、、、
0449Name_Not_Found
垢版 |
2021/05/15(土) 15:51:35.81ID:???
>>445
とりあえずコレでも読んで、スクリプト使ってみるとか

メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト
ttps://www.webcreatorbox.com/tech/mailto
0451Name_Not_Found
垢版 |
2021/05/15(土) 16:10:53.37ID:7ACegGTZ
>>450
凡ミスでした！
ありがとうございます、笑
0452Name_Not_Found
垢版 |
2021/05/15(土) 16:27:15.69ID:???
>>451
tdはtable dataの略って憶えとけば間違わない
0455Name_Not_Found
垢版 |
2021/05/16(日) 04:25:25.05ID:???
hはヘッダって予想がついたけどrはrowのことだったのか！へぇー！
0456Name_Not_Found
垢版 |
2021/05/16(日) 04:38:31.89ID:???
thead
tbody
tfoot
もお忘れなく
0457Name_Not_Found
垢版 |
2021/08/03(火) 19:31:46.22ID:???
preloadでcssを非同期でDLだけさせて、任意のタイミングで適用する方法と、
単純にbodyの閉じタグ直前で通常の方法で適用するのと
どっちがよいのでしょうか？

非同期でレンダリングをブロックしないからといって、レンダリングに必要な
ものをDLするのは妨げてますかね？
0459Name_Not_Found
垢版 |
2021/08/24(火) 03:50:24.02ID:???
HTML5ってなくなったのは本当なの？
結局HTML5勉強しないままだったんだけど
その前なHTMLでいけるのか？
0461Name_Not_Found
垢版 |
2021/08/24(火) 08:31:17.50ID:???
livingってのがもやっとするよねぇ。結局いつの仕様に合わせりゃいいのやら。
0462Name_Not_Found
垢版 |
2021/08/24(火) 14:41:05.82ID:???
別にバージョンが巻き戻るわけでもなしlivingの仕様に基づけとしか
0463Name_Not_Found
垢版 |
2021/09/01(水) 23:31:52.25ID:jjwc12/A
>>459
まじか...
ずっとHTML5でやってたんだけどww
0464Name_Not_Found
垢版 |
2021/09/02(木) 00:07:40.83ID:???
だからバージョンアップしないIEにしとけって言っただろ
0466Name_Not_Found
垢版 |
2021/09/02(木) 16:30:49.87ID:???
こんなもん別に今までのノウハウがあれば記述なんか大して違わんしすぐ慣れるだろ
0467Name_Not_Found
垢版 |
2021/09/02(木) 22:02:14.00ID:???
そうそうxhtml4からhtml5の時もそうだったけど別に差分要素だけ把握しておけば良いからコストは低い
0469Name_Not_Found
垢版 |
2021/10/01(金) 17:15:22.88ID:???
レスポンシブでサイトを作る際は、ウィンドウサイズはいくつで確認するという目安はありますか？

自分はこれまではなんとなくchromeのF12の開発者モード？で、
画面幅を375px〜1440px辺りで動かしつつ、見た目問題なさそうならいいかなと思ってましたが、
例えば↓のアニメ公式サイトだと、851px〜付近だと左側のほうの文字とかコンテンツへのリンクバナーが見切れてしまっています。
https://maidragon.jp/2nd/

「PCだったら1000pxくらい、タブレットだったら768px、スマホなら375pxで確認してそれ以外の幅のときは気にしない」
みたいなにやるのが主流でしょうか？
それとも制作者とか、制作会社の方針次第、といったところでしょうか
0470Name_Not_Found
垢版 |
2021/10/01(金) 17:33:13.25ID:???
主流はよくわからないけど、
スマホ320まで想定範囲に入れとくかな、、一応
0471Name_Not_Found
垢版 |
2021/10/02(土) 04:50:06.71ID:???
PCとタブレットのサイズは本業の人でも悩むやで
SPは最小サイズを横320pxか375pxにしておけば間違いはない
0472Name_Not_Found
垢版 |
2022/01/08(土) 11:36:14.71ID:???
ipadproのみを指定するmediaqueryの書き方ってありますか？
わかる方教えて頂きたいです。
0475Name_Not_Found
垢版 |
2022/02/04(金) 15:45:57.86ID:???
inkscapeでサイトのモックアップを作ってみたのですが、どうも寂しい印象になります。改善点があれば教えて下さい。

https://imgbox.com/w7l8a5Qa
背景などを使うと難易度があがるので、今回は白背景でいくつもりです。



参考にしているのはハテナやこちらのサイトさんです。

https://hatenablog.com

mochi1999.blog.えふしー２.com
0476Name_Not_Found
垢版 |
2022/02/04(金) 18:18:29.10ID:???
>>475
アニメDVDラベルは通報案件だな
ありがと
0477Name_Not_Found
垢版 |
2022/02/04(金) 18:25:18.79ID:???
>>475
デザインの質問？
白背景ならグリッド無し？だったらスクショはグリッド非表示でお願い
はてなブログのヘッダー要る？デザインテーマでも作るの？

デザインはとりあえず白背景のHTMLテンプレートとか拾ってきて
参考にしてみるといいかも
0478Name_Not_Found
垢版 |
2022/02/04(金) 18:42:55.71ID:???
>>476
何のことですか？
fc2のサイトのことですか？
0479Name_Not_Found
垢版 |
2022/02/04(金) 18:50:25.27ID:???
>>477
そうです、デザインの質問ですね、、、スレチかもしれませんが

グリッド消しました
https://imgbox.com/7x2WtYvf

はてなのヘッダはいらないのですが、何か寂しいなとおもって入れてみました、、、
これはデザインの問題というより、コンテンツがないから寂しいのかもしれません

白背景のサイトを参考にする場合、はてなのテンプレがきれいだなと思います
Fc2のサイトみたいに、背景がつくと難しくなるんですよね

色も白とグレーと黒くらいに制限してみようかなと思います
0480Name_Not_Found
垢版 |
2022/02/04(金) 19:09:24.99ID:???
>>479
なんか寂しかったら別のなにか追加すればいいのでは？
はてなのノリでそれ以外（アイコン等）もどこかのサイトからのコピペだったりした場合は
著作権的に問題ないものを使ってね
0482Name_Not_Found
垢版 |
2022/02/04(金) 19:38:23.74ID:???
質問なんですが、やはりブログカードは横長ではなくて、２列のタイプにしたほうがにぎやかな感じはあるんでしょうか？
これもつくってみますが
0483Name_Not_Found
垢版 |
2022/02/04(金) 20:10:11.48ID:???
仮で入れてるアイキャッチは全部同じ画像じゃなくて、何種類か別の画像にするだけでも印象が変わる
あと、もうちょっと余白やマージンに余裕を持たせて、文字もサイズ調整してメリハリ付けた方が見やすい
にぎやかにしたいからって隙間を埋めようとすると、ドンキの圧縮陳列みたいになるから注意な
むしろ余白を活かしてバランス取った方が、デザイン的には良いかも
0485Name_Not_Found
垢版 |
2022/02/08(火) 19:54:35.09ID:???
wordpressで作ったサイトなんですが、にぎやか感を出す方法ってあるでしょうか？
無料ブログの共通ヘッダとか個人的に好きなんですよね。

あんなのありますかね。
0488Name_Not_Found
垢版 |
2022/02/09(水) 08:59:14.00ID:???
デザインでの解決課題ではないの
0489Name_Not_Found
垢版 |
2022/02/09(水) 09:38:28.59ID:???
ウェブリングとか同盟バナーとか
0490Name_Not_Found
垢版 |
2022/02/10(木) 01:49:21.58ID:???
うごくSNSボタンでもつけとけよ
0492Name_Not_Found
垢版 |
2022/02/12(土) 23:45:11.54ID:???
閲覧数一覧のフォント1〜2段階小さいほうがいい
今のだと詰まって見える
ボタンのbackground画像はいらん
青い帯とボタンの間の余白もう10〜15px
検索は検索ボックスとボタンを1行で
最新記事と閲覧数一覧のbottomに線入れて
0493Name_Not_Found
垢版 |
2022/02/13(日) 10:26:30.75ID:???
回答どうも。
サイドバーのフォントサイズは、メインコンテンツが目立つように小さめにするってことでしょうか？余白が足りないということですか？
少し改善しました。

https://imgbox.com/2423el8Q
確かに余白を取るとサイドバーがスッキリ見えますね



デザインは特にここを参考にしてます。
こういうゴチャ感
https://blog.はてなblog.com/

トップのメニュー背景画像も、ここをパクってます、、、
0494Name_Not_Found
垢版 |
2022/02/13(日) 12:13:28.94ID:???
デザインカンプ制作のデザインだけに関する質問はスレチのような？
0498Name_Not_Found
垢版 |
2022/02/13(日) 14:20:54.48ID:???
誘導されてるのは質問者だけじゃない
0499以下カール君がお伝えします
垢版 |
2022/02/13(日) 15:43:29.92ID:DdRLUP6t
Facebookとhtmlはなにか関係ありますか？
0500Name_Not_Found
垢版 |
2022/02/13(日) 15:51:59.02ID:???
facebookのwebサイトはhtmlで作られている
0501Name_Not_Found
垢版 |
2022/02/14(月) 16:40:42.21ID:???
デザインってほんとむずいすね、、、
0502Name_Not_Found
垢版 |
2022/02/15(火) 01:50:20.99ID:???
えらい人はそれがわからんのです
0503Name_Not_Found
垢版 |
2022/02/15(火) 08:52:07.81ID:???
デザインの話は、スレ違いなのだけど、話題もないからいいのかね
0504Name_Not_Found
垢版 |
2022/02/15(火) 12:11:18.49ID:???
まずは色なしでデザインしたほうがいいんでしょうか？
白黒のみとか
0506Name_Not_Found
垢版 |
2022/02/16(水) 19:33:52.08ID:???
h1に画像を入れると画像に隙間が出来ます。
h1に設定したフォントサイズより小さい画像だとこのような現象が起こるようです。
高さ15pxほどです。

font-size:0などとすると大丈夫なんですが、これは正しいんでしょうか。
jsfidleで再現出来ませんでしたねぇ、、、;
0507Name_Not_Found
垢版 |
2022/02/16(水) 19:39:04.15ID:???
line-height 1 か
vertical-アライン bottom
入れてみて
0510Name_Not_Found
垢版 |
2022/02/16(水) 21:28:00.69ID:???
そうですか。
小さすぎる画像なので、今回はテキストにしときます。
0511Name_Not_Found
垢版 |
2022/02/18(金) 20:05:55.70ID:???
htmlをあまりいじれない場合は疑似要素を使うといいんでしょうか？
確実に動いてくれれば良いんですけどね。
0512Name_Not_Found
垢版 |
2022/02/19(土) 21:37:01.59ID:???
疑似要素でコンテンツをインナーに入れることは可能ですか？
0514Name_Not_Found
垢版 |
2022/02/19(土) 23:09:23.72ID:???
見た目の話ならpositionでどうとでも
0516Name_Not_Found
垢版 |
2022/02/20(日) 15:53:19.28ID:???
https://jsfiddle.net/bgegg/q2mte1c9/
ブログカードを３列にしたいのですが、gapによる余白はborder-boxに含まれないようで、３列になりません
改善策があれば教えて下さい

絶対値指定はあまりやりません
0517Name_Not_Found
垢版 |
2022/02/20(日) 16:17:42.91ID:???
gap消してliのwidthをcalc((100% - 2em) / 3)じゃだめ？
0520Name_Not_Found
垢版 |
2022/02/20(日) 17:35:00.89ID:???
8倍マンはこんな可愛くお礼しないとおも
0521Name_Not_Found
垢版 |
2022/02/20(日) 17:42:15.42ID:???
jsfiddleのユーザーが8倍マンだよ
0522Name_Not_Found
垢版 |
2022/02/20(日) 23:10:37.03ID:???
floatの前のinline要素がfloatの後ろに回り込む事に今し方気づいたのだけど、これって使っていい仕様なのかな？


MDN等でも

<section>
<div style="float:left">1</div>
<p>...</p>
</section>

とfloatは前側に置いてあって、俺もそういう使い方しかしてないし、見た事も無かったが、

<section>
<p>...</p>
<div style="float:left">1</div>
</section>

でも同じ見た目になるのだけど、これって使っていい仕様？
前後入れ替えるといったらflexかabsoluteかって話だったけど、場合によってはfloatもあり？
0523Name_Not_Found
垢版 |
2022/02/21(月) 00:43:33.09ID:???
522追記。

どうやらinline要素の幅が短くて、floatの幅と合わせても1行に届かない場合になるようだ。
522で言えば、<p>の中身が数文字で<div>の幅と合わせても<section>の幅に足りないと再現する。

ただこれだと、長さ依存であって現実的には使えないけど。
新着レスの表示
レスを投稿する

ニューススポーツなんでも実況