1: Name_Not_Found 2021/11/09(火) 14:10:27.98 ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
mevius.5ch.net/test/read.cgi/hp/1627551978/
■関連スレ
Webサイト制作初心者用質問スレ part253
mevius.5ch.net/test/read.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
triple-underscore.github.io/selectors4-ja.html
27: Name_Not_Found 2021/11/13(土) 01:22:28.80 ID:???
css3のanimationについて質問です
ページを読みこんで3秒後に一瞬でposition : absoluteがfixedに変わるようにするにはどうすれば良いのでしょうか？
#test{
position:absolute;
}<div id="test">test</test>28: Name_Not_Found 2021/11/13(土) 02:01:58.75 ID:???
>>27
positionはanimate可能なプロパティではありません
jsでスイッチさせてください
29: Name_Not_Found 2021/11/13(土) 02:03:54.14 ID:???
jsでスタイル変えるしかなさそう
70: Name_Not_Found 2021/11/16(火) 18:07:36.15 ID:yeBr81ND
スマホ向けで水平・垂直に切り替えた時の挙動の対応方法を教えてください。
常にディスプレイに対して高さ100%表示にしたいです。
この時引っかかるのが「ロケーションバーや下のステータスバー」です。
垂直状態から水平に向きを変えた時、
その要素分空間が空いてしまいます。
ならないブラウザもありますが、OS標準であるSafariではなってしまいます。
常にディスプレイサイズに対して高さ100%にする方法ってありますか？
72: Name_Not_Found 2021/11/16(火) 21:38:56.22 ID:???
263: Name_Not_Found 2021/12/16(木) 20:02:52.28 ID:???
google fontなんですが、ダウンロードせずに使うためのリンクってどこにあるんでしょうか？
以前はあったと思うんですが。
264: Name_Not_Found 2021/12/16(木) 20:12:29.22 ID:???
右上の四角と＋のアイコンクリック
267: Name_Not_Found 2021/12/16(木) 21:48:48.42 ID:???
このサイトのようにタイトルロゴを中央に持ってくる場合、内包されるボックスの幅を統一しないといけないでしょうか？
space-betweenで配置するのだと思います。
ヘッダの全体幅1000px、左を500px、中央指定なし、右指定なしとすると、ロゴも右寄りに配置されますので
268: Name_Not_Found 2021/12/16(木) 21:52:31.93 ID:???
そこの場合だとTSURI HACKというタイトルロゴはposition:absouteで位置指定してるね
269: Name_Not_Found 2021/12/16(木) 21:57:06.11 ID:???
・ロゴだけabsoluteにする
・左コンテナ ロゴコンテナ 右コンテナで分ける 左コンテナにmargin-right 右コンテナにmargin-leftをauto
・flex-basis
・grid
好きなのどうぞ
348: Name_Not_Found 2021/12/26(日) 13:29:03.11 ID:???
htmlファイルに画像やcssファイルを含ませる事ができるみたいですが、こういう形式は一般的ではないのでしょうか？
ページを保存しておきたいのです。
361: Name_Not_Found 2021/12/27(月) 13:00:47.59 ID:???
>>348
画像データをbase64 形式で、HTML 内に埋め込むと、
データのサイズが大きくなるので、大きい画像はダメ
ちょっとしたアイコン・SVG などに使うもの
349: Name_Not_Found 2021/12/26(日) 14:05:56.91 ID:???
chromeじゃあるか知らないけれど
firefoxのアドオンにSingleFileというものがあって
それを使うと画像なども変換して1ファイルとして保存ができる
352: Name_Not_Found 2021/12/26(日) 15:34:22.27 ID:???
作ったhtmlを試しにchromeで開けば表示できるよ
画像データはbase64でエンコードされたバイナリデータでHTMLの中に埋め込まれるので
HTMLファイルのみでいい
もちろんそのHTMLファイル自体は画像ファイルなどの分、ファイルサイズが大きくなってしまう
MDN データ URL でぐぐれば解説がのっている
353: Name_Not_Found 2021/12/26(日) 16:18:42.57 ID:???
SingleFileZって機能拡張だと、生成したhtmlファイルはzipのハイブリッドになってて
それを解凍した中にあるhtmlファイルを開けば、どんな環境でも見られるはず
354: Name_Not_Found 2021/12/26(日) 17:40:35.98 ID:???
どうもです。
ファイルが分けられている場合、正確に保存できなかったもんですから。。。
631: Name_Not_Found 2022/01/16(日) 19:52:53.49 ID:???
object-fit使うと枠の下に余白ができるんですが、これはなんでしょうか？
アスペクト比と関係ありそうですが、調査中です。
computeではpaddingはありません。
ideone.com/W62DMT
637: Name_Not_Found 2022/01/16(日) 20:12:48.83 ID:???
>>631
emp_image imgにdisplay: block;かflex;かtable;追加してみ
>>636
質問に答えない人はちょっと黙ってて
643: Name_Not_Found 2022/01/16(日) 21:07:15.16 ID:???
>>642
imgはインライン要素
640: Name_Not_Found 2022/01/16(日) 20:32:11.43 ID:???
vertical-align: bottom;でもイケる
img下部の余白問題は過去ログにもある定番のあるあるネタだな
>>631
とりま、これでも嫁
【HTML・CSS】img要素の下に余白ができる原因と解決法
772: Name_Not_Found 2022/01/24(月) 10:50:29.96 ID:???
スマホに横スクロールバーという概念はないのでしょうか？
このように最小横幅を指定しているのですが、画面を縮小していくとbodyが320px以下になってしまいます。
320pxに達した時点で、横スクロールバーが出現するという挙動似できますか？
@media screen and (max-width: 768px) {
body
{
min-width: 320px;
}
.main{
background-color: yellow;
}
}
776: Name_Not_Found 2022/01/24(月) 11:36:15.05 ID:???
>>772
あります
できます
814: Name_Not_Found 2022/01/27(木) 18:39:58.24 ID:???
分からない事は質問する前に調べよう
: 文書の本文要素 – HTML: HyperText Markup Language | MDN
HTML のセクションとアウトラインの使用 | MDN
https://developer.mozilla.org/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
developer.mozilla.org
48 Users
84 Pockets
HTML のセクションとアウトラインの使用 | MDN
HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。
