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
0367Name_Not_Found
垢版 |
2021/01/09(土) 18:42:21.70ID:???
>>366
だったら、CSS部分の..article-containerにflex-wrap: wrap;追加するぐらいでいいんじゃない？
現状でもスマホは2列になってると思うけど
0368Name_Not_Found
垢版 |
2021/01/09(土) 19:02:34.05ID:???
>>367
ありがとうございます
入れました！
スマホは二列ですが
WEBだと
画像6個で縦に並んでしまいます
大きさを固定して
3行で2行、3行と並んでくれるようにしたいのです、、
0369Name_Not_Found
垢版 |
2021/01/09(土) 19:22:49.75ID:???
>>368
いや、どこに入れたのか知らんけど
先ずは/*=== article window ===*/って書いてあるとこのちょっと下にある
.article-containerの直下にあるarticle-container単独で入ってる行を消して。
んで、同じ箇所の.article-containerの後の{}でくくられた中にflex-wrap: wrap;を入れて。
で、入れました！ってのは間違ってると思うので元に戻そう。
0370Name_Not_Found
垢版 |
2021/01/09(土) 19:57:44.03ID:???
>>369
すみません、検索していた文字をそのまま打ち込んでしまってましたｗ
それで、
下に並んでいるイラストの枠のように幅固定なりサイズ指定などはできますか？
.article-box{
box-sizing:border-box;
border:2px solid whitesmoke;/*画像の枠色*/
width:25%;
padding:0px;
margin:30px 15px;/*画像周りの空白*/
overflow:hidden;}
このへんだと思うのですが
width:25%;を大きくすると2行になってしまいます。
0371Name_Not_Found
垢版 |
2021/01/09(土) 20:06:53.21ID:???
答えてくれる人とメールなりでやりとりすればいいのでは？
0372Name_Not_Found
垢版 |
2021/01/09(土) 20:45:58.16ID:???
>>370
幅固定のリサイズ指定など、ってのがよく分からんけど
現状、article-boxの左右のmarginが15pxあるのでwidthとの合計が、.article-containerの幅をオーバーすると、改行される。
3列のままarticle-boxの幅を広げたければ、例えば
width: calc(100% / 3 - 2%);
margin: 30px 1%;
にするとか。
widthの部分は横幅100%を3分割して（3列だから）、marginが左右1%ずつで2%分を引くっていうのがcalcのカッコ内の計算。
margin部分の30pxは上下のmarginを指していて、1%は左右のmarginを指す。
なので、もっとarticle-boxの横幅を広げたければmarginの左右幅を、もっとpxとかで小さな値に変更して、それに合わせて
widthの2%部分を変更すればいい。
0374Name_Not_Found
垢版 |
2021/01/09(土) 20:59:05.73ID:???
ほぼ占有じゃん
過疎ってるスレとは言え度が過ぎてると思うよ
0376Name_Not_Found
垢版 |
2021/01/09(土) 21:48:52.67ID:???
>>372
ありがとうございます！！
とてもとても理想になりました！！感謝です
超わかりやすく解説ありがとうございます。
調整してみたいと思います。
0378Name_Not_Found
垢版 |
2021/01/10(日) 00:18:58.13ID:???
>>374
微妙に違うスレあったのね
次スレ候補検索で間違って移住してしまってのかも
移動しますわ
ご迷惑をお掛けしました
0379Name_Not_Found
垢版 |
2021/01/28(木) 20:50:52.64ID:???
こんにちはツイッターとの連結についての質問です
Bloggerでの
https://2021testsaite.blogspot.com/
よろしくお願いいたします。

https://www.howtonote.jp/blogger/setting/index4.html
このサイトのように全6行の1.2行めをを書き換えて
新しい投稿に画像の記事を書いてUPしても
ツイッターで表示されません。
http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html
こちらの方でやっても書き出されません。
新しい投稿をすれば連結するという期待をしてるのですが
なにか根本が違うのでしょうか？


理想の形は
https://imgur.com/a/wwtQxHl
です
0381Name_Not_Found
垢版 |
2021/01/28(木) 23:17:21.49ID:???
>>379
>>380
ブログに投稿と同時にtwitterに自動投稿をしたかったのですが
Bloggerは非対応のことでした。
お騒がせいたしました！
0382Name_Not_Found
垢版 |
2021/02/16(火) 06:43:11.39ID:???
すいませんHTMLの入門書を一冊読み終えた程度の入門者なのですが

