HTML/CSS のどんな質問に必ず優しく答えるスレ 32
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 >>329
それと
横列列が3つ埋まらないと
真ん中が空いてしまいます。
6つ入れれば大丈夫ですが、、 >>327
何度もすみません。
タイトルを入れ忘れたのでずれてたみたいです。
が、どれかが2行とかだと又ずれる仕様ですね、お騒がせしてすみません。
問題は5つだと真ん中が空く問題なのです >>329
元画像のアスペクト比で画像が出力されないのな
そもそも何のテンプレ使ってんの？
>>331
最下段が左右に分配されるのを左寄せにするのは#listのjustify-contentを
justify-content: flex-start;
ただ、これだとアイテムの間隔が無くなるから、.list-itemにmargin-right: 5px;とか適当に
タイトル無しで空きを埋めたければ、同じく#listのalign-items:を
align-items: stretch; >>332
全部できました。驚きです。ありがとうございました。
あのーPCブラウザーで画面幅を狭くすると
3行構成だったのが2行になります。
これは固定することって可能でしょうか？。。
それとですが
携帯側で見るとラベルとかそういったものが表示されなくなってます >>334
ちなみに
このページなんですが
https://irasutofree.blogspot.com/
WEBで見るとトップページが何も書かれていなくて
スマホで見るとしっかりラベルも表示され機能してます。
今までコードを教えていただいたHPです
https://2021testsaite.blogspot.com/
トップ画面のホームにすでに絵が並んでます。
これが関係してますか？ >>334
2列になるのはflexboxによるレスポンシブ対応になってる
3列固定は#main-contentのwidth: calc(100% - 346px);を、固定値にすれば可能だけど
画面の小さいノートPC等の端末で見る場合に横スクロールが発生する場合がある
>>335
PCでもスマホでも同じものしか表示されないけど、前者の方はそもそも記事投稿してある？
それぞれブログとしては全く別物だから、同じテンプレ使ってても記事無いなら何も表示されない >>336
ありとうございます
ページを作るわけですね？
トップのURLが変わってし舞うという理解でいいですか？
https://irasutofree.blogspot.com/p/blog-page_4.html?m=1
このサイトはスマホもちゃんと表示されますが、
コードを修正してきた今までのサイトは
https://2021testsaite.blogspot.com/p/main.html
このようにスマホでは上の方のHPのようにきれいに表示されません、、
何がおかしいのでしょうか？ >>337
WEBでスマホ画面確認する場合
どこかリンククリックして見るとおかしくなります >>337
> ページを作るわけですね？
違う。「投稿」に記事はあるのか？って話。
このテンプレの場合、トップページに表示されるのは「投稿」一覧であって「ページ」一覧ではない。
「ページ」を作成してもトップページには何も表示されないし、「投稿」に何も無ければ
何も表示されない。
「ページ」と「投稿」は別物だから、それぞれの個別記事はPCでもスマホでも表示のされ方が違う。 >>339
ありがとうございます
記事は投稿されています。ナマケモノの写真を投稿からUPしてみました
https://irasutofree.blogspot.com/search/label/%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88
それ以外にイラストも以前に投稿してみたものです。
しかし、オレンジ色の女の子のイラストやホームを押すと
又空白に戻ってしまいます。何か間違ってますでしょうか？
それとスマホの方はWEBの左のカラムがそのまま表示されてるだけのようですが
その投稿がうまくいった場合
教えていただきながら作った
https://2021testsaite.blogspot.com/
このサイトのスマホ版のようにリストなどのない
出来上がりになるのでしょうか？ >>340
もう一度、「テーマ＞HTMLを編集」で上手く行ってる方のテーマのデータを全て上書きコピペして
それでダメなら、もはやスレ違いなのでBloggerのスレで聞いた方が早い
後半の質問はちょっと何言ってるか分からんが、単にモバイルデバイスでモバイル版を設定してるか
デスクトップ版を設定してるかの違いじゃねーの？ >>342
ありがとうございます
最初のページに移植しても無理でした。でも問題ないんです。
教えていただきながら進んだサイトの方でできて、
新しいテストサイトに移植してもちゃんと表示されてるからです。
そこでです。言われたままモバイル設定をデスクトップ設定に変更したら
ちゃんとできました！！！感謝です。 >>342
おかげさまで未完成ながらも理想の形になりました
何度もお付き合い頂けて本当にありがとうございました。
今後も進めていくうちに問題が山積みかもしれませんが
諦めずに勉強したいと思います。
又何かあった時
かまって頂けたら幸いです。
ありがとうございました！ >>342
恥ずかしながら戻ってまいりました。
https://2021testsaite.blogspot.com/
15枚の画像をアップしてみたんですが
1Pめが9枚分のスペースがあるのに
7枚で次のページ、次のページも7枚です。
object-fit: contain;をこのように入力したのですがなにか関係ありますでしょうか？
}
.list-item-img{
display: block;
width: 100%;
object-fit: contain;
} >>345
分からないことは質問する前に先ずググろう
トップページに表示される記事数を設定する
ttps://www.howtonote.jp/blogger/ini/index3.html >>345
あと、object-fitは1:1の正方形サムネイルを出力してる今の状態では
何の意味も無いから、元画像のアスペクト比で画像を表示させないなら
無くてもいい >>347
ありがとうございます。HTMLに目が行き過ぎてました、、ｗ
一つうまく行かないのがありまして、、、
スマホ版で
このブログ内検索を一番上に持っていきたいので
https://fujilogic.blogspot.com/2020/03/searchbox-in-navibar.html
このサイトのようにやりました。
ナビゲーションバーに検索バーを加えました。
しかし
スマホの方だと上のオレンジ色のところを押さないと出てきません。
これを常に表示したいのです。押さなくても
現在の私のテストサイトです
https://2021testsaite.blogspot.com/
アドバイスお願いします、、 >>348
>検索BOX可愛くないですが事務的なデザインのやつ貼ることに成功しました！
ナビゲーションバーをタブ押さずに常に開いた状態で表示したいので
やってみます、、 >>348
先ず、検索ボックスの挿入場所が間違ってて参考サイト通りに出来て無いっぽいから
出来てる前提で説明するけど
#navigation-contentのdisplay: none;をdisplay: flex;にして
#navigation-button:checked ~ #navigation-contentのdisplay: flex;をdisplay: none;にすれば
デフォルト状態だとナビゲーションが表示になって=マークをタップすれば非表示になる >>349
何が何だか分からんけど、デザインはCSSでどうとでもなるので
まぁ、頑張って >>350のCSSは
ナビゲーションって書いてあるとこの
@media ( max-width : 768px ) {
って書いてある下にあるやつな
displayのnoneとflexを入れ替える感じ >>352
おそくまでありがとうございます〜〜！
できましたー感動です！！
まだ問題ありそうですが、検索かけて自力でやる努力をしながら
やってみます。又何かあった際は是非ともよろしくお願いいたします、、、
本当にありがとうございました！ えーこんにちは。、またまたです。が
https://2021testsaite.blogspot.com/
このサイトのサングラスの女の子が縦に並ぶのも大問題なのですが
その下の一番新しい投稿に5人の男の子が写ってます。
アイキャッチの画像だけ変更して
開くと5人のイラストが5つ個別でサムネイルのように並んでます。
これはサイトからHTMLをコピーしてどんなものかと触ってみたのですが
うまく行ったと思いきや、WEBでの方で列が、ずれてしまってます。
これはどこを触ったらいいかお願いします、、 >>354
直接的には.list-itemにCSS（特にflex-basis）が効いてないのが原因
list-itemに横幅の指定が無いと、タイトル文字列が自動的に折り返せない
で、何故CSSが効いていないのかというと、.list-itemの上（183行目）に余計な
「}」があるから、これを削除する
結局は余計なことしてるから不具合が出るので、おかしくなったと思ったら
いじったところを調べよう >>356
あー、あの中から
たった一つのそれを探して頂けて本当にありがとうございました！！！
うまくいきましたー！ >>358
文字列？
タイトルは長ければ折り返されるだけなので、そこはお好きにどうぞ >>359
タイトル入れてなかっただけでしたーｗありがとうございます！！ https://www.bambi.pro/entry/blog-eyecatch-list
アイキャッチ画像をヘッダーの下に貼り付ける内容ですが
750行あたりの記事表示部分に移植しました
このサイトのスマホ２列用を入れたのですが
WEB側もスマホ側も二行になりません
数字を変えてもうまくいきませんし、画像も小さいです。
理想を言えば
WEB側は3行 スマホ側は2行にしたいのです。
どのへんを触ればいいのでしょうか？お願いします。。 >>361
貼り忘れましたサイトです
https://2021testsaite.blogspot.com/
750行あたりの記事表示部分に移動させると、
どのページ開いても常にそのアイキャッチ画像が見えるってことですよね？
本当は邪魔ですがそういうテンプレートだから
そこに表示させたらずっと表示される設定なんでしょうか？ >>361-362
どこに貼り付けたのかは厳密には分からんけど、パンくずリストなんかに混ざっちゃってるから
挿入部分がおかしいんじゃないかと
挿入するなら730行前後にある<div class="container">の上辺り？
というか、単純に挿入したところで他の部分で上手く行くとも思えないけどね
よく分からないのなら、はてなブログとかBloggerとは別物のソースを安易に使わない方がいいよ >>363ありがとうございます
https://www.moca-memo.com/2020/02/blogger-qooq-header.html
このサイトのようにやって見ました
中くらいにある
Blogger「QooQ」ヘッダー下にアイキャッチ画像付きリンクを表示する方法
という項目です。
CSSを入れたので
780行あたりにが指定箇所可と思い
HTMLを入れてみましたがそこだとこうなります。
https://2021testsaite.blogspot.com/
ヘッダの下に配置されてしまいます
尚
864行目にも同じ画像HTMLを入れてみました。
場所は
タイトルのテキスト
検索して頂けたら出てくると思います。 >>364
色々いじり倒してると、もはや行数言われても、どちらが何なのかが分からんのだけど
どこに挿入するのが、あなたにとっての正解なの？
どちらが正解で、正解の方で困ってる事を教えてくれないと答えようが無い >>365
ごめんなさい、、
https://2021testsaite.blogspot.com/
こちら側を採用したく、
できればWEB側は
https://www.irasutoya.com/
のように3行でメガネのイラストを配置したいと思ってます。
理想としてはスマホ側では
https://www.irasutoya.com/?m=1
この様になったらなーと思ってまして
2行で並ばせたいと思ってます。 >>366
だったら、CSS部分の..article-containerにflex-wrap: wrap;追加するぐらいでいいんじゃない？
現状でもスマホは2列になってると思うけど >>367
ありがとうございます
入れました！
スマホは二列ですが
WEBだと
画像6個で縦に並んでしまいます
大きさを固定して
3行で2行、3行と並んでくれるようにしたいのです、、 >>368
いや、どこに入れたのか知らんけど
先ずは/*=== article window ===*/って書いてあるとこのちょっと下にある
.article-containerの直下にあるarticle-container単独で入ってる行を消して。
んで、同じ箇所の.article-containerの後の{}でくくられた中にflex-wrap: wrap;を入れて。
で、入れました！ってのは間違ってると思うので元に戻そう。 >>369
すみません、検索していた文字をそのまま打ち込んでしまってましたｗ
それで、
下に並んでいるイラストの枠のように幅固定なりサイズ指定などはできますか？
.article-box{
box-sizing:border-box;
border:2px solid whitesmoke;/*画像の枠色*/
width:25%;
padding:0px;
margin:30px 15px;/*画像周りの空白*/
overflow:hidden;}
このへんだと思うのですが
width:25%;を大きくすると2行になってしまいます。 答えてくれる人とメールなりでやりとりすればいいのでは？ >>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%部分を変更すればいい。 ほぼ占有じゃん
過疎ってるスレとは言え度が過ぎてると思うよ >>372
ありがとうございます！！
とてもとても理想になりました！！感謝です
超わかりやすく解説ありがとうございます。
調整してみたいと思います。 >>374
微妙に違うスレあったのね
次スレ候補検索で間違って移住してしまってのかも
移動しますわ
ご迷惑をお掛けしました こんにちはツイッターとの連結についての質問です
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
です >>379
>>380
ブログに投稿と同時にtwitterに自動投稿をしたかったのですが
Bloggerは非対応のことでした。
お騒がせいたしました！ すいませんHTMLの入門書を一冊読み終えた程度の入門者なのですが
remとemと％とvhとvwがよくわかりません…
凄い簡単な例を出して教えて欲しいです
1.375remとか書いてあったらどういう計算をすればいいのでしょうか？ 埋め込みSVG使えばいいのに、とか言っちゃいけないんだろうな(言ってる) こういうことも出来ますよってだけで
効率とかじゃないんだよ こういうのって何かツール使うの？
それともちまちま
ここら辺の位置にこの楕円を…とか
頭の中で想像しながらコーディングするの？ ツール使うならSVG画像でしょうね
これはエクセルアートとかそのたぐいだよ
ちまちまやるしかない 昔はテーブルでマリオとかファミコンのドット絵を描くとかあったなあ https://www.irasutoya.com/search/label/%E9%81%8B%E5%8B%95
このページの2段めの階段を上り下りするサムネイル？2枚ありますが
クリックすると縦に2枚の絵が表示されて
サムネイルで2つ表示するようにしてると思うのですが
自分で普通に入れてもなりません。
https://2021testsaite.blogspot.com/
これのやり方を知りたいのです。
よろしくおねがいします >>397
コードを見ていただきたいのですが
https://jsfiddle.net/15k0tsqL/
なんかサムネに表示される画像が貼ってあります。、なんですかこれ >>398
個別ページの最上段の画像が、一覧ページのサムネイルに使用されるっていう仕様だから
一覧ページのサムネイル用に別途画像を用意して、個別ページ最上段に置いてる
でも個別ページでは表示させたくないから非表示にしてるってだけ >>399
ありがとうございます
自分でやってみるとサムネ画像も表示されるんですど
どこが非表示の書き込みなんでしょうか？ >>400
いらすとやのHPをブラウザのデベロッパーツール使って見てみると
個別ページに表示されている画像の上あたりにサムネイル用画像が
置いてあって、display: none;で非表示されてる
とりあえず、これでも読んでみ
目から鱗！Bloggerのアイキャッチを任意の画像にする方法
ttps://www.iloilo-good.com/2017/04/blogger_20.html >>405
なんでサムネイル用画像2枚貼ってんだ
まぁ、2枚貼ったうち1枚目は非表示になってるから動作的には正しいわな
ドット？そんなもん知らんがな >>407
イラストやだと、
https://jsfiddle.net/15k0tsqL/
このようにページに貼って表示しないように難しくやってるけど
教えてもらったものは、画像を引っ張ってくるやり方ですね
ありがとうございます！
Bloggerって画像どこに保存すればいいのか謎 いらすとやの方はページソース473行〜の
img.postthumb{
width:1px;
height:1px;
display:none;
}
で消してる >>409
ページに入れりゃいいってもんじゃないんでしょ？ https://starperm.blogspot.com/
画像が3かける3 で
9枚並んでほしいのに
7枚で次のページになってしまいます
この辺おコードかと思いますが、
https://jsfiddle.net/qe81kr2p/
改善策お願いします、、
同じｈｔｍｌのはずなのに
https://2021testsaite.blogspot.com/
こっちではちゃんと表示されます、、 >>415
設定＞投稿＞メインページに掲載する投稿数の上限 既存のサイトをダークテーマに移行したいのですが、cssを自動でダーク仕様に書き換えてくれるソフトウェアはないでしょうか？ JavaScriptのイベント処理で
取得要素.style.backgroundColor
取得要素.style.color
で背景と文字の色変えるだけいいやん 初めまして
先日からiPadでhtmlのプログラミングを勉強し始めました。
テキストエディタはTextasticを使っています。
画像の載せ方を勉強しているのですが、＜img src=”画像アドレス”＞の画像アドレスの部分がわかりません汗
画像データは自作したhtmlファイルと同じicloud上のフォルダへ格納しています。
どうすればよろしいでしょうか？
ご教授願います。 >>422
どう分からんのかが分からんけども、とりあえずコレとか読んでみて
【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
ttps://webliker.info/78726/
特に相対パスってとこを重点的に読んで理解しておくといいかも >>423
iPadでのパスの書き方がわかんないんですよ汗
Win10とかならやったことあるので分かるんですが・・・
やっぱり初心者はiPadとかでいきなり勉強するより
PC買って正攻法で勉強進めた方がいいみたい
諦めてPC買って勉強することにします。
参考アドレスありがとうございます。PC購入したら活用させていただきます！
また分からないことがあったらよろしくお願いします。
ありがとうございました。 >>424
その画像ファイルはhtmlファイルと同じフォルダにあるの？
同じフォルダ内なら
src=”画像ファイル名“でいい
さらにフォルダ内にあるのなら
src=“フォルダ名/画像ファイル名“でいい
一つ上のフォルダにあるんなら
src=“../ファイル名”
さらにフォルダ内にあるのなら
src=”../フォルダ名/ファイル名”
2つ上なら../../、3つ上なら../../../となっていく
それはあまりよろしくないから普通はフルパスで指定する
ローカル環境の場合は
src=”file:///パス”
webサーバー上の場合は
src=”http://ドメイン名/パス”
とりあえず作ったhtmlファイルと同じフォルダ内に画像置いて試してみては？ macbook airを使ってます
エディターはmiとAtomならどちらが良いですか？
出来れば理由もお聞きしたいです atomはとっくの昔に開発終了してるから
多くの人がvscodeに乗り換えてる 今はvscodeかな
macならターミナルでvimも使えるようになるべき 
