HTML/CSS のどんな質問にも優しく答えるスレ 34
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/
■関連スレ
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 969 名前：Name_Not_Found[sage] 投稿日：2018/10/07(日) 22:23:52.27 ID:???
どうやるの？
flexって好きな位置でのwrapと
複数行にわたる縦幅の一致ができないよね
それさえできれば万能なのに
973 名前：Name_Not_Found[sage] 投稿日：2018/10/07(日) 22:57:41.72 ID:???
>>971
更新してなかった
具体的にどうするんです？
＜div class="container" style="width:1000px"＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x200.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜/div＞
これを (width height 指定一切なしで) flex 関連のスタイルだけで
3 x 3 の等サイズの四角形に配置できます？ ほれ
flexで合わせてやったぞ
前スレでアスペとか言ってたヴァカは脳みそ足りねえからてめえはスルー
https://i.imgur.com/NvwzobL.jpg ぐーぐるこわい
あいつらその気になればせかいほろぼせる 画像だけで証拠になってると本気で思ってるならアスペすぎだろ 確かに行にまたがって高さ合わせたい場合あるよなー
リンクボタンで１つだけ長い文章で２行になったりするとみっともない
<style>
a {
display: block;
width: 50%;
border: solid 1px #000;
margin: 1em auto;
padding: 1em;
border-radius: 0.5em;
color: #000;
text-decoration: none;
text-align: center;
}
a:hover{
background-color: #eee;
}
</style>
<a href="#">長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい文章</a>
<a href="#">短い文章</a> めんどくせーからできるかだけでいいって前スレで言われてるからソースは不要ってことだろうな flexboxで割付した際に余白のpx知りたいんだけど
デベロッパーツールで確認って出来るん？ let max_width = 0, max_height = 0;
$('.container > div').each((_, e) => {
if($(e).width() > max_width ) max_width = $(e).width();
if($(e).height() > max_height) max_height = $(e).height();
});
$('.container > div').width(max_width).height(max_height); 高さ合わせるのは無理でも折返しぐらいはできないの？
折り返しできないなら flex って inline-block 以下じゃん 残りスペースに関係なくすきなところで折り返すって意味だと思うよ
早い話 <br> をやりたいってことかと 最初からってどいういうこと？
最初からそう作るにはどうするかって話なのに
flexで何でもできるとか言い出したのお前じゃん ちょいちょい俺の荒らしレス入れてるから話がごっちゃになっとるねぇ～ HTMLの初歩を学んでいるんですが、img要素ってわざわざp要素で囲まなきゃいけないんですか？
囲まなかったらどうなるんですか？ >>23
そうなんですか？
だったら自分が今学習しているサイトはちょっと信頼できないかもしれないですね
画像をパラグラフ要素で囲むって意味分からないですもんね BEM記法とかそこまで厳密じゃなくても
基本的にインライン要素はブロックで囲むってのは推奨されてるね
flexがでてからは１つ外側に指定したいからスタイル当てるのがやりやすい divでもいいけど p で囲むのはデフォルトで p のほうが下側にマージンが付いてるから
がぞうが連続した場合でもレイアウトがみやすいってことかと
意味論を重視するなら コンテナー div であるべきだけど
p のほうが何もかかずに見栄えよくなるから好みかな
困ったら p つかっとけってコーディングスタイルはウェブコーダーでも普通にいる >>25>>26
ありがとうございます
まだまだ勉強が足りないですね >>22
俺の中でだが
インライン要素は生もの食品のイメージで裸で置いてはいけない。
魚、肉とかが何も包装されてない状態を連想するようにしてる もし<p>を書かずに<span>を書きたくなったらこうすればいい
<body>
<div class="main">
自由に配置できる
</div>
<body>
全てがdivブロックの中にあるので、>>28のルールを破ることなく
インライン要素を自由に配置できる >>29
お前みたいなのがいるからな…divなくなって欲しいわ無能 >>29を見て思ったのだけど、
なんとなくbodyにCSSをあまりくっつけたくないから、
ページ全体をdivで囲って、そこにページの基本となるCSS
（background-imageとかfont-familyとか）
をくっつけてるんだけど、
これってマズイんだろうか bodyの末尾になんか追加するjqueryプラグインとかあるからなあ
<div>いれとくのはちょっと気持ち悪いけど仕方ないかなって思ってる >>32
文法以外の所で、divを入れる必要性があるのか
そういう可能性は頭になかった
ありがとう >>29
俺の中でだが
1枚の袋に魚、肉とかまとめてブっ込んで
カオスに入り乱れてるイメージ
中のインライン要素をまとめて1つの段落やアウトラインとして認識されていいならいいのかも >>30
無能はお前。インライン要素はブロックに入れずに置いていい。
それだけの話なのに、ブロックに入れないとダメとかいうから
お前の話は矛盾してるって突っついてやったんだよ htmlタグは気にせずにCSSのdisplayを駆使しまくれということでええのかな めんどくさ
そんなことしなくてもサイトに表示されればいいんだよ
細けえよ ul,olを入れ子状に何度も繰り返して配置する時、最大いくつまで入れ子に出来ますか？ >>38
HTMLのルールと
スタイルとはまた別問題
良し悪しは別として >>41
規定として入れ子レベルに制限はないけど、5000階層とかなったらブラウザの処理が重くなるかもしれない。勿論ul,ol直下にli以外は置いてはいけない。 >>37
何の話だよw
単純にdivのブロック要素で生置きspanが回避できる！っていってることがおかしいって話だよ
てかこの話何回目だろうぇ
多分divがある限り永遠と繰り返されるんだろうな MathJaxを使っています
$\begin{array}{cc}
a & b \\
c & d
\end{array}$
はちゃんと機能していますが、
$\begin{array}{cc}
a & b \\
\multicolumn{2}{c}{d}
\end{array}$
が機能しません。
なぜですか？
MathJaxでは\multicolumnは実装されていないんですか？
使っているMathJaxは
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML";>
</script>
です。 レシポンジブで、フォントの大きさ指定する単位は何でしてる？
rem？vw？それともpx…
なんか色々読んだけど。pxでいいような気がしてきた… >>49
pxだとデバイス毎に全～～部指定しなおさなきゃいけないから面倒じゃない？
remならrootのpxだけ定義すればいいから楽だぞ でも大手見るとpxでやってるとこはまだ多くある
デザインカンプに超忠実にやらなければならない場合
pxの方がいちいち計算不要だから作るのは早い
illustratorやphotoshopのカンプがpxで指定さいれてるわけだから
それをremに計算するといちいち面倒になる。
vwなんてウインドウサイズで文字以外の要素とのバランス崩れるから大変
全部の要素を完全リキッドに対応させる必要がでてきちゃう
海外サイトみたいに文字中心のざっくりデザインのサイトなら余裕だけど >>49
もはやvwしか使いたくない
viewportを画面の大きさに合わせる仕組みがあるのならpxでも構わないと思う
何れにせよリキッドじゃなければそれほど面倒はないはず フォームのパーツでプルダウンの中身まで作ってあるデザインをもらって、selectタグで再現できないからulとJSのクリックイベントを使って実装したのですが、タブキーで操作できるようにしてくれないかと言われてしまいました。
たしかにselectタグを使えばタブで選択して項目を選ぶことができたのですが、HTMLでselectやinput「っぽい」パーツを作って、タブで操作できるようにすることは可能なのでしょうか？ プルダウン自体はCSSだけで可能だよ
ただ前スレでもでてたけど select というか option にデザインあてるのが結構制約あるから
デザイン指定されてるなら厳しいかもね
すでにJSで実装してるなら accesskey=key とかつけるだけでいいんじゃないの >>55
まさにoptionの方のカスタマイズが必要だったのでselectを使いませんでした。
accesskeyは調べてみましたが、あくまでほかのフォームパーツと同じようにタブ操作できるようにするのが目的なのでちょっと違うかなと思いました。 タブキーで操作ってのをぐらいかしてくれないとよくわからないけど
jQueryUIのselectableとかなら数行かくだけでわりと高機能なことができた気がする >>49-52
漏れは、画像の高さに、vh を使えば「ctrl +-」で拡大縮小ができなかったから、
最初にJavaScript で、window.screen.availHeight で、
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位) を取得して、
728 px など、その値を元に、画像の高さを、px で設定した
vh, vw は便利だけど、拡大縮小ができないだろ？ semanticをhtmlに、presentationをcssにとキレイに切り分けるためにはcss側で要素を追加する機能がまだ貧弱だと思うんだよね
::beforeと::afterの2人しか作れない…
ネストして::before::beforeと孫を追加したり、::before(2)で2人目のbeforeを作ったりしたいにょ :nth-child(3):hover:beforeとか疑似要素疑似クラスできるのには驚いた >>58
正確にできそうだけどサイトのフォントサイズ定義の場合
js使用前提だとなんとなく嫌だな
いやなんとなくなんだが HTML5のフォームバリデーションを本番で使った人いる？
まだまだ、本番では使えないような気がするんだが… >>52
vwって最大最小決めれないからどこまでもでかくなり、どこまでも小さくなるよな
media queryで変更できるけど、どんなふうに使ってるんだ？ >>63
その通りメディアクエリで区切ってる範囲内だけど
別にいいじゃん小さくなっても >>64
読みやすさは必ずしも横幅と一致しないんだが
まあ人それぞれだからどうでもいいんだけど ライブドアブログですが
画像に枠を入れようと思い
img {
padding: 5px;
border: 1px solid #808080;
をCSSに入れたいのですが、どこに入れても
サイドバーが表示されなくなったりします。
どこに入れたらいいでしょうか？ >>65
ほんそれ。
文字は文字であってオブジェクトじゃないのにな。
一行の長さだって段組の常識があるのに・・・ >>66
ここでライブドアのブログなんて使ってる人なんてほとんどいないと思うから
ブログ系のスレとかアフィリエイトのスレの方が回答もらえそう >>66
セレクタがざっくりしすぎ
imgって書いたらドキュメント内のすべてのimg要素が対象になっちまう
だからサイドバーとかにも影響が出る
親要素で限定するとよかろう
あとimg要素やフォームの部品のような
何かに置き換わる奴を置換インライン要素なんて呼んだりするんだけど
大雑把にいうとpaddingは使わんほうがいい
少なくともCSSを理解できるようになるまでは >>68
>>70
ありがとうございます
暇つぶしニュースにある画像みたいに
画像に小さく枠がほしいんですけど
リンクが貼れなくて申し訳ありませんが >>71
ブラウザはChromeかFirefoxかSafariを使おう
んで、真似したいものがあったら
例えばChromeだったら、それを右クリして一番下の「検証」を選ぶんだ
そうすっと、開発ツールってのが開いて
そこのHTMLとCSSがどうなってんのかわかるから、真似すればいい
んでそのニュースは見てないけど
十中八九、img要素の外に小さい枠のためのボックスが別にあると予想 >>72 ありがとうございます
https://imgur.com/a/PlKfeRd
この画像の1.2.3当たりがCSSだと思うのですが
コピー参考にするヒントをいただけませんでしょうか？ >>73
２
.article-body img { hoge: fuga; }
ってのは「article-bodyというclassを持つ要素の子孫のimg要素」って意味だよ
意地悪で言うわけじゃないんだけど
このくらいのことは聞く前にまず試してみたほうが、早いし理解も深いと思うよ ２の.article-body-more img {}
の{}の中にカーソル合わせると左にチェックボックス出てくるから
オン・オフすると即時連動した変化が確認できるので
imgの枠線に重要な部分もすぐわかると思う >>73
（もちろん自分のサイトを作る時の確認にも活躍する） >>76 ありがとうございます。
ならない、、、のは
.article-body-more img {
margin: 5px 0;
max-width: 695px;
padding: 3px;
border: 1px solid #CFC7AF;
}
とCSSに入れればいい。という単純なことではないんですね、、 >>77
>>66のコードから察するに
もしも、CSSの基本中の基本で躓いてる？なら
問題点はまず、
img {
の部分で括弧が開きっぱなしな点
img {}
という風に括弧を閉じないといけない
あとは、セレクタ（どの要素を選択するかの文字列）の意味と用法はググってもらうとして
CSSの基本は、
セレクタ { スタイル }
という形式になる、ということ。
＞とCSSに入れればいい。という単純なことではないんですね、、
>>77の例で言うと、セレクタは
.article-body-more img
の部分で、意味はざっくり言うと
「クラス名がarticle-body-more要素の、子要素のimg要素全部を選択する」
なので自分のサイトのHTMLに、そもそも「クラス名がarticle-body-moreの要素」が存在しなければ
何も起こらない
ライブドアブログを使っているということなのでおそらく
テンプレの長文コードに滅入っていると推察。
さらに、HTMLもCSSの基本（中の基本）もわからないとなれば
おそらく、「要素にarticle-body-moreというクラス名を付加する」
というのを理解できているかどうか、そこから始めないといけない段階 質問です。
特定のサイトを閲覧する際にユーザーCSSを適用し（ChromeのStylusを使っています）、
tableをflexなりgridなりで並べ替えたいのですがどうすればよいでしょうか？
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
…
…
</table>
と縦にひたすら並んでいるのを強制的に
┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
と横並び、かつ10個並ぶごとに自動で折り返してくれるようにしたいのです。
displayの値をtableやtable-cellから変えればよいのでしょうけれど、
flexやgridといった新しい要素は何度いじってもまだなかなか慣れなくて……。 tr に display:block; float:left つけて
tr: nth-child(10n):after に clearfix でもつければいいんじゃない >>79
ありがとうございます
セレクタ（どの要素を選択するかの文字列）の意味と用法
勉強してみます。 >>81
あ、新しいやり方をしないといけないと思い込んでいましたが
ずっと昔ながらのやり方でできましたね。ありがとうございます
どうもclearfixが効かないので、もう少し色々試してみます
（一応widthを調整するだけで無理やり10個ずつにはできましたが） div > section とあって
h1に画像をバックグラウンドを指定して
その下に
div > p class="utaimonku"に画像の謳い文句を書いていたのですが、
この謳い文句が文字だけなのも寂しいので画像にしつつ、文字としてもhtml上で記述するということはできますか？ 寒くなってきたので、そろそろ扇風機をしまい
電気ストーブを出そうと思います。
でもその前に秋物の洋服を着るとそこそこ暖かくなるのですが
電気ストーブをつけつつ扇風機はしまわずおいておき
服だけはまだ夏物にしてもいいですか？ キーボードの設定が全角かなと半角英数を間違った状態で
打ち始めている事って頻発しない？
これなんとかならんかなあ >>86
電気ストーブなら扇風機も回した方がいい
暖められた空気は上に行くので扇風機を上に向けて空気を回す
その方が暖まる
というか秋物着て暖かいんならそれでストーブつけなければ電気代うくんじゃないか？
というかこれってスレチじゃないか？ アメブロですが
2chまとめくすで まとめサイト作ってみたのですが
<em style=color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>
この文章に
<em style=size="1"color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>
と変更しても駄目でした。アドバイスお願いします 普通のブラウザならば、
<details>
<summary>あ
<div>い</div>
う</summary>
<p>えお</p>
</details>
と書いた時、要約部分には｢あいう｣が表示されるはずですが、
現在の私の環境では｢あ｣しか表示されません(▲をクリックしたら展開されたところに｢いう｣が見えます)
何が原因だと考えられそうですか？ >>95
style=size="1"color: の部分が特におかしい。
正しくはこう
<em style="size: 1; color: %color%; background-color: %bgcolor%; font-weight: bold;" class="specified">ID:%id%</em> >>97
そんなタグが新たに追加されていた事すら知らなかったｗ
しれっと増えてるのなんとかなんないのかよ
こういうのって追加された時、どこで情報得てるの？ こういう情報があるから
5ｃｈが地味に役にたってるんだよな
HTML5.1について見てみたけどコンテキストメニューとかまだFirefoxしか対応してなかったり
下手に手出すと廃止になったりするから使うタイミングがむずいな >>99
ありがとうございます
2ｃｈまとめくすの設定で
日付/IDの文字を小さくしたいわけなんです。
で、その設定画面に
言われたように打ちましたが変わりませんでした。
https://imgur.com/a/0zty9vS
どこがおかしいのでしょうか？
すみません。。 たまにデベロッパーツールで開けないサイトあるんだけど
どういう仕組みなのか分かる人いますか？
自分のサイトでもやってみたい＆他人のサイトを覗いてみたい >>103
別の部分からの影響があるかもしれないのでそのサイトのURLか
もしくは吐き出された実際のソース部分をブラウザで見てみないとこれ以上はなんとも 初心者でやっとホームページの公開がうまくできた
レンタルサーバー借りたりFTPの設定とかいろいろ大変だった。
そこでようやくHTMLとCSSの本格練習していこうと考えてるんですけど
ファイルやフォルダの基本形式？ってどうなってますか？
今の所、index.htmlとstylesheet.cssだけなのですべて同じwwwフォルダに入れてるんですがｉｍｇとかも増えるでしょうし
フォルダで階層わけしたりするんでしょうか？
例えば、wwwフォルダ(index.htmlとCSSフォルダ(cssファイルがいっぱい)imgフォルダ(imgファイルいっぱい))など
もしそうするとしてちゃんと読み込んで貰えるものなのでしょうか？
ファイルを挟んだ場合パス？の指定をすれば大丈夫？？ せっかくながなが書いたのになぜY/N質問にしちゃうんだろうｗ >>100
w3cの方はちゃんと
草案がまず出て、その後に勧告になってるよ
whatwgのLSもそのはず
ちゃんと追っかけてないから違ったらすまん >>110
HTML5への端境期までは草案も追ってたんだけど
w3cのサイトを定期的にチェックするとかダルすぎるな
最新情報を常に発信しているような制作会社やブログを定期チェックしてればいいんだが
重要じゃない情報やメインになりえない情報も多すぎて、見なくなってきたわ >>106
ありがとうございます
文字サイズを小さくしたいのは
http://blog.livedoor.jp/nanjstu/archives/54101260.html
このまとめサイトのように
6: 風吹けば名無し 2018/09/06(木) 11:48:46.63 ID:u6cU61gi0
え？2本打ったんか
の、
6: 風吹けば名無し 2018/09/06(木) 11:48:46.63 ID:u6cU61gi0
の文字だけ小さくしたいのです。
それの2chまとめくすの
設定 4
日付/ID欄の設定の設定という場所がどうも鍵みたいで
https://imgur.com/a/0zty9vS
ここを書き換えればどうにかなるのかな？けど書き方がわからない
という感じなんであります > え？2本打ったんか
ダメ。ゼッタイ。
＿_(＼--、
／⌒ ⌒ ＼∧
/ (●(●) ∨
｜(＿＿＿ノ ﾄ､
(ﾐ) ヽ_／ (ﾐ))
∨ﾀﾞﾒ｡ｾﾞｯﾀｲ/~
＼＿＿＿／
＿|｜｜|＿
(ヽ…)( …/)
￣￣ ￣￣
薬物乱用防止 >>111
なんでわざわざそんな二次情報を追うのか知らんが
超最新の、まだ誰も知らない方法を教えてあげよう
whatwgやw3cのサイトでは更新をXMLで配信してくれてるんだ、RSSっていうんだけど
だからそれだけ見てればいちいちサイトチェックなんてしなくてもいいんだ
これで最新情報に乗り遅れることもなくなるね！
みんなには内緒だよ！ 35歳だけど、HTML5の資格取得して転職できるかな？
今は社内SEでVBAマクロとか、SQLのサーバー管理、データ抽出してます。
来月に子供生まれるんで、育休1年取って独学で勉強しようと思います。
年収は今は450万程度です。380万くらいにはなっても良いです。アドバイスお願いします html5の資格取っても無意味
学生でさえ使えるものなのに
取得しようとしてる技術が子供レベルなんだが… >>116
マジレスするとフロントは一通りさらうくらいにしといてディレクターとかを目指した方が良い HTMLCSSってのはマジで誰でも出来るからそれプラスの技術ないと デザインできるかプログラムできるかディレクションできるかどれか
HTMLなんてほんとガキでもできるし
それだけ覚えても仕事ではなんの役にもたたない
サイト更新のパートや学生バイトレベルのお仕事しかないで そんな簡単なレベルなんですね。
もっと難しいかと思っていました。
プラスアルファで目指すとしたらおすすめありますか？
ネットワークではCCNAを２ヶ月でとりました >>123
おれ資格なんか一つもないけど仕事はいくらでもくる
営業してないけど勝手にくる
そんで、資格取るのやめてアプリつくりな
その無駄な2ヶ月をアプリ作る時間に使う 一年あるなら持ってれば食っていける資格がいいと思う テキスト入力のinputを横幅いっぱいにしたいのですが、フォントサイズを大きくすると
横幅をはみ出してしまいます。フォントサイズが小さいときは問題ないです。
inputに横幅を指定しないといけないのでしょうか？
<div style='width:360px'>
...
<div style='display:flex'>
<input type=text style='flex:1 1 auto;font-size:40px;'>
</div>
...
</div> >>128
inputもただの置換インライン要素なので
大きさはwidthとheightで決めてあげてください >>112
参考サイトのソースを見たいんじゃなくて、
https://imgur.com/a/0zty9vS で設定し、出力された実際のページのソースが見たいの。
何故かと言うと、その設定がそのままブラウザに表示されていない可能性と、それ以外の強いセレクタが邪魔をしている可能性があるから。 >>130
ありがとう。
いちいちwidthめんどくせーと思ったが、幅指定は先祖のdivに任せて
inputにはwidth:0を指定しとけばぴったり収まるようになった。 jsを使わずにテキスト文字列をキーにセレクタ作れないもんかねぇ >>124
仕事来るってのは全部アプリ製作がらみなん？ >>134
そうだよ
あとwordpressのテーマ作ったりプラグイン作ったり
wordpress使ったことなかったけど独学で一ヶ月半でテーマとプラグイン作った
そもそも俺は36歳から独学でコーディング勉強したおっさん
今は普通に他の開発者と連携して大規模アプリ作ったり、一人で開発したりしてる >>135
あなたすごいね。
何から勉強すればいいか教えて >>135
案件はどこから得てる？
立ち上げ当初と現在では経路は変わった？
立ち上げ時は今と比べて苦労してた？そうでもない？
今後に不安はある？ない？そう考える理由は？ >>135
すっごいなあ
フリーランスなりたいけどどうすりゃいいのか探している最中だわ >>138
コネなしで始めるのはハードル高い、どころか棒なし棒高跳だよなあ
この商売に限った話じゃないけど
未経験ならなおさら
おっちゃんが始めた頃はまだ未開の地だったので
やりたい放題だったなあ >>136
好きなところからでいいと思う
どうせ必要に応じてなんでもやらないといけなくなるし
>>137
知人が勝手に案件持ってくる
その知人は営業が得意でIT関連のコンサルやったりしてるから
あとは自分で作ったアプリをサイトで売ったりしてると、そのアプリのこういう機能つけたの作ってくれみたいな話がくる
>>138
フリーランスになるなら自分で営業ができるかが大事だね
俺は営業まったくできないから上の営業マンと組んでる >>139
だよなぁ・・・
クラウドソーシングサイトなんか見ても仕事取れる気せんわ。
とういか取れない すいません、ワードプレスのSTINGER8使ってるのですが、
レイアウトのズレみたいなのが気になります・・
質問てここで大丈夫でしょうか？ フリーエンジニアは、Ruby on Rails だろ
YouTube の動画にあったけど、
エージェントに、10% とか払えばよいって containerクラスのついて質問なんですが
・containerクラスの中にheader, main, footer要素を入れているサイト
・header, main, footer要素にそれぞれcontainerクラスを入れているサイト
の2つを見かけますが違いとか正解とかはあるんでしょうか？ クラス名は特に意味ないんで
好きにしたらいいんだぜ どっちでもいいんですね、
こだわりもっている人多いのかなと思って聞いてしまいました ライブドアブログのスマホ版での広告の余白がどうにかなりませんか？
https://imgur.com/a/igybrDW
このように右側に大きな余白ができてしまいます
レイアウトで2つ並べても同じ形が2つ縦に並びます。
どうしたらびしっと埋まるような広告を作ることができますか？ ＜table＞
＜tr＞
＜td class="col1"＞＜／td＞
＜td class="col2"＞＜／td＞
＜td class="col3"＞＜／td＞
＜／tr＞
＜／table＞
table{
width:100%;
}
td.col1{
width:50px!important;
}
td.col2{
width:40%;
}
td.col3{
width:40%;
}
こんな風にすると、ブラウザの幅を変更した場合に、
col1は出来る限り50pxになると思ったのですが、
実際は、勝手に変化してしまいます。
たぶん、100-(40+40)=20% の幅になっているようです。
そう言うもんですか？
やりたいのはcol1を50pxくらいに固定して、
col2,col3は同じ幅にしたいのですが。 col2とcol3をcalc(50%-25px)にしたら？ 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 >>156
さっそく試してみました。
その結果col1は50pxに固定出来たのですが、
col2,col3が同じ幅になりません。
col3のほうが広くなります。原因わかりません。
>155
flexでやると言うのはtableを使わないと
言う事ですか？もしそうなら、どんな要素を使えば良いですか？ >>158
156に加えて、tableにtable-layout: fixed;をつけてみたらどう？ >>159
さっそく試してみたら、
col1,col2,col3が同じ幅になりました。
もうわけ分かりません。 >>154
col2とcol3の指定がいらないので外す。
<style>
table{
width:100%;
}
td.col1{
width:50px;
}
</style>
色付けて可視化
<style>
table{
width:100%;
}
td.col1{
width:50px;
background-color: #ddd;
}
td.col2{
background-color: #f5f5f5;
}
td.col3{
background-color: #eee;
}
</style> そういえばクロームは大丈夫なんだけど、
FirefoxとIEだとテーブルが崩れてtable-layout: fixedで直ったな
display:tableで子供全員に幅書いてたんだけど >>161
col2,col3のwidthを指定しないと、
それらのwidthは中のテキストの長さに応じて
勝手に決まりますよね。
ご提示いただきましたコードを試しましたが、
col2=col3にはならなかったです。 table-cellの幅の決まり方って独特だからポイントで使いたくなることはある >>164
ごめん。文字数考えてなかった
バグというかダメぽいな
もうdiv+tabelでやるしかないんじゃね >>164
tdの親、つまりtrに対してflexを使うか
tdに対してinline-blockだな
table{
width:100%;
}
tr{
display: flex;
}
td.col1{
width:50px;
}
td.col2{
width: calc( 50% - 25px );
}
td.col3{
width: calc( 50% - 25px );
} >>164
ごめん、flexならcalcは要らないか
んでIE11とかも考慮するなら下記みたいな感じIE9とかは知らない
col2とcol3は設定いらない
table{
width:100%;
}
tr{
display: flex;
}
td{
display: block;
flex: 1;
}
td.col1{
flex: 0 0 50px;
} header,footer,mainなどのタグでセクショニングすると、マシンリーダビリティが向上するのって、構成が分かりやすくなるから？それとも、タグで囲む事自体が重要なの？
タグで囲む事自体が重要なら、めちゃくちゃシンプルなコードでもセクショニングはした方がいいってこと？
例えば、php使った簡単な問い合わせフォームのコードをセクショニングすると、main要素だけになっちゃう場合とか。 構造がわかりやすくなるからだろ
header footerなど共通部分は重複コンテンツとみなさないように重要度下げるのに対し
main部分を重要視したり
でもアクセス数やアクセス内容の重要度に比べたらほんと大した差は無いと思うがね。 tableにdisplay:blockでレスポンシブにしたらいい >>175
このサンプルを無理やりマークアップするならこんな感じになる。
<hrader><h1>掲示板</h1></header><main>投稿部分</main>
サンプルだからというのもあるけど、知らない人を集めようとするならもっと親切にサイトについて書かないといけない。
何の掲示板で、どういうルールがあって、どういうメニューがあって、問い合わせ先はどこで、とか。
それらが全て自然とマークアープに繋がるから本来は自然とnavもfooterも必要が出てくる。
必要ないというならそもそも人を集める必要がないページなんだよ => つまりSEOは不要 生cssでいつのまに変数が使えるようになってたか・・・
:root {
--main-gutter: 12px;
--main-position: center;
--main-lh: 1.5;
}
と思ったらIEだけ・・死ね ↑androidも含めてIE以外は主要ブラウザは全部対応OKなんだが使ってる？ >>171
table{width:100%;}
tr{display:flex;}
td{display:block;flex:1 1 1px;word-break:break-all;}
td.col1{flex:0 0 50px;}
tdのflex:1 1 1pxとword-break:break-allを追加しました。
ie11とfirefoxで確認。 >>170>>171>>181
どの方法でも上手く行きました。
ありがとうございました。 formって不便じゃない？
ネストできなしいサブミットにアドレスつけられないし
フォーム共通にして別のアクションにポストしたいときどうしたらいいの ネストできるしサブミットにアドレスつけられるが
そんな事しなくても普通に、フォームに複数のアクションボタンをつければいいだけ
サーバー側で同じアドレスへのポストをパラメータ見て振り分けるだけ >>183
アクション先を変えればいいだけじゃん
もしくはアクション先を同一にしてポストするsubmitボタンの判定で別けるとか
どうにでもできる どういうこと？
<form method="post">
<form method="get">
<input>
<input>
<submit>
</form>
<submit>
</form>
とか
<form>
<input>
<input>
<submit action="get">
<submit method="post">
</form>
ってできるの？ ＞サブミットにアドレスつけられるが
＞アクション先を変えればいいだけじゃん
これ具体的にどうかいて何をかえれるの？
name属性で同じCGI内でボタン識別できるのは知ってるけど
URLやGET,POSTメソッドかえることってできるの？ まあそうなんだけどだからJSの力をかりないとできないの不便だなーと スライダー沢山あるけど、使い分けるんじゃなく、どれか1つでカスタマイズ次第でなんでも可能なものですか
https://creive.me/archives/10461/#jQuery >>192
なんでも可能かはドキュメント見るしかないけどまぁ試して見るのが手っ取り早い。
可能なことが多いと設定が多岐にわたり簡単なスライダー実装する時めんどくさかったりもするけど。 俺はいつもswiperだな
前はslick、その前はbx使ってたけどもう使うことはないな 俺もswiperだな
bxsliderはautoの扱いが癖強くてなあ 私もSWIPERです。最初に覚えたのがそれだったので。Slickとかのほうがメジャーとは知らず。
先日画像サムネイルとキャプションをつけたくてFotorama使ったけど、Swiperでもできたのかも。 自分はbx
1つのページ内に複数のスライダーがあって全部違うの使ってるのに出会ったことがある
悩んだんだろうな スライドとかのアニメーションcssでも出来るけど無駄かね？
アニメーションであんまりjs使いたくない病なんだが… >>200
組んでるとパズルみたいで面白くはあるけど枚数変わるたび直さなくちゃいけないじゃん だいたい更新頻度高いじゃんスライダー入れるとこって 画像のサイズ同じならファイル名同じにして上書きすればいいだけだから
そんな面倒じゃなくね？ >>204
んで蔵がキャッシュ消さずに見て
更新されてないんですが!!
までテンプレ >>204
いや、CSSだけで作るやつの話
枚数増えると破綻するから そもそもcssだけだとフリックも吸着もできないなー スライダーに最低限必要なもの
・自動スライド
・スライドからのリンク
・フリック(左右)
・ナビゲーション(前次のやつ)(左右)
・ページネーション(ドット/サムネイル)
jsなしでできるのって最初の2つだけじゃね？ >>208
ナビゲーションとページネーションはcssでも出来る
フリックはやったことないな ページネーションをcssってまたチェックボックスだろｗ
そういうのさわりたくない すまん。教えてくれ。
<div class=外側>
<div class=内側>
<p>ああああ</p>
</div>
</div>
これで、全画面固定して、内側の上下にボーダー引こうとしても引けない…。
内側で線を引こうとしてるのは、全画面の半分の幅だけに引きたいからなんだけど。
別の方法探るしかないかね <label></label>
の内側ってブロックでも何でもいれてもいいの？ Form 作り方わからんぞ これHTMLとCSSで済む問題じゃないよな。
作り方サイト見てもことごとくそこにしか触れてない。 >>215
HTMLとCSSで
なんとかなってない人の方が少ないと思うけどなあ >>215
PHPかvus.jsかAWSのサービス使え htmlとcssができない人に
php、vue、awsを勧めるのかｗ ひょっとしてサーバーサイドがないと
form意味ないだろって言ってるのか form受け取る側で無料サービスでできるのってPHPぐらい？
他のフレームワーク無料で使えるとこってあるの？ htmlとcssって頑張ればどのくらいである程度できるようになります？
システム管理やってるものですが、急にHP担当がやめることになって勉強しないといけないです。
アドバイスもあれば教えて下さい >>212
線を付けるだけならcssで内側のdivにborder付ければいいだけ
内側div幅が画面いっぱい100%のまま線の横幅だけ50%にしたいって言うなら
内側divに疑似要素:beforeと:afterを使ってそれぞれにborderを付けて幅50%とかすればいい
>>214
HTMLのバージョンと仕様による ある程度って書いてるだろ
正直、3日もいらん
1日で十分 フォームはGoogle Formを埋め込むのが利用者目線ではベストじゃないかね。 >>223
人にもよるけど
だいたい3日から30年ってところ どっちにしても誰でもすぐに習得できる
できないなら人間やめろ システム管理やってるって書いてんだからプログラマだろ
JavaやC++を完璧にマスターしてるかもしれんから
HTMLくらい余裕だろ。 JavaやC++完璧にマスターしてる人はシス管なんてやんないよ >>232
って言う人って
蓋開けてみると条件付きでしか習得してない印象 キーボードを押すだけで、
リンク先に飛ぶような、ｈｔｍｌを記述する事ってできるのですか？
リンク先は、他のサイトでも良いし、同じページ内の別の場所でも良いのですが。
それとも、そんなサイトを作る事は不可能ですか？ HTMLもCSSも言語的には簡単よ
アルファベットわかるなら小学生でも覚えられる
ただそれらをつかってデザインする
デザイナーがつくったデザインをコーディングする
ディレクターやクラが言う要望のアクションをつけるってなると
また別なんよ まえに一度使おうとして断念したんだけど
CSSのscrollsnapって、JSで拾えるイベントあるもの？ まあそうなんだけど
snapしたときになんかイベントあったら便利なのになー
と思いまして そりゃあったほうがいいわな
transitionのtrantitionEndみたいなもんだろ？ わかる
snapした瞬間
ズギャーーーーーーン！！！
って鳴らしたいよね
このスレの総意 ごめん、人によって
ガシューーーーーーン！！！
かもしれないから総意とは言えなかった LP的なアニメーションごりごりを作る時に
ぶっぴがーん！に合わせてアニメーション始めたいというのは当然あるな
同等のことをするJSライブラリが
停止時に発火するコールバックを設定できるのもそのためだろう amazonと楽天にリンクするボタンがほしいのです
それっぽいのどこぞにプログラムございませんでしょうか？ アフィリンクのボタンならそれぞれのアフィ審査受けないとリンクはもらえん
ただのボタンならプログラムじゃなくてaタグ Superfish モバイル用のハンバーガーメニューの設定がわからない。 >>256
ありがとうございます
アマゾンも楽天も通ってます。
https://imgur.com/a/Yg8lNFi
このようなボタン形式のリンクがほしーのです、 >>258
aタグのリンクにcss適用すればいい
aタグ ボタン cssで検索すればいくらでもでてくる cssが何かもよくわかってないんだろ
カエレバ CSSで検索 >>259
>>260
ありがとうございます。こういうふうな仕組みなんですね、勉強になります
いろいろ触ってみますが、また何かあったらお助けお願いするかもです、、
ありがとうございます！ inline-blockである .dan と .jo がDOMツリー上で
男女女女男女男女男男女女
と並んでいるとき
男女
女
女
男女
男女
男
男女
女
と左右に並べ分けたいのですが、どういう方法がありますか？
floatとかですか？
.dan + .jo { float: left } …うーん？ .dan, .jo {
display: inline-block;
width: 49%;
}
.dan {
background-color: #eef;
margin-right: 2%;
}
.jo {
background-color: #fee;
}
.jo + .jo {
margin-left: 51%;
}
こんなじゃだめ？ >>238
JavaScriptの事で良いんですか？
解りました。
ありがとうございました。 >>269
ありゃ
htmlでって書いてたのにjsでいいの？ CSS Gridについて教えてください。
<div class="container">
<div class="a"><img></div>
<div class="b"><img></div>
<div class="c"><img></div>
...以下大量に。
</div>
この様な感じで、インスタグラムの様に、.a .b .c ...の中にあるimgをひたすら詰め込んで羅列したい場合は、
レイアウトする画像のサイズが決まっていれば(例えば300px角)
grid-auto-rows:300px と grid-template-columns:repeat(auto-fit,300px)
で可能ですが、
ウィンドウサイズによって画像のサイズも変動する様にするには、
（100px角にも800px角にもなったりする）
auto-rowsもrepeatも使用せずに、
.a .b .c ... にgrid-row と grid-columnをそれぞれのクラスに指定しなくてはならないのでしょうか？ IEのクソ対応を考えたらcss gridは使いたくない こちらのサイト（カントリーマウム）は
gridを使用しているとのことで、
ウィンドウサイズを変えるとそれに伴って中の画像のサイズも変動していますが、
これは画像1枚1枚をcolumnとrowで1/5や5/17と1つずつ指定しているのかと思いまして >>273
display: grid;を利用してるわけじゃなくてデザインがグリッドレイアウトなだけだと思う。 >>275
検証を使うとdisplay:gridなら縦横の点線が出ると思うのですが、これにはでないので不思議でした
そういうことだったのですね・・・
このサイトはテーブルセルとtext-alignで画像を配置しているのでしょうか
ありがとうございます！ >>276
flex-boxでwrapすればいいのでは？ CSSに凝りだすと、ちょっと画面が狭い場合にはこんな感じで
@media screen and (max-width: 480px){
設定を書く
}
とやりますよね。
でも、こう言うメディアクエリを一箇所に集めるのは手間が掛かります。
別の要素に対してCSSを書いていて、その場合にも少し狭い場合には、
@media screen and (max-width: 480px){
別の設定を書く
}
みたいに、CSSの中に上のような同じ記述が何度も出て来ます。
WEBプログラミング上級者の人は、こう言う場合どのように対処されているのでしょうか？
@media screen and (max-width: 1030px){・・・}
@media screen and (max-width: 768px){・・・}
@media screen and (max-width: 480px){・・・}
みたいなのは一箇所にまとめるべきですか？ >>279
ファイルをメディアによって分け、linkタグのmedia属性でメディア種別やクエリを指定する。
このリソースはメディアの条件が真になった場合のみ読み込まれるので、
１ファイルにまとめるより読み込まれる容量も減る。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link
SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ツールが何をやっているかも分からずツールに使われている>>280のようになってはいけないよ。 >>281
えええええ
そっちの方が面倒臭いじゃん… >>282
面倒くさいにも二通りの意味があってな
作業を効率化する（のが面倒くさい）が、その後の作業自体は楽になる
と
作業を効率化しなくて楽だが、その後の作業自体は面倒くさい
どっちの面倒くさいを取るかなんだよ？ まぁそれがめんどくさいレベルの規模なら自動化の契機だな。PostCSSとnpm scriptまたはgulpで自動化できる。 >>281
> SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ブラウザで直接解釈されても、同じことでは？ >>281
解説ありがとうございました。
>このリソースはメディアの条件が真になった場合のみ読み込まれるので、
これはブラウザのウインドウ幅を変化された場合に、
それに応じてメディアファイルが読み込まれると言う事ですか？ >>283
あたまかたーい
普通は
その後の作業が面倒くさくならないように、作業を効率化するよねー @media なんかを使っている、WEBプログラミング上級者は100%、SASS！
というか、海外では初心者でも90%、SASS
知らないのは、50% の日本人だけ >>289
日本でもそんなに変わらんじゃろ
流石に
普及してから何年経ったと >>270
すんません。
さっぱり解らないんですが、ｈｔｍｌのｊｓってのが有るんですか？
それと、ｊａｖａとｈｔｍｌってのは違うものなのですか？
自分としては目的のサイトを作れるのなら、方法については
何でも良いのですが。 >>291
なんでもいいのなら他人に任せたほうが良い
自分でやるなら、理解しろ >>291
JSはJavaScriptのことだ
名前はJAVAと似ているが全くの別物だ
JAVAとJavaScriptは、メロンとメロンパンくらい違うものだ
JavaScriptはブラウザの中で動くプログラムのことだ
んでHTMLは文章の構造を決めるものでたいした機能はないんだ
何かを押したらどうこうする、みたいなのはJavaScriptの仕事だ >>293
まったくわかりません。
もっとわりやすく説明できませんか？ ミニ丼セットの丼だけのオーダーはお受けできませ「ぬ！」 英語圏で色々もあるよー
difference java javascript でググると似たような与太話しいっぱいヒットする
CatとCatfish
hamとhamstar
CarとCarpet
CockとCocktail
とかとか 仕様見てると
<h1>
<p>~</p>
</h1>
も
<p>
<h1>
~~~~
</h1>
</p>
もどっちも書いても良さそうだけど、ブログで後者はNGって記事をよく見る
実際どうなんやろ？ >>293
自分は２９１ですが、
良くわかりました。
ありがとうございました。 >>266
20代前半はそういう職場で働いてたわ
皆おっとりしてたから居心地は良かったが
性格悪い奴とか気性が荒い女が紛れてると
パシリに使われるかボイコットされたり最悪な環境にもなりえるんだろうな >>279
それは汎用性、メンテナンス性に欠けるクソ構造だよ
更新や編集の多いサイトを深く運用してみれば意味がわかるようになる。
優れたデザインは常にシンプル。
複雑なものを複雑に書くより
必要なもの以外をいかにそぎ落としていくかに尽力した方がいい。 >>303
>優れたデザインは常にシンプル
それ複雑なデザインをまとめられないだけなんじゃ… 複雑なものを整理してまとめることは誰でもできる
複雑なものを複雑なままバランス取るのは素人にはできん >>310
少なくとも後者は駄目だわな
<p>はブロックレベル要素を内包できない
だから無理やり入れると、そこで<p>のブロックは一度切れるじゃろ？
前者はどうだろう
<h1>って内包してはならん要素ってあったかなあ 所見です
font-sizeについて質問があります。
全ての要素のサイズをvmまたは%で指定し、
font-sizeもvmで指定すれば理論上、画面幅をいくつにしようが
全ての縦横比、スタイルは保持され、
文字もまた、行内文字数、行数が保持されるはずなのですが、
実際に画面幅を変えると、行内文字数、行数は変化してしまいます。
これはなぜでしょうか？
例外的にstrong内の文字は行内文字数、行数は変化しないことを発見しました。
これはなぜでしょうか？ >>310
h要素はブロックレベル入れられないから >>300
やってもいいしちゃんと表示されるけど
正しいHTML構造文としてはNG
SEO的に評価下がるよってだけ >>316
それを世間一般ではやっちゃダメって言うやろ 実際にはSEOの評価は下がらんのやけどねｗ
何故かと言うと結局の所検索で重要視したいのは
HTMLの文法ではなくてコンテンツだから。
HTMLのタグの違いによるスコアの差が悪用されたから
タグによってのスコアの差はなくなってしまっている
今はコンテンツ（CSSなどを反映した実際に画面に表示される内容）で
判断されるようになってる。昔は不正なHTMLをどのように解釈されるかが
バラバラだったから、正しいHTMLを書くことが推奨されていたけど、
HTML5になってから不正なHTMLも同じように解釈するようになったので
ブラウザで表示されてるように解釈される
例えば隠し文字は評価対象から外れるとかね ブロックレベルってhtml5でもまだ言うの?
まあフローコンテンツとかより分かりやすい気もするんだけど div多用したら怒られたんだけど…
divっていっぱい使ったらあかんのか？ そりゃ必要ないときに使うのはだめだろうな
適切なタグを使っていれば、divは殆どいらない ネストしたレイアウトが必要だったり
アコーディオンやタブみたいに変化するようなのはdiv大量になるのは仕方ないんじゃない
逆にそういうのBEM記法使わずにコンテナでかこわなかったりすると
flex がとじてもどしたら block になったとかで変なバグ入りそう >>321
いくらでも使っていいぞ
なんなら二、三個くらいおまけしてやってもいい
余分なタグは使うなとかいう
カビの生えたストリクト原理主義者の言うことに耳を傾ける必要はねえ
マジで 現場に出なきゃわからないことが多いんだろうな
今はfloatは使わずにflexで、inlineは使わずにinline-blockが普通？ いまの現場ほぼdiv
かなりネストしてる
SEO関係ないけどどうなのよと思ってる >>319
キュレーションサイトの問題で
構造より無意味な文章1万文字のほうが評価が高いって結果でちゃったからなぁ
あれからグーグルがなんか対策したならしらんけど 何らかの要素を
display:none;
した後で、再び表示させたい場合、
display:unset;
display:initial;
どちらをセットしても同じような挙動になりますか？ >>313
実際には vm や % で指定されてないスタイルがまだあるんじゃないか
ブラウザの UA スタイルシートなど暗黙的に設定されているやつ >>333
同じ挙動になるとは限らないので、元の display 値を覚えておくか、専用の class でオンオフ切り替えるしかないな
hidden 属性を設定する方法もある（ hidden を消せば元に戻る） >>335
ありがとうございました。
大変参考になりました。
クラスでやります。 そのためのコンテナー
外側はとりあえず div にしといて display は none と block できりかえる
flex 使いたければ内側にかく
jquery の .show() hide() 使えばそれやってくれるから楽だよ >>337
いつの時代だよ？そうやって適当に教えるな 画面を小さくすると、背景画像の両端がトリミングされるコードが分からない。 >>337の何がおかしいのかよくうわからない
うちでもそうしてるからもっといい方法があったら教えてくれ 自分の会社でもブロック以外は裸でおかずにとりあえずとりあえず div か p でかこっとけっていわれてるわ
BEM記法ほど厳密じゃないが >>339
img に width height を pixel で設定して親に overflow: hidden つければいいんじゃないかな
object-fit:none; とか
absolute にして親に padding つける方法もある show hideは結局インラインでdisplay直接きりかえてるからスマートじゃないってことじゃないclassを使った方がなにかとよい >>339
background-size: cover; かな？
とエスパーしてみる >>339
background-sizeを指定しなければ勝手に両端切れなかったっけ
忘れちった background-positionをcenterじゃないの background-size:auto 100%;
とか？ >>342-347
ありがとうございます。
いまいち画像サイズの概念やoverflowプロパティを理解してないから、
縦横比を維持したまま縮小してしまうんですよｗ display:block;
をセットしている要素に対して後から追加した
display:none;
が有効に出来たのですが、display:table;に対してはnoneが効きませんでした。
それでnone:!importantにして解決したのですが、そういうもんですか？ display: table; とか関係なく、詳細度が低いんじゃないのかな >>348
画像、と書くと
<img>要素のことか、background-imageのことか
混乱するから区別して書くといい
overflowは
内包するコンテンツが自分より大きい時に
どのようにするか（はみ出す・はみ出さない、スクロールする等）
を決めるプロパティ お前らborder imageって使う？
難しいから使うなって言われたんだが…。 「難しいから」は理由じゃない。
お前の都合でしか無いって言ってやれ >>352
今まで使うような案件に出会ったことないや。最近シンプルな画面ばっかだし 質問失礼します
趣味ブログを運営しています。
アクセス数が増えてきたので、google adsenceに応募したら審査が通り、広告を張ってみたいのですが、張る場所の方法に書いてった＜head＞タグの下に埋め込んでも広告が表示されません。
他のブログテンプレートでは表示されるのですが、お気に入りのブログのみが操作不能です。HTMLの書き方によって広告が張れないということは起こりうるのでしょうか？ divで作った長方形の領域があり、その幅を右側に最大化したいのです。
ただし、左端はマージンがあるので、ウインドウの左端から離れています。
太線をウインドウの両端
細線をdiv域とすると、こんな感じです
┃ │ │┃
┃ │ │┃
ウインドウ幅を広げるとdiv左のマージンは増えますので一定ではありません。
ですので、 width:calc(100% - 200px) みたいな記述が出来ないので困っています。
良い方法はありますか？ ?
div って何もしなくてもめいっぱい領域使うよ
floatや 親にflex がついてたりしないか margin padding をもう１度よく確認してみて Pseudo-classesからです。
１ https://gyazo.com/02535a5de4acdc8219053950a6949a72
２https://gyazo.com/31affd8fb9780903bd3b89a3b26126c2
１と２を比較して、 text-decoration: noneとtext-decoration: underlineがあるないのは
どういう違いがあるのですか >>359
ブラウザの開発ツールで見てみるといいよ
制作者がCSS書かなくても
各要素にはブラウザがデフォで用意したスタイルが当たってる
a:linkはデフォでtext-decoration: underline;
だから下線がつく
ここでCSSにtext-decoration: none;を書くと
デフォのスタイルが上書きされて
下線がつかなくなる ここで良いのか分からないのですが、ツイッターの埋め込みツイートのデザインはcssで編集出来ますか？
togetterでは普通の埋め込みとはデザインが違うので何かしら方法があると思っているのですが、検索しても全然わかりません
htmlとcssの基本くらいしか分からないので、難しいようであれば諦めます OGP Twitterとかで検索してみればすぐできると思う 大切な女性を傷つけられた
相手の男性をdisplay:noneする方法を教えてください
今彼女は入院しています よくわからなくなってきたんだが、beforeとafterの使い分けってどうしてる？
どっちでも同じことできるような気がするんだが。 「大切な女性を傷つけられた相手の男性」って被害者じゃないですかね。CSSの前に日本語の勉強した方がいい。 >>367
ある男性と女性が付き合っていて、364がその女性に好意を抱いている
ある時、男性が女性を傷つけた(と364が思っている)←実はただの痴話喧嘩
364「相手の男性を消し去りたい」
つまり364はストーカー >>365
beforeはその要素のコンテンツの前に入る擬似要素
afterは後ろに入る擬似要素
って意外に違いはないよ
普通にHTML書くときに、何かの前や後ろに要素置くときと
同じ考えでいいよ >>363
ありがとうございます
これも知らない知識だったので勉強になりました！
特定のツイートを自分のサイトに埋め込んだ時のデザイン変更はやっぱり難しいですかね >>371
JavaScriptですかー
それは未習得なので普通の埋め込みで妥協します
ありがとうございました <h1>タイトル文字</h1>
というHTMLがあったとして、
CSSで「タイトル文字」をtext-indentやpaddingで要素外に出しoverflow:hiddenで非表示しつつ
badkgroundで背景画像を指定ってのをちょいちょいやるんですが
SEO的にはこの「タイトル文字」は無視されちゃうのかな？ SEO的には～無視って日本語がちょっと変でした
サーチエンジン的にはこのタイトル文字は無視されるのか、ですか SEO会社にimgとalt使えって言われたことある
それも意味あるんかなぁ タイトルを画像にすることなんかないなあ
ほとんどの場合、Webフォントをsubset化して＋cssで装飾してる >>374
フェレットでそんな記事読んだな。
https://ferret-plus.com/6036
ほとんどのホームページでは、H1タグは テキスト というよりもロゴ画像で囲んでいることのほうが多いのではないでしょうか。 img src
って必ずＷｉｄｔｈ Ｈｅｉｇｈｔ 指定した方がいいのかな。
素材画像のサイズそのまま表示されたらいい時でも >>384
気にしたことないな
SPサイトくらいか >>384
大きさを明示すべき理由は
画像の読み込みが進むに連れて、ページのレイアウトがガコガコ動いてしまうから、というもの
なのでガコガコしないようにスタイルを書いてあればOK 画像サイズ指定しないと読み込みのパフォーマンス落ちた気がするが、もうその情報は古いかね いやGoogleがAMPの要件に挙げてんだからパフォーマンスがらみだろ >>378
>>373
ああそうか・・・ありがとう >>382
最近だとロゴのSVG画像じゃね？
altにテキスト入れときゃ問題ないけど >>391
>>392
ん？サイトロゴとかじゃなくタイトルでしょ？
「プライバシーポリシー」とか「会社概要」とかのページタイトル
そんな特殊なフォント使う？ 結構あるかな、例えば
フォントにイラストが付いていて変形されてたり一部に色が付いてたり
背景テクスチャに乗算でフォントが乗ってるとか
エッジに紙のような処理が施されてたりスタンプのような加工がされてたり
縁取りが2重3重に付いてたりとまあいろいろ >>374
余談だけど
paddingで押し出すやり方は
Androidで、長押しするとテキスト出てきちゃう機種があるので注意を text-indentでテキストすっとばすのってブラックハットと同じ手法じゃん
テキストを背景と同じ色にして隠し埋めするのと同じで
CSSや画像内の文字すら認識できるGoogleにはバレバレだろうけど、プラスにもマイナスにもならなそう 自分のやらないことは非常識
自分のやっていることが常識
という思い込みは愚者への第一歩である
哲学者エトゲル・ダーフィト まったく問題ねえけどなあ
単体の単語ではなく、文字と図がいくつもレイアウトされてしまってる画像とかだと
alt属性の文字列だけでは説明しきれないから
背景画像にして、その要素の中にHTMLで詳しく書く、とかよくやる
検索にもちゃんと引っかかるし、そのせいで検索スパム扱いされたこともねえな たぶんだけど
検索スパム判定は、そんなに単純じゃないんだと思う 質問お願いします
親要素は背景の枠組み
その中の文章が違うため改行数が変わり
下に配置させたい画像？も位置が変わってしまいます
子要素に
position: absolute;
bottom: 0;
これで設定しようとしたのですが
その親要素を複数回使用してるため
position: relative;を使うと全ての配置がおかしくなってしまいます
この場合自分で改行を追加して行を合わせる
もしくは親要素を一つずつ変更していくしかないのでしょうか？ 今日初めてこのスレにきたけど、
文章で書かれても全然わからんね じっくり読めばわかるだろ
と、じっくりがんばって読んだけどまじでわからなくて草 >>402
つまり親要素と言ってるものが複数横並びになっていて、親要素同士の高さと画像の位置を全部一緒にしたい？ 説明が下手ですみません
classでサイズを指定した親要素の中に
文章と画像（スワイプ）を入れようとしてます
それと同じclassを何度も使い、違う内容の文章を書いてるのですが
文章量が違うため、画像の位置がバラバラになってしまいます
調べたところ
親要素に
position: relative;
子要素に
position: absolute;
bottom: 0;
で下に配置できるとのことでしたが
先ほどお伝えした通り同じclassを何度も使ってるので
position: relative;を使うと全て同じ位置に重なってしまい
配置がおかしくなってしまいます
この場合、かなり量はあるんですが一つ一つclassを変える
もしくは改行のタグを入れて合わせていくしかないでしょうか？ >>406
いや適切にクラス名与えてればそんなことにはならないはず
どっか閉じタグ忘れたりしてない？ >>406
クラスは何個も書いていいんだよ
今まで使ってた親要素のクラス名を「zaku」として
新たに「gelgoog」というクラスを用意して
.gelgoog{ position: relative; }
<div class=“zaku”>今までのやつ</div>
<div class=“zaku gelgoog”>あたらしいやつ</div>
ってすれば、後者にはザクとゲルググの両方のスタイルが適用されるので
今までのやつに影響することなく、やりたいことできるっしょ background: url('image.png');
background: url(image.png);
のどちらでも出来たのですが、クオーテーションマークは無しでも良いですか？ >>409
どっちでもいいよ
ちなみにダブルクォーテーションでもいい
ただし、ないとは思うけどURLにスペースが入る場合は必須
俺はなし派 >>406
relativeとabsoluteをつける要素を間違えてるんじゃない？ せめてHTMLタグの階層ぐらいはかいてくれないとまだ意味がわからない
本当に解決したいなら質問内容を伝えるのに図ぐらいは描いてほしいところ <container><img><文字></container>
<container>ちがう文章１</container>
<container>ちがう文章２</container>
みたいになってて（クラス名＝タグ名の略式だとおもってね）
container に relative を使うとちがう文章にも影響がでるからつかえない
っていいたいのかな？
そもそも役割のおなじものにちがうスタイルをあてたくなるってことがナンセンスだから
relativeをあてたいクラスにはちがう役割があるはずでちがう名前をつけるべきかと
<container><swipe><img><span>文字</span><swipe></container>
でswipeにrelativeをつけるとか
<container container-swipe><swipe><img><span>文字</span><swipe></container>
.container.container-swipe に限定してrekativeをつけるとか
CMSの自動出力なんかでHTMLをどうしても変更できないとかなら
.container:nth-child(1) とかで何番目のクラスにだけスタイルを適用とかもできる 何度もすみません
水色で小さく枠どった背景の中に
青い線が文章、黄緑がスワイプ画像です
文章がそれぞれ違うので画像の高さがばらばらになります
画像は枠内の一番下に統一したいです
classはfloatがrightのものもあります
left rightともに何度も使ってます
<div class="left">
<p>
あああああああああああああ<br />
</p>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="1.jpg"></div>
<div class="swiper-slide"><img src="2.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
.left{
float: left;
width: 650px;
height: 600px;
margin: 50px auto 120px 180px;
padding: 30px;
border: 50px;
border-radius: 30px 30px 30px 30px;
background-color: #faf7e6;
} 画像の高さが決まってるなら親要素に画像の高さ分のpadding-bottomを設定して画像をabsoluteで下付にする
もしくは
matchHeight.jsなど高さ揃えのプラグインをいれてテキストの高さを揃える
floatをやめてflex使えばいけそうだけどな .left, .right {
position: relative;
}
.swiper-container {
position: fixed;
bottom: 0;
}
だけでいいような気が それこそ absolute で重なっていいんだったら backgroud-image で済む話じゃないのん
文章と重なってほしくないなら
.left の中に文章エリアとスワイプエリアの２つがきっちりわけられてるし
.left {
display: flex;
flex-direction: column;
justify-content: space-between;
}
でいいと思う ulの中の数個のliに以下のようにafterを追加しました。
li::after{
content:"★";
position:absolute;
right:0;
bottom:0;
・・・
}
など指定。
こうすればliの後ろに★が出ると思ったのですが、実際は画面の最下部に出ました。
どうやらliではなくてbodyに対してrightやbottomの指定が効いているようなのです。
そう言う事ってありますか？ すみませんWEB系に行こうと勉強してるんですが、教えてください
CSSの最初にhtml,body,p,h1...という感じでにタグを網羅してからmarginpadding:0やってるサイトをよく見かけるんですが、
全選択セレクタの *｛ﾏｰｼﾞﾝﾊﾟﾃﾞｨﾝｸﾞ0｝ の方を仕事としてWEB製作やってく上で使ったら駄目な理由とかってありますか？ >>422
right、bottomってどこを基準にして設定したいの？
で、それをあなたちゃんと指定している？してないからbodyが基準になってるんじゃないの >>424
>right、bottomってどこを基準にして設定したいの？
liを基準にしたいです。
と言うか、liのafterでabsolute指定すると、それはliに対して指定した事になると思っていたのですが、
それは間違いですか？ >>425
liを基準にしたいって書くんだよ
あとはグーグルでabsoluteの挙動について調べればわかる >>423
リセットCSSってやつね
ブラウザの差異を吸収するために使うけど当然デメリットも有る
まあここら辺読んでみるといい
ttp://blog.3streamer.net/html-css-beginner/reset-css-1/ absoluteは親をたどって最初にstatic以外の要素を基準にして位置が決定される
特定の親要素の中にabsoluteで配置したい場合はその親要素にrelativeを指定する
relativeをどこにもつけないとbodyを基準にした相対配置になる >>429
そうなんですか！
それは知らなかったです。
ありがとうございました。 >>428
有難うございます
一回用意しとけばコピペで済む話なんで、可能なら*ではなくリセットかけるタグをそれぞれ書いた方が良い。ということですね
どっかからコピペして使うことにします ぜんぜん違うけどまあいいや
実際に仕事で動作環境指定されてはじめて問題になることで最初に覚えることじゃないし好きにしていいよ 皆さんの知恵を拝借し、なんとかできました
助かりました
ありがとうございました inputのボーダーをチカチカ点滅させたいんですがCSSで可能でしょうか？
出来ればルーレットのように点滅しながら回転させたいです。
https://www.youtube.com/watch?v=yVF-Dhz2oKE
こんなふうに。 cssのanimation keyframe使えば可能だと思う google fontsってローカルに保存してつかえますか？ htmlとcssだけでニコニコのコメントみたいに横方向に流すことってできますか？ ttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
文字列がブラウザーのウィンドウを横切る >>443
ありがとうございます
横に動くたびに文字が細かく動くのがちょっと気持ち悪いですね 要素の高さが足りないと背景で指定している画像が
見切れてしまいますが、それを自動的に防ぐ方法ありますか？
<style>
.hoge{
background: url("https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";) no-repeat 0 0;
background-color: #ddd;
}
</style>
<div class="hoge">
ここのdivの高さを背景画像の高さに応じて自動的に変化するようにしたい
できればmin-heightのように最低値として
</div> >>446
そうですよね...
img要素って縦横比も自動的に保つし
何気に素晴らしい imgが素晴らしいってよりbgは用途が違うからなぁ 少なくとも背景画像サイズをCSSで認識する方法はないので background-image では無理
img を使うしかない compassで幅・高さ測って
要素の縦横比を合わせる
ってことはちょくちょくする >>208>>210
こういう古いcssライブラリ見つけたぞ
http://benschwarz.github.io/gallery-css/
これにcss scroll snapくっつければいいんや！ javascriptで、要素の高さとかを合わせるようにしてるんだけど、描写後に変更するから画面が少しちらつく。
どうしたらええやろか…
Hiddenして、要素の高さ合わせた後にhidden解除したらいけると思ったけどダメだった… >>452
最近よくあるやつ
ページ遷移する度にloadingの画面になってアイコンを数秒見せてごまかすやつは？ >>453
loading画面の要件がないので使えない。
あくまで普通に開くことが必要…
まぁ俺が気になったから直したいだけなんだが… wordファイルから効率良くきれいなhtml用のソースを作成する方法ないかな？
インラインスタイルが邪魔で削除したいが、変な所で改行されてたり微妙に正規表現で上手く消せない・・・ DreamweaverCCで画面切り替えると検索窓がいちいち消えるのなんとかならないのだろうか
入力しておいた文字が消えるし、常に表示しておきたい ライブとコードの画面をマルチにできる様に？
あれ謎よね 一番最初に実装しなきゃならんでしょあんなの
DWあんまり使ってないから良いけど ChromeでDevTool開けば似たようなもんだろ。 Dreamweaver結構使ってるんやね
慣れなくて速攻使うのやめたわ… 逆にDW以外だとみんななに使ってるのか知りたい
JSPが編集できるとうれしいんだけど >>458
ちがう
ファイルをマルチ画面(分割画面)でひらけるようにだ。
なんでわざわざ別ファイル開いてウィンドウ吸着解除して手でならべなかなゃならんのだ？
お前の関連ファイルタブは飾りか？っておもうわ
ライブとかどうでもいい。 >>463
いいという話は聞くけど、DWから乗り換えろといったら反発されるんでは エディタなんてなんでもよくてDwテンプレートの代わりに何使うかでしょ 画面の一部に blur 効果の窓をつけたいんだけど
背景画像が固定じゃないとつけられない？
すでに表示してるページの上にぼかし窓のせたいんだけど
ttps://hacknote.jp/archives/2470/
とかいくつかサイトみてると背景と同じ画像を設定するってあるので
普通のページ要素をぼかすのは無理なのかな >>468
blurは要素をぼかし窓にするものではなく設定した要素自体がぼける
blurした要素に背景がなければ下がくっきり見える
sectionにblurしたところでsectionの中身がぼけるだけ
くっきりした背景(body)の上にぼけた文字(section)が載ってる状態になる
section:beforeにしてもそいつに背景がないと意味をなさない
透明をぼけさせても透明だからね
なので下に見える背景画像と同じ背景画像を設定してそいつをぼけさせると一見ぼかし窓っぽく見えるという騙しテクニック Brackets使ってるがDWよりマシとはいえもっさりしてるから乗り換え検討中 atomモッサリなのにvscodeに次いで二番手、sublimeはサクサクなのになんで廃れたんだ？ vscodeが軽くなって一択になったわ
他のエディタでできることだいたいできる
sublimeは軽いし見た目も良いエディタだけどライセンス催促とコード補完の弱さとサイドバーの使いづらさで捨てた >>470
となると固定画像以外の文字や動画含むドキュメント自体にblur窓をつけるのは無理なんですね
ありがとうございました ライセンスは金払えばいいだろw
他は、まあおっしゃる通り
vscodeはどんどん良くなっていくな、手離せなくなってきた >>475
ttps://teratail.com/questions/114413 >>476
vscodeでsublimeのctrl+,に相当するのってなんかある？(タグ領域の選択的なやつ) いい加減ツールスレいけよ
質問がない間はいいが質問流してまで雑談続けるバカは何なんだ >>479
そういうのは荒れるし自分も流してるじゃん俺もな。 bpm って何か理解してないままコーディングしている >>473
Atom使ってる人多いね
。Sublimeは有料だからでは？ >>485
レスポンシブにするには、相対的なサイズ指定がよろしくない？ 誰かが作ったフォントサイズ関数使うと想像以上にフォントサイズが小さくなる >>473
atomはgithub謹製なのがでかい
あとsublimeが軽いがまだ不安定だった頃だったし リセットCSS は自作するもの？ ノーマライズとか無駄にでかいよな。 reboot.cssやnormalize.cssを削って作る。 テーブルの初歩的な質問ですがすみません。
下記で<tr>要素を縦並びにしたいのですが、横に繋がってしまいます指摘お願いします。
<table border="1" cellspacing="0" cellpadding="0"; id="dailytable">
<tbody>
<tr><td class="hour" rowspan="2"><br></td><td colspan="2" class="timetable">aaa</td>
<td rowspan="2" class="hour"><br></td>
</tr>
<tr><td class="station"><span class="station-name"><a href="#" target="_blank">a</a>
</span></td><td class="station"><span class="station-name"><a href="#" target="_blank">b</a></span></td>
</tr>
<!--一つ目の縦につなげたい要素--!>
<tr><td rowspan="12" class="hour">6</td><td rowspan="12" class="program">
<div class="time">06:00-07:00</div><div class="title"><a href="">a</a></div>
<div class="actress">a</div></td><td rowspan="12" class="program"><div class="time">06:00-07:00</div><div class="title">
<a href="">aa</a></div><div class="actress">a</div></td><td rowspan="12" class="hour">6</td>
</tr>
下記に続く↓ 493の続き
<!--2つ目の縦に繋げたい要素--!>
<tr><td rowspan="12" class="hour">6</td>
<td rowspan="12" class="program"> <div class="time">06:00-07:00</div>
<div class="title"><a href="">a</a></div>
<div class="actress">a</div></td><td rowspan="12" class="program"><div class="time">06:00-07:00</div>
<div class="title"><a href="">aa</a></div><div class="actress">a</div></td><td rowspan="12" class="hour">6</td>
</tr>
</tbody>
</table>
宜しくお願いします。 画像で見るとこのような感じです
https://i.imgur.com/Njb8qox.jpg
二つ目の<tr>要素を縦に繋げたいです
宜しくお願いします DWの質問スレが無いんだがどこで聞いたらいい？
マルチカーソルで複数個所を同時に編集する際、
Cｔｒｌ＋pのようなタグで括るショートカットが効かないんだが、
複数個所を選択して一括でタグで括る方法ないかな（手で打たないで） >>489
最近はめっきりReboot.cssだな >>496
確かに謎だね
HTMLはあってるようにみえる
rowspan だけの行ってダメだったりするのかな…
ちなみにrowspan=12は何のためにつけてるの？
高さを指定したいならCSSにまかせてrowspanなしにすれば縦に並ぶけど 俺もreboot.cssだな。だけどどれでもたいした違いはないだろう。 >>496
tdがすべてrowspan="12"なのでtr12行単位で横に並ぶ
表示が1行のうちは頭位置揃ってるけど２行以上になると階段状になるのでどういうことか理解しやすいかと
あと、tableのid前のセミコロンが余計
コメント閉じは --!> ではなく --> VSCode などの構文解析できるエディタを使えば、
コメントになったかどうかは、色が変わるから、すぐわかる すいません。
サイトにランダムで飛べるページを作ろうと思いまして、色々と質問していたところ
.entry-title-link
要素が無いから飛べないと言われました。そもそもこの.entry-title-link要素とは何なのでしょうか？ 「entry-title がありません」「entry-title css」「entry-title wordpress」で検索！
wordpress のスレで聞けば？ background-imageで画像のサイズをmax-widthにしたい場合、どうしたらいいの？ auto contain cover px % しか無理だね 背景を max-width したい場合ってのがよくわからん
背景はしょせん背景だからみきれようとどうでもいい
というよりどうでもいいものを背景にするべき
画像を画面内でみせたいなら img にするべき 文字セット って10個ぐらいフォント並んでるのがあるが、あんなに必要か？ >>509
べきw
実務やったことないなら口出すなよ >>509
自分がデザインしたわけじゃないんだがね。
わかりやすいのだとこういうのとか
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
100%だと実際のピクセルより引き伸ばされてボヤけるからダメ。
imgをz-indexで重ねるのはいいけど本来の用途と違う気がする（altとかどうすんねん） >>512
質問者の俺が言ったと思われたら嫌だから
穏便な口調でおねがします >>514
ぜんぜん関係ないけど、こういうレスって初めて見た気がする
匿名掲示板なんだから、これは自分じゃない、ってことはよくありそうだけどね
ただ、いくら何でも質問者がこんなレスはしないと思うよ width:100% max-width:1200px
みたいな指定が多い Webフォントって使ってる？
自分のサイトで試しにGoogleフォントの日本語使って問題ないっぽいけど客のに使うのはちゅうちょする >>512
じゃあ答えてやれば？
実際無理なものは無理
それはCSSが不便なんじゃなくそうするべきではないからそういう機能がついてないだけ >>518
Notosansjapaneseを常用してる >>521
うちもNoto。
検証して見る限り、重いっても誤差かなと思うけど、みんな使ってるか気になった 日本語Webフォントはサブセットで使ってる
そうすればくそ小さくなるから気にせず使える
あとはNoto Sansなら使ってるサイト多いからキャッシュ使われる確率高い FontAwesomeなどのアイコンは使わないことにしている。あれは重いよね。 「Noto Sans Japanese」の不要なものは削除して必要なものだけ読み込む方法【Webフォント高速化】
https://haniwaman.com/noto-sans-japanese/ >>520
そうするべきじゃないと言われても、実際の現場ではこういう対応が必要なデザインが上ってきてるわけでして、、
それとこの1例でも別に完全否定するようなデザインではないと思うんだが。（自分ならレスポンシブでこんなのしないけど）
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
とてもとてもありふれたものじゃん？
css3になる前だったらこれら文字とリボンそのまま画像にするのが一般的な対応だったわけだが
css3を駆使すればテキストと背景でなんとかできそうな気がして聞いてみたわけだが
まあ、無理という事でOKだね だから img つかえって言ってんの
backgroud-image では無理なだけでデザインが無理とはいってない >>526
このデザインだったら width height100% でいいじゃん
レスポンシブで大きさ変えたらどのみちぼやけるし
大きさを変えないで完全固定するか
ぼやけてもいいかどっちかしか選択肢なんてなくない？ >>526
話の流れがちゃんとわかってないけどこれが質問者なの？
というかこのデザインで max-width が必要になるってどういうこと？
ななめに表示するためにブロック自体に画像の上にのるように
max-width: 60%; margin-left:20% みたいにしたいってのはわかるけど
背景だけ max-width つけたら文字拡大したときに文字だけはみでることになるじゃん サイズレスポンシブなデザインはプログラミングに近いセンスがいるからなー
4Kモニタk時代がきていつまでも幅1000pxとか1200pxとか固定するわけにもいかなくなってきたし >>527
誰？>>509?
↓これおかしくね？このデザインだとリボンはどうみても背景だよね？
> 背景はしょせん背景だからみきれようとどうでもいい
> というよりどうでもいいものを背景にするべき
>>512は違うよ
>>526
いや、最大値は原寸までで、小さくなる分には小さくなるようにしたい。
つまりmax-width:100%
>>530
そうだよ。
>max-width: 60%; margin-left:20% みたいにしたいってのはわかるけど
↑違うし
文字拡大はこの際、対応しなくていいよもう。
最大値は原寸までで、小さくなる分には小さくなるようにしたい。 アンカ間違えた
>>528
>>512は違うよ
>>529
いや、最大値は原寸までで、小さくなる分には小さくなるようにしたい。
つまりmax-width:100% >>531
いうて1000より縮まないようにしとくだけで広がる分には問題ないように作るのはそんな大変じゃないかと
１年ほど前に400px幅の絶対配置で作られたサイトはみたことあるが…
よほど奇抜なデザインしてない限り画像解像度を高めにしておいて
font-size を vw 指定
margin padding や位置指定に px じゃなく rem と % 使う
改行位置に依存したデザインをさける
ぐらいだと思う もうカオスでややこしいから
この質問は終わりでいいや。
cssでできるやついるかどうかをしりたかっただけ。 >>534
それってデザイン画像があまり無いサイトの話だよね。 >文字拡大はこの際、対応しなくていいよもう
だったらブロック自体に画像サイズと同じ max-width をつけておいて背景は contain なり 100% でいいじゃん >>537は優秀そうだな
そもそもの質問は違うんだが、
例の対応方法としては一番共感するわ。
と言う事で終了。 >>532
509=527=537 ぜんぶ同じだが？
>このデザインだとリボンはどうみても背景だよね？
それはデザイン者の意図次第
リボン全体を画面におさめたい＝リボンという形に意味がある＝背景ではない
背景であるなら形や全体図形にこだわるべきではない＝見切れても問題ない画像にすべき
単に文字にかさなってるから背景というわけじゃない
>最大値は原寸までで、小さくなる分には小さくなるようにしたい
これが意味がわからない
要件定義をきっちりしてないとなにをしたいのかわからない
文字と独立に背景だけ縮んだらはみだすわけじゃん
ふつうは body とかに min-width 設定して一定以上ちぢまないようにするものだけど
仮にそうしないで画面縮めたら文字だけ折り返すかはみでるかして
どのみちりぼんから文字の横か縦どちらかがはみでる >>531
そこそこ大手のウェブ制作会社だけどまだpixel指定だよ
サイズレスポンシブ？っていうの？
覚えないとやばいのかな… うちもまだサイズフリーのレスポンシブでくんでくれって案件はきたことないな
ただいわれてみればモニタが４Kなのにいつまでも1000固定で作ってるわけには行かないよな いつも小さいモニターの話しか出てこないけど、
いつか大きいモニターにも対応しなきゃならんくなるのか
そうすると画像はSVG一択なのかな メディアクエリでスマホ版と２パターンデザインするだけじゃあかんのか？
それもただ複数カラム floatとflexをばらして無効にするぐらいしかやってないわ 逆に言うとほとんどがモバイル対応しかやってない今
サイズフリーレスポンシブ４K対応を唄えば仕事取り放題だよ
ノウハウがたまるまではそれなりに技術が必要になるが サイズレスポンシブだと
pixel指定もmax-widhtが必須になる感じか まだそういう求人見たことないな
いまだにスマホ大丈夫ですか？って聞かれる
早くIE11を見放して欲しい ttps://webtan.impress.co.jp/e/2018/04/04/28482
半年ほど前から大画面対応の話はちらほらきくけど
現場レベルだとなかなかすぐに対応かえるってのは難しいんじゃね WindowsServer2016インストールしたら標準ブラウザがEdgeじゃなくてIE11だった 今時、4Kモニターでネット見る人なんて
ゲーマーかこだわりエンジニアかオタクしかいないからなぁ
一般人は8割スマホとタブレット
PCあっても学生は液晶がクソな低価格のノートPCかアップル製品
ご家庭だと10年前のノートとかザラだし もう３～４万から買えるし次買うなら４Kって人は多いと思うけどな 4Kって解像度だよね？
ならば px 単位のリアルな大きさは変化しないことになるので
特に対応する必要はないんじゃないのか？ 昔からべき論者は自分で知らない出来ないことをべきべき言って批判しかしてこないからな 文字列に下線を引いて、その下に注釈文字列を書き込む方法を教えて下さい
例えば、
あいうえお
--------
いろは
みたいな感じにしたいです。
よろしくお願いします。 いろは のインデントがズレましたがやりたい事はわかると思います。 <style>
.notice {
display: inline-block;
border-bottom: solid 1px black;text-decoration: position: relative;
}
.notice-text {
font-size: 80%;
position: absolute;
display: block;
}
</style>
かきくけこ<span class="notice">あいうえお<span class="notice-text">いろは</span></span>さしすせそ
とか？
<span class="notice" title="いろは">あいうえお</span>
みたいなこともできるけど >>562
ありがとうございます。
ところで、｢いろは｣を"下に配置する"という明示的命令はないのに、positionという言葉だけでなぜ｢いろは｣が下に配置されるんでしょうか？
それと、
｢text-decoration: position: relative;｣という"3連"の表記は初めて見たのでどう理解すればいいのか分からないのですが、
解説しているサイトを教えて頂ければと思います。 >>562
問題がありました
その仕方だと
かきくけこ<span class="notice">あいうえお<span class="notice-text">いろは</span></span>さしすせそ<br />
ああああああああああああああああああああああああ
とすると、｢いろは｣と｢ああああ…｣が重なってしまいます text-decoration:
については無くてもよいと言う事で理解しました。 疑似クラスみたいな感じで特定の文字色や背景色の要素だけを指定する方法ってありますか？ 行頭文字なら指定できるけどそれ以外はjavascriptじゃないと無理じゃないかな
特定の文字にタグをつければできるから
内容が固定なんだったらエディタの replace とかつかえばタグにするのは簡単だけど >>566
line-height あければいいんじゃないの？
というか要件定義をきっちりしてほしい
注釈がはいった場合だけ行間をあけたいのか
常に注釈が入るスペーををあけておくのか >>568
特定の文字色や背景色があるってことは
そこに何かしらの要素があるってことじゃろ？ こういうのってどんくらい気をつけてる？
ttps://sole-color-blog.com/blog/31/
ぶっちゃけ同じ値にしてもズレまくるから、見た目重視にやってるんだが、こだわる人がいて面倒。 >>575
なんか不毛だな…
最初からブラウザでデザインするような拡張機能ねーかな… >>575
>同じ値にしてもズレまくるから、見た目重視にやってる
↑全く持ってその通り。
数値が当てにならない。結局見ながら何度も修正するハメになる line-heightの挙動に理解がないデザイナーはわりといる HTMLの出力として、各行に行番号を表示させる方法について説明しているサイトを教えて下さい。
ググっても殆どは｢HTMLソース編集中に｣行番号を表示させる事ばかりが載っているので、私の望みではないです。
細部の仕様については使いながら考えていきたいと思っています。 >>580
code-prettifyとかsyntax-highlighterとか
そのへんの話かな？ >>575
最近はnoto使うことが多いから
デザインカンプ通りの数値でほぼ大丈夫だな
トラッキング→letter-spacingの変換はsassのmixinでやってる >>581
行番号の表示スタイルとしてはそれなんですが、それも結局はソースコードを読者に見せるための行番号表示であって、
私の望むところとしては、普通の文章に行番号をつけて読者に見せたいんです >>583
普通の文章だと横幅によって行番号は変わる。
文章の中で○行を参照してくださいとか
書かないと約束できるか？ prism.js というものがソースコードをプログラマー読者向けに書けるようにしてくれるみたいですが、
これが｢結果として出てくる普通のHTML文章｣に適応できたらいいんですがね >>583
こういうのが嫌なら自分で作るしかねえんじゃね？
需要ねえし
そのブロックのline-heightに合わせて
左に行番号をじゃーっと羅列すりゃあいい
やり方はJSスレで聞いておくれ >>584
そんなことを書くバカはいちいち相手にしない
社内でまともに相手にしようとしてるヤツがいたらやめろと言うレベル
んなもんまともに対応するのが当然と思われたらかなわんわ >>588
これ、正確に数えられるんか？
ざっとしか見てないけど、1emの幅を測ってボックスの高さ超えるまで足してるみたいだけど うーーん、やっぱお前ら程度の頭には入門書を越える内容となると途端に何の有益な回答も得られないか…
せいぜい<div>,<span>,float,margin,paddingレベルの｢初級ワード｣を駆使して入門者に教えた気分に浸っとけｗｗｗ Bulmaってフレームワーク使ってみたい
HTMLもJSも知識なくても頑張って勉強したら使えるかな <div style="display:none">
はインラインといいますが、
以下2つの呼び方ってありますか？
<link rel="stylesheet" type="text/css" href="foo.css" media="all">
<style type="text/css">
div {
display:none;
}
</style> あるかないかを聞いています。
あってるかあってないかではありません。 >>596-598
ID出し忘れました、すいません
>>595への回答、よろしくお願いします >>595
一般的には外部css、内部cssって呼ぶ ボックス内のテキストに1文字ずつ<span>をつける
↓
ひとつずつoffsetTopを見ていって、数値が変わったら行が変わった位置になる
↓
行番号の要素を追加
↓
window.onresizeで上記をもう一度
これでどうだろう？ 重くなりそうだな
そんな押し付けがましくやることなのか 質問させてください
HTMLのdialogタグでモーダルウィンドウを表示したところ、ウィンドウが画面の左に寄せて表示されてしまいました
特にそういった設定はしておらず、調べてもどうもデフォルトで真ん中になっているようで良い情報がなかったのですが、どこか怪しいところとか、確認すべき箇所ってありますか？
ブラウザはChromeです >>606
dialog {
display: block;
margin: 0 auto;
}
多分親要素がtext-align:leftか何かを設定している >>604
俺ならwrapperと左に兄弟要素作って
見出しに使い、親要素のheight＝元のボックスのheightってのをやってみるかな
なんにしろめんどくさいけど >>607
ありがとうございます
後で試してみます
新しいタグは当たり前ですが情報少ないですね…かなり便利そうなので普及してほしい フロントは専門外なので勉強のためにここを
のぞいてるんだけど、そんなタグがあるなんて
初めて知った
へー。 >>607
display: blockを指定するとダイアログの下の表示がずれてしまいましたが、
margin: 0 autoだけでもきちんと中央に表示されたので解決しました
早い回答ありがとうございました margin: autoはblockにしか効かないんじゃなかったか・・・？ レスポンシブで、スマホの時はヘッダ（ナビ）とフッタ固定にしてるんだけど
背景を画面全体で一枚置いてるだけなので、スクロールすると文字が被っちゃう
固定部分に重なった文字だけ色を背景画像に近づける、もしくはコンテンツだけを固定部分に重ならないようにスクロールできるようにすることは可能ですか？
できればCSSとタグだけで実装できるなら嬉しい…
手打ちだけで使えるならJavaScriptもがんばってみま
>>613
中心部分にpaddingを付けて、paddingの上にヘッダ・フッタを乗せるようにする
中心の部分にpadding漬けにくかったら、body要素にでもpadding付けて後はヘッダ・フッタのtopなどで調節すればok
cssだけで行ける ちょっとしたモーダルウィンドウを画面中央にするのってcssだけじゃ無理なのかなあ
cssだけでてきたら素敵なんだけどなあ checkedで表示切り替え
display:block
position:fixed
flex（ほか何でもいいけど）で中央揃え
本気出せばこの辺で行ける ちょっとしたモーダルなら
margin上下左右ゼロではダメかね？ flexとかmarginだと親要素の中央じゃない？
画面(ウィンドウ)より縦長のページで画面中央にしたい
bodyのheightがウィンドウの高さより高いからbodyの中央にしても画面外に行くんだよね サイズ決まってるならcalc
決まってないなら
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
とか 画面全体を覆う要素を用意してモーダルを包み、flexとalign-items:centerとか
汎用性低い？ エスパーにそこそこ自信あったが
>>613の意味がわからなかった
何がどこの何と被るのか、主語が無いのはこういう奴のあるあるパターンなんだが、
今回はだめだたわ >>623
calcでどう位置をだせばいいの？
>>625
それだと画面の外に出るね
例えば1920x1080のモニタで高さ2000pxのページの一番上を表示してる時にそれすると画面の下の方に見切れるよね
>>626
画面全体を覆う要素というのが用意できないかと…
画面の高さと表示してる位置が取れないからなんかもやもやする… モーダルウィンドウをなにでどう表示したときの話をしてるんだ？
625のやり方ではみ出るってのがよくわからなう >>628
109vw * 100vhの要素にflexで入れればいけるんじゃ 親要素より子要素の高さがあるときalign-itemsの挙動ってどうなるっけ >>628
画面中央であってページ全体の中央じゃないでしょ？
だったら100vw100vhのdivをfix,flexの縦横centerにして中にdivおけばいけるでしょ >>618
作ったよ
pushって要素をクリックすればウィンドウっぽいものが出るようになっている
http://jsfiddle.net/cLty4hpg/2/ >>627
z-indexのことかと思ったけど614を読んでもよくわからなかった >>634
以前、cssのdisplayプロパティには表示/非表示を切り替える役割（jQueryでいう.show()/.hide()）と
インライン/ブロックなどのレイアウトを切り替える役割の2種類があって
表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
このスレで意味不明とか言ってスゲーバカにされたわ。
言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
汎用クラスにする場合、出来ないっつー事だったんだがな
バカにされた意味が未だにわからん。 > 以前、cssのdisplayプロパティには表示/非表示を切り替える役割（jQueryでいう.show()/.hide()）と
> インライン/ブロックなどのレイアウトを切り替える役割の2種類があって
・インラインで表示
・ブロックで表示
・表示しない（インラインでもブロックでもない）
の1種類しか役割はない
「表示しない」もレイアウトの一つ
> 表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
> このスレで意味不明とか言ってスゲーバカにされたわ。
何が言いたいのかわからん。意味不明と言われても当然だろう
> 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
何が出来ないのかさっぱりわからない。日本語がおかしい >>636
>>636が正しいと思うよ。
表示非表示に関しては、そもそもがcssの欠陥だと思う
class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
汎用classにするならwrapperをdisplay:inlineにすると影響が少ないのかな
そもそも論を言うとここはやはりjQueryに任せるべきか > class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
意味不明。show blockがあるってことは、その反対
「ブロックで表示しない」や「flexで表示しない」があるってことか？
それは一体どういう意味だ？
表示しないのであれば、そこになにもないで当然だろう
そこにもの（ブロック等）があるが見えないだけっていうのならvisibilityがある
displayは物自体がなくなるのだから、それはブロックでもflexでもない > 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
.onっていう汎用クラス使ってるじゃん visibilityは使い勝手悪くない？
何かバグも合ったはずだけど忘れた 使い勝手？
visibilityを使ってこんな裏技考えてみましたとかやる気か？
そこに物はあるが見えなくしたいってときに使うだけだろ >>639
なんで汎用クラスにしたら全部が全部汎用クラスでの運用になるん？ >>639
>そもそもがcssの欠陥
その欠陥は認知されていて、過去に box-suppress とかいう表示切り替え専用のプロパティが提案されたこともあった
なので現状では、元のスタイルを display:none で上書きする専用のclass（その class を外せば flex や giid など何であれ、元のdisplayに復帰する）か、hidden属性で対処するしかない（それで十分とも言えるので box-suppressはお蔵入りになったのかもしれん） >>645
ありがとう！
歴史に詳しい人がいるとうまくまとまるね >>645
提案されて却下ってことは、みんなが欠点に気づいていないってことじゃなくて、
それは欠点ではないと結論が出たってことなんだよ >>645
> なので現状では、元のスタイルを display:none で上書きする専用のclass（その class を外せば flex や giid など何であれ、元のdisplayに復帰する）か、hidden属性で対処するしかない
対処するしか無いんじゃなくて、そのやり方がCSSの正しいやり方ってことだよ
他の属性だってみんなそのやり方なんだから 1つだけわかった
たぶん、意味不明とか反論している人は、使用場面に遭遇した事ないんだわ
以前に動的サイトをロクに作った事無い奴に、その手法は動的では使えないよって
言っても最初全く通じなかったのと同じだわ
わかる人だけは何人か反応してるからもういいわ 汎用クラス .on があったとして
表示させるためのプロパティがdisplay:blockだったとすると
flexでレイアウトしていた要素は非表示から表示時にflex状態で復帰できないとか
display:noneで非表示してしまうと再表示時に再度コンテンツの読み込み直しになるとか
そういうところが不便ってことじゃなくて？ やっぱおまえら
unsetは使わんの？IEで使えないから >>649
使用場面に遭遇したことがあるというのなら、
その使用場面を言えば？
それが出来ないから意味不明って指摘に反論できないんだろ。
自分が悪いのに他人のせいにするな >>651
ずっと前から欲しかった機能だわこれ
存在を知らなかった >>650
そういう事。だからラッパーに頼るしかなくなる
>>651
IEでバグるから回避して以来、ずっと忘れてた・・・
今って問題なく使えるの？ > そういう事。だからラッパーに頼るしかなくなる
えぇ？それが理由ならお前の勘違いってことじゃん
ラッパーなんかいらないし
<div class="dialog on">ダイアログ</div>
.dialog { display: none; }
.dialog.on { display: block; }
クラス名は階層にしなくても繋げられるんですよ？ >>658
.dialog.on { display: block; }
これがblockかflexかinlineかわからないよねって話してるの .red { color: red } と書いたらだめな理由知ってる？
クラス名 = 見た目 になってるからだめ
クラス名で一律に見た目が決定されたらだめなんだよ
同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。
.on という状態でどういう見た目になるかは
そのコンポーネント次第 >>659
display: blockって書いてあるんだからblockじゃん？
flexならdisplay: flex、inlineならdisplay: inline って書くんだよ
CSSの勉強をしよう！ 未だに全て物のはインライン要素かブロック要素のどちらかに分類されるって
思ってるのかな？
HTML5でそういう分類は廃止されたんだが
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements >>661
それがonという汎用classで使いまわせないって話 >>657
やっぱアカンか、ありがとう
IEいつまで独自仕様なんだろう >>663
> それがonという汎用classで使いまわせないって話
あー、やっぱりだｗ 良くない使い方をしている
汎用classで使いまわしたらだめ
だ・め
理由は>>660にも書いたとおり
長くやってる人ならわかってると思うんだけど、
クラス名の使い方には二通りある
一つはコンポーネントを表すクラス名
もう一つは状態を表すクラス名
状態を表すクラス名は、見た目と紐づけてはいけない
つまり.onという汎用classで使い回すなんてことはやってはいけない。
ある状態でどういう見た目になるかはコンポーネント次第。
だから、.dialog.on { 見た目 } にコンポーネントと紐づけて使う
.on { 見た目 } のような使い方をしてはいけない >>664
そう、offは出来る
display:none !important
で必ず非表示になるからそれは問題ないんだ >>667
!importantを使うのも下手の証拠 >>666
＞状態を表すクラス名は、見た目と紐づけてはいけない
＞つまり.onという汎用classで使い回すなんてことはやってはいけない。
では、理由をどうぞ
>>668
100%消したいんだからimportantを付ける事に何の問題があるの？ >>669
> では、理由をどうぞ
だから>>660に書いたって言ってるだろうが 良くないと言われているから何も考えずに従っているだけだろう
bootstrap等のフレームワークは
＞状態を表すクラス名は、見た目と紐づけてはいけない
紐づけまくっているが、どう問題があるんだ？
フレームワークだからいいとか言うなよ > 良くないと言われているから何も考えずに従っているだけだろう
> bootstrap等のフレームワークは
> ＞状態を表すクラス名は、見た目と紐づけてはいけない
> 紐づけまくっているが、どう問題があるんだ？
紐づけていない。状態を表すクラスは必ずコンポーネントと組み合わせて使われている .赤 { color: 赤 } と .表示 { 表示 } は
どちらも同じ間抜けな使い方だってことに気づいてないんだよな
初心者やで 非表示にしたい時に
.off{
display:none !important;
}
つければいいだけじゃん >>674
だからいい加減
赤 { color: 赤 } とか .表示 { 表示 } は
.非表示 { 非表示 } みたいな使い方はやめろ jQuery何かでtoggle()を使う場合、.>>674みたいに自作classのトグルにしないとバグる事があるよ
普通は問題ないけど、プラグイン何かで設定されるインライン要素のdisplay:noneに勝てない事がある >>676
そいつはそもそも状態を表すクラスじゃないし、
メディアクエリーと組み合わせて使われてる
ダイアログのようにJavaScriptからつけたり外したりしねーだろ
状態というのは変わるものだ。変わらないものは状態ではない >>678
ウィンドウサイズによって変わるなら同じ事だね
で、メディアクエリーなら問題なくこういう使い方してもいいって事なのね
ふ～ん
まぁ俺は良いと思うけど フレームワークってそういうもんなんだから、フレームワークだからいいって言い切って良かったのに
何を意地になってんだか 別にフレームワークだからって綺麗に実装されてるわけじゃないしな、CSSに限らず
まあフレームワークと違って自分達で書いたコードは自分達が保守運用するんだからメンテしやすいに越したことはない >>660
それってさー、むかーしから言う人いるけど矛盾がない？
「redってネットワークのことです」って言われたらそれまでで
結局その言語を理解できる人だけにしか通じない話じゃん
意味ない気がする
結局classやidなんて識別子でしかないんだから
何書いても問題ねえよ 状態を表すクラス名に見た目(css)を紐付けるのは問題ないわ。コンポーネントごとに状態に対しての見た目が変わったっていい。
問題は見た目をクラス名にすることであって。 質問です。
youtubeの動画を埋め込む際、見終わった後の関連動画を表示させない方法で
2018年現在も有効な方法ってありますか？
ここに書いてあるような「?rel=0」って現在は効かないですよね？
https://beginners-high.com/youtube-kanren-display/ >>660
同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。
↑
矛盾してない？
自分で 見た目{見た目} がだめっていってon{display:block}はonが見た目じゃなくて状態を表してるから
っておなじ理由じゃないじゃん 要は
.hoge .on{display:block}はダメ
.hoge.on{display:block}はokってことだろ？
なんでこれだけのことをやれ汎用だコンポーネントだとぐちゃぐちゃいってんの？日本語壊滅すぎるだろ colorの値ってborder,text-decoration,box-shadow等の色に継承されてんだな
なんでfont-colorってプロパティ名にしなかったのかやっとわかった >>689
> 矛盾してない？
全然矛盾してない。.onを状態として扱うなら、
.onのときに表示するか非表示にするかはコンポーネント次第。
つまり、 .dialogと組み合わせて初めて
どういう表示になるかが特定できる
.onだけで決めてはだめという話
>>690
> .hoge .on{display:block}はダメ
> .hoge.on{display:block}はokってことだろ？
ほら間違ってる。だから説明がいるんだよｗ
.onが状態（JavaScriptから変更するもの）ならば、.onだけで
見た目が決定されたらだめ。必ずコンポーネントを表すクラスと組み合わせて使う
.hoge .on は .on だけでは何も決まらず、 .hoge と組み合わせているから問題ない >>682
> それってさー、むかーしから言う人いるけど矛盾がない？
> 「redってネットワークのことです」って言われたらそれまでで
何がそれまでなのかわからない。
.redを赤という意味で使うなって話だろ。
.redをネットワークの意味で使ってるなら別にいいよ
本当にネットワークの意味で使ってるならな
お前の屁理屈は、それまでだなｗ >>656
> そういう事。だからラッパーに頼るしかなくなる
どうやら反論もないし、ラッパーはいらないってことでいいね >>697
.hoge.on{}だって、ほかと組合わさってるじゃんほんと意味不
ほらwとか書いてないで日本語ちゃんとかいてくれよ >>697
css以前に日本語が出来て無い
言ってる事が合ってるかどうか以前に何を言ってるかわからない
酔っ払ってるの？ >>697
690はお前への援護レスだろうに…間違ってねぇじゃんよ。お前がそのすぐ下に書いてるコメントと… >>700
理解できない頭は辛いなｗ
.on { 見た目 }
やってはいけないのはこれだけ
状態を意味するクラスに直接見た目を書いてはいけない
これ以上の説明いる？ >>703
言わんとすることはわかるが、幾ら何でも説明が下手すぎる
cssの表現なんて見た目以外ないんだから何を指して「見た目」と言っているのか
そこを説明しないと >>697
状態を意味するかどうかなんてわかんないじゃん >>704
頭が短絡的すぎる
「状態を示すクラス単独に見た目を書くな」と言ったんだよ
言い換えると「状態を示すクラスはコンポーネントを示すクラスと組み合わせて見た目を書け」
と言ってるんだよ。誰が「見た目を書くな」っていったんだ。
「状態を示すクラス単独に」を抜かすんじゃねーよボケ
> 状態を意味するかどうかなんてわかんないじゃん
状態である以上変わるもの。変わらないならば状態ではない。
JavaScriptでつけたり外したりするのが状態だよ クラス名を気分でつけてのかな？
クラス設計というものを勉強したほうが良いぞ
BEMとかOOCSSとか（まあこれらはやりすぎだと思ってるが） >>707
自分がいく職場は気分でつけるところばかり
BEMの職場にいったら破綻してた
運用で人がチェンジするから学習が必要なのは無理っぽい × 運用で人がチェンジするから学習が必要なのは無理っぽい
○ 学習してない人にチェンジするから学習が必要なのは無理っぽい
◎ 素人にチェンジするから学習が必要なのは無理っぽい >>703
さんざん日本語へたすぎるっていわれてるのに…日本語へたな上に頭まで固いとか老害かよ 老害じゃなくて中学生だろう
さすがにこんなのが社会にいるとは思いたくないぞ
たまにいるけど >>700が>>706をどう満たしてないの？
状態状態いってるけど全てのプロパティは見た目だぞ？
見た目と状態がある！って言ってるだけ >>716
「状態を表すクラス単独に見た目を書いてはいけない」
繰り返していってみ
どうも端折る傾向にあるからさ CSS設計の各用語がわかりません
https://kuroeveryday.blogspot.com/2017/03/css-structure-and-rules.html
例えば FLOCSS だとこんなに種類があります
・Foundation
・Layout
・Object-Component
・Component
・Project
・Utillity
これらはどう違うのでしょうか？
どう使い分ければ良いのでしょうか？
またOOCSS、BEM、SMACSS、RSCSSでは
FLOCSSの一部しかないようですが、何故なくても大丈夫なのでしょうか？
まずは、違いを教えてください。 今話をしている「状態」というのは
https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884
.item-nav__item--state_active {…}
こういうもののことですか？ >>718
なんで>>714へのレスなのアンカーミス？
>>714は状態＝見た目派
状態が見た目とは完全に違うものとして存在すると言ってるのは>>706だよ >>715
>>700はクラス単独じゃないじゃん…
見た目かいちゃいけなかったらcssできないじゃん >>719
アンカミスではない。話のレベルを数段階上に引き上げる
状態というのはなにか？
どのフレームワークにも状態という概念がある
これをお前に説明できるか？ >>720
見た目書いたらいけないなんて
一言も言っていない。
お前は馬鹿なのか？ >>721
これは今作った俺用のフレームワークだけど、これに状態という概念があるのか？
俺も知らなかったわ～そんなもの搭載したつもり一切ないのにな
http://jsfiddle.net/kqs0o4p1/ >>723
それはフレームワークじゃない。
ただのゴミカス というか、有名フレームワークはどれも状態がある
どうしよう困った。なら状態という概念がないフレームワークを考え出してやろう
有名フレームワークにはどれも状態があるからなー！
（ちくしょう）
という考えで作り出されたものに価値はない さて>>716の対比によると、状態というのはSMACSSで
そのまんま英語にした、Stateで表せされる。BEMではModifierだ
まあどれでもいいのだが、どのフレームワークも
単独で使っておらず、コンポーネントと組み合わせて
見た目が決まってるというのがわかる。
例えば、BEMだが、LargeというModifierは
menu__item--large のように、
menu__itemというBlock、Elementと組み合わせている
言い換えるとlargeだけではどのような見た目か決定することはない。
menu__itemのlargeなのだ なんだ…老害のうえに自演キチガイかよ…話のレベルを上げる？そもそもの日本語のレベルまともにしてから出直せよ ま…まさかだけどonはダメだけどitem_display-onはokとか言い出すの？
まさか違うよね？いつから命名規則の話にすり替えられた？ >>725
「どのフレームワークにも」
状態がないフレームワークはフレームワークではないとおっしゃるのですね
なるほど >>728
何故かフレームワークならそれは状態を表すからokという事らしい
フレームワークなんてそういうものなんだから、FWは別で基本的には～～みたいにしてさっさと手仕舞いすればよかったのに
頑固だから謎の俺ルールがどんどんでてきて収集つかなくなっている >>726
まぁもうネタばらしすると、
お前が論破され叩かれ続けるのは決まっていた
俺が誘導したんだけどな
cssはそもそも設計がクソすぎて、100%正解の記述なんてどこにもない。
そもそも論を言えばフロント周りは集客が出来てコンバーションが取れれば何でも良い
全部画像だろうがなんだろうがどうでもいい場面すらある
それを経験し、皆わかっていてどこかで線引して妥協しているのに、
お前は自分の100点だけが正しいと思い込んで他人を批判し続けた
1~99点、101～200点の人から叩かれて当たり前だ こんな小さくて細けえことにうだうだ問答繰り返して気持ち悪い inputタグを折り返すにはどうすればいいんでしたっけ、それとも無理でしたっけ？
長いので2行以上に折り返したい（けど改行コードは入力してほしくない）入力欄を作るには、textareaでkeyupだかするたびにreplaceで改行コードを取り除くしかないですかね？ <details>
<summary><ol><li>a</li><li>b</li></ol></summary>
<ul>
<li>c</li>
</ul>
</details>
が期待通りの出力になりません
なぜですか？ つまり
1.a
2.b
をひとまとまりとして?マークがついて欲しいのにずれて表示されます ▲←これを右に90度傾けたマークの表示位置が上手く行かないんですね >>735
＞改行コードを入力してほしくない
これは難しい。ブラウザでなんとでも入呂できる
通常はそのままサニタイズだけしてDBに入力させる
その後、改行が多いようなら管理画面の表示では改行をなくすなどの処理をかませる >>739
より正確に言うと身内向けで、うっかり改行を防ぎたくて…
(最終的にチェックされたり置換されたりはしますが、最後だとやり直しの手間が増えたり、予期せぬ置換が起こったりするので)
あるいは改行コードをアイコン的な感じで目に見えるようにできればいいのですが
editable化されたdivならともかく、ただのinputやtextareaでは難しいでしょうか
○文字目に改行コードがありますよって赤文字を出したりすることは簡単でしょうけれど
…あ、その位置を元にline-heightなどで計算してposition:absoluteでアイコンを重ねて表示すれば無理やり行けなくもない…のかな…？ flex って１度使うと子孫要素は height 一切できなくなるの？
内側で地図やグラフのJSライブラリを使いたいから
height100% をずっと指定したいんだけど…
有名な chart.js も flex の内側だとつかえないし
使わずにすむなら使わないほうがいいのかな flexboxは互換性考えたらゴミだっていってんのに
このスレやたらflex推すバカが居るからな
同じことができるならfloatやinline-block使っとけ
flex使わないといけないのは不特定多数の等間隔配置したいときだけ >742
そうなんですね…
よくある
1カラムヘッダ
2カラムでサイドバー
をそれぞれ可変長でもってて
それ以外の領域にめいっぱいグラフを表示させるってどうすればいいですか？
header
----------
side | chart
可変要素に対して残りの高さや幅めいっぱい使うというのが flex-grow を使う以外にやり方が分からなくて… flex使おうがJSならサイズとることはできるから
chart.js使うってことはJSかけるならJSでサイズセットしたほうがはやくね？ 独自ドメインって個人レベルがお名前.comのようなサービスを介さないで
取得する事ってできるもんなんですか？ 別の会社利用しているかもしれないが
同じようなもん >>744
jsはあまりなれてなくてchart.jsもテンプレのデータだけ入れ替えて使うぐらいで
設定変えるとか全くわからなくて半日かけてもうまくリサイズしてくれない…
あきらめて flex つかわずにレイアウトすることにします
ありがとうございました こういうときこそflexならなにでもできる君こねーの まぁそういうものだからねw
自分が不利なときには絶対来ないw flexって未だに互換性イマイチなの？
高さ合わせて横並びにする時、pading9999＋margin9999のハックなんてもう使いたくないよ 画像の回り込みみたいのはfloatしかできないよね
それ以外はflex使うけど
CSSGridはIE問題があるから手出してない そもそもそんな新聞みたいな段組でデザインすることが無い
もちろんそういう案件が来たら使うけどね >>757
いや、出来るけど得手不得手が大きすぎる
画像の回り込みだけはfloat最強だろう >>742
互換性考えたらゴミというと、具体的にどういうことでしょうか？ 実際>>743がflexのせいで動かないっていってんじゃん
DOMのレイアウトだけならモダンブラウザはほぼ対応してるけど
JSライブラリの中にはまだまだflex使うと動かないものはあるってことだろ >>759
まだ古いIEやらを相手にしてる人も少数だがいるんだよ 画像の回り込みデザインみかけなくなったな。
レスポンシブに弱いからか。 >>762
だと思う。モバイルで回り込みは見づらすぎるからな
最近はpc版もモバイルをそのまま横長にするだけってのも増えてきたし、
今後はもっと減っていくんじゃないか >>764
末尾要素を変な技使わないと左寄せできない
他にもいくつかあったが忘れた。
ケースバイケースで使い分けてるわ。
floatが苦手なんでしょ？ どんなケースか忘れたが、flexは中身の要素の高さを認識できない時があった。 なんでcssは何十年建ってもまともなレイアウトが出来ないんだよｗ 結局リッチクライアントを達成するにあたって昔ながらの枠組みを無理やり拡張しようとしたのが間違いだったということさ あいう
あいう
あいう
flexboxでdisplay.flexでこんな感じにしきつまって、これをサイトの幅に合わせたいんですがどうすればいいんですか？
widthでpx指定するとスマホとかノートpcではみ出しちゃいそうですし >>771
言ってる意味がよく分からんか
width:100%じゃあかんの SSIでのHTMLファイルのインクルードがよろしくないらしいけど、今は何でインクルードするのが一番良いんですか？ 作業者がHTMLプリプロセッサを使ってローカルでインクルード化します >>773
php
もう誰も使ってない変な技術は使うのやめといたほうがいい >>776
ここまで実質標準で世界中で使われているなら、デバッグも十分済んでるだろう
そう納得して使っている
まぁapacheのバックドアが数十年ほったらかしだったりするんだけどね～
ま～いっか～みたいな～ SSIで出来る事って限られてるからphpｙり悪用はされにくいとは思うけどな はびこんちぇっかーにまにへすとがあらへんってゆあれる。。。
jsonチェッカーで構文は合ってるみたいだしちゃんとhead内のそのへんに
<link rel="manifest" href="/manifest.json">
も入れてるんだけど記述する位置でも決まってたりするの？ はてなブログで
<details>
<summary><ol>
<li>aaa</li>
<li>bbb</li>
</ol></summary>
<ol>
<li>A1</li>
</ol>
</details>
と書くと、見出し部分がaaaとbbbのリストではなく、 ｢[詳細]｣ という文字列に勝手に置き換えられてしまいます
なぜですか？
はてなブログ以外なら普通にいけたんですが 無料のブログは広告やウィルスを貼れないように置換することがある
その見出しがなんで置換されるのかは分からん。>>785だね >>782
そのタグの書き方がおかしいとか？
/manifest.json のパスがおかしいとか？
./ や、../ から始めるとか？ >>787
そこの記述チェッカーにかけて見たら引用符が間違ってたわ
サンクス TVはもう4Kの次の8Kが話題になってる
8Kテレビは今の4倍の7680×4320ピクセルだってよ
これがwebにも取り入れられたら大変だわ
横幅7680ピクセルのデザインモックなんて作ってたら非効率過ぎて死ねるわな
それでいてスマホのサイズにもレスポンシブ対応ってなったら対応幅が広すぎだわ いちいち高解像度に対応してたら
写真素材も高解像度のしか使えないから
全部買い直しになるし金かかって仕方なくなりそう >>790
今はモバイルファースト、PC版は横幅広げてbodyにpadding、サイドバー付けるだけってとこが多いよ
横幅がなんぼになろうと対して変わらん >>794
直近は東京オリンピックのテレビ需要に合わせて普及をはかってるらしい
出演者向けにそれに合わせた化粧品も開発されているとかなんとか <hr />って前後に改行が入りますけど、
前後に改行が入らない<hr />ってどうすればいいですか？ >>796
何のためにやるのか分からないけど、
あまり推奨できる書き方ではない
http://jsfiddle.net/gmcsrh5w/ https://codepen.io/infologicmation/pen/dQaPYW
xという文字列に対する vertical-align: center;
が効いていません。
なぜでしょうか？
(xという文字(列)はここに表示したいのでposition属性はこのままにしておきたいです) <ul>
<li><span class="samp">X</span>
<a>hello</a></li>
<li>bye</li>
</ul>
CSSは
li {
position: relative;
}
a {
font-size: 200%;
vertical-align: middle;
}
span {
position: absolute;
left: -35px;
width: 50px;
font-size: 80%;
vertical-align: bottom;
}
です >>799-800
そもそも
vertical-align: center;
が無いよ
あと右寄せとか勉強する時はborder入れとくと分かりやすいかもね
https://codepen.io/anon/pen/JexoyW え？
vertical-align は center じゃなくて middle じゃないんですか？ >>802
質問者？回答者？どっちだ
＞xという文字列に対する vertical-align: center;が効いていません。
と最初に質問したのは
>>799だよ
無けりゃそりゃ効かない >>803
気持ち悪いな
最初の質問て書き間違えただけだろう
それぐらい読み取ってやれよ vertical-align: bottom;
↓
vertical-align: middle;
で終わり
https://codepen.io/anon/pen/XyObgV ブラウザのデフォルトcssって切る事は出来ないのでしょうか？
reset.cssで打ち消すしか無いのでしょうか >>806
デフォルトで何も表示されなくなってほしいってこと？ フレックスボックス飽きた
何か面白いcssありませんか？ cssに飽きたらprefetchとか試してみては
cssばかり触ってても得るものは少ないぞ >>805
vertical-align: middle;
にしても全然効いていません position: absolute;
を消すと垂直方向について中央にそろえれますが、position: absolute;は絶対に外したくないです。 >>812
成る程
確かに｢その箱のサイズにおいては｣middleになっていますね
でも私がやりたいのは, li タグと揃える という意味での垂直方向についての中央揃えなのでちょっと違います
(つまり、中点・ と中心線を揃えたい) サンプルコードにおいて
aタグの文字サイズを200％、vertical-align:middle にしているのはそのためなんです。
そうすることでli内の文字サイズに応じてliの箱のサイズが変わったり、liの中点・の位置が微妙に変わったりしますが
それでもこの中点・に揃うようにspanを垂直方向について中央揃えしたいのです。 例えば、サンプルコードにおいて
span タグに｢top: 12px;｣とすれば"その時は"上手く行きますが…これはその場しのぎなのでダメです >>818
確かに中点が消えてしまってること以外についてはまさしくそれです
その状態から中点を復活させることが出来たら最高なのですが… >>820
そんなその場しのぎの中点は不適切です
中点以外に○や■を使うことだってありますので。 >>821
どれかを諦めるしかないねぇ
display:flexを使わずにこれを組むならaとspanのheightかline-heightを決め打ちするしかない
中黒はdisplay:list-itemに付くものだからflexとの併用は不可能
後はdivかますかね
https://codepen.io/anon/pen/PxVmqv
ださｗ >>822
ありがとうございます。
現状>>822がベターっぽいですね htmlもCSSもJavaScriptもちゃんと整備したのになんでワイのサイトは中身がないんや？ お前が内臓詰まってるのに中身がない男と言われるのと一緒。 少しでもいいから毎日続けるのが大事
毎日1ページ書けば一年後には365ページだ >>825
そりゃ鍋と包丁と食材だけ買っても
おいしいごはんにはならんのと同じじゃ いやその場合、鍋と包丁とフライパンがあって食材がないんじゃ いや、食材もあるけどレシピがないから自分流で適当に作ったらものすごくまずくなったパターン まとめると酒・ギャンブル・女を経験して人生勉強をつめば、サイトも中身がしっかりつまったいいものができる たった3つのことをするだけで、
思ったことが自然に英語で口から出てくる
ようになるのです 唐辛子を練り込んだ繊維の痩せるTシャツ
のサイトなら作ったことあるぞ >>844
むしろ痛かったら良かったんだけどな
少なくとも成分は有るってことだから
笑えるくらい売れなかったなあ、販売主は父ちゃんだったんだが( ；∀；) >>846
痩せるのがコンセプトなのに
痩せるって書けないし
本当に痩せない商品の広告作る気持ちわかって( ；∀；) htmlとjavascriptの勉強に、webサイトのソースもうとしてるのですが、
divタグの中にdata-sesid=とdata-base=っとのが出てきました。
<div id="" data-sesid="" data-base="">
data-sesid=とdata-base=なんかありましたっけ？
検索しても何も引っかからないから、さっぱりわかりません。
教えてくだい。 >>852-853
>カスタムデータ属性
初めて聞きました。勉強してきます。
ありがとうございました。 テキストボックスの背景色って、特殊な指定をしなければいけないんでしょうか
firefoxのサイドバーの検索ボックスなんですが、なぜか色が変わりません
textbox#search-box{background-color:red !important;} >>857
textboxというタグはありません
input[type＝text]かid(class)のみで指定してください よくある２段組み構成で質問です。
<header></header>
<div id="container">
<div id="contents">
記事本文
<aside>広告</aside>
記事本文続き
</div>
<aside>
サイドバー
</aside>
</div>
#contentsのタグをarticleかmainにしたいのですがどちらが妥当でしょうか？ 広告が<aside>でいいかは知らん
後、まぁ全部divでも対してSEOに影響ないよ
<header></header>
<main>
<article>
記事本文
<aside>広告</aside>
記事本文続き
</article>
</main>
<aside>
サイドバー
</aside> どうも、SEOよりdivを減らそう＝Ｆ12で見やすくという目的です
mainとarticleの片方より両方あったほうがいいのでしょうか？ HTMLのタグごときでSEOになんてならないから
SEOがどうとかいうのは全て嘘だと思って構わん そうだよ。SEO的（笑）にはそれでも全然違いはない
いい加減詳しくない人相手ににSEO詐欺するのはやめろってこと >>869
アウトラインを視覚的に表示するツールを使え
アウトラインをどうしたいかで決めろ >>867
10年前くらいからたまーにいじって確認してるけど
あんまり検索順位に変わりないなあ
<title>と<div>と<a>と<img>だけのサイト Webアプリだと記事とかあんまないからarticleは使わないなあ mainは1回、article下ダメとか明確なことはともかく使い分けはよくわからんなあ >>867
そう。SEOが必要ないgoogleはほぼ全てdiv
>>869
デザインにこだわりがない場合、
アウトラインに従うと作る時になんも考えなくていいから超楽
こだわりがあるなら全部divでもいい HTML5になって数年たつけど
テンプレで仕込んである以外でarticle、aside使ってるサイトってあんまないよなぁ >>877
アウトラインめんどくさいんだよ
見出し付けるとどうしてもおかしくなる場面が出てくるから、
じゃあもうdivでいいやってなる WordPressの最新デフォのTwenty Seventeenも
>>864さんのように<main><article>で括ってるから
一般的にはそれで間違いないでしょ 数年じゃそんなもんよ
門書に当たり前のように載って、かつ今の現役が引退する頃にやっと普及を始める
HTMLに限らず、言語仕様なんてそんなもんだ <main hidden>とかもいつか日の目を見る日が来るんかね
あまりメリットを感じないけど >>877
ちょっとでも同じパターンが繰り返すときは使うなあarticle なぜSEO的にタグの違いの効果がないのかと言うと
一つは重要なタグが検索を歪めるために不正に利用されてしまったために
重要なタグを重要としてみなすことが、マイナスの効果をもたらすようになったから
そしてGoogleの目的は適切なコンテンツを見つけやすいようにすることなわけで
タグを間違って使っていたとしても、コンテンツの質とは無関係なわけで
特定のタグを重要視する意味がないことに気づいた。これが二つ目の理由 まあ開発スピードを優先すべきだとは思うけど、綺麗に書くのに越したことはない たとえ効果無くてもSEO意識して書くと後からみた時にすげー見やすい
SEOどうこうは好き勝手に書くアホを戒めるための物だと思う SEOはSEO業者（笑）がSEO施工（施工ってなんだｗｗｗ）することで
検索順位が上がりますよ（そんな根拠はない）といって
無知な中小企業から金をぼったくるためのものだろｗ 施行はしこうと読んだりせこうと読んだりする。
世論もよろんと読んだりせろんと読んだり。
上記はどちらで読んでも意味が変わらない単語だが、読みで意味が変わる単語もある。
かっこいい例が思い出せないが、簡単なものなら上手とか。 SEO会社とやったことあるけどdivをulにしろとかロゴはbackgroundじゃなくてimgにしろとか細かかったな
SEOとは別かもだけど構造化データとかrole属性とかどこまで意味があるんだか 構造化データはgoogleの検索結果用じゃないのか HTML5が始動しめの頃、
h1タグ複数OKがGoogle側に認識、対応されてなかったろ
たぶん今もされてないと思ってる
それとレスポンシブ前のスマホサイトは別で作るのが主流だった頃も
重複ｌコンテンツとみなされてたろ
しってるんだぞ >>890
＞h1タグ複数OK
これはマジでトラウマ
全部作り直したゾ・・・ え、グーグルだと同一ページにh1が重複したらダメなんですか >>892
html5！何も考えずに全部h1だーｗｗｗわーいｗｗｗ
→全ページ整合性考えながらの見出し付け直し
持ち上げてから落とされると結構キツイんだ、これが <section id=“@1“>
<header>@1</header>
</section>
<section id=“@2“>
<header>@2</header>
</section>
<section id=“@3“>
<header>@3</header>
</section>
みたいにheaderって1ページで複数使ったらダメなんですか？ >>895より正確に書くと
<section id=“@1“>
<header><h1>@1</h1></header>
</section>
<section id=“@2“>
<header><h1>@2</h1></header>
</section>
<section id=“@3“>
<header><h1>@3</h1></header>
</section>
みたいにheaderの中にh1入れまくって1ページで複数使ってるのですが >>897
文法違反ですら無いんだから問題ないって言ってる header, footerはたまに複数書く
h1は一個、h2はたくさん書いてる >>897
>>900が正解
すぐ上にh1にしてバカをみた話があるじゃん
当時はわざわざh1につくりなおすバカまでいて笑ったわ w3cが仕様を新しくしたところで
肝心のGoogleが対応する気が無いとダメだよな
勝手に「今度からh1は複数OKにするからヨロシク！まだ草案だから変わるかもしれんけどね」とか言われて
その他仕様も期日も他人に決められてさ
Googleはわざわざ無償で頑張るかな？
自分なら菓子折もって挨拶に来られても「あらら、そうですか。じゃあ手が空いたら後でやっときますよ」
くらいの対応になるわ >>903
そうならないように、実質google他ベンダーの変更をW3Cが受け入れるという流れになっている >>904
WHATWGやブラウザの開発部署と検索エンジンの開発部署は別な気がしてさ・・ >>897です
皆さんありがとうございます
h1をh2に直します で何度も言うように、SEOなんて意味がないから
h1でもh2でも複数あっても、なんの効果もない とっかかりがbootstrapだったので構文というものを全く理解せず制作していましたが
最近になってcds gridでグリッドレイアウトができることを知り、セマンティックウェブをちゃんと勉強したいと思うようになったので質問させていただきました。
ありがとうございます さすがにh1とdescription、title辺りは影響あるよ
順位というより、検索結果の表示が変わる可能性がある たしかに構文全く正しくないdivだらけのbootstrapと他スニペットまみれのサイトでもgoogle検索で上位になっているので構文は気にしなくていいのかもしれないですが、リニューアルを機にちゃんと中身の見栄えも良くしたいと欲が出てしまいました
ただhttpsにすると検索上位から落ちるとかも見て少し心配ではあります ちゃんと勉強したいのなら正しいことを知るべき
まず1ページにh1が複数あってもHTMLの仕様的に
正しいし対応していないブラウザはまず無い
Googleも（最初から）複数のh1に対応しているし
（ずっと前から）h1が複数だろうがh2に変えようが
ランクに影響を与えることはない
騒いでるのはSEO業者だけ。
h1はもとから複数あってもいいのに、
馬鹿なSEO業者が、h1は一つしか書かないほうがいいのだ（根拠なし）と言ってるのをみて
Googleが「馬鹿だなぁ、何回書いてもいいのに」と訂正してるだけ
もちろんこれは今も変わってない
HTMLの仕様も今も変わってない。ただ古いブラウザで対応してないかもしれないから
使わないほうがいいと言われてるだけ。だがそんなブラウザは現存しないだろう
そして馬鹿なSEO業者だけが、大慌てで書き直してる
何も変わらないのに、自分の妄想で生み出した大きな影響があるというデマに
振り回されてる。 だいたいどういうタグが適切なのかは、意味によって決まるのに
タグだけ書いてだめですかってわかるわけ無いだろ
セマンティックウェブをちゃんと勉強したいなら、
タグの使い方じゃなくて、どういう意味にしたいのかをちゃんと自分で考えろ
タグをどうするかはその後だろ >>899
かけられます
z-indexとbackground-coler:rgb()で透過いけます >>911
・googleが気を利かせてるから大体は大丈夫
・ただ個人的には好ましくないと思う
https://asobism.com/archives/154
SEOに過度に敏感になる必要はないけど、
気にする余裕があるなら合わせておくぐらいはやってもいいと思う >>911
> 馬鹿なSEO業者だけが、大慌てで書き直してる
> 何も変わらないのに、自分の妄想で生み出した大きな影響があるというデマに
> 振り回されてる。
違う違う。SEO業者がなにで稼いでるのか考えろよ。
h1が複数使われていると検索結果が悪くなりますよ。急いで直さないと大変なことになりますよ。さあSEOやりましょう、お任せください！で製作費で金取るんだぞ。
製作後の検索結果が良くて儲かるわけでも、悪くて金払ってもらえないわけでもない。（払わなかったら裁判で100%勝てると言う意味）
https://ja.m.wikipedia.org/wiki/FUD
全然慌ててない。大喜びでどうでもいい部分を直してる直してる。
どのように変更するかはどうでもいい。元と違っていることが重要。
作業の証拠になる。
デマに振り回されてるのではなく、デマで振り回してる。 >>911
HTML4の時はさすがに複数はダメと思ってたが
あくまでしきたりだったんだな >>914
ミューラー氏の回答でさ、
>最も重要な見出しが<h1>タグになってさえいれば、
ってあるけど複数h1だとどれが最も重要かを伝える為には
アウトラインで明示する必要でてくるじゃん
やっぱ構造化は必要やないのけ？ 余裕があるならするに越したことない。
AMP対応もかなり効果あった >>915
SEO業者に話を聞いたけど、結構心が痛むと言っていたわ
>>916>>917
HTMLの正しい文法とgoogleがどこまで解釈するかはかなり異なる
ぶっちゃけgoogleはページ内のテキストをかなり解釈してくれる
h1、title、descriptionは、他の文章に比べて少し重みを加えて解釈する感じ
h1を前提にページの内容を解釈はしていない
全部h1で作ったり、h1無しで作ったことがあるから何となく分かる、あまり大きい影響はない。
ただ良い影響は無い
あと構造化データは検索結果の表示を変えるのが主な役目だと思う
検索順位というより、クリック率に影響すると思う
めんどくさすぎるのでやってないから知らんけど
https://www.akindo2000.net/blog/structured-markup/ SEOの結果を抜きにしてもSEO意識して構文や構造をきちんと考えて書くことでそれ自体がコーディング規約みたいになってきれいなコードになる
あとあとメンテナンスや変更で触る時に昔の自分のコードや他人のコード見ても「うわなんじゃこりゃ」とはならずわかりやすくなってる youtubeの動画にCSSでフィルターすることはできますか？ >>921
基本的には無理
上にopecity書けた要素被せる程度
apiがあればjsから操作できるかも知れない 上にかぶせるというのはページ全体にフィルターということでしょうか >>918
AMPで見た目ほぼ同じに作ったのに使われなかった悲しい過去がある… >>923
ごめん、上に被せるのは間違い。操作できなくなった
iframeにopacityを書けて、下にフィルターとなる色を置くと色の調節が出来る
http://jsfiddle.net/srpvodc0/ ↑回答どうも
フィルターだと濁った感じになりますね
明るさの調整ってできるんでしょうか youtube以外の動画にもフィルター使う方法ってありますか
個別に指定していくしかないんでしょうか
iframe使ってないサイトもあるのかな 全ての要素に同じclassを指定するだけ
めんどくさかったらラッパー使って一括でもいいけど背景にもかかってしまうから後でめんどくさくなる ↑iframeって埋め込みタグですか？
ページを解析してもiframeが見当たらないです
firefoxのusercontentで使いたいのですが ↑いえ、ブラウザでyoutubeを視聴しますよね
そのときに動画にフィルタをかけたいんです
ページ内の解析をしてもiframeはないみたいです >>909
体験上それには同意
h1,h2,h3の順で抜けがないとかな firefoxのコンテキストメニューの背景を変更したいのですが、menupopupではだめなようです
一番外側にあるのがmenupopupに見えるんですが、どう指定したらいいんでしょうか
http://s.kota2.net/1544277950.jpg
背景の白い線？か余白が変更できないです usercontentでbackground-imageの色を変更したいのですが、これが使われている要素はいろいろですよね
background-imageに対しての指定はできないんでしょうか cssのフィルターは文字のコントラストは変更できないんでしょうかね >>941
1色しかないのにコントラストも何もないのでは なんで俺の作るサイトはこんなにダサいんですか？
XPっぽいって言われます
テーブルはそんなにだめですか？ >>943
テーブルのせいだと思ってる時点でダメだと思うよ 属性だけを書き換える事はできますか
<a class></a>
<div></div> 属性だけを書き換える事はできますか
要素は不特定です >>943
CSSフレームワーク使う
WindowsをやめてMacにする
(WindowsのダサいUIセンスに自分が影響されてしまうため) >>946
let arr = document.getElementsByTagName('*');
for (const dom of arr) {
dom.setAttribute("attrname", "value")
} よくわからん挙動しました。
html,css,javascriptから少し遠ざかっていて
最近、勉強し直したのですが、教えください。
sample.htmlをローカスサーバーlocalhostで
実行前：A.jsがscriptタグにある
実行後：A.jsとB.jsとC.jsのscriptタグにある
となっており、sample.htmlにB.jsとC.jsが追加されいました。
※A,B,C.jsはライブラリっぽいやつです。
sample.htmlを実行しすると、sample.htmlが書き直し？って可能なのでしょうか？
ちなみにA.jsの中にB.jsもC.jsの文字列もなかったです。
ありのまま～のジョジョのAAの同じ心情です。 >>954
>ローカスって？表計算ソフト？
誤字です。xamppのローカルホスト
http://localhost/～でやりました。 >953
もう少し落ち着いて
javascriptを使ってscriptタグ自体を生成することは可能
phpで書き換えることも可能
原因は複数考えられるので、中身見てみないと分からない >>957
こんなもん読んでも勉強にはならんよ
追加されてちゃんと動いているなら別に問題は無い
googlemapやSNSボタンなど、htmlが変わる事は普通にある >>911
なにもわかってなくて長文とかw
お前が書いてること逆だからw >>951みたいなこというやつが一番ダサイから気を付けることだな >>960
逆というのなら、その根拠でも書いたら？
Googleがこうやればいいって言ってるブログとかさ >>943
なつーかさ、ギラギラ感が足りないのよギラギラ感。
俗に言うギラッチってやつ。
もっとこう、vlinkとか使ってチカチカさせたりさ、
招き猫の目を光らせてみるとかそういう
アグレッシブでギラッチな感じが足りない無いんだよねぇ >>911の言ってる事はたぶん正しい。
確かにHTML4時代からh1の複数使用は構文エラーではなかったようだよ。
もう自分が新人時代から先輩たちに刷り込まれてたから気が付かなかったわ。 >>963
元々慣例的に(hに順列、意味をつける)ということで
html4時代(2000年台)からh1はひとつで作るものだったのをさも近年それがh1は複数でもokになった！！！と若輩どもが騒ぎだした。
Googleの回答も検索仕様により時期毎に違うのはあたりまえでむしろ当初(2000年代)から一貫してh1は複数でokと言っているというのであればそれは捏造若しくはお前がそう思っているだけ、はたまたここ数年でwebやり始めたやつってだけ。 誰に聞いたのそんなこと
h1がひとつって
あと2000年の頭にはもうXHTMLが勧告されてる
HTML4系は90年代の花形だったな んで HTMLとしてvalidなのかということと
グーグルがどう思うかってのは
わけて考えるべきことよ html5.0で複数h1が良くなったんだよ
で、5.1で複数h1が禁止になった
これは思いっきり体験したから間違いない。
googleはもう少し緩くて複数でもいいけど1個がいいんじゃね？知らんけど
まぁコンテンツ充実させなよナード
ってスタンスは変わってない
多分アルゴリズム自動化しすぎてもう分かってない
>970
効くよ てか、h1いらねーし、仮に必要だとしてもloveとなtokyoって名前にしてる
あとheaderもいらないな
旧世代のおっさんはhtml4で決まりきったデザインでも作ってて >>971
ボールドか普通かの２段階でしか効かないですよね？ 懐かしのanotherHtmlLINTでもhtml4で複数h1が怒られなかったぞ >>971ですがすいません
font-weightに%は効かないです、申し訳ない
font-sizeか何かと思いっきり見間違えてました。 >>971
> html5.0で複数h1が良くなったんだよ
最初からOK
> で、5.1で複数h1が禁止になった
禁止になってない
嘘つくなって >>980
ありがとう。「おすすめしない」って書いてあるから
複数のh1が禁止じゃないことが完全に証明されたね 一連の流れを見て思ったんだけど、
アウトラインをh1から始めるかどうかだと思うんだけど whatwgより
4.3.6 The h1, h2, h3, h4, h5, and h6 elements
https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
・通常はh1一個で見出しレベルはどんどん下げていく
・アウトラインごとにh1から始めるのはok。ページに何個あっても問題無し
・両方混ぜてアウトラインごとに見出しレベルを下げてもok
・上記はどれを選んでも良い
html4以前でh1複数が良かったかどうかは知らないけど、h1複数書いた事は無かったな
今更どうでもいいけどね HTML4でもh1複数はOKだよ
>>984
適当なことを言わないように h1複数ok派はアウトラインに付きって条件ちゃんと付けてくれ
勘違いする奴出てると思う 条件って言ってもな。全てのHTMLのバージョンで
複数のh1は許可されている。正しいHTMLである
としか言いようがないんで
条件？「全てのHTMLのバージョン」でいいのか？
「全て」なのに「条件」としてあつかうのは不思議だｗ >>985
okとかじゃなくてじゃあお前はhtml4のころ複数h1で作ってたの？それで回りになんにも言われなかった？ >>988
HTML validatorでチェックしていたし
むしろ逆に正しくないHTML書いてるやつに文句言っていたほうだ >>988
逆に、自分が勝手にそう思い込んでただけなんでしょう
いつの時代もいくつ書いても普通にvalidだよ
勝手な想像だが、ダメだと言い張ってる子は
実際には90年台にはウェブ制作するような年齢手間はなかったのではなかろか
グーグルがSEOと戦い始めるまで
h1の数なんて誰も気にすらしてなかったし
ていうか、JISのあれで注目されるくらいまで
h1とかそもそも使ってないサイトが多かったし >>989
全部テーブルで作ってた時代とか透過gifのスペーサーとかしってる？
そういうやつにも文句いってたんだよね？ もう暗黒期(テーブルレイアウト等)のことは忘れようぜ
憎きIEとその子供Edgeは居なくなった
今後はChrome最新版で動きさえすればいいのだ
堂々とES2015で書き、FlexboxのCSSフレームワークを使いなさい 確かにHTML4で実際H1を使うとなるとどうなるかわからんな
sectionタグもないわけだし あんなことにもこんなことにもササッと答える優しいスレだと聞いてきました
質問してみます このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 63日 12時間 30分 35秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