remとemと％とvhとvwがよくわかりません…
凄い簡単な例を出して教えて欲しいです
1.375remとか書いてあったらどういう計算をすればいいのでしょうか？
0385Name_Not_Found
垢版 |
2021/03/06(土) 07:09:12.69ID:???
埋め込みSVG使えばいいのに、とか言っちゃいけないんだろうな(言ってる)
0386Name_Not_Found
垢版 |
2021/03/06(土) 13:38:05.27ID:???
こういうことも出来ますよってだけで
効率とかじゃないんだよ
0387Name_Not_Found
垢版 |
2021/03/06(土) 16:32:06.65ID:???
人のふんどしで何やってんだか
0388Name_Not_Found
垢版 |
2021/03/06(土) 20:35:11.87ID:???
アニメーションGIFでいいのでは？
0391Name_Not_Found
垢版 |
2021/03/07(日) 01:51:48.48ID:???
こういうのって何かツール使うの？
それともちまちま
ここら辺の位置にこの楕円を…とか
頭の中で想像しながらコーディングするの？
0392Name_Not_Found
垢版 |
2021/03/07(日) 01:58:21.29ID:WJqUpaPA
ツール使うならSVG画像でしょうね
これはエクセルアートとかそのたぐいだよ
ちまちまやるしかない
0395Name_Not_Found
垢版 |
2021/03/07(日) 12:14:43.65ID:???
昔はテーブルでマリオとかファミコンのドット絵を描くとかあったなあ
0396Name_Not_Found
垢版 |
2021/04/04(日) 09:02:19.32ID:???
https://www.irasutoya.com/search/label/%E9%81%8B%E5%8B%95
このページの2段めの階段を上り下りするサムネイル？2枚ありますが
クリックすると縦に2枚の絵が表示されて
サムネイルで2つ表示するようにしてると思うのですが
自分で普通に入れてもなりません。
https://2021testsaite.blogspot.com/
これのやり方を知りたいのです。
よろしくおねがいします
0399Name_Not_Found
垢版 |
2021/04/04(日) 10:42:37.26ID:???
>>398
個別ページの最上段の画像が、一覧ページのサムネイルに使用されるっていう仕様だから
一覧ページのサムネイル用に別途画像を用意して、個別ページ最上段に置いてる
でも個別ページでは表示させたくないから非表示にしてるってだけ
0400Name_Not_Found
垢版 |
2021/04/04(日) 12:12:50.83ID:???
>>399
ありがとうございます
自分でやってみるとサムネ画像も表示されるんですど
どこが非表示の書き込みなんでしょうか？
0402Name_Not_Found
垢版 |
2021/04/04(日) 14:36:54.99ID:???
>>400
いらすとやのHPをブラウザのデベロッパーツール使って見てみると
個別ページに表示されている画像の上あたりにサムネイル用画像が
置いてあって、display: none;で非表示されてる

とりあえず、これでも読んでみ

目から鱗！Bloggerのアイキャッチを任意の画像にする方法
ttps://www.iloilo-good.com/2017/04/blogger_20.html
0404Name_Not_Found
垢版 |
2021/04/04(日) 16:41:46.53ID:???
>>402
ありがとうございます。読んでみます！
0407Name_Not_Found
垢版 |
2021/04/04(日) 19:00:44.17ID:???
>>405
なんでサムネイル用画像2枚貼ってんだ
まぁ、2枚貼ったうち1枚目は非表示になってるから動作的には正しいわな

ドット？そんなもん知らんがな
0408Name_Not_Found
垢版 |
2021/04/04(日) 19:12:19.06ID:???
>>407
イラストやだと、
https://jsfiddle.net/15k0tsqL/
このようにページに貼って表示しないように難しくやってるけど
教えてもらったものは、画像を引っ張ってくるやり方ですね
ありがとうございます！
Bloggerって画像どこに保存すればいいのか謎
0409Name_Not_Found
垢版 |
2021/04/04(日) 19:12:51.71ID:???
いらすとやの方はページソース473行〜の
img.postthumb{
width:1px;
height:1px;
display:none;
}
で消してる
0410Name_Not_Found
垢版 |
2021/04/04(日) 19:24:43.47ID:???
>>409
ページに入れりゃいいってもんじゃないんでしょ？
0411Name_Not_Found
垢版 |
2021/04/04(日) 23:39:19.99ID:???
なでこんな面倒なことしてんだイラスト屋
0412Name_Not_Found
垢版 |
2021/04/05(月) 09:11:20.32ID:???
javascriptで制御したほうが楽
0413Name_Not_Found
垢版 |
2021/04/05(月) 18:52:25.78ID:???
CSSで済むならそれにこしたことはない
0414Name_Not_Found
垢版 |
2021/04/05(月) 20:40:05.03ID:???
>>413
それ
特に、どのブラウザでも効くやつ
0417Name_Not_Found
垢版 |
2021/04/06(火) 14:22:33.94ID:???
>>415
設定＞投稿＞メインページに掲載する投稿数の上限
0418Name_Not_Found
垢版 |
2021/04/06(火) 14:42:14.84ID:???
>>417
すみません、、ありがとうございます
0419Name_Not_Found
垢版 |
2021/04/24(土) 22:10:13.74ID:???
既存のサイトをダークテーマに移行したいのですが、cssを自動でダーク仕様に書き換えてくれるソフトウェアはないでしょうか？
0421Name_Not_Found
垢版 |
2021/04/26(月) 07:36:08.55ID:???
JavaScriptのイベント処理で
取得要素.style.backgroundColor
取得要素.style.color
で背景と文字の色変えるだけいいやん
0422Name_Not_Found
垢版 |
2021/04/30(金) 20:39:33.74ID:29Vy1AEj
初めまして
先日からiPadでhtmlのプログラミングを勉強し始めました。
テキストエディタはTextasticを使っています。
画像の載せ方を勉強しているのですが、＜img src=”画像アドレス”＞の画像アドレスの部分がわかりません汗
画像データは自作したhtmlファイルと同じicloud上のフォルダへ格納しています。
どうすればよろしいでしょうか？
ご教授願います。
0423Name_Not_Found
垢版 |
2021/04/30(金) 21:54:31.65ID:???
>>422
どう分からんのかが分からんけども、とりあえずコレとか読んでみて

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
ttps://webliker.info/78726/

特に相対パスってとこを重点的に読んで理解しておくといいかも
0424Name_Not_Found
垢版 |
2021/05/01(土) 14:47:07.21ID:zzljiKLe
>>423
iPadでのパスの書き方がわかんないんですよ汗
Win10とかならやったことあるので分かるんですが・・・
やっぱり初心者はiPadとかでいきなり勉強するより
PC買って正攻法で勉強進めた方がいいみたい
諦めてPC買って勉強することにします。
参考アドレスありがとうございます。PC購入したら活用させていただきます！
また分からないことがあったらよろしくお願いします。
ありがとうございました。
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にしとけって言っただろ
新着レスの表示
レスを投稿する

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