HTML/CSS のどんな質問にも優しく答えるスレ 35
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 34
http://mevius.5ch.net/test/read.cgi/hp/1538966757/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>685
そうそう
フロントの要素やらなんやらは本当に意味がない
これ否定する奴は一回全部divでサイト作ってみれば良い >>668
文字化してインデックスしてくれるやつ、類似画像検索では引っかかるやつ、まったく読んでくれないやつ
それぞれあるみたい
試してみてるページそんなに多くないんで何をどうすればよいのかはわからんすまん >>688
divとspan、意味のなさならdivが包括しているので
>>689
前例があれば、ちょっと聞いてみたかったってだけだよ
実際にやることはほとんど無いと思うからね
すごく役に立ったので大丈夫、本当にありがとう divは汎用的なブロック要素って意味がある
存在する意味がないみたいな認識なら、勉強不足じゃないかなぁ htmlのサイズは極力小さくするよう努力した方がいいのでしょうか？ >>693
とくには
大アクセスされるようになって
伝送料金を節約したい、とかそういう理由があるなら考えてもいいと思うけど まあでも、サイズが増える→移動中にクソ格安回線で見てる大量のザコ乞食の読み込み時間が延びる→離脱率少し上がる
だから大したことないとは言え確実に離脱率は上がる。 サーバーサイドで華麗に最適化した努力を
糞みたいなJSを埋め込んで邪魔をするフロント やっぱこのスレの奴らはダメだな
バカばっかりだ
俺が取り締まってやらないとな >>693
小さくするというより、見やすくすると良い
変にテクニカルにするのではなく、まとめたほうが見やすいところはまとめておけば良い 全板でワッチョイ強制導入らしい
アホ共が浮き彫りになって面白そうだｗｗｗ それでたら面白いだろうな
阿鼻叫喚だろうけど、是非やってほしい translateZと言うのはZ方向に移動するそうですが、
Z方向に移動しても変化が確認出来ないのではないですか？
translateXやtranslateYなら動きが分るのですが。 >>704
absoluteで重ね合わせたときなどに、どの要素が一番前に来るかを調整できる
ほとんど使わんけどね >>704
そうでもない
言葉で説明するのも難しいけど
xyzとrotateの値を合わせて変えてみるとわかりやすいと思う
要はmatrixだ >>704
まず705は嘘だからスルーしてね
translateZは奥行きを変化させるんだけど視点がデフォルトのままだとそれ単体ではほぼわからない
translateZの違う要素をいくつか並べて、併せて perspective(500px) を入れてみて お前らろくに言葉で説明もできんのか・・・
>>704
（3次元空間の）Z軸の移動は
遠くのものは小さくなるという効果がある
>>705
CSSの重ね合わせは重なりの順番だけで
2次元空間なのでちょっと違う >>701
他の板に導入されたときは、導入前に立てられたスレは対象外だった
よって、おまえの醜態は晒されずに済むだろう >>708
凄いですね。
translateZの意味が分かりました。
ありがとうございました。 >>649
すみません、これは社内にテンプレートがいくつかあって
それを利用して作成しているという事ですか？ いまだにfloatコーディングなんだけど
flexとgridどっち覚えたらいいですか？
このスレだとflex使ってる人が多いみたいだけど
gridの方が欠点があんまりないってのを他のサイトで見たもので... >>712
要するに作らないでテンプレ売りしてるだけの似非ってことだよ >>713
両方
別にfloatがいかんてこともないよ
適材適所だ
とんとfloat書かなくなったけど >>713
flex
gridは対応ブラウザが絶妙で怖い。会社のページには使わない方が良いと思う
スマホゲーのサイトならgridでもいいかもね つーかほんとに導入されるのかな
だとしたら嬉しいかもしれん >>715
>>716
ありがとう！
floatはまだ使っててもいい感じですね
しかしながら、flex、gridのお勉強も必要みたいなんで
ぼちぼちflexからやりたいと思います。
数年に一度コーディングの流れ変わるのなんとかなんないかしら=3 >>720
それは放置して貯めてるからだｗ
新しい機能やプロパティを
へ〜こういうのができるのね〜程度に
たまーに追ってれば大丈夫だよ floatはレスポンシブでめんどくさい
はっきり言って書いててアホらしくなる 絶対にPC使ってる人しか見ないようなサイトでも
レスポンシブデザインにしたほうが無難でしょうか？ 上であったhtmlのサイズについて思ったけど
ソースに改行を入れないってのは少しでも効果あるのかな
brとかじゃなくソース自体の改行コード >>723
もちろんそっちの方が無難
慣れたらそもそもそんなに手間じゃない
横並びの要素をwidth100%にして縦並びに買えるだけ
迷う時間の方がもったいない >>724
ちゃちゃっと計算してみたらいい
文字コードUTF-8・改行コードLFで10,000行のHTMLを書いたとして
改行文字の量は
10,000B ＝ 0.08Mb
ドコモが測った泥LTEの実行速度の中央値が190Mbpsだそうなので
https://www.nttdocomo.co.jp/support/area/effective_speed/
0.08 ÷ 190 ≒ 0.00042秒
改行コードがCR+LFだったとしても0.00084秒
気にするほどのもんでもなかろう AAって最近表示崩れまくるしPC以外だとCSSでどうにかしようとしても崩れる気がする
そこで画像化してサイトに並べようと思うんだけど画像だらけのページって
googleさんからどういう評価受けるんだろう？ 途中で投稿してしまった
>>729
べつにどうってことない
インスタグラムのページとかだって普通にヒットするじゃろ？ >>729
もうAAは限界かな
一行AAはともかく、複数行はもうスマホでガタガタだ 画像で見て初めて「えっAAってこう見えてるのが正常なの？」ってなるよね AA書体をウェブフォント化して
font-familyに当てても駄目かね？ >>727
>>724がまともなやつならインデントも取ってるだろうしもっと膨らむぞ >>736
インデントも削ってみよう
10,000行で、平均4段のインデント（スペース4）があったとして
160,000B ＝ 1.28Mb
0.96 ÷ 190 ≒ 0.00674秒
まあこれも誤差ですな 間違えた
1.28 ÷ 190 ≒ 0.00674秒 そういやipも
255.255.0.1
なら
ff.ff.0.1
で行けるんじゃねって思ったけどディレクトリあるからあかんな ルーティングからビューの出力が始まるまでの時間の方が圧倒的に長い訳で 昔は画像がスクロールするごとに読み込まれるjqなんとかを喜んで使ってたけど
今だと余計な機能なんですかね？ >>743
そうでもない
特にモバイル利用が増えたんで
見られるかどうかわからん画面のはるか下方の画像をロードするのは
ユーザにとってもサーバ側にとっても、そんなにいいことない その辺はスマホブラウザが自動的にやってくれるようになったよ chromeだけだしまだexperimentalだろ 質問です
レンタルサーバーで独自SSL化するとアドレスがhttpsになると思うんだけど
独自SSL化した後にも外部からhttpのアドレスでも表示される？
他サイトみるとhttpのリンク踏んでもhttpsのサイトにしっかり表示されてるんだけど。 >>747
どうぞ
.htaccess に追記してください
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule> <div>
あ
</div>
たぶん、DOM に、改行・コメントなどの要素も入るだろ？
要素は「改行・あ・改行」
だから配信前に、ミニファイ必須！ >>748
ありがとうございます。
これ追記しないでhttps化するとhttpのリンク踏んだ場合は表示されないのですか？ マークアップ言語なのにソースの改行がレンダリングに影響するとか、そもそもの仕様がクソだろ >>752
まぁねぇ
htmlを大幅に改良したマークダウンってのがあるけど、もっと流行るかと思ったけどサッパリだ >>752
もともと英語圏のもんだからねえ
連続する改行とスペースは1つのスペースとみなすってのはわりと合理的なのかもしれん >>751
サーバーの設定による
403になる場合やそのままhttpで表示される場合やhttpsにリダイレクトされる(>>748をサーバー側でしてくれる)場合など videoタグのjsからの再生がviteo mutedにしないとできないらしんですが無理やり再生する方法ってないですか？
Firefoxでは動いてたのにChromeじゃ動かなくてびっくりしました それが出来ると
職場で急にエロ動画が！てことができちゃうので chromeは主にウザイ広告に対してかなり規制をかけるようになった
ってか最初から音出すのはやめてくれ〜 主だった広告CDNのドメインは全部127.0.0.1に振り向けちゃってるから
最近どんなうざい広告があるのかわかんなくなってきた… リンクの文字列に見せかけたやつとか、Googleのも酷いのあるで ありがとうございます！
↓↓のような3つのファイルがあって
1.[ _template.scss ] テンプレート
%template {
.main {
background: $BGColor;…
}
}
2.[ _theme-red.scss ] カラーテーマ
$BGColor: red;…
3.[ _theme-blue.scss ] カラーテーマ
$BGColor: blue;…
↓↓のようにcssを出力したいのですが
.theme-red {
.main {
background: red;…
}
}
.theme-blue {
.main {
background: blue;…
}
}
Sassの機能を使って実現できますでしょうか
目的は後にJSでclassを切り替えて全体の色を変えることなのですが… array
for
でできるんじゃね
知らんけど（鼻ほじ） >>764
どこの平行世界だよ
あぁお前一人しかいない世界かww SASS使えるとか使えないとかで喧嘩する流れやん！！ 喧嘩じゃなくsass使用不可の案件が存在する時点で>>764は世間知らずなだけって思ったけどみんながみんな仕事でやってるわけではないんだよな趣味の人だっているもんな >>764
Stylusの人もPostCSSの人もいるんじゃ >>771
mixinで解決しました！ありがとうございます チームでの開発に支障なければ、個人の環境なんて何でもおｋでしょ https://jsfiddle.net/p4h5o3gk/
このコードは、どのブラウザでも黄色が正方形、青の幅が10pxで見えてますか？ >>776
「どのブラウザ」ってーとIE6やガラケーなども含まれる
まぁ9割ぐらいの人はその見え方で見えていると思うから、大きな問題はないと思う >>775
優しく答えるスレでイキってる無職さんw >>765
そのテンプレートをmixinにして
extends的に使うといいよ 今では海外では、SASS の使用率が100% だから、日本でも避けて通れない
>>765
>$BGColor: blue;…
変数を属性名にできるか？
普通は、変数は値に使うもの。
background: $BGColor
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
本当は、この本に書いてあるように、MindBEMding による、CSS の構造化が良い。
Block__Element--Modifier (BEM) >>782
var(--hoge)知らないの？ｗｗｗｗｗ >>782
この読点の打ち方は例のキチガイ
おまえ前にもここに来て発作起こしてたよな？早く病院もどったら >>782
>変数を属性名にできるか？
インターポレーションて知らんか？
変数はなんにでも使えるよー
$selector: '.foo .bar. .baz';
$property: 'background-color';
$value: '#ff0000';
#{$selector} {
#{$property}: $value;
}
こんな感じで
一部に使うことも出来るよー
$number: 1;
$prop: 'color';
.hoge-#{$number}{
background-#{$prop}: rgba(red, 0.5);
}
あと
>海外では、SASS の使用率が100% だから
盛るな盛るなｗ
海外意識しすぎ、大して変わんねーよ
どんな人外魔境だと思ってんだｗ ちょい間違えた
こう
$number: 1;
$prop: color;
.hoge-#{$number}{
background-#{$prop}: rgba(red, 0.5);
}
クォートいらんかった ■ このスレッドは過去ログ倉庫に格納されています
