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 画像遅延ロード系のスクリプト使う時、src属性書いてますか？ 読み込み中orダミーの画像指定しないとaltに書いた文字列が丸見え 初歩的な質問ですがサイトを作る場合に
一から手打ちorDreamweaverで作るのか
どっかからコードを丸々コピーしてきて中身を入れ替えるのか
どっちが一般的なのでしょうか？ >>645
個人で作るなら、今はwordpress等のCMSでテンプレート入れてサクサク作って終わり
コードなんて打たない
もうちょっとこだわりがあるならテンプレート自体を作る
業者の場合は色々分かれる >>646
えー
つまり自分ではデザインしない人の方が多いということ？
どっかでそれ数えてるもの？ >>646
派遣コーダーの仕事としてはどうでしょうか？
会社によって違うかもしれませんが、コーダーの仕事と言えばデザイナーがデザインしたものをスライスで切ってDivに当てはめていくみたいのが未だに一般的でしょうか？
テンプレートとは枠組みの事ですか？
つまらない質問でスミマセン。 >>647
サイトの割合は以前どこかで見た
もう一回探してみたけど、ソース出てこなかった。許して
・テンプレートそのまま使ってる人が多い
・テンプレートを使ったサイトを量産している人が多い
のどちらかだろうなぁ、と考えていたのは覚えている
製作者に占める割合は分からない
これは個人を含めると計測は出来ないだろう
>>648
派遣先による
wordpressのテンプレートに画像ポンポン当てはめてハイ終わり、10万円、ってとこもあれば
一からデザイン細かく作って50〜100万円ってとこもある
俺がよくやるのは
・全体デザインをデザイナーと考える。テキストや画像の位置をざっくり
・使う画像はデザイナーが決める。よっぽど変だったら「それ何か変じゃね？」と言って作り直してもらう
・後はパーッとコーディングして終わり
ちなみにdivはもう殆ど使わないよ。section、dl、ulが多い >>649
ありがとうございます
わかりやすいです
それとやっぱりwordpressも覚えといた方が良さそうですね
しかしdivがもう古いとはショック… >>650
いやいや
新しいとか古いとかいう問題じゃねえよ
個人の意見に振り回されちゃいかんw >>650
> divがもう古い
Google「えっ？」
Amazon「えっ？」
Apple「えっ？」 >>650
divが古いとは言ってないんだが・・・
「セマンティック」とか言われてるんだけど、
単になんでもかんでもdivで囲むんじゃなく、
適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている
<ul>はさすがに使っていると思うけど、他にもヘッダーは<header>、グローバルメニューは<nav>などが推奨される
これにより、ちゃんとセマンティックを意識してコーディングしているサイトは検索結果に表示されやすくなる・・・
というはずだったんだけど、ぶっちゃけdivで全部書いても全然変わらんわ。ﾊﾊﾊ
まぁ人間が見た時に見やすい、チームの開発が楽になるという利点はあるので、使いこなせないとマズイ
>>652
googleは何で書いても関係ないからな
全部divと知った時は驚いたけど
amazonとappleはコンテンツが最強すぎる Googleは後方互換性重視で、新しい技術だけを使う事には拘ってないのでは
MSと同じ
Appleとは対照的 >>654
そんなレベルじゃない
数年前はリストすら
<div class="li">
としていた
セマンティックは全く考えてない、というか考える必要がない みなさん、セマンティックって言葉知ってますか？
ちゃんと意識しましょう！！ ＿＿＿＿＿＿
,;i|||||||||||||||||||||||||||||||ii;､ ＿／
／||||||||||||||||||||||||||||||||||||||ii;､ ＼
／￣￣＼||||||||||||||||||||||||||||||||||||ii;ﾞヽ, ／
'"￣ヽ ヽ!!|||||||||||||||| ||||||||||!!"ﾍ ＜ セマンティックageるよ
ヽ ﾞ!!!|||||||||||| |||||||!! iヽ── /
|||ｌ ﾞﾞヽ､ｌｌ,,‐''''"" | ヽ|||||||||セマンティックageるよ
|||ｌ ＿＿＿＿ ﾞｌ ＿＿ ＼|||||||||
||!' ／ヽ､ oﾞ＞┴＜"o /＼ |'"￣| ホントの勇気 見せてくれたら
＼ ／ |ミﾐヽ──‐'"ﾉ≡- ﾞ'──''彡| |､ | |
￣| |ミミミ／"￣ ､,,／|ｌ￣"'''ヽ彡|| |､/ / セマンティックageるよ
ヽ､ｌ| |ミミミ| |､────ﾌヽ |彡ｌ| |/ ／＿
＼/|ｌ |ミミミ| ＼_/￣￣ﾌ_/ |彡|ｌ/ ￣／ セマンティックageるよ
＼ ﾉ ｌ|ミミミ| ＼二二､_/ |彡| ﾌ
￣＼ ｌ|ミミミ| ￣￣￣ |ﾒ/ ＼トキメク胸に キラキラ光った
| ＼ ヽ＼ミヽ ￣￣"' |/ /
/ ＼ヽ､ヽﾞ''''ヽ､＿＿＿＿_／/ ／＿夢をageるよ
／ ヽ ﾞヽ─､──────'/| ￣／
. ／ ﾞ＼ ＼ / / ＼＿＿
───'''"￣￣￣ﾞﾞヽ､__,,/,-'''"￣ ﾞ''─ そもそもデザインが先にあるから、そんな理想論言ってられないのが現実 >>653
>適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている
なんか15年くらい前が懐かしくなるなｗ >>661
本質的なことは昔から変わってないからな
基礎をわかってるやつが一番強い んで最近のグーグルはHTMLなんて大して重要視してないんじゃないか？
要素ぜんぶ<div>と<a>だけでも
<body>の中空っぽでJSで中身書き出すページでも
なんなら1枚画像びたーんって貼っただけのページでもちゃんと読んでくれるし SEOもセマンティック()も完璧なサイトが見てみたい >>665
すっごいマイナーなことについて書けばいいんだよ！ >>665
SEO会社はさすがにちゃんとしてる
:https://www.plan-b.co.jp/
と思ったらdivにhref属性があるんだけど何だこれ？ >>663
altも無い画像だけのサイトって検索結果に出てくる？ メニューアイコンがアニメーションで
≡ → ×
+ → ×
になるサイト多すぎて見てて恥ずかしい >>651-653
もうあんまり使わないタグなのかと思いました
いまでも使ってますよね
dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか？
divで囲うような配置でないような >>671
マネすることしか出来ないんだなーって思う >>672
× マネ
○ 一般的
奇抜な物を使うとユーザーが使い方分からないんだよ
個人的には、ハンバーガーメニューですらまだ奇抜な内だと思う >>670
divはデザイン的に使わざるを得ない時に、最終的に使うってレベル
＞dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか？
そう、今はモバイルが7割ぐらいのアクセスなので、モバイル中心に作る
divなんて基本的に使い所が無い
「モバイルファースト」とかで検索すると良い なんでulとdlはモバイル向けなの？？
それこそセマンティックでもなんでもないじゃん >>676
モバイル向けなんて言ってない
単純に使う機会が多いってだけ
引用が多いサイトならblockquoteを多用することになるんじゃないか >>675
モバイルと関係なくね？
単に自分は要素少なくても問題のない簡素なデザインばかりしている、っつー話でしょ
別にそれが悪いとは言わんが divとハンバーガーが悪だと思い始めたら、ひとつ上のコーダーになれるんやでｗ >>680
あっはい、茶化すなら君が上に上がるためのコーダーの指標をどうぞ >>682
強いて言えば、<strong>愛</strong>っすかね おまえらがいくらがんばっても
結局はコンテンツの中身と被リンクだから 時々でいいからmarqueeの事も思い出してあげてください >>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秒 ■ このスレッドは過去ログ倉庫に格納されています
