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 >>475
デザインの質問？
白背景ならグリッド無し？だったらスクショはグリッド非表示でお願い
はてなブログのヘッダー要る？デザインテーマでも作るの？
デザインはとりあえず白背景のHTMLテンプレートとか拾ってきて
参考にしてみるといいかも >>476
何のことですか？
fc2のサイトのことですか？ >>477
そうです、デザインの質問ですね、、、スレチかもしれませんが
グリッド消しました
https://imgbox.com/7x2WtYvf
はてなのヘッダはいらないのですが、何か寂しいなとおもって入れてみました、、、
これはデザインの問題というより、コンテンツがないから寂しいのかもしれません
白背景のサイトを参考にする場合、はてなのテンプレがきれいだなと思います
Fc2のサイトみたいに、背景がつくと難しくなるんですよね
色も白とグレーと黒くらいに制限してみようかなと思います >>479
なんか寂しかったら別のなにか追加すればいいのでは？
はてなのノリでそれ以外（アイコン等）もどこかのサイトからのコピペだったりした場合は
著作権的に問題ないものを使ってね >>480
アイコンですね
font awesome使ってます 質問なんですが、やはりブログカードは横長ではなくて、２列のタイプにしたほうがにぎやかな感じはあるんでしょうか？
これもつくってみますが 仮で入れてるアイキャッチは全部同じ画像じゃなくて、何種類か別の画像にするだけでも印象が変わる
あと、もうちょっと余白やマージンに余裕を持たせて、文字もサイズ調整してメリハリ付けた方が見やすい
にぎやかにしたいからって隙間を埋めようとすると、ドンキの圧縮陳列みたいになるから注意な
むしろ余白を活かしてバランス取った方が、デザイン的には良いかも >>483
https://imgbox.com/3behpWt3
ありがとうございます。
画像と余白と、横の広がりを意識してみたらマシになりました。
実践していきます。 wordpressで作ったサイトなんですが、にぎやか感を出す方法ってあるでしょうか？
無料ブログの共通ヘッダとか個人的に好きなんですよね。
あんなのありますかね。 閲覧数一覧のフォント1〜2段階小さいほうがいい
今のだと詰まって見える
ボタンのbackground画像はいらん
青い帯とボタンの間の余白もう10〜15px
検索は検索ボックスとボタンを1行で
最新記事と閲覧数一覧のbottomに線入れて 回答どうも。
サイドバーのフォントサイズは、メインコンテンツが目立つように小さめにするってことでしょうか？余白が足りないということですか？
少し改善しました。
https://imgbox.com/2423el8Q
確かに余白を取るとサイドバーがスッキリ見えますね
デザインは特にここを参考にしてます。
こういうゴチャ感
https://blog.はてなblog.com/
トップのメニュー背景画像も、ここをパクってます、、、 デザインカンプ制作のデザインだけに関する質問はスレチのような？ Facebookとhtmlはなにか関係ありますか？ facebookのwebサイトはhtmlで作られている デザインの話は、スレ違いなのだけど、話題もないからいいのかね まずは色なしでデザインしたほうがいいんでしょうか？
白黒のみとか h1に画像を入れると画像に隙間が出来ます。
h1に設定したフォントサイズより小さい画像だとこのような現象が起こるようです。
高さ15pxほどです。
font-size:0などとすると大丈夫なんですが、これは正しいんでしょうか。
jsfidleで再現出来ませんでしたねぇ、、、; line-height 1 か
vertical-アライン bottom
入れてみて 再現出来ました。
font-size:0;で問題ない表示になってますが、外すと駄目ですね。
https://jsfiddle.net/bgegg/rcf3j9om/24/
どうも小さい画像だと問題があるようです。 そうですか。
小さすぎる画像なので、今回はテキストにしときます。 htmlをあまりいじれない場合は疑似要素を使うといいんでしょうか？
確実に動いてくれれば良いんですけどね。 疑似要素でコンテンツをインナーに入れることは可能ですか？ https://jsfiddle.net/bgegg/q2mte1c9/
ブログカードを３列にしたいのですが、gapによる余白はborder-boxに含まれないようで、３列になりません
改善策があれば教えて下さい
絶対値指定はあまりやりません gap消してliのwidthをcalc((100% - 2em) / 3)じゃだめ？ 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もあり？ 522追記。
どうやらinline要素の幅が短くて、floatの幅と合わせても1行に届かない場合になるようだ。
522で言えば、<p>の中身が数文字で<div>の幅と合わせても<section>の幅に足りないと再現する。
ただこれだと、長さ依存であって現実的には使えないけど。 サイトのごちゃ感を出したいのですが、版面率という概念があるみたいですね。
余白を狭くすると見づらくなるんですが、どうやって版面率高めますです？ 素朴な疑問なんだけど印刷物なら紙面に制約があるけど
Webで版面率って気にするものなん？
それともちょっと野暮ったいけど激安店のような目詰まりした感じでもほしいの？ デザインの話はさんざんスレチと言われてるのに
懲りずにまた聞きに来たの？ 阿部寛のサイトっぽさ出したいなら
HTML3で作ればいい 愛生会病院みたいなとこはどうなってるのかと思ったら
愛の妖精プリンティンは健在で、意外と美人な孫娘に継がれてるようだた gifファイルのフレーム数ってどうしたら割り出せるんですか？ Wikipediaに「阿部寛のホームページ 」というページがあってワロタ
この板の誰かが作ったのか 昔、youtubeの個別ページにおいてサイドへRecommended for youがひたっすら記載されていた時代
www.youtube.com##span[class="ytd-video-meta-block"]:has-text(Recommended for you)
的な記述で全部削除していました
最近それらの仕様削除を知り、ならば他のサイトで気に入らないテキスト語句を上記の部分入れ替えで使おう！と試すものの、有効とならず
用途はあるサイト内において、テキストを一括削除することです
この上記記述に過不足または間違いがあるのでしょうか？よろしくお願いしますm(vv)m ふと、spanの部分を変更したら自己解決できました
仕様の根本を無理解のままコピペ運用すると、こういう面で苦労しますね
失礼しました px固定幅と可変幅のセルが入り混じったテーブルがあって可変幅のセルが複数ある場合、可変幅セルの幅をそれぞれ調整したい時はJSでやるしかないですか？
本当はwidthをcalcで指定したかったんですが、テーブルセルには対応していないようだったので
CSSだけで調整できる他の方法があれば知りたいです 状況が端折られすぎてて条件を後出しされても困るので
ここにもっと具体的なソース貼って
https://jsfiddle.net/ Jsfiddleがscssを展開しなくなってるな
サービス全体の不具合っぽい 不便だ 説明が難しいのですが…元画像のサイズを100%とした時に
画像を%で縮小指示をする方法はありますか？
例えば、横幅サイズ100px、150px、180pxの三種類の画像をブラウザ幅に対して％でサイズを指定するのではなく「元画像サイズより50%小さく一括指定」というような事がしたいです
上記の例だと元画像はそのままパソコンで表示、スマホの時は「50px、75px、90px」でそれぞれ小さく表示したいのですが、実際は画像の数が多く一つ一つ計算してpxで指定するのが大変なので、まとめて同じ縮小率で表示する方法があれば教えていただけると嬉しいです 工数不得手もスマホにはスマホ用の画像用意した方がよさげ
特に横長の画像だとPCとスマホを共用ではスマホ側はどうしても小さくなる とりあえずってとこだと、メディアクエリとimg周りにtransform: scale(0.5);でどうにかなる？
ちょっと面倒だけど、綺麗に表示させたいならスマホ用に画像を一括変換で用意して
imgタグにsrcset属性を追加してレスポンシブ対応
レスポンシブの画像切り替えができるsrcset属性
ttps://www.site-convert.com/archives/1342 スマホ用に見やすくしたいだけなら、元画像を縮小という考え方は最適解ではないと思うけどなあ
クソデカい（小さい）画像が存在すると、縮小という方法では見易さという目的は達成できなくなるし
使用するスマホによっても見やすくならない
そもそもスマホ画面で表示された三種類の画像それぞれ、倍にすれば元サイズだと想像できたからといってどうなるの？と思う
スマホで見やすい固定サイズのサムネイル三種類表示して、タップしたら元サイズで表示するという挙動で十分では ×元画像を縮小という考え方
○元画像から割合で縮小という考え方 みなさんアドバイス有難うございます
そして後出しごめんなさい！大事なことを伝え忘れてました
SVG形式の画像なのでできれば一つの画像で済ませたかったのです…
>>550の方法で一度試してみます transform: scale() で縮小すると元サイズ分の余白出来ちゃって結局元サイズが分からないと位置調整しづらい
zoom: 0.5; なら余白出来ないけどFirefoxが未対応
自分ならスクリプトでやるかな svg画像といっても色んな表示方法があるしなぁ
条件が変われば回答も変わるのよね >>556
これもそうだけどdisplay: contents;なんてのも知らんかった
こういうスレやtwitter見てないとどんどん知らないの出てくるわ この世界は流れ速いから常にアンテナ張って情報収集してないと置いてかれる ちょっと聞きたいんやが、
UTF-8とUTF1６LEとUTF16BEって、何を基準に使い分けたらいいんや？？
それぞれの構造というか情報が送られる仕組みの違いはなんとなくわかったんやが、
どういうサイトにどういうことに適しているのかってのが色々みてもあんまわからん。。。
急いではないから誰か教えてくれると嬉しい ↓読めば分かると思うが、webサイト制作においてはutf-8の一択で
文字化けのリスク等を考えたら、使い分ける余地は無いような
HTML Standard 日本語訳
https://momdo.github.io/html/semantics.html#charset >>560
確かにそうみたいですな…
ありがとうございます(_ _)
ちなみにそうなると他の16とかの存在意義はなんなんでしょうか… >>561
このスレ的には存在意義は無いし、考える必要も無いが
用途なんてググればすぐ分かる
UTF-16 - Wikipedia
https://ja.wikipedia.org/wiki/UTF-16
UTF-32 - Wikipedia
https://ja.wikipedia.org/wiki/UTF-32 >>563
なるほど、だいたい理解できましたわ
勉強になりました(_ _)))
ありがとうございました bootstrapやらtailwind CSSはフロントエンドエンジニアの方が詳しい 会社のホームページ作りたいんですが
一般的なweb制作でもlaravelなどのフレームワークは使ったりするんでしょうか？
それともhtmlとcss（とbootstrap等？）のみで作ったりするんでしょうか？ メールフォームなんかを自分で実装するならPHPも使う
最近はnext.jsやらnuxt.js使う所もあると思うけど
単純な静的サイトならHTML/CSS/js位しか使わないよ ツイッターにおいて
「おすすめツイート」および「いまどうしてる？」の[さらに表示]についているpaddingを調整すると、バックグラウンドのサイズを残したまま行幅のみが短縮されます
twitter.com##main>div>div>div>div:nth-of-type(2)>div>div>div>div>div>div>aside>aに付与されているpaddingです
twitter.com##main>div>div>div>div:nth-of-type(2)>div>div>div>div>div>divにてサイズを強制伸縮している様子なのですが、flex-grow:0!important;をそこへ投じても伸縮が解除されません
この場合、他にどこを疑えばよろしいでしょうか そりゃまぁflex-grow: 0; は初期値だから追加したところで無駄だわな
というか、結果的にどういう表示にしたいのかが、よく分からない Googleタグマネージャーなどの計測タグのソースを外部ファイル化してSSIで読み込むのって特に問題ないですか？ グラフィックデザイン中心に仕事してるWEB初心者だけど、Dreamweaver頼みのコーディングって世間的にはダメなの？ DWは昔使ってたけど、コーディングに慣れてない初心者なら、入口としては別にいいんじゃない？
ただ、DWがダメって事は無いけど、世間的にはVisual Studio Code（VSCode）が主流になってる
使い勝手も機能拡張でカスタマイズできるし、動作も軽くて人気だからネットにも情報が多い
無料だし、試しにインストールしていじってみたら？ 
