HTML/CSS のどんな質問にも優しく答えるスレ 32
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でも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 重なるのをfloatで回避ってのがよくわからないなー
ちなみに重なってるのはfloatが悪いんじゃなくmarginをimgやspanにつけてるから
span(inline要素)には上下marginやpaddingがきかない(ベースライン規準で位置を変化させない)
spanにスタイルつけるときは文字修飾や文字サイズ分の背景をつけるときだけにして
レイアウトの調整は外側にコンテナブロックを作ってそれにつけるのがコーディングマナーだと思う
なのでimgをそのままおくのもよろしくない
外側にdivを作ってその中にimgをおくのがコーディング的にはきれい
あとはdivどうしをどうレイアウトするかはflexなりfloatなりを使えばいいと思う とりあえず解決したのでご報告しておきます
結論から言うと要素の間でclearfixすると要素が重ならなくなり
謎の解決方法?のfloat:leftも使う必要がなくなり再度中央寄せする必要がなくなりました
最初からサンプルを乗せればよかったのですが…すいません。
元々:Prev Nextの真上の6やajaxをクリックするとPrev Nextが重なってしまっていた
http://pilotfarm.uh-oh.jp/gridder/demo/demo.html
floatでなんとかしていたもの:
http://pilotfarm.uh-oh.jp/gridder/demo/demo-float.html
修正後:
http://pilotfarm.uh-oh.jp/gridder/demo/demo-fix.html
大変お騒がせしてすいませんでした。 >>134
spanにIDで属性付けるってとこで?なんだが
こういう風なデザインの場合はflexでやるのがスマートで良いと思う
これを期にflexを導入してみては? 起こっている現象が同じというだけで
そこのサイトの質問者と同じ条件をしているわけではないです
136ではったURLのソースを見てもらうとわかるかと思います(Gridder.jsのdemoほとんどそのままですが)
混乱させてすいません
何にせよflex勉強してみます <div class="parent">
親の中身
<div class="child">この中身</div>
</div>
の親はブラウザ幅最大上下左右中央ぞろえを
parentは
position: relative;
width:100%;
childは
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
で、対応したんですがIEのみtranslateで移動した分?の余白が右に出来ます
overflow:hiddenを使わずに対処できるでしょうか? なんどやってもうまくいかなくて
もうええわ!って、次の日にやったら
ちゃんとできてる現象に名前をつけたい ・リフレッシュ
・気持ちの切り換え
・発想の転換
・落ち着く
お好きなのをどうぞ
まあ強いて言えば「明日の俺はすごい」かな 何度やってもうまくいかない!もうええわ!
って時はリフレッシュすればなんとかなるって俺は知ってるい!
よし少し休もう…
…っは!朝!?
って現象はなんていうの? IEはもう対象から外しても問題ないと思う
今WEBをPCデスクトップで閲覧してるのは全体の10パーセントくらいだから IEユーザーは広告よく踏んでくれるから
無駄とは思えないな
これで子供4人養ってるのに 全体の〜みたいな統計持ち出すと
こいつ大雑把だ!って言われない?
代理店とか客の広報とかとか
自サイトを解析して無視できるほど少ないかどうか判断すべきだと思う まあクライアントがIE対応しろと言ってくるか
個人的にずっとIEをフォローしたいとこはしとけばいいんじゃね?としか 未だにIE6なんか使ってるやつおらんやろってバカにしてたけど
フロッピー使ってるPC見て戦慄した そもそもIE6なんてXP時代の産物だから今の時代にそんな環境で
オンラインするようなのを数に入れる必要はないと思う >>157
独自開発のシステムとか開発終わったソフトの関係上古いPCつかう企業はあるよ
でもさすがにネットするのはそこそこ新しい機体だろ
そもそもフロッピー使うようなPCじゃアナログモデムとかで今のネット回線つかえんだろ 古いPC使うのはオンラインでブラウザ使うとは別問題だしな Flashも今年で締め出しで動かなくなる流れだそうだし時代は移り変わってるなあ いまだにIE使ってる奴いるよ。
アクセスの多いサイト運営してるんだが、ブラウザ別の表示を見ると大昔のゲーム機とかのブラウザからのアクセスがあったりして笑える。 セガなんてだっせーよな。プレステの方がかっけーよな そういや任天堂DSでもブラウザあったよなw
あれ確かOperaベースだったと思うが解析だとなんて表示されるんだ?
3DSはACCESSだったな 客の社長の嫁さんが
「うちのテレビのインターネットで見れない」と言っている
ってのが一番きつかった
8年くらい前 >>161
それがそうでもないとこけっこうあるんだわ
さすがにFDDは付いてても使ってはいないようだが リスト表示で
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
これの左インデントを狭くしたい場合
<ul style="margin-left:-○○px">というようにマイナスを指定してやるしか
方法はないんですか? >>169
そういうバカを顧客として見るかだなw
顕微鏡で見ないとわからんようなものまでいちいち関わるのはリソースのムダ paddingでもいいし
list-style:noneにして・を文章にいれるなりbeforeにつけるなりしてtext-indentしてもいいし
absoluteでleftを指定してもいい
ただmarginがいちばん自然だと思うけど逆にそれじゃなにがいけないの? >>171
それがそうも言ってられないことけっこうあるんだわ >>170
デフォルトのスタイルのことだったら、ノー
開発ツールで何のどこにmarginやパディングが指定されてるのか観てみるといいよー >>170
リストでも使用用途によって答え変わるかも
こういう質問の場合はlist-styleを使うのか使わないのかを実装方法も明記してほしい
普通はmarginで調整だがこういうのはclass指定でやろう flex使っても結局marginがある要素の左右づめはマイナスmargin必要ですよね? >>177
betweenと空要素の方が若干楽な気がする
運用も含めて考えると >>178
?
marginけしたらmarginのある左右づめじゃなくなるよね?
>>179
質問が曖昧でした
両端の要素には左右margin0になるようにする場合です(左端の要素はleftmargin0,右端の要素はrightmargin0)
要素自体の左(右)詰めは空要素でできています。 >>180
まだ曖昧だ
カラム数が固定なのか変動なのか
固定なら右マージンだけにして
nth-child(カラム数n)だけ右マージン0にするのが定石だと思う
変動だったらどのflex-itemが左右端に来ているかどうか判定できんから
flex-itemのマージンではなく、betweenで空けるしかなかろう もう1つのスレが過疎っていたのでここで質問させていただきます
自分はホームページを作り始めてから間もないのですが、
一応トップページだけは公開出来たのですが、第二以降のディレクトリのアップロードの仕方が分かりません。
例えば、http://aaaa.netというトップページがあったとして、
その下層にhttp://aaaa.net/xxxxやhttp://aaaa.net/xxxxxx、xxxxxxxx等と言ったカテゴリがあるじゃないですか。
それの作り方、と言うかアップロードの仕方がどんなに調べても分からないので教えていただけるとありがたいです。
因みにアップロードにはFFFTPを利用しています。 >>182
FFFTPの左ペインに表示されるファイルを
右ペインにドラッグしてアップロードするように
フォルダをドラッグしてアップロードすればいいよ >>182
その1
アップロードしたいフォルダを右クリック
メニューが開くので「アップロード」をクリック
その2
アップロードしたいフォルダを左クリック
上にアイコンがいっぱい並んでいる中の「↑」をクリック >>181
flex-itemのwidthをcalc((100% / n) -10px)とすることで(nはカラム数)両端marginなしでできました 変わった計算だけど
OKならまあそれはそれでよかった >>183-184
ありがとうございます、アップロードの仕方は分かりました
ただ、第二以降のディレクトリの作り方がよく分かりません。
第二以降のディレクトリの拡張子は好きな文字の羅列の後にhtmlを付けてメモ帳で保存すれば良いのですか? >>187
パソコン自体が初心者なのかな?
フォルダ作って、その中で好きな名前.htmlってすればいいんだよ
URLの
http://example.com/hoge/fuga/hage.html
hoge/ や fuga/ のスラッシュはフォルダって意味
Windowsだとバックスラッシュ(¥マーク)に相当するもの
上のURLだと
ドキュメントルート
├ hoge/
├ fuga/
├ hage.html
ってなる >>188
今ようやく理解しました!ありがとうございました! リキッドではなくなる
というかリキッドだと狭くなった時に見づらくなるといいたいのではなかろうか
それを打開するためのレスポンシブですな >>190
レスポンシブはブレイクポイントでカラム数変えるので問題ないです 変なところで改行されてしまったので
white-space: nowrap
を入れたら改行がなくなりました
ですが改行されたのはホワイトスペースの入ったテキストではなく
日本語なのです
日本語もホワイトスペースと判断されることがあるのでしょうか? >>194
改行とは何かというのを理解したほうが良いぞ
本の小説とか読んだこと有るなら思い出すといい。
まずHTMLというのはもともと英語圏で作られたもので
英語圏の文化で成り立ってるということだ
その英語の小説。どこで改行されてると思う?
単語の区切りのスペースだ。単語の途中で改行されることは基本的にない。
また単語の間のスペースはいくつ有っても一つと同じ扱いだろうってのは想像がつくだろう
一方日本語はどうか? 英語と違って単語の区切りにスペースは存在しない
そして日本語の小説は単語の途中であっても改行されているはずだ
つまりデフォルトでは以下のような違いがあるということだ
英語圏
・単語の途中で改行されない
・各単語はスペースで区切られ、必要な場合にスペースの位置で改行される
日本語
・単語の途中で改行される。
・各単語を区切るスペースはない
・(ただし意図的にスペースを入れた場合は、単語の区切りとみなされ必要な場合に改行される)
じゃあwhite-spaceとは何か? これを改行するかしないか決めるためのものとか
考えてるから理解できない。white-spaceという言葉の意味を考えろ。
ホワイトスペース、空白。つまり英語圏の単語の間にある、空白のことだ
white-spaceとはこの空白をどう制御するか
white-spaceの初期値のノーマルは、英語の小説と同じような感じの設定
nowrapは、各単語の区切りの空白で改行しないためのもの
preは、preserving space algorithm(空白をそのまま残すアルゴリズム)の略だ >>195
> その英語の小説。どこで改行されてると思う?
> 単語の区切りのスペースだ。単語の途中で改行されることは基本的にない。
嘘つけ音節の切れ目にハイフン挿入して単語途中で改行されとるやんけ!
これが基本じゃなく応用だとでも? さて日本語の場合はどうなるか?
日本語は基本的に各単語の間にスペースは存在しない。
つまりだ、white-spaceは関係ないということだ
(もちろん日本語であっても間にスペースを入れればそこで改行されることは有る)
日本語が改行されている時、それは存在しないwhite-spaceで改行されているのではなく
単語の途中で改行されているということだ。
日本語は単語の途中で改行しても良い。日本語とはそういうものだ。小説もそうなってるはずだ。
white-spaceは関係ない。じゃあ何が関係するのかと言うと
単語の途中で改行するかどうかを制御するための
word-wrap (overflow-wrap) と word-break だ なお、スペースで改行すると言ったが、
正確にはスペースの種類による。
改行の対象とならないスペースも存在し
(non-breaking space) がそれだ
スペースと言ってもいろんなスペースが有るのだ どうせCSSのhyphensプロパティもしらないんだろう?
さっさと消えろ ん?この間違いCSS以前の問題だよね?w
そんなに恥ずかしかったのかな?
ではリクエストにお応えしてもう一回w
>>195
> その英語の小説。どこで改行されてると思う?
> 単語の区切りのスペースだ。単語の途中で改行されることは基本的にない。
嘘つけ音節の切れ目にハイフン挿入して単語途中で改行されとるやんけ!
これが基本じゃなく応用だとでも? >>196
長い単語が行末とかにきた時にやるんだよハイフンで改行するやーつ
そのために<br>がある
段落と改行については、日本語はルールが全く違うんで
そんなに厳密に考えてもしゃーないんで適当でいいんだよ
ただし、wovnみたいな翻訳サービス使う時には
わりと影響でかいんで少し気を使った方がいいかも >>203
> これが基本じゃなく応用だとでも?
おまえは知らないようだが、普通に応用だが?
ハイフンはそもそも使わない
(単語そのものにハイフンが含まれているものは除く)
ハイフンは印刷する際にどうしても単語の途中で
改行しないとバランスが悪くなってしまう時に入れる、
強制改行マークだ。
基本は使わず、最後の手段として使うもの。
これが応用じゃないとでも?英文章の常識ですよ?w
知らないなら少しは調べてから反論してくださいね。 お前らスレタイの「HTML/CSS のどんな質問にも優しく答える」の理念がぶっ飛んでるぞw >>206
これ好みの問題じゃん。
音節でハイフン入れて改行されることがあるって中学で習ったよね。
中学英語が応用…?w 中学で「ハイフンで改行」とか習わんだろw ウソも大概にしろ >>207
仕方ないね。ここは「必ず」が抜け落ちたスレだから。
↓こっちは「必ず」が含まれてる
HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.net/test/read.cgi/hp/1519547237/ >>210
スレタイの日本語おかしいな。
英語どころか日本語も怪しい奴ばかりwwww >>197
ありがとうございます
word-break: keep-all;
としても
white-space: nowrap;
と同様、改行を防げました
こっちの方が適当な指定なのでしょうね
white-space: nowrap;
は、本来の動作というより、偶然そうなってるだけの気がしますし。
ありがとうございました >>213
結果うまくいって満足したならまあ、それでいいんだけど
その解釈はちと間違っているから
時間があるなら調べておくといいよ
word-breakeとwhite-spaceの違いを
例を挙げて比較してくれてるサイトあるから >>210
そこはキチの巣窟で「も」ぬけの空だけどねwwwギャハハ 基本的に日本国内で閲覧するサイトではテキストはブロック単位で
改行は製作側が意図した指定の箇所で改行させるかな 好きにbr入れさせればいい。
邪魔になったらcssでそこのbrまるっと指定してdisplay noneすればいいだけ。 white-space: preline 使えば br も不要。 >>207
sassで荒らしてた奴が、今度は改行ネタで荒らしてるんだろ sass君はテンプレをsassOKに書き換えたパクりスレ立てて乗っ取り企てたのに誰もついて来ず過疎っちゃったからショックで寝込んでるよw
↓
HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.net/test/read.cgi/hp/1519547237/ 質問というより、助言が欲しいのだけど、
画像ファイルのサイズ指定について
imgタグにcssでサイズ(width、height)を指定していると、
レイアウトが早く確定できるということで、そうしている
でも今の時代じゃ、高速回線が当たり前だから、
そんなことを気にする必要はない気もして、
サイズ指定を続けるか、やめるか、迷ってる
サイズ指定はレイアウトを確定させる以外にも、
こんないいことがあるよ、というような話とか、
今の流行の話とか、あれば聞かせてもらえるとうれしい
ちなみに、HTMLとCSSしか使えません
Javaスクリプトもさっぱりです
まして、サーバー側でレイアウトを構成して出力するとか、
そういう高度なことはできないです >>224
回線が早くてもわりとガコンガコンするよ
必ずscrollTopが0の状態でロードされるとも限らんしね ガコンガコンしないように
画像以外のブロックの大きさに気を使うと良いかも知れんですな >>224
指定してないとハッシュでアクセスした時やページの途中でリロードした時にずれる
特にハッシュの時は画像が読み込まれる前に位置が確定するので全然違う位置になってユーザーの不満に繋がる
どんなにくっそ速い回線でも
・ドキュメントロード
・ハッシュ処理
・画像読み込み
の順である以上変わりはない
どうしても指定したくなければ>>227の言う通り画像を内包する要素にサイズ指定するとかだね 画像リサイズ機能つきのcmsやcdn使うとき処理をきっちりかっちり最適に自動化できる >>224
画像のサイズは sass(scss) + Compassで取得できるよ
https://stackoverflow.com/questions/9731327/scss-getting-image-dimensions
こんな感じらしい
.folder {
background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
height: image-height("icons/home/folder.png", 'image/png');
width: image-width("icons/home/folder.png", 'image/png');
}
ただ個人的にCompassはあまり好きではない。
せっかくlibsassになってRuby依存から脱却されたのに
CompassでRuby依存してしまう。遅いだろうし。
Compassじゃなくてその他のビルドツールとか使ったほうが良いかもね HTMLとCSSしか使えませんとわざわざ書いておいたのに使えない回答者ですね。
他の方お願いします。 じゃせっかくだからreactでstyled componentにしますわ。
さようならcss Reactで作られたウェブサイトってどんなのがある?
開発元のFacebookは除く、そして実用じゃなくて
勉強のために作ってみました。みたいなサイトも除く ■ このスレッドは過去ログ倉庫に格納されています