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 >>645
ありがとう。動作しました。
MDNをググってその項目があるのは分かってたのですが、違う意味だと勝手に決めつけてました。
とりあえず一通り全部試すべきでした。お手数をお掛けいたしました。 >>646
ちゅーても、この場合「兄弟要素の幅に合わせる」って意味の使い方じゃないから注意な >>647
しかし意味は合ってると思うんだけども。少なくともtableよりは断然いい。
意味は「中身の最小幅」で、出来る限り縦に細長くなる。
英文テキストはスペースで折り返すから結果的に最長単語、
日本語は任意の所で折り返されるので問題なし、
サムネは折り返されない、
よって結果的にサムネ幅になる。
多分この使い方を想定している気がするが。
(サムネが小さすぎる時にテキスト幅になるのはそれでいいし、それの方がいい)
なお他サイトでwidth逐一指定なのは多分ブラウザ対応だ。
chromeならmin-contentは46以降なので、おおよそ2016頃以前は使えなかった。
この辺も気にするならtableの方がいいのかもしれないが、
今回に関しては対応してないと多少見栄えが悪くなる(スカスカになる)だけなので、今のところmin-contentで行く予定。
そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
出来るのなら勿論ビンゴだが、
元々それを探してinheritだ100%だ色々こねくり回して駄目だったんだけども。
ちなブラウザ対応はchrome49以降(≒WindowsXP以降)、IEは不要。 >>648
> そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
いや、元々のオーダーがそうだったからｗ
→ > 「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？
でも今回のはどちらかというと「コンテナの横幅をサムネ合わせる」という代替案だから
それを考慮しないで変にいじるとレイアウトが崩れる場合があるから注意してねって話>>647 >>649
了解だ。
当初の要求と適切な実装が異なるのは、CSS流の思考がまだ出来てない俺の問題だ。
初心者が間違った実装を目指して空回りするのと同じ。 質問させてください
<！-- saver from url=(0039)https://abehiroshi.la.coocan.jp/menu.htm -->
例として阿部寛さんのページをださせていただきましたが、この文はどういう意味ですか？ >>651
saver？savedじゃなくて？
savedなら"saved from url="でググってみると話が早い >>653
savedでした
ありがとうございます
savedで調べてみましたがこれって普段は表示されないってことですか？ >>654
そりゃコメントアウトされてるからね
>>651みたいにエクスクラメーションが全角じゃダメだけど
Comment - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Comment >>655
ありがとうございます
!は間違えて入力してしまいました ┌───────┬────────┐
└───────┴────────┘
みたいな枠を作りたいのですが、どうすれば枠の大きさを調整できますか？ >>657-658
どういうタグで枠を作ってますか？
色々な方法があるので、枠部分のHTMLとCSSのサンプルをここに書き込んでもらうか
https://jsfiddle.net/
などにコードを貼り付けて、saveして得られたURLをここに貼って貰えるとアドバイスしやすいです >>659
部分的でいいですか？
<table width="600" align="center" border="1">
<tbody>
<tr>
<td><img src="◯◯◯.files/△△△.jpg"></td></tr>
<tr>
<td>あいうえお</td>
<td>かきくけこ</td></tr>
といった感じです >>660
だったら、例えばtdの幅を
td { width: 50%; }
で一括指定するとか、それぞれ別の幅で指定したい場合は
tdにのclassを割り当てるかnth-child()等の疑似クラスで
個別にwidthを指定するとか色んな方法がある
あと、そのtableの属性値でスタイルを指定する方法は古いので
CSSで書き換えた方がいいかも >>661
<td { width: 50%; }>あいうえお</td>
といった感じですか？
CSS使いたいのですが全くわからないです… >>662
そのレベルで知らないのならまずは参考にするサイトを探すべきだよ。
例えばこのスレを普通のブラウザで見れば、すぐ下にmenubottomnavで枠付きボタンを等幅で並べてるし、
DevToolでCSSとHTML見比べてたら書き方は見当が付くだろう。
当初は見様見真似からだと思うよ。
最終的にはMDN等読んで優先順位判定を理解しないと駄目だが、
そもそも静的な部分(多分660はそう)はclass一発で当たるように作るべきだから優先順位は関係ないし。
ついでに言うとそれは多分tableの使い方を間違ってる。
tableは表が欲しいときに使うものであって、レイアウトを手動で固定化したいときに使うものではない。
外枠線が欲しいのならborderでやれば良いだけ。
このスレだとmenuitemに外枠線付けてるけど、これが普通のやり方だと思う。
(ただしその外側がliなのはどうかね？と思うけど)
分からないと言ってても分かるようにはならないから、まずは見様見真似でいいからやってみるべきだよ。
そもそも難しいものではないし。 >>662
タグ内のスタイルの書き方はちょっと違うんだが･･･
色々と説明しようと思ったけど、ここで説明するよりも、とりあえずこういうの読んだ方が早い
CSS 入門 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started
初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
https://saruwakakun.com/html-css/basic/css
表（table）の作り方と装飾の変え方【HTML＆CSS】
https://saruwakakun.com/html-css/basic/table
あと、呪文だらけで何言ってるか分からないかもしれないが、>>663が書いてるように
先ずは自分に合った上記のようなサイトを探して、参考にしてみるといいと思うよ >>662
さらについで。
多分その方法は「テーブルレイアウト」と呼ばれていた物で、ググると大体今は止めとけと出てくるはず。
https://allabout.co.jp/gm/gc/456372/
だから今更テーブルレイアウトしようとしてる事がそもそも間違ってて、
参考にしてる本が異常に古いとかじゃないとそうはならないはずなのだけど。
（テーブルレイアウトの入門サイトは多分撲滅されてる）
660の場合は多分inline-blockでwidth:50%で並べればいいだけのはず。
ただもし参考にしてるサイトがテーブルレイアウトの場合はどうするか微妙だが、
662見る限り君は他サイトを参考にした事もなくて勝手にデタラメに書いてるだけでしょ。
他サイト見てればそうはならんし、そもそもテーブルレイアウトのサイトを探す方が今は難しいし。
だから可能性として一番高いのは古い本を見ながら書いてるパターンだけど、
それ自体が今のWeb開発としては間違ってる事を認識した方がいいよ。
どうしても本にこだわる奴も一部居るけど、それはもう無理なんだよ。
所詮は慣れの問題だから、画面で学ぶのに慣れるしかない。 >>661
実際は文章の長さがそれぞれ違うから個別にするつもりです
<td width="50">あいうえお"</td> 悪いことは言わないから
インラインにスタイルつける手法は非推奨なので
それから離れてCSSを覚えた方がいいよ 初手から勉強しなおしてきます…
あと自分は>>660さんと同じ質問がしたかった別人ですので… >>666
その指定だとwidthは50pxになって、例に書いた50%にはならないから注意な
ちなみにCSSのプロパティは使わずに、HTML5では廃止されてる非推奨属性で
widthを指定しようとしてるのは何か理由があるの？
<td>: 表データセル要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td
>>669
他人の質問に割り込むなら「横からですが」とか、別人と分かるように書こう >>666
それはみんな分かってる。
tableは「中身が全部表示される大きさになる」ので、
同じ大きさの中身なら各カラムも同じ大きさに必ず『自動的に』なるから。
だから「中身が全部表示されて超巨大なtableになって困ってます」なら分かるが、
660はフローレイアウトを止めようとしてるだけなので、
それはテーブルレイアウトと呼ばれた10年以上前の手法であり、使い方を間違っているというわけ。
動かないわけではないが、今新しく始める人がやるのは完全に間違ってる。
フローレイアウトは慣れないと何がどこに表示されるかさっぱり分からないので、
全く知らない初心者が感覚的に分かりやすいテーブルレイアウトに引かれるのも道理ではあるが、
フローレイアウトの方が圧倒的に便利だからみんな使っているわけで、
理解して慣れるしかない。
やってみれば、単によさげに上左から埋めてるだけであり、ほぼ全自動だから超便利だよ。
それで自動的なレイアウトから変更したければ個別にCSSを当てるだけ。 >>669
全部勉強してからやろう、と考えてるのならそれも間違い。
CSSは浅いがかなり広大なので、最初に全部学ぶのには向いてない。
664のサイトは分かりやすいから、それ系を10～20ページ、4～8時間かけて基本を抑えて、さっさと使うべき。
ただまあ、初手で勉強するほどの内容はそもそも無い。
666なら、
<td class="myColumn">あいうえお"</td>
.myColumn{width:50%}
とクラスを介して分離するだけだから、見れば分かる程度だろ。
なお661の
> td { width: 50%; }
は分かりやすさ優先でそう書いてくれてるはずだが、実際はこういうタグに当てるのは止めとけ。
グローバルスタイルになるので、サイト全体でそうしたい場合以外は余計に面倒になる。
HTMLをマークダウン等で手書きしてるのなら面倒だろうが、
一々クラスを当てるのが基本だし、そうした方が後々上手く行く。 ありがとうございます
%抜けてました
特に理由はないですがとりあえずHTMLのみで書いてみようと思ってCSSをつかってません
CSSを使いこなせないってのもあります 左上から適宜埋めたいが、埋まらないのなら真ん中に表示する方法ってある？
<a class="container">
<img>
<img>
<img>
</a>
のようにサムネを纏めて表示し、枚数も大きさもそれぞれの時に、
.container {text-align:center}
.container img{float:left}
.container img:only-child{float:none}
として1枚だけのときは問題なく真ん中に表示される。
複数枚のときも左上から埋めてくれるのはいいが、
埋まらないとき、(＝右に入らず下に表示されるときとか）
当然だが右側に空白が集められてしまう。
この場合に、真ん中(中央揃え)に表示する方法ってある？ （続き）
サムネは1枚目は大きく、2枚目以降は小さく、1枚目の隙間を埋めるように表示したい。
以下１は全部でサムネ１として、（以下同様）
１が縦長なら、
１１１１２２（空白）
１１１１２２
１１１１３３
１１１１３３
１１１１４４
１１１１４４
１１１１
１１１１
１が横長なら、
１１１１１１１１（空白）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２３３４４（空白）
２２３３４４
みたいに。この場合の（空白）を左右均等にしたい。 すまぬ、色々やってたら多少進んだので自己レスで補足。
.conteiner{display:inline-block}
で上辺を埋めきれていない場合は container幅が中身と同じになるらしく、結果的に中央揃えされる。
上辺を埋めきって、或いは入らなくて下側に折り返した場合、
右側は空白になるが、その部分も含めてcontainer幅になるらしく、中央揃えはされない。
分かりにくいのでもう一度書くと、以下。
上辺を埋めきってない場合、下記左右の空白Ａは同じ幅となり、希望通りになる。
（空白Ａ)１１１１２２（空白Ａ）
（空白Ａ)１１１１２２
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１ （続き)
上辺を埋めきって下に折り返した場合、左詰となるが、これを出来れば中央揃えにしたい。
１１１１２２（空白Ｂ）
１１１１２２
１１１１３３
１１１１３３
１１１１
１１１１
１１１１
１１１１
１が横長の場合、元々下に折り返されてるので、左詰になる。これも出来れば中央揃えにしたい。
１１１１１１１１（空白Ｃ）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２（空白Ｄ）
２２
今のところの解釈だと、float指定されたときに「実際の幅」でwidthを計算するようにさせられれば空白ＢＣはいけそうなのだが、どうか？
(可能であれば空白Ｄも中央揃えで均等にしたいが） >>678
駄目ではないけど、使っても無理じゃね？
なおブラウザはchorome49以降(WindowsXP以降）、IEは不要。
よってgridはNG。
ただflexは一次元用で、縦詰めと横詰め(677の2例）がそもそも無理臭いと見たが。
使うなら二次元用のgridだが、見る限り違うっぽいと思ってる。
が、まあ、flexやこの際HTML構造も多少は変更していい(div追加とか）から割と単純な解があれば募集する。
それを実際に使うかはまた別になるが。 XPは2014年4月9日にサポート終了してるのに
まだ対応必要なの？ >>680
それ以前に、最新ブラウザやgridなら出来るとかでもないのだから、外す意味がないだろ。 ちなみにもうちょっと補足すると、大量にサムネが用意されたときに、
敷き詰めて、可能であればそれを中央揃えで表示したいと思ってる。
（余白）１１１１１１２２（余白）
（余白）１１１１１１２２（余白）
（余白）１１１１１１３３（余白）
（余白）１１１１１１３３（余白）
（余白）４４５５６６７７（余白）
（余白）４４５５６６７７（余白）
まあよくある状況だと思うけど、
サムネの大きさはバラバラなので、上記のように綺麗に敷き詰められる場合ばかりではないが、
その場合はそれなりに敷き詰めてくれ、という事。
今のところfloatの問題は左詰になる事だけで、敷き詰め自体は上手く行ってる。（というかそれが仕様だが）
gridは多分、敷き詰めではなくフレームレイアウト向けなので、（なお使った事は無い）
敷き詰める事も出来なくはなさそうだが、色々余計な小細工が必要な気がする。
なお敷き詰め後にcontainerのwidthを手動で与えてしまえば、中央揃えにはなるが、
window.getComputedStyleで得られる値は空白込みなので、
やるにしてもJS側で幅をちゃんと計算しないといけない。（と言うほど難しくもないが）
今のところこれは面倒なのでやらないつもり。(左詰で妥協) flexで中央寄せした要素の中にfloatで詰めていけばいいんじゃないの、しらんけど 今あるコンテナの内か外にコンテナ追加して寄せれば？
･･･と思ったけど条件大杉で無理って言われそう >>683
やってみたが同様に駄目だ。
おそらく原因は同じで、floatで詰めたときのコンテナ幅が『右側の空白を含んだ状態で』親と同じ幅になるからだ。
だからブラウザからすると、ちゃんと「右側に空白があるblockを中央寄せ」している事になってしまう。
試した内容は以下。
.containerの親 {
display:flex;
flex-direction: column;
align-items: center;
}
>>684
外側は元々階層があるからコンテナモドキになってるが、flexで試したら上記の通り。
他に案がある？
あと、内側ってのの具体案は？ ちなみにただのinlineだと中央揃えにはなるが右下を埋めてくれない。
具体的には以下。
欲しいもの
(余白)１１１１２２(余白)
(余白)１１１１２２(余白)
(余白)１１１１３３(余白)
(余白)１１１１３３(余白)
実際(display:inline;vertical-align:topだと)
(余白)１１１１２２(余白)
(余白)１１１１２２(余白)
(余白)１１１１
(余白)１１１１
(余白D)３３(余白D)
(余白D)３３(余白D) その手のはgridが一番楽なんじゃないの
その次にflexで都度divか何かで囲っていく 文字で書かれると目が滑るし数字の意味が分からん
図で書こうや >>687
使った事無いが、MDN読む限り、gridは基本的にgrid上に配置したい場合で、
大きさがデタラメな物を左上から埋める用途ではない気がするけど。
（gridは自分でレイアウトを細かく指定したい場合向け）
例では分かりやすいように大きさを固定倍にしてるが、
実際はバラバラの大きさのサムネイルを、出来るだけ余白無しで固めて表示して欲しくて （←ここまでは出来てる）
ただ場合によっては右側に大きな余白が残るのが見た目気に入らないだけ。
grid使えば楽勝で出来る！とかなら対象ブラウザを変更する事も検討するけど、実際、grid使っても無理でしょ。
>>688
基本的にはそれ。
ただし、サムネの大きさはデタラメで、綺麗にgridには載らない。
まあ今一応gridも試してるが、やっぱりgridは「グリッドに載せる用」に見える。
（初めてなので使い方間違ってるかもだし、もうちょっとあれこれ試してみるけど） js使わないと無理ゲーじゃないかな
jqueryだけどこういうのとも違う？
https://masonry.desandro.com/ >>689
5chだと無理だろ。罫線書いてもずれるし。
同じ数字は同じサムネイルだと思えば分かりやすいと思うが。
１１１１１１１１
１１１１１１１１
は横長の１枚のサムネイル。
１１
１１
１１
１１
は縦に細長い１枚のサムネイル。 >>687
ちなみにgrid試したが、
auto-fillでもサムネ幅で勝手に埋めてくれるのではなく、
あくまでこちらが指定した幅のgridに載るだけのように見える。
（まだgrid初心者なので根本的に間違ってるかもだが）
>>688
ちなみにそのサイト確認したが、全部flexで、しかも子にもflex指定で、単なるblock扱いで埋めてるだけだな。
最初からcolspanやrowspanが分かっててそれ専用のHTMLを生成しているように見える。
何か知らんがおそらくフレームワークで吐き出してる感じ。
今回の俺の件にはこの手法は無理だ。 >>691
基本的にそんな感じ。
ただ、その例は4列に綺麗に入る（ように調整されている）が、こちらはデタラメな大きさなのが違う。
実際はニュースリーダーみたいな物を作っていて、
各ニュース記事では写真の枚数も大きさも不定で、
それらを表示する際、原寸だと邪魔なので小型化してサムネとして表示している。
だからサムネの縦横のどちらかはこちらが指定した大きさ(例150px）と一致するが、
もう片方はデタラメになってしまうし、順番もソースが載せてる順なので綺麗に埋まるとは限らない。
そして目標サムネサイズよりも小さい物は拡大しない為、上記「どちらかは150px」も常に成り立つわけではない。
ただ、記事にはこういう写真が付いてますよ、と分かればいいので、
出来るだけ余白を詰めてぐちゃっと表示されてくれて問題ない。
(というか文字を表示する場所を確保する為、出来るだけ余白無しで表示したい)
ただまあ、その例もgrid使いながらJS併用なら、CSSだけではきついのかな？
まあgridがどこまで出来るものか知らないから、
その例見てもどの部分をJSで補完してるのかピンと来ないのだけども、
微妙にrowがズレてるのも綺麗に埋めてるよ！という意味なら、それで当たりだ。 >>691
>>695
つかこれって名前が付くほどの超定番レイアウトなのか？
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
ただこれ(MDN)見る限り、行内で一番大きい物に合わせてるだけで、縦には詰め込んでないので、
{display:inline; vertical-align:top}
で同じ事が出来るはずだけど、何が違うのかよく分からん。
(691のサイトはそれ以上に詰め込んでいるので、違いは分かるが)
俺自身は普通に見かける、例えばtwitter等でも複数のファイルを添付した際、
１１１１１１１２２
１１１１１１１２２
１１１１１１１３３
１１１１１１１３３
１１１１１１１４４
１１１１１１１４４
みたいに表示されるのと同じ事をやろうとしてるだけ。
（ただし大きさはデタラメなので綺麗には埋まらないが、それは仕方ない) すいません696のこの部分撤回します。
> {display:inline; vertical-align:top}
> で同じ事が出来るはずだけど、何が違うのかよく分からん。
こちらの環境の問題のようで、MDNに書いてるとおり、configして見直します。 >>691は配布サイトだよ
配布されてるjsを使ってサイズ違いのものを
感覚的にタイル上に縦横の余白調整してくれるの すいません
スレ違いかもしれませんが…
「CGIの動作が可能なHTTPD」ってどういうことですか？ >>698
それは理解している。
ただそういう場合は大体「これを使ったらこんな事が出来ますよ！」と分かるようにしていて、
実際そのページトップのデザインがそうなってる。
masonryレイアウトも確認した。確かに691と同じような事をCSSで出来るようになってた。
出来るだけ詰め込め、というノリは俺が欲しい物と同じ。
ただ、今回はgridに載る必要はなく、詰め込めればいいだけなので、これではない。
gridも再度確認したが、基本的にgridに強制的に載せる為の物で、
逆に、grid関係なくとにかく詰め込めなら、通常のフローレイアウトの方が当たってるように見える。
実際は確かにmasonryレイアウトの方が綺麗に見えるのは分かるが、
今回は単にサムネを出来るだけ固めたいだけだから、やはりfloatが正しいように見える。
ただ、floatの場合は「入るのなら横に、駄目なら下に」でしかないから、
節操なくデタラメに詰め込まれ、綺麗なラインなんて出来ず、
場合によってはおかしな改行や空白が入ったトンデモ配置になるので、嫌われるのも分かる。
しかもfloatでは何も制御出来ない。
この辺考えてmasonryレイアウトなのだろうし、今回それを採用すべきなのかもしれないが。
今目指しているもので、最高に上手く詰め込めた状態なら、688になる。
ただしfloatの場合は688の"GOOSE"のような縦長ブロックが途中で差し込まれたら悲惨な事になるが。
masonryの場合は一応そういう事が発生しにくい分は優れてる。
今のところfloatで左詰のまま妥協するか、
或いはfloatだと実際の所綺麗には埋まらないので、
それがあまりに見にくければ、どうにかしてmasonry的にするか、という感じ。
（とはいえサムネが2枚以下の場合はfloatでもおかしくなりようもなく、大半の記事はそうなので、そんなに目立たない)
皆さん色々ありがとう。 こう書くのが正しいっつってコードの書き方に拘ったところで、見る人からすると
「あぁ、サムネ左に寄ってんな」で終了だけどな >>701
まあ気にしない人はそうね。
俺もそうだが、気にする人は気にするんだよ。
ただ、このスレの連中は気にするべきでは？
なおジョブスは色々と美的にうるさかったらしく、「フォントの話は…」てな事を言った奴は即首にしたらしいが。
https://www.youtube.com/watch?v=cNPZzNHHmkY
682のとおり、JSでの対応は面倒なだけで難しくはないので、
俺もこんなノリだと首にされるのだろうなと思いつつ、どうするかなという感じ。
ただ、全体が中央揃えで、一個だけ左詰めだと、何これ？とはなるんだよね。
それでいちいち「バグですか？」と聞かれてもウザイし。 ごめん、702は書き方が曖昧だった。俺は気にしない派ね。
まあどうでもいい話だとも思うが。 サムネのサイズをcssなり書き出しサイズなりで統一するのが
ソースも視覚的な見栄えも良くなりそうって思いましたこなみかん >>704
その通りだけど、外部ソースを読むのでそこはどうにもならん。
>>684
内部コンテナって、もしかして個別サムネサイズに合わせて<div>で688みたいに段組しろって事か？
それはさすがにHTMLを見た目全振りにしすぎてるし、
今のところ682方式の方がJSも楽なので、やるとしたら682になる。
ちなみによくよく考えれば2枚の時はデフォのinlineで結果的にも全く問題なかったので、
floatじゃないと埋まらないのは3枚以上の時であり、674で :only-child 使ってるのも間違いだったわ。 >>699
CGIが動作可能な状態に設定されたWebサーバ >>707
coverは切り取られるので使い物にならない。
使うとしたらcontainかscale-downなのだけど、object-fitはそもそも外形を維持してしまうので、詰め込みは出来ない。 この板にカキコしていいかわからんけど、昔なつかしホームページを作りたい。
いまは、htmlを頑張って調べながら作っている状況だけど
90年代後半、2000年代前半のホームページあるあるを教えてください！
たとえば、アクセスカウンターみたいな・・・・。
できれば、昔なつかしデザインが残っている老舗ホームページのリンクもほしい。 >>709
ttp://abehiroshi.la.coocan.jp/ >>709
まんまググれば実例がたくさん出てくる
スレの主旨から外れてるので、作る段階での疑問が出てきてからまたどうぞ fieldset をMDNで見ると
＞フォーム内のコントロールをグループ化するために使用します。
とありますが、記事本文で吹き出しのような枠の使い方は本来の使い方と反れますか？
<fieldset>
<legend>タイトル</legend>
本文
</fieldset> それだとCSS1行で目的達成できるので
でももうdivにしました >>709
その時代だとフレームやテーブルでレイアウトは基本だなｗ
アクセスカウンターや掲示板とかMIDIのサウンド鳴らしてうざがられるとか こんなふうに、入力したら動いてくれるタグとかってないでしょうか。
うまく説明することができず、申し訳ないですがリンクのように予め入力した時間に
電車アイコンが動くようにしたいです。
速度がだんだん早くなるとかそういうのはいらないので駅についたら泊まる、駅間は動く
という感じだけで構わないですから、どういう言語またはどのようにググればいいのか教えて下さい
https://loo-ool.com/rail/SI/38/ >>716
アイコン要素にCSS transition仕込んどけば、飛び先の座標を指定すると勝手に動くよ
どの時間にどの座標に居るかはJavaScriptでよきにはからって
必要な知識はCSS Positioning, CSS Transition, JavaScriptでの要素取得かな >>718
こんなのあったのか
未確認だけどiOSの挙動にも対応してるのかな？
してたらいいな CSSについての質問です
例えば
p {
color: red;
}
というのがあったとしますが
p {color: red;}
これではダメなのですか？ >>721
すいません、そこについて詳しくお願いします
機能的には問題なく動作するということでok？ >>722
721ではないが、そう。文法的には問題ない。
ただ、ネット帯域をケチりたいのなら、適当にググって出てくるminifierを使って限界まで詰めたほうがいい。 >>720
ぜんぜん問題ないよー
記述属性多いとは探しにくくなるけど、行数は節約できて一覧性は上がるね 今の時代にCSSの記述で詰めて帯域ケチるとかあんの？ SCSS使ってるから可読性の為にわざわざ余白やコメント残す必要無いし
CSSにコンパイルする時に自動的に余白は削れるようにしてるわ >>725
地味に効くし、技術的にはやらない理由はないし、実際大きいところはほぼやってると思うよ。
自分が参考にしてるサイトを確認してみればいい。 >>727
レギュレーションで決まってたりするしね >>723-729
ありがとうございます
機能的には問題ないのですね。
記述属性が多いと探しにくいとはどんな場合ですか？ >>730
こんなん
.p01 { color: red; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 16px; line-height: 1.8; text-align: justify; font-weight: 500; text-decoration: underline; padding: 0 0.5em; margin: 0 0 2em; }
.p02 { position: absolute; left: 0; bottom: 2em; color: black; font-family: 'Noto Serif'', sans-serif; font-size: 14px; line-height: 1.6; text-align: left; font-weight: 600; padding: 0 2em; margin: 0 0 2em; }
.p03 { color: #0005; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 12px; line-height: 1.5; text-align: justify; font-weight: 300; padding: 0; margin: 1em 0; }
最終のミニファイはツールに任せればいいので、見やすさとメンテのしやすさ基準で使い分ければいいんでない <h1>あかさたなはま</h1>
これに外部CSSファイルの
{margin-bottom: 0px;}
を適用させたいのですがどうすればいいですか？ >>732
h1{
margin-bottom: 0px;
} >>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。
※stylesheet01.cssにはh1以外にh2などへの記述もしてます。 >>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。
※stylesheet01.cssにはh1以外にh2などへの記述もしてます。 <link rel="stylesheet href="(path to stylesheet)/stylesheet01.css" />
を<head>内に記述 "ページ全体に背景グラデーションを掛ける"方法が参考書に記載されていて
疑問があります(参考書には何故そうなのか理由がなかったので....)
<HTML>
<div class="content">
<h1>主題 主題 主題</h1>
<p>文章 文章 文章 文章 文章 文章</p>
<h2>副題 副題 副題</h2>
<h3>副副題 副副題 副副題</h3>
<ul>
<li>9:30〜</li>
<li>11:30〜</li>
<li>14:30〜</li>
<li>16:30〜</li>
</ul>
以下2回ループ
</div> <CSS>
html{
min-height: 100%;
}
body{
background: linear-gradient(#9ad4fc, #dcffb8);
}
.content{
max-width: 900px;
background: rgba(255, 255, 255, 0.7);
margin: 60px auto 0 auto;
padding: 30px;
border-radius: 15px;
}
ここで疑問です途中でグラデーションが途切れるので
"html"要素に対して高さを指定するのはわかります。
何故、最小値の高さ"min-height: 100%;"なのでしょうか?
"height: 100%;"でも同く途切れずグラデーションが適用されす。
その理由が参考書や調べてもわかりません。 >>739
早速のレス、ありがとうございます。
もう少し具体的に解説して頂けないでしょうか?
自分のブラウザ(chrome)だと、"min-height: 100%;"も"height: 100%;"も
同じ表示結果になります。 >>740
.contentにheight:150vh;を追加してみると違いが分かりやすいよ >>741
あっ!本当だ....
"height: 100%;"だと途切れ、"min-height: 100%;"だと途切れません。
これは何故、"height: 100%;"だと途切れるのでしょうか?
自分の見解ですと、"height: 100%;"だと画面(ブラウザ)の大きさに対して
100%の高さが表示されるからだと思いました。
ずっと考えて眠れず今の時間まで考えました。 「css height min-height 違い」で検索！ すごく正しいようで間違ってる答えが量産されるってのはこういうことか 
