HTML/CSS のどんな質問にも優しく答えるスレ 33
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 32
http://mevius.5ch.net/test/read.cgi/hp/1521035557/
■関連スレ
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 ベンデープレフェックスを削除する場合、なにかに置換するんですか？
ただ削除すればOK?
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
こんなので上3行をただ削除？ >>前スレ992
(a)前者は大丈夫で後者はダメなのか、というか
(c)前者は試してない、後者はダメ 、というか
(a)は同一ブラウザでサイズは変わります
（目的の位置は変わりませんが自分で書き換えることは可能です）
自分のページのコードに組み込んではいません
js使えば簡単に制御できますが使わない条件ですので >>7
＞js使えば簡単に制御できますが使わない条件
もちろん、「clickすると要素のサイズが変わる」っていうjsの部分は実際には組み込む必要なしだよ
単に、＞広告のサイズが変わる
という質問の部分をJSで再現しただけだから
（jsfiddle上でいちいち手動で要素の幅を変更して、サイズ変更後も位置を保てるか？
を再現してたら煩わしいだろうと思ったので）
最小構成はこれ
https://jsfiddle.net/j96khbep/
これで灰色の要素が真ん中に表示されてれば、クロスブラウザの問題はひとまず置いといて
使えるのではと思う
そもそも質問の意図が
https://i.imgur.com/MNVmY6K.jpg
これで合ってなかったらすまん
（これは縦も横も真ん中の場合なので
どちらか片方の場合は要調整）
一応こちらでもレスポンシブのadsenseを試してみたが高さだけを真ん中にすることはできたよ
adsenseコードを挿入した親要素は、jsfiddleのリンク先でいうところのid=hoge要素ね
自分は、その親要素に
display:grid;align-content: center;
これだけ指定して、リロードして広告のサイズが変わっても常に縦は真ん中に表示されたよ あるクラスをbody内のすべてのdivに適用させたいのですが、一つ一つ指定しないで適用する方法はありませんでしょうか？ >>9
一つ一つ要素を指定、というのがどういうレベルなのかわからないけど
jQuery使えるなら
$(document.body).find('div').addClass('hoge');
使わないなら
var elms = document.body.getElementsByTagName('DIV');
とやってelmsをループさせて云々すればいいと思う 補足
htmlが特殊な入れ子になってなければjQuery版は
$('div').addClass('hoge');
でもおｋ >>9
セレクタに「div」って書けばいいんじゃね？ >>12
なるべくcssのみで完結させたいんです。
>>13
そうです。
その追加するクラスはプラグインのものなので、どうにもこうにも CSSで既存divにクラス追加なんて出来ないぞ。
プールに生卵沈めても温泉卵にならないのと一緒。
htmlにあらかじめ書くか、jsで後から付加するか。
htmlにあらかじめ書くってのにはサーバーサイドで処理するようなのも含む。 >>9
そういう書き方は混乱の元だから止めた方がいい
というよりそもそもclassの意味合いから外れるし
それかユニバーサルセレクタでそのclassの内容を全指定とか >>15
body>div{あるクラスのスタイル} 何故にそこまでclass指定を拒む必要があるのかそこが理解できない
コード的にもわかりにくだけだ ＞その追加するクラスはプラグインのものなので
だそうだし、例えばそのプラグインを使うときに
$$.red()みたいに指定するとred関数内部で
'.プラグイン独自のクラス名'を使うっていう仕様なんじゃないの
もしくは、プラグインから指定されたクラス名を使わないといけないとか。
なのでbody>divでいいじゃん、という指摘はそもそもプラグイン使わない方法なので的外れな気がする
プラグインでセレクタ設定できたり改変できるならしらんけど さっき寝ぼけて Chrome ブラウザの javascript で
タグのid名.style.top = 0; とか書いたら有効だった・・・、
document.getElementById(～) って要らなくなったのでしょうか？？？ > タグのid名.style.top = 0; とか書いたら有効だった・・・、
古い書き方 .red って指定すれば、赤色になるようなプラグインはあるよ
ウィジェットなどもそう >>22
最初からいらないよ
IDは
たぶんNetscape4くらいまで遡っても動くと思うよ 左にメニュー、右にコンテンツというWEBサイトの場合、左のメニュー部分を
コンテンツ毎にコピペするのは死ねるのですが、今時としてはどのような実装方法が使われるのでしょう？
サーバーサイドにwordpressなどなにかしらのシステムが導入されているといったことは
一切ない、一から素でポチポチhtmlを書いてるスタイルです。
SSIやiframeは分かりますが、今時のトレンドってなんでしょう？ >>26
<div id="status"> と window.status ってどっちが優先されるんですか？
新たに、DOMの仕様で window.hoge が追加された時
<div id="hoge"> があったら困りませんか？ 上書きされれば困りますね。
なんで困らないなんて嘘つくんですか？ なんでー
変数（プロパティ）は上書きできるもんじゃん だよな。俺もjsでは変数は全部グローバルにしてるわ。
色々なところから読んだり書いたりできて便利。
本来これが普通。ローカル変数は甘え。 >>31
そりゃ上書きを想定してないからだとしか
ブラウザによって、プロパティがあるかどうかは違いますからね
上書きされるかもしれないし、されないかもしれない
こんなんじゃ困りますね >>33
なんでーなんでー
windowとかdocumentは出来ないけど
基本的には全部上書きできる仕様じゃん 上書きできちゃったら想定と動作が変わるから危険ですね 故意にやることもあるけどな。
toStringの書き換えでlogしたときの文字列化挙動を変えるなど。 故意にHTMLでプロパティを上書きする人はいませんね >>8
丁寧にありがとう
別件ですぐにはできないけど取り掛かってダメならまた質問させてもらうかもです
>レスポンシブのadsenseを試してみたが高さだけを真ん中にすることはできたよ
ちなみにそれ、display:grid;やalign-content:使わずmarginだけでできますか？ >>28
getElementByIdを使えばいいでしょ
グローバル変数なんぞ使う方が悪い >>40
はい
従来の方法でもできます
例
https://jsfiddle.net/3c9n5kjo/
（これは例なのでadsense側のスクリプトによる広告生成の工程は省く。
実用するときは<ins>要素のところに、adsenseのコードである<sciprt云々のコードが書かれる）
adsenseコードを貼る要素の親要素に
position:relative;
adsenseが表示される要素(ここではins要素に直接)に
position:absolute;
top,right,bottom,leftそれぞれ0
margin:auto; divとかはborder-radiusで角を丸められるみたいだけど
直線でカットすることはできないんですか？
斜めにカットしたいです。 position:absoluteってリスキーだよな
自分で書いてる部分ならいいが >>43
カットしたい親ボックスをまず置く
中に子ボックスを置いてtrancefoamで回して斜めにして
辺が親の角斜めにカットするように配置
その中にもう一個孫ボックスを置いて逆に回転させて水平になるようにして
親の親の背景画像を貼ってbackground- position: fixedにする
黒：親
赤：子
青：孫
子はoverflow: hiddenで 例えばページにこんな風に要素があります。
<div>・・・</div>
<p>・・・</p>
<ul>
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ul>
<div id="divID">
・・・・・
<ul>や<p>など、数百行くらい
・・・・・
・・・・・
</div>
一番下のdivIDは現状ではheightは指定していませんので、画面に表示されるのは先頭部分だけです。
それをscrollbarを表示して縦にスクロールさせて全部が見られるようにしたいのです。
height:500px;
などとすれば確かにスクロールバーが出てスクロール出来ます。
でも、問題は、ウインドウの高さを変更すると下部に余白が出ます。
divIDの縦幅がウインドウ下部にピッタリになるようにしたいのですが、
jQueryなどでresizeイベントで毎回計算するやり方しか無いですか？
なおdivIDの開始位置も、その上にある多数の要素が時と場合によって行数が変化するので、一定ではありません。
HTMLやCSS設定だけでやる方法があれば教えて下さい。 >>47
質問の例の雛形はこんな感じかな？
https://jsfiddle.net/kejdqug4/
で、（リサイズも含め）ウインドウのサイズに合わせるように
divIDの縦幅も一緒に伸び縮みしてかつ、スクロールバーも対応できるようにしたい、と？
もしそうなら誰かに任せた 一応自分の環境ではdivIDにheight:100vh;で対応できたけど
https://jsfiddle.net/qbart0jo/
他にいろいろと良い方法があるとおもう >>48>>49
ありがとうございました。
49さんの方法で全体をスクロール出来ますが、
でも、スクロールバーの長さが何かおかしいように思います。
100vhだとちょっと無理があるのではないでしょうか？ >>48
> $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
読みづらい。処理が手続き型っぽく、一歩ずつ処理してる。
each使うコードはたいてい良くないコード
それにせっかくアロー関数使ってるのに戻り値を捨てるとは何事だ
$('#divID').append($.map(Array(50), (_, i) => $(`<p>divIDリスト ${i}</p>`)));
または
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); mapのコールバックの第一引数捨ててるし、Arrayも無駄に破棄してる
こっちのが短いし見やすい
$('#divID').html('<p>divIDリスト</p>'.repeat(50)); jquererとrubyバカはところ構わずやりたい放題するところが似ている BEMとかアトミックデザインとか知らない。特に方法論も知らずにCSS組んでるんですけど問題ありますか？ >>52
おい。
<p>divIDリスト ${i}</p> が
<p>divIDリスト</p> になってるぞ
ばれないとでも思ったか？ アトミックデザインはホームページというよりアプリとかだよね
サイト制作なら分子、生体くらいまでまとめて作っちゃっても問題ないことのほうがいい 原子レベルで作る必要がないものって絶対出てくるし >>56
質問者からの52までの文脈読めばいらないことくらいわかるだろ・・
野暮すぎ >>58
そういう問題じゃないだろ
コードの話をしてるのに問題の話にすり替えてる >>59
いや、だから文脈読めって
コードの話してるなら>>51も>>48に対するレスなら別にそれでいいし
>>52が>>51言ってることも”そもそも連番必要なしだからもっと短く書ける”って言ってるだけで別に何もおかしくないだろ >>56を解釈すると「連番はいる」っているのと同義だからな
明らかに的外れで不要な指摘 >>60
> >>52が>>51言ってることも”そもそも連番必要なしだからもっと短く書ける”って言ってるだけで別に何もおかしくないだろ
それはどう見ても後出しの言い訳なのがバレバレｗ
> mapのコールバックの第一引数捨ててるし、Arrayも無駄に破棄してる
って書いてる時点でわかるやろ？
第一引数捨ててることを問題視してるのに
第二引数使ってることに対して何も言ってない
なら、第二引数に対しては問題ないということなんだから
当然自分も第二引数使うと思いきや、第二引数まで捨てた回答をしている
コードに対していちゃもんつけたくせに、そのコードを直さずに
問題の方を変更して違う意味のコードを出した。
それなら元のコードに文句つけちゃいけないんだよ 元のコードっていうのは
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`));
これのことな。
最初の$.eachを使ったクソコードじゃなくて >>62
＞なら、第二引数に対しては問題ないということなんだから
＞文句つけちゃいけないんだよ
統失＆アスペの方ですか・・？
＞mapのコールバックの第一引数捨ててるし
＞Arrayも無駄に破棄してる
なんだから「mapの第一引数を捨てないように、Arrayも無駄にしないように」を考えての>>52のコードでしょ
>>51は読みづらい。って明確に言ってるんだから。
なんで>>48につられて連番にこだわってmapで消耗してるの？という指摘が>>52なんだが
＞読みづらい
→＞こっちのが短いし見やすい
という自然な流れが文句に見えちゃうって危ない人だよ おれのコードに文句つけやがったとか曲解する人が仕事場にいたら大変そう >>64
> なんだから「mapの第一引数を捨てないように、Arrayも無駄にしないように」を考えての>>52のコードでしょ
だから>>52のコードは、やってることが変わってるって言ってるだろ
なんで仕様を変えるんだよ？
変えなきゃレスもできなかったの？ 「読み辛い」って主観だよね。
読み辛い例としてLispのコード挙げたらLisperに猛然と抗議されたわ。 >>66
＞やってることが変わってる
そんなこと言い出したら>>48はfor文を関数型に書いてるとも言えるんだから
>>51の#divIDを親としたappendは>48のコードの解釈とは違うじゃん
＞なんで仕様を変えるんだよ？
というかお前が仕様わかってないのを見越して
質問者以降の文脈を見なさいよって>>58以降で何度も言ってるんだよ
質問者の例
仕様
＞ <ul>や<p>など、数百行くらい
＞多数の要素が時と場合によって行数が変化するので、一定ではありません。
これに対し、>48が例として連番付きdivリストを生成するコードを記述
それに対し、>51が読みづらいとして改変（連番を引き継ぐ）
それに対し、>52がさらに短縮と見やすさを追求（仕様によれば連番必要なし）
それに対し、>56が急に連番にこだわりだす
どう見ても>>56がおかしいけど？？
逆に、なんで仕様変えたんだ？ >>68
いいから人の話を聞け
> $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
↑このコードが汚いと言ったんだ。
このコードが。
だからこのコードを実行結果を変えずに
まともなコードに直したのが↓このコードだ
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`));
いいか？俺は最初からこのコードの話しかしてねぇ
このコードに問題があるといっただけで、
仕様の話は最初からしてねぇ >>68
> 逆に、なんで仕様変えたんだ？
仕様を変えないとコードを短くできないだらだろ？
連番をなくさないとコードを短くできなかった
つまり>>52はこっちのほうが見やすいんじゃなくて
単に仕様を変えて連番をなくしたコードってだけ
違うもののコードを書いただけ >>69
＞汚いと言ったんだ
いや、>>51のどこをどうみても
＞読みづらい
と書いている 完全に
＞まともなコードに直した
>51は>48のコードと解釈が違うし
>48の質問者への返信として重要なのは
再現性であって、>51であろうが>48であろうがどっちでも良い
すでに>>60で説明済
>>52は、
$.map云々のところにまだ無駄がある
→質問者まで辿って思慮
→そもそも特に連番がいるわけではない
→mapの空引数()=>``でどうにかなりそう
→そもそもテキスト自体リピートでどうにかなりそう
→結果、repeat()で短く見やすいコードを記述
して＞こっちのが短くて見やすい
と言ってるだけ >>64で説明済
なので一貫して、質問者へのコードに対しては
>48であろうが>51であろうが>52であろうがどれでもよいとしか言ってない
それをやたら連番にこだわる石頭が
未だに>69,70みたいに、>>68で説明したにも関わらず未だに
違うモノだの、どれが間違いで、どれが正解だの
的外れで読解力のない馬鹿を晒してるのがここまでの流れ `<p>divIDリスト ${i}</p>`
<p> を文字列から作るよりも、
先に<p> 要素のひな形オブジェクトを作っておいて、
それからクローンしてオブジェクトを作れば？ >>71
だからな。連番にこだわってるんじゃないんだよ。
連番をつけた場合のコードが読みづらい＝汚いって
話をしてるんだよ
> $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
↑ 読みづらい = 汚い
↓ 読みやすい = 綺麗
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); そもそも指定数繰り返すのにArray(50)が汚い。
イテレータ返す範囲オブジェクトも自前で実装しなければならないクソ言語ｗ >>74
それはあるね。lodashに_.loopとか入ってくれると良いんだが
こんな風にかければ最高だろう
$('#divID').append(_.loop(50, i => `<p>divIDリスト ${i}</p>`));
まあ今回のはjQueryだけで一番労力をかけずにシンプルに各方法ということで >>73
だから>69の言う
＞俺は最初からこのコードの話しかしてねぇ
だとかお前の言う
>48のコードのここを改変した
とかは本筋と関係ないと何度も言ってんだろ
>51→>52が問題じゃなく
>52→>56が発端
>>68に説明済
>>52の解釈を間違って文句を言われたと勘違いし
的外れな指摘をしてきた>>56（のレス）が発端
(1)>51は>48へレス
(2)>52は単に質問者からの全体の流れで短縮コードを掲示
(3)>56は、>52が>51へ文句を言ったと勘違いしつっかかる
実際は、短縮コードを書いただけだというのが
>60→>62→>63
の流れでわかる
この当たりで>56の馬鹿も自分の勘違いを認知し始め
かつ、”短縮コードを掲示しただけ”の何の落ち度もない>52に
「後出し」とさらに突っかかり自我を保とうとする
もうほぼ、ここで>56の勘違いでした、終わってんだよ
半分本人も認めているがプライドが許さないみたい、という心情だろう
だが
「>51は>48を改変しただけだぞ？」みたいに
おれは(1)をしたんです、と意味不明な主張をしてくる馬鹿がいる
明らかに的外れだろ
が、読解力なさすぎて>69から何度も繰り返す羞恥を未だに晒している
これが現状 >>76
ほんとお前人の話聞かないなｗ
俺はこのコードが読みづらい（汚い）って言ってるだけなの
$.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
お前の話なんかどうでもいいの >>78
え・・まだ理解してないの？？
>51「俺は読みづらいと思い>48のコードを改変」
>52「質問者以降をみれば連番必要ないことがわかるので、さらに読みやすくコードを掲示」
で、こいつ、というよりこのレス↓
>56「おい>52、連番外れてるぞ」
だぞ？明らかにおかしいだろ
で、半分認めたにも関わらず、その後もつっかかりつづける
そして、「おれは>48にレスしたんだ」と蚊帳の外から割り込んでくる>78
病気かよ まとめ
>>47→>>48の流れがあるにも関わらず
「読みづらい」の原因に、
for文（$.each）を使っている
連番が${i}がある
()が多い
ループにArrayで表現
などなど、いろいろな取捨選択があるのに
視野狭く>>48以降しか見れず、$.each＋mapの選択しかできなかった>>51の落ち度 訂正 $.each+map
→$().append + $.map 自分の思う読みづらさを基準に、他人の思う読みづらさに厳しくする
視野が狭い、頭が固い人だと何かの拍子に理不尽に怒ってくる典型例でした >>82
だからなんども、勝手に仕様を変えるなと
言われてるだろ。いい加減自覚しろ $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
↓
同じことをするのにもっとシンプルに書ける！
↓
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`));
↓
（おー、そんな書き方があるのか勉強になった）
↓
<p>divIDリスト ${i}</p> を <p>divIDリスト</p> にすればもっとシンプル書ける！
↓
（インデックス番号なくして、同じものの繰り返しにすれば、
そうだねそれは誰でも思いつくコードだから。何もすごくない） >>85
だからその仕様が視野狭いか広いかの違いだと言ってるだろ
文盲乙
>51の仕様→>>48以降
>52の仕様→質問者>>47以降
>48は>>47のfork
>51は>>48のfork
>52は>47→>48→>51へのfork
そして馬鹿>56が勘違いして>48以降を適用しろ
と喚き散らしてるだけ
これでわからなかったらまじで病院池 >>87
何度も同じこと書かなくていいよ
うざいだけだから 仕様を変えればもっとシンプルに書ける（ドヤー
恥ずかしくないのかなｗ
そのうちループも一回でいいから
repeatいらないとか言い出しそうｗ >>86
本筋は>47→>48
可読性ではなく再現性
スクロールバーが出る程度の要素が入ればなんでもいい
なのでfor文ベースの>48はそもそも間違いでもなんでもないし
オブジェクト指向ベースである$.append云々mapである>51は
>47へのレスである>48とは解釈が異なる 最後にはテキストべた書きすればいいから
JavaScriptはいらないとか言うでしょう
考えていることが手に取るようにわかるｗ 頑張って書いたコードがクソだと言われて
逆ギレしてるんだろうなｗ
いくら別のことをするコードを書いたって、もともとのクソなコードが
良くなるわけじゃないよ。だって解いてる問題が違うんだから
repeat使ったところで
>>48が汚いコードであることを否定することにはならないし、
repeat使ったところで
>>51のコードよりも良いコードになったわけでもない
単に別の問題を解くコードってだけ >>86
俺はむしろ.append(map)の方が常用すぎてeachの方が参考になったけど…？ >>93
> 単に別の問題を解くコードってだけ
しかも誰でも簡単に思いつくｗ ＞頑張って書いたコードが
へぇ・・
がんばって書いたように見えたんだ・・？ｗ >>94
こんな変なコード書くやつがいるんだって参考になった
なるほど >>96
そりゃ見えるよｗ
だって普通に仕事していればあんな
変なコード書かない。恥ずかしくて出せない
クソコードを恥ずかしげもなく出せるってことは
頑張って書いたんだろうさ
それが自分が書ける精一杯のコードなんだろう mapでドヤ顔したかったのが本心だったわけか・・ｗ
しょうもな 勘違いで逆ギレしてくるような>>56みたいな人が職場にいたら大変そう・・ がんばって書いたように見えたようだし
ごく見慣れたmapでの表現も、彼の中では特別な閃きだったようだな
流れぶった切ってまでレスして興奮してたようだし・・ 知ってることをドヤ顔で押し売りしてくるタイプだろう あの、質問した本人ですが連休中にこんなに盛り上がっているとは驚きました。
元々の質問がまだ解決していないのですが、何か解決方法があればアドバイスよろしくお願いいたします。
50で指摘しましたが、100vhでは上手く行きませんでした。 質問者は連休を満喫してたというのにお前らと来たら… タイトル欄やメニュー欄、
サブメニューの欄（カレンダーやタグ一覧や最新コメントを羅列している欄）など、
どのページ（記事）に行っても同じ内容が表記してある部分は、
全てのhtmlファイルにも記しておいているのでしょうか？
それとも、それ専用のhtmlファイルがあって
そのファイルを全てのhtmlファイルに読み込ませているのですか？
（iframeとは別なのですよね） 動的サイトだろうが静的サイトだろうがそういうのはテンプレートという概念で管理を分けている。htmlという出力だけ見れば同じ内容がすべてのページに書かれているように見える(実際書かれているのだが、テンプレートエンジンがやる) >>106
テンプレートエンジンというのがあるのですね
このテンプレートエンジンを利用するのと、
jQueryのloadを利用して使い回したい部分を読み込ませるのは
どちらの方が良いのでしょうか？ >>107
テンプレエンジン使っても使わなくても
後者の方が若干劣るような気がしなくもない程度
大差なし >>109
jQueryもやっているのでそちらで試してみようかと思います。
スレチ失礼しました； 消えます
教えて頂きどうもありがとうございました！ 新しいlength？のviとかvbってどうなったん？(´･ω･`) <dl>のリストって、時と場合によってはdivタグを用いなきゃいけないことってあるよね？
http://uproda.2ch-library.com/994742qFg/lib994742.gif
例えばこういう表を作りたい時、下の点線はdivで<dt><dd>を囲まないと実現できないよね。
もしこれをdtとddでそれぞれ単独でborder引いたら、テキストの改行が増えたり減ったりした時にこんな風になっちゃうよね。
http://uproda.2ch-library.com/9947438eF/lib994743.gif
こういう時ってdivを使わずに、dtとddだけでborderを引く方法ってある？ なんだ？ 難しいのかと思ったら普通にできるじゃねーか
https://jsfiddle.net/y4r5vxL2/
余談だがjQueryのプロはHTML/CSSも得意でなければいけない
いつもjQueryの話題で楽しくやってる俺が解いてやったんだ
これぐらい言わせろ そんな簡単なこと得意気に言われても
レベルご知れてるな >>117
ごめん、この場合dt ddを直下に複数作りたいのよ。
◯月◯日 あああああ
--------------------------------
×月 ×日 ああああ
--------------------------------
みたいな感じで。 >>118
むかーしからよくある手だけど
dtとddの上辺にボーダー
ボックスの高さを揃える必要があるなら
flexにすればいいでしょう >>118
だから>>113はちゃんとそれを実現できてる
人の回答を読まないやつはレスするな 113ってNGされて見えないからなんだと思ったらまたお前かｗ ファビコン（.icon）について聞きたいのですが
マルチアイコンというのはブラウザによって自動で表示サイズ(16×16、48×48等)を
変更してくれるというものなのでしょうか？
例えば以下のサイトで複数画像をアップするとそういうことができるのかなと疑問がありまして・・・
https://ao-system.net/alphaicon/
スレチだったら申し訳ありません。 >>124
そうだよ。俺だよ。
jＱueryの話をいつもしている俺だよｗ >>125
ファビコンに限らずアイコンとして使われるicoは
使う側が、格納されてる画像から適切なサイズを選択するのよ >>130 FadeOutだった！
説明あるのですが、意味がわかりません。 >>130
@keyframes blurの中でフェイドイン(20%まで)→フェイドアウト(80%から)させてる
で、最初のcssのanimationでinfinite
してるから永遠に繰り返してる
なのでフェイドアウト部分とinfiniteを消す >>133
アニメーションの最後がフェードアウトして消えていくって意味じゃないの？ 最後は、白い文字が表示されたまま止めたいのかなと思った >>129
>>132
なるほど、勉強になりました。
ありがとうございます。 @keyframesのアニメーションを
簡単に作れるアプリやジェネレーター（？）ありませんか？
今は手打ちでやってるんですが、いまいち思い通りの動きができないというか
もっと視覚的にわかりやすく作れないものかと
昔のFLASHみたいな感じで見ながら動かせる的な感じの 一時期調べたことがあって、海外製のですげぇなと思うやついくつかあった、が出てこない…
今検索したら出てきたショボいのはこちら
http://cssanimate.com >>139
そういうネタはしっかり記録し保存しておけよとｗ 久々に見たら@keyframesとかアニメションの話題とは・・
時代がはえー @keyframeなんか5,6年前けら使ってるぞ？
何年来てないんだ アドビさんFLASHベースにして
@keyframeアニメーション吐き出すソフトつくってくれよ animateCCじゃいかんの？
使ったことないけど 文字の周囲にボーダーで四角い枠を書く事は出来ますか？
例えば、
あいうえお
の「う」の文字だけ枠を書くとか。 分からないことは人に質問した途端に自己解決するというマーフィーの法則を逆利用した問題解決法ですね分かる分かる HTML5でページ内に動画を埋め込む方法を教えて下しあ＞＜ >>42
大変遅くなりましたが
やはり一番上に固定されてしまいます
書かれてる内容は全て把握してる（他でよく使う）ので間違いないはずです
レスポンジブ広告でなくただの固定サイズのdivなどでは
できるのでスクリプトに関係してるものと思われます
今回は断念しますが、詳しくありがとうございました >>153
これだけでストリーミングでもどんとこいなんだから
便利な時代になったものよのう >>155
スクリプトでstyleかましてるからcssではできないのでは
中のiframeがposition:absolute;top:0;を持ってるがそこいじると後々まで機能するか保証できない >>158
できたって人がいたようだったがうさんくさいな というか広告スクリプトの親要素の設定次第じゃないの？
そうじゃないと自動広告の意味ないよね 自分の場合、表示されるのはされるが若干のラグがある感じ
瞬間的に一番上に表示されるが０コンマの残像で真ん中にバシュッと表示されるわ
環境次第か？ http://www.chickenramen.jp/shokan/
ソースみてもどう作ってるのかわからない
こういうのはどうやって作るんでしょうか
CSSだけでは無理ですよね？ 2,400行のmain.js には、jQuery がコピペされているだけ
特に、変わった処理はない 何百もの画像ファイルを読み込んで、無駄が多い。
1つのファイルにまとめていない
それと、文字・文字情報が全くない。
すべて画像だから、文字をコピーしたり、できない
また、画像にマウスを置いても、画像の説明が出ない
こういう画像だけのページは、すごく多いけど、
通信料金を節約するため、画像をオフにすると、情報が0 になるw
通信料金ばかり掛かるが、情報が何もない
たぶん、絵描きが作ったページ。
プログラミングができない人
なんで、こういう画像だけのページが多いのかね。
情報が何もない フォームの作り方に関するサイトどれを観ても、
入力されたデータの送り先のメールアドレスの指定方法が載ってないんですけど、
私はなにか勘違いしてるんでしょうか？ >>166
20年以上前なら
ブラウザのformから直接メール飛ばすなんてこともあったんだけど今はやらない
一度サーバサイドのプログラムにポストして
そこから送信するのよ いまのブラウザはcssからjavascriptは実行できないんでしょうか？ >>161
>自動広告の意味ないよね
なんでやねん レスポンシブ広告って、ページをリロードしたとき
広告を貼ってある要素のサイズ（や比率）に合った広告が表示されるんじゃないの？
親要素関係なく位置も勝手に変更されるっていう謎仕様なの？ >>173
>親要素関係なく位置も勝手に変更される
どこでそんな話が？
基本親要素の中で、左右は中央、上下はtopに配置される
親要素のサイズ（や比率）に合った広告が表示される、はその通りだが
広告サイズはある程度パターンがある
親要素の高さ固定で幅可変の場合、左右や下に隙間ができる場合がある
あるというかほとんどそうなる >>174
親の親要素＞親要素＞広告
の場合
親の親要素＞親要素は良い感じで
親要素＞広告の親要素に隙間ができる、ということ？ で、親要素のサイズにレスポンシブしたサイズの広告が表示される、と もう>>7いないかもしれないが
親要素にgridのcenter系、
もしくは
親要素にheight指定、width指定（これ以上広げないであろう横幅px,5000pxとか10000pxとか）、display:table-cell;、vertical-align:middle;
でinsのスタイルいじる必要なくいけた
ただし、広告に関する部分だけの最も簡単な構成でしか試してない 一応、従来の方法もいける
google側がこういう場合に、一番上のins要素のstyleの設定をできるようにしてあるので
レスポンシブコードの<script><ins style="">のところで直接書いてやればいい
>>42では見やすさのためcssウィンドウに書いてしまったが。
>>174
＞あるというかほとんどそうなる
この常識は知らなかったな
環境かもしれない
少なくともおれの環境では広告表示位置で困ったことないわ
全部網羅はしてないが一応複数ブラウザでは見てはいるが >>176
cssで親要素w:100%、h:300pxにしたとする
PCでウィンドウの幅や、タブレットのサイズや縦横でたまたま親要素の幅が300pxだったとする
するとたいてい広告は300x300(たまにw300xh250)が表示される
だが親要素の幅が500pxだったとする
すると例えばw500x60pxの広告がtop:0で表示される
すると親要素の下側に空白ができる
むろん親要素に高さ設定をしなければいいが今回の条件は高さ固定
>>178
親要素width指定なし、auto、100%でもできる？ 今時横幅px,5000pxとか10000pxとかやってるのっているんだな >>180
＞親要素width指定なし、auto、100%でもできる？
それは例えばPCのウィンドウの幅の可変に対応したい、ということならできる
gridの場合、
https://jsfiddle.net/4mgh7Ln2/
（レスポンシブ広告コードの部分は略）
広告コード側のstyleは変更無し
ポイントは、inner要素かますことと
grid-template-columns:1fr 10fr 1fr;
で、レスポンシブが効くように広告が入る真ん中grid-area:b;を10frくらい（適当）大きく取り
左右を1frにして対称にすること
ただ、左右対称に1/10比率の隙間が入るので
もっとスマートなやり方があるかもしれない
従来の場合、
https://jsfiddle.net/1uc06f82/
（レスポンシブ広告コードの部分は略）
inner要素もいらず
position:absolute;top:0px;right:0px;bottom:0px;left:0px;margin:auto;
をgoogleコード側のinsのstyleへ入れてやるだけ
親要素#hogeにposition:relative;
上記２つの場合どちらも親要素のwidthは指定なし
ウィンドウのページ変更→リロード
すると横長のバナーや、300x300みたいなスクエア広告が出て
かつ、親要素に対し縦にも横にもセンターに配置される 訂正 ウィンドウのページ変更→リロード
ウィンドウのページサイズ変更→リロード いや、ウィンドウのページサイズじゃなく
ウィンドウの幅を変更→リロード
だった 試したらgridの場合inner要素かまさなくてもレスポンシブ効いてくれるみたいだわ
なので、inner消して
#hogeにalign-content:center;
そして広告コード側のins直接にgrid-area:b;でいけた
https://jsfiddle.net/7k8e9zw6/ >googleコード側のinsのstyleへ入れてやるだけ
js使わずどうやって？ >>186
＞js使わずどうやって
？
詳しくはこちらの方法を参考に
https://support.google.com/adsense/answer/6307124?hl=ja
<ins class="adsbygoogle" style=""へ入れなくても
class="adsbygoogle example_responsive_1"
みたいにして、.example_responsive_1{}をスタイルシートに書いてやってもいい
（広告コードの<script>直前に<style>を書くのが正しいのかどうかは知らない） ＞js使わずにどうやって
あぁ、もしかすると
スクリプトで生成後のinsのスタイルも変わっちゃうから
jsで後出しで生成されたinsにstyleを付加しないといけない、と思ってるってこと？ >>187
>>180を読んでの通りそのリンク先はこの件には関係ない
同じ画面幅で再読込みする度に別の広告が表示されるが
必ず毎回同じサイズの広告が表示されるわけではない
あくまで親要素に（特に幅）合った広告が選ばれて表示されるだけ
広告が親要素のサイスピッタリになるわけではない >>189
リンク先はレスポンシブ広告コードを修正する方法で
style設定の参考のために貼ったのであって
リンク先にあるような、画面幅を固定するstyle設定を教えるために貼ったのではないですよ 親要素というのは親ins要素なのか
それとも親ins要素の親要素のことなのか >>190
紛らわしい意味ないことしないでくれや
>>191
広告を入れる自前のdivで、これがheight固定
（前スレより） ＞広告を入れる自前のdivで、これがheight固定
それなら難しく考えずに、自前の親divと広告コード側のins要素にスタイル設定すればよいのでは >>193
全然わかってないな
jsfiddleでなくて実際やってみなって >>194
jsfiddleでは簡略したものを掲示するのに便利なだけで
実際は自身のウェブサイトで最小構成でやってますよ
そもそも質問って、レスポンシブ広告を貼る親要素のheightを固定して
広告のサイズ可変に対応かつ、親要素の真ん中（主に縦に対してセンター）に配置したい
ってことですよね
できてますよ
＞実際
というのが、いろいろとDOMやスクリプトが配置されたその一部の広告部分
だとすると、抽象的すぎて私には再現が無理です
と言うのも、どういう構成でダメだったのかが
今の今まで掲示されていないので知る術がないです
こうやってダメでしたという（広告コード伏せた状態でも）できるだけ最小のhtmlでも示してくれればいいのですが
というか普通はそうすると思いますが 抽象的もなにも
<div>広告</div>
しかないだろう
前スレに書いてあったぞ >>196
前スレみてきました
最小構成、例えば<html>なんたら<body><div>広告</div></body></html>なのか
ページ全体の一部の<div>広告</div>なのかわかりません
それこそjsfiddleなりなんなりで示せば明確にわかるんですけどね。
あともう一つはっきりさせておきたい部分があるのですが
広告の下に空白が開く、というのは親ins要素を親としたディスプレイ広告（特にスクエア広告が表示された時）ではないですかね？
自分的にはこの辺が引っかかっています
そうであれば、親insに子ins用のスタイルを付加しないといけません どうも、最初に質問した者です
・<html>なんたら<body><div>広告</div></body></html>
・ページ全体の一部の<div>広告</div>
何が違うのでしょうか？
<div>広告</div>の「広告」部分はscriptタグ含む生成されたコードそのままです
ins含むそのHTMLコードは触れないようにしてほしいです
あくまで外のdivのcssでの質問です
規定に抵触しなければinsのcss変更も可能です >>198
ページ全体から抜き出してる場合だと
<div>広告</div>部分以外にDOMを操作するスクリプトが埋め込まれていたり
その他にスタイルが設定されていたりして
それに気づいてない可能性があります
一番良いのは,jsfiddleなんなりで
実際にhtmlやcss部分を見せれば
こちら側でそのhtmlやcssをそのままコピペして
再現性が高まります
広告コードの修正例は>>187のリンク先通りで、さらにその先
https://support.google.com/adsense/answer/1354736
センター配置はどれにも違反していません（あくまで最小構成で）
＞ins含むそのHTMLコードは触れないようにしてほしい
ただ、それでも広告コードに設定をしたくない特殊な場合は、cssに
広告の親要素>ins{スタイル}
という指定でも大丈夫
もしできなければjsfiddleなんなりで実際の（広告抜き、例えばID部分をXXXに変えたり）html,cssを示してみてください
おそらくは、かなり単純なミスであると思います 補足
＞ページ全体から抜き出している場合
実際はページ全体の本番環境でテストしているが
質問レスの段階では抜き出した部分<div>広告</div>として説明している可能性があるということです
そういうことを避けるために実際にやった実行環境を示すのが手っ取り早いのです ＞AdSense 広告コードの修正
にもあるように
＞ユーザー エクスペリエンスの向上のために、コードの改変が不可欠になる場合もあります
こういう場合にadsenseポリシーとして親insに設定できる機能が用意されているのですが
そもそもそれが何らかの理由でできないので
親の親div>親div>広告
で、親の親>親だけでどうにかしたい
という場合は難しいかもしれません >>199
どうもです
>その他にスタイルが設定されていたり
それはないです。HTML/css共100%自分のコードで
・<html>なんたら<body><div>広告</div></body></html>
で完結しています
広告の親要素(=div) > ins{スタイル}
はやりましたし、それは希望通りです
そのdivに別のスタイルが上書きなどかかってることはありません
>かなり単純なミス
は先ずないと思いますが、ちょっと期間ください
削る作業が（汗 ちなみに
HTMLは上そのまま、<div id="hoge">広告コード</div>
cssも上そのまま、#hoge {}
insにかますときは、#hoge > ins {}
です
#hogeに今回の件でのheight以外のプロパティはつけてません
というかそのためだけのdivですので
試しにbackground色をつけると指定した高さ固定で背景色は出ます
広告サイズの余り部分＝左右と下の足りない部分が色付けされています できればjsfiddle
もしくは
HTML（bodyタグの中）
<div id="hoge">
広告コード（できれば実際に貼った広告コードのIDなどを削った状態）
</div>
CSS
#hoge { この中身まで書く }
#hoge>ins { この中身まで書く }
みたいな形式で書いた方がいいですね
（htmlはあれを参考に、cssの中身の部分はあれを参考にしました、とかではなく） ここまで単純ならわざわざjsfiddle使わなくても同じことだろ
jsfiddleの関係者？ ＞ここまで単純なら
単純であるなら>>204のようなHTMLとCSS形式でも苦ではないのでは？ あと
できればjsfiddle、できなければHTMLCSS形式
という意味ではなく
できれば jsfiddle か HTMLCSS形式
です
つまり、コードを省くのはやめて、できればコードを掲示してください
ということです 補足 ＞コードを掲示
実行したコードに近いコードを 広告のコードはdata-ad-部分が違うだけであとみな同じじゃないの？
自分のを当てはめてみればいいだけだからそこは要求しなくていいのでは 思いもよらない部分が原因かもしれない
と言ったところで進まないので
それならば簡単な作業だし、できる限り近いコードで出してもらった方が良いかと思います。
ここはいらない、そこはいるとなると余計な作業が増えたり認識がズレたりするので。
こういう質問スレでは認識がズレた際（今回の場合 広告が表示できる、できない）に
コードをUPしてもらえるのが解決への近い道なのですが
ただ>>1のテンプレにも明記されていないので、任意になります
仮に実行コードに近いコードを出してもらえれば
こちら側でまず、実行コードとほぼ同じレベルの複写したコードで確認
その後、他のセンター配置のスタイル複数で置換したコードでも確認して原因を探ってみます
もちろんその後、結果とコードは出します >>204
前スレ（とココ合わせて）見ればわかる
スクリプト、特に広告はシミュで想定通り動かないこともある
何もjsfiddleでなくていい >>211
今回の場合、レスポンス広告が想定通りに配置されることはこちらの複数環境下ではきちんと表示されるケースがほとんどでしたが
ある環境・コードでtopに表示されるケースも確認済みです
その辺りは話が分岐してしまうので、質問者のソースに近いコードが出た際に、それをベースにまとめてみます
もちろん別のサイトでもいいし>>204みたいなHTMLCSS形式でレスとして投稿してもらってもかまいません
タブやスペースでコードが左へ寄ってしまうなどはこちらで整形するので気にしなくてもいいです おそらく実際の広告で試してなかったか、読み違えてたか ＞削る作業が（汗
このレスから察するに、削るなんてものの３０秒で終わるくらいの単純作業だし
たぶん広告コード周りで間違えてたのかなぁと予想 広告コード周りで何間違えるんだよｗ
コピペするだけだぞ もしかしたらアドセンスをまだ登録してなくて他のサイトに貼られている広告コードを文字通り
コピペしてたとか
＞（汗
ってくらいだから面倒って意味合いだと思うけど
CSSも数行だし、ていうかすでに試してたなら削る部分がないし
となると考えられるのはやっぱり広告コード周りかなぁとしか 他のサイトに貼られている広告コード
というか、生成されたあとのiframe入りの・・ｗ
さすがにそれだったらズコーだけど 広告は表示されている、と書かれてる
つまり正常に動作している
コードもずばりではないがどうしたかは前スレで予想はつく
言われた例を試してまたここ用に書くのが面倒なんだろ
それはよくわかる それだと
＞ちょっと期間ください
でその後の
＞ちなみに
で簡易にレスしたニュアンスに合わないんだよなぁ
削る作業、とも言ってるし 前スレからの流れを見てみると具体的なコードを出したのは回答者だけぽいし
質問者は、現スレの最初の方かもしくは>>182以降での回答者のコードをCSSで試したはずで
そのまま試したとも言ってるみたいだし、ならcssとhtml共にかなり簡単なコードなはずで
少なくともCSSを削る作業は面倒というか必要すら無いはず
（あるとすればクラス名とか）
やはりcss部分以外に削る作業があったという可能性の方が高い
adsense使ったことがある人なら削る部分はid部分だけなんてのは一目でわかるが
つまりそれ以外の＞削る作業（汗
面倒な部分を感じたということは、おそらくid部分以外の
削るかどうかの判断が必要な箇所があるということ
つまり背景をざっくり予想すると
自分専用のadsenseはまだ取得していない（取得中）、
自分の管理外のサイトを見て広告の表示を確認、
（管理外のサイトの）スクリプト生成後の広告をコピペして自分の管理内のサイトで広告表示テスト
ということでは。
広告は表示されている、というのもおそらく
＝広告は生きている＝承認済の広告
というニュアンスかと なんで？
自分のページで言われたことを当てはめて試した（その結果は書いてある）
問題部分以外（コンテンツや他の広告部分など）を削る
削ったところで結果は同じ（はず）
なのに作業する
面倒だわ >>223
＞（コンテンツや他の広告部分など）
他のコンテンツや他の広告部分があったまま試してるのなら
回答者のコードを（広告コード部以外）そのまま試しておらず
自分なりに改変してしまったってことなので
それはそれで、まだ最小構成で試してないの？ってことになるがｗ
要は「今の状況で失敗しまくるけど、削るのが面倒だし自分のページは自分が一番よく理解しているので
最小構成でなくとも大丈夫」ってことでしょ
面倒くさい以前の問題だな
＞諦めました
とも言ってるみたいだが、諦めたくないのかどちらなんだろう、みたいな 他人の広告だろうがpositonなど位置は変わらないのでは？
やったことないしやるつもりもないからわからんが
それはどっちでも関係ないような ただ、>>203が質問者なら、最小で試してるんだよなぁ
その試したコードから察するにcssは２，３行
htmlは広告コード含めて１０行そこら >>226
＞他人の広告だろうが
ってとことは、他人の広告だろうが（自分の広告だろうが）
ってこと？ 単純な話で、質問者が広告コード（clientとslot抜き）のhtmlと
cssを晒せば解決するだけの話な気がする
（コードから個人情報的なのがバレる？みたいなのを気にしてるならもう仕方ないが・・）
あとは各回答者がid部分を変えて
自前サイトで検証すればいいし、webキャプチャなりwebエミュレートなりの
サービス使って検証すれば、（完璧ではないが）スレの共通認識として成立するよなぁと
ウェブ系の質問スレではソース見せたりは（もちろん見せてはいけない部分は配慮して）当たり前の事なんだけどなぁ・・
ここだけは特別なことなのだろうか。。 おれは最小構成で、自前サイト、知人数名、
webキャプチャ系（こちらのスクリプトに反応しないタイプ厳守）、
webエミュレート系（こちらのスクリプト（adblockなど）に反応しないタイプ厳守）、
計１０個×（各種grid系やらpositon系やら）を全部やって、
一部grid系3個（検証５０中3個）が効かなかったのを確認した上での
質問者「できませんでした」なので
だったら次は、質問者が試したコードに限りなく近いコードで試してみよう、
もしかしたら超レアケースかもしれないし
ってところ
だが質問者以外にも若干名できないって言ってる人がいるみたいだし
質問者＋若干名の凡ミスなのか、やってないだけなのか、レアケースなのかに興味があるわ 7です、遅くなってすみません
最小限のページを新規に作ったらなぜかて表示しなくてはまってたというか諦めてました
最小限でなくいつもは普通に書いた記事なら1発目から表示されるのですが
何回もというか時間経ったら以降は表示されるようになりました
>>222
自分専用のadsenseはかなり以前から取得して、もちろん今回もそのidのものです
同じid、同じや別のページ、同じや別の広告で入金もされています >>42の方法を試したときのコードです
html宣言や<head>は省略してますが特別なことはしてないです
書き込めないので「ｓｃｒｉｐｔ」は全角にしてあります
<body>
<h1>adsテスト</h1>
<p class="etc">上の要素</p>
<div id="ads">
<ｓｃｒｉｐｔ async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></ｓｃｒｉｐｔ>
<ins class="adsbygoogle" style="display:block" data-ad-client="・・・" data-ad-slot="・・・" data-ad-format="auto"></ins>
<ｓｃｒｉｐｔ>(adsbygoogle = window.adsbygoogle || []).push({});</ｓｃｒｉｐｔ>
</div>
<p class="etc">下の要素</p>
</body> 続きcss
#ads {
width: 100%;
height: 100px;
background-color: #ccf;
position:relative;
}
.etc {
background-color: #ccc
}
#ads > ins {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
} ローカルでだが、
・css の全角スペースを除く
・insにwidth,heightを与える
でセンタリングされたぞ >>234
失礼、全角スペース混在はここ用に書き直したときの漏れです
書いて気がつきましたが実際は全角ではないです
>insにwidth,heightを与える
プロパティの値は何でしょうか？
レスポンシブでその意味はあるのでしょうか？ margin: auto によるセンタリングは、子要素のサイズが明示されないと機能しない 言葉が足りてなかった
position: absolute; top:0; bottom:0; left:0; right:0; margin:auto によるセンタリングは、センタリングされる要素にサイズが明示されていないと機能しない
(サイズがわからないと表示する位置を計算できないから)
広告側でins要素のスタイルにwidth, height がされていればセンタリングされるはず html
<div id="ads">
<ins></ins>
</div>
css
#ads {
width: 100%;
height: 100px;
background-color: #ccf;
position: relative;
}
#ads > ins {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: red;
display: block;
width: 100px;
height: 50px;
} >>232,233
なるほどありがとうございます
こちらで整形しておきました
https://jsfiddle.net/6d93bsge/
変更点は、#ads要素のheightを100pxから600pxした部分です。
意図的にスクエア広告も出したいため、と
センタリングを誇張するため、という理由です（念の為height:100px;も検証済でセンタリングされました）。
（HTMLの<!-- -->内はこちらがレスポンシブ広告コードを取得したときのコードです）
結果のキャプチャ以下です
（特にポリシー違反に紐付けされるわけではありませんが広告には一応モザイク入れておきます）
https://i.imgur.com/sBM2UGx.jpg
縦のセンタリングはできています
横のセンタリングは、親insの横幅が子insの幅幅以上であるため
以後は #abs>insにtext-align:center;を付加することで解決します
（比較のため何回かリロードし、同じ広告が出るのを待ちました↓）
https://i.imgur.com/4K3mVcO.jpg
(つづく 1/2) >>232,239
(つづき 2/2)
次は、それぞれウィンドウ幅を変え、レスポンシブさせた場合
https://i.imgur.com/I3TxIkc.jpg
https://i.imgur.com/8uPy2e5.jpg
そして最後にウィンドウの幅をさらに狭めて、スクエア広告
ここでは、insにdata-full-width-responsive="true"を付加しています
https://i.imgur.com/0wE5SIQ.jpg
縦が多少top寄りだと思います
これは、親insの縦幅よりも広告のimgサイズが小さいために起こるみたいです
なのでスクエアできっちり縦をセンタリングするのは難しいか別の方法があるのかもしれません
こちら検証の最終コードは
https://jsfiddle.net/2v5abfxy/
です。変更点は
#abs>insにtext-align:center;
insにdata-full-width-responsive="true"
の２点です
webキャプチャ、エミュレータなども試したところ上記画像と同じ結果でした（１０数個検証）。
もしこれでダメなようであれば、ブラウザなど特殊な環境の可能性があります >>231
＞最小限でなくいつもは普通に書いた記事なら1発目から表示されるのですが
＞何回もというか時間経ったら以降は表示されるようになりました
＞表示される、とはセンタリングができるということ？
それとも、センタリングはされないが広告は表示される、ということ？ insのwidth,heightは中のstyleで書かれるから意味なくね？ 補足
＞ブラウザなど特殊な環境
拡張とかブラウザの設定とか >書き込めないので「ｓｃｒｉｐｔ」は全角に
こういう作業がけっこう面倒なんだよな
初め原因わからなかたり書き込みブラウザ変えてみたり
ブラウザ変えると後で自分のレスか否かとか面倒だったり ようは>>1にテンプレとして
https://codepen.io/pen/
https://jsbin.com/
https://jsfiddle.net/
https://ideone.com/
などがあれば面倒なことなど何もなかった
もちろんレスだけで済むような事例にいちいち使わなくていいが
原因不明の場合その方が意思疎通がスムーズなのは明らか
ついでにscreenshot系のサービスも信頼性が高ければ入れとけば完璧
何が起きても机上の空論で何がなんでもレスのみで解決
とかこの界隈ではありえん >>238
これおかしくないか？
レスポンシブと言ってるのになんでサイズ指定してんだ
#ads > ins {
～
width: 100px;
height: 50px;
} <wbr> ってブラウザによっては対応してないの？ >>253
＞>>238
＞これおかしくないか？
＞レスポンシブと言ってるのになんでサイズ指定してんだ
＞
＞#ads > ins {
＞～
＞width: 100px;
＞height: 50px;
＞}
広告がわのスクリプトでサイズが設定されればセンタリングされる、ということを示す例ですね 私もHTMLとCSSだけで簡易なブログというか日記みたいなのを載せたいのですが、
どこ参考にするのが一番でしょうか。 >>257
よく見るブログとかある？
それをコピーしたらいいよ
で、たとえば色の番号とか文字の大きさとか
自分でもわかりそうなところをまずいじって
どんな変化が起こるのか試してみればいい
意地悪で言ってるのではなくわりとまじで >>257
HTMLとCSSだけでブログはできないぞ
COOKIEやLocalStorageに保存して自分だけで見るならいいけど >>259
コメントとトラックバックは難しいけど
それ以外はなんとかなるなる Blogははてなとか使って、カスタマイズするのがよろしいのか このスレ的には
WPやMT使ってごにょごにょするのを推奨したいな で、結局>>231がセンタリングされなかった理由はなんなん >>264
その後の繰り返しでわかってきたことです
ならないは不正確で、なるときとならないときがある、でした
箇条書きするとこんな感じです
広告によって上寄せになる広告もある
同じページを何回もリロードさせると現象がわかる
新規簡易ページでも従来の記事のページのどちらでも現象は出る
ウィンドウ幅400～500px位だと上寄せが出る回数が多い様子（幅100%、高さ100pxの場合） >>234
＞・insにwidth,heightを与える
与えるものではなくて与えられるもの
よって意味なし 確かに広告側でins要素にwidth,heightを設定してくれているなら、ins要素にwidth,heightをしておく意味はない
……というか設定すべきではないね
書き忘れてて申し訳ないが、そもそも >238 は広告側がそれをやってくれていればセンタリングされるはず、という例示だった
で、センタリングされないという状況から推測できるのは
・広告側では必ずしもins要素にwidth, heightを設定しない
→センタリング方法を変える必要あり
もしくは
・表示される広告に対して間違ったwidth, heightが設定されている
→こっちでins要素にwidth,heightをしているならそれが優先されている可能性があるが、そうでないならそういう広告だと考えるしかないような…… display: flex が使えるなら
ins要素の親に以下を指定するだけでいい気がする
display: flex;
align-items: center;
justify-content: center; >>268
最初から読んでないならややこしくなるだけだから
それと、自分でbox作って自分でwidth, height当ててできると言ってるのも問題外
(>>267の人はちゃんとやってるから別)
最初からそういう問題ではないと書いてあったはず ぶっちゃけheightを１００ｐｘという狭い固定なら
出る広告の縦サイズも限られてるよね
ならinsの直親要素をその広告の最大サイズに設定しとけば
少なくとも、その親の親要素の縦のセンタリングは気にする必要なくね
どのみちテキスト白地広告とかディスプレイ広告だと
最下層の入れ子ins下で数pxの誤差のある広告が出ることあるし あとは、レスポンシブ広告側で縦の最大最小サイズを設定しとけば
さらに確実 上で言われてるinsにwidth,heightが与えられるときと与えられない時がある
そういうの見たこと無いので、ほんとかどうかは知らないが
もしかするとあえて広告側で最小最大設定すれば
確実にwidthとheightが与えられるかも
試すのめんどいからやらないけど >>270
広告の仕組みわかってないようだな
数pxの誤差なんてレベルではないし、親の親ってなんだ？ そもそも縦が100px固定ってほぼ横長バナーを想定してると思うのだが
広告の最小縦幅が60pxで次が９０px？
たったこの２種類幅を考慮するメリットがあるのだろうか
レスポンシブで例えば縦幅73pxみたいな微妙な幅って出たっけ？ 100px、75pxもあるよ
今後変わるかもしれんしいちいちそんなこと気にしてないだろ 100pxは例えであってそれで完成ではないかもしれんし
別の箇所では違う高さかもしれんし
今そこは重要なことではない いや質問者は二度も、高さ１００ｐｘの場合って言ってるから
１００xp固定の場合の解決例を示しただけじゃん
カモしれないって自分で言ってんのに、なぜそれを元に重要なことではないと断言できるんだろ
単にマウント取りたいだけか？ >>275
そう、つまり微妙な幅も出るかもしれないし、今後変わるかもしれないから
広告側で範囲を設定した方が無難
もしかしたらその設定でwidthもheightの設定がデフォになるかもしれない
そもそもinsにwidthやheightが設定されないor別の値が設定される
という再現ができないんだよな
ほんとか？ width,heightが、設定されないor広告にあってないサイズ値が設定される
というのを再現できれば
広告側で範囲設定後にサイズ値が強制的に設定される
というのも確認できるんだがなぁ 訂正 設定されないor広告にあってないサイズ値が設定される
→設定されないor広告にあってないサイズ値が設定される、場合がある ちなみに、広告の親要素にあってないサイズ
これは広告の親要素の縦幅を100px以下、具体的には60ｐｘにしたとき
縦幅100ｐｘや90ｐｘの広告が表示されたことは確認できた >>277
君が最初から読んでないだけだから、もういいだろ
>>279
>width,heightが、設定されないor広告にあってないサイズ値が設定される
いつからそんな話に？無茶苦茶だな >>282
いや、前スレから読んでるから。
で、最初は高さは質問者も限定してないが
その後に質問者が１００px固定で回答する>>233
で、回答者がそれぞれ高さ固定の例を示して>>238や>>239
その後に質問者が、１００ｐｘの場合について再度確認してる>>265
なので１００ｐｘの場合を示しただけ。
もちろん別の場合（１００ｐｘ固定以外）があれば
その対処を示せばいいだけの話なんだが？
>>276が、なぜ”かもしれない”で１００ｐｘ固定限定の場合の回答を
重要でないと断言できたのかが意味不明
>width,heightが、設定されないor広告にあってないサイズ値が設定される
>>267の推察として可能性があがっていたから。
後者は確認済
前者がもし無いのであれば
そもそもの、topに表示されてしまう、という原因がさらに絞れる ちなみにおれが思うに
前スレから今までの質問者の回答、
>>256の
＞なるときとならないときがある
＞広告によって
という部分から
（１）最下層のins下のディスプレイ広告（img）のサイズよりも
最上のins要素のサイスがでかい
かつ
（２）広告の親要素の縦幅が100px固定で
最上ins要素の縦幅が１００ｐｘのディスプレイ広告がでた
が、topに配置されているように（見える）原因だと思う
これだと辻褄が合う
つまり、
最上のinsは親要素（１００px固定）の縦幅全部に表示されている（≒センタリングされている）が、
最下層のimgはトップに位置されている
が正解かと
（１）はレスポンシブ広告のを知っている人、実際に試してみた人、
広告の表示テストした人、しか伝わらないので注意な
どうも想像で話してる人が紛れ込んでるようなのであえて言うが。 >>283
質問は高さ固定、つまり
・まだ決めてない
・幾つかあって異なる
・今後変更になる
など様々考えられる
100pxは「場合」とあるがソース出すのにとりあえず書いた可能性がある
それを100pxだけに絞る意味がない
勝手に問題文読み変えて答えてるようなもんだ
あくまで質問は「高さ固定」
つまり80pxやその他もあるかもしれん
>広告にあってないサイズ値が設定される
意味がわからん
仕様はサイズ値に合う広告が表示される
前者はソースで書かれている >>286の最後の行は混じったので削除
>width,heightが、設定されない
などどこにも書かれてない、ということ >>286
＞100pxは「場合」とあるがソース出すのにとりあえず書いた可能性がある
＞その他もあるかもしれん
それはわかってる、その先の話をしてる。
ひとりの回答者が１００ｐｘ固定以外での回答例を出したのにもかかわらず
その後に再度>>265で１００ｐｘでのテストを示した
つまり、８０pxでも５００pxでも、他にあるのかは質問者以外にはわからないが
少なくとも>>265の時点では質問者は何らかの理由で１００px固定でのこだわりを見せた。
それに答えただけ。ただ、それだけ。
今、他の高さ固定パターンがある云々は的外れ
>広告にあってないサイズ値が設定される
意味がわからないのは、実際に試してないから
もしくは例外に出会ってないからからだと思う
例えば広告の親要素の高さを60ｐｘや80pxにして
何回かレスポンシブすると、高さ９０pxや１００px広告が出てくることがある >例えば広告の親要素の高さを60ｐｘや80pxにして
>何回かレスポンシブすると、高さ９０pxや１００px広告が出てくることがある
それ大問題だろｗ よくよく見てみたら、最初の回答者の例も
５００ｐｘ固定なんだよな
その後の「やってみました」というのも固定幅に関しては言及なしで
テストにしろ質問者の具体的な固定幅が発覚したのは>>233が初。
>>265の現象（また、前スレから言っていた、広告がトップに表示される云々の現象）も
１００px固定、もしくはディスプレイ広告のimageサイズの誤差が生じる範囲の縦幅
（自分は親要素（１００pxから）５００ｐｘ固定の、横バナーとスクエア広告でズレを確認済み）
だったという可能性がある >>289
ちなみに広告の親要素（薄紫）60px固定で、最上ins要素のheightが90pxで表示された例
https://i.imgur.com/rwEFw79.jpg
こちらの環境では１０回に３回以上は表示されるみたいなので
同じ現象の人もいるかも
（もちろん広告の最大最小設定は外してる） 7です
場合と書いた通り高さ100pxは例えばで、他の高さでも考慮願います
広告画像が欠けたことは一度もなく、常にdiv枠内に表示されています
レスポンシブなので幅可変は説明するまでもないですよね
window幅を約450px、上寄せになった場合のFoxの開発ツールで見た状態です
・大元の＝最も外側の＝googleコードのinsのボックスモデルは
margin上下左右全てautoで0px、border/padding共全て0、本体420x100（一例）、
position:absolute、top/right/left/right全て0
そのDOMはstyle="height:100px"
・大元のinsの子insのボックスモデルは上と同じ
そのDOMはstyle="height:100px; width:420px"
むろんstyle=は当方で指定するわけなく広告のスクリプトが設定したものです
広告が変わって画像の幅が変わりますがinsの420pxは変わりません
window幅を変えると別の値になりますが、window幅を変えなければ常に420pxのようです（ここは検証数少なし）
insは420x100で変わらずですが、画像サイズが変わり、広告側ins内で画像を上寄せにしてるようです
子孫insまで設定を変えようとは思わないのでそこは無視でいいです
↑ということはこれ以上やりようがなさそうで納得してきた感じです すれ違いでした
数十回やってますが今の所広告画像がはみ出たことも一度もありません >>291
それはすまんかった
もち、子孫insにcss設定してなくてだよな？
でもそれ大問題だな
ってもみなたいてい親要素に高さ指定しないから気がつかないかほったらかしなんだろうな ＞子孫insにcss設定してなくてだよな？
もちろん、親を高さ60px固定で、広告に高さ60px以上出るような設定はなし リロードする度に広告下が上下に動いたりmarginによっては重なったりするってこと？
仕様かなりまずくないか？ ちなみに>>284を画像で説明した方がわかりやすいと思うので
これが何もない状態
広告の親（薄紫）の高さ100px固定
https://i.imgur.com/Cd0dLlb.jpg
これに対し、その高さ以下でレスポンシブ広告が表示され（赤枠、最上ins要素）
さらにセンタリングされたときの例
https://i.imgur.com/JvCm7lr.jpg
で、実際に目に見えるその広告部分（青色）
https://i.imgur.com/6BU9nS3.jpg
実際には目に見えない赤枠を外すと、広告はこうみえる
https://i.imgur.com/o6L3sIZ.jpg
一方で、広告によっては、青色の部分が中途半端な高さになることがある
（今のところ一枚画像タイプの広告で確認）
それがこれ
https://i.imgur.com/vz8t900.jpg
実際に目に見える部分だけみると
https://i.imgur.com/4k5aAuv.jpg
もうおわかりかと思うので端折るが、親高さ１００px固定と同じ広告が出た場合
https://i.imgur.com/mWZOgXt.jpg
で、これ https://i.imgur.com/maxIBvL.jpg
もちろん100px固定でなくとも同じ現象がある
こちらでは１００pxから５００だったか６００px固定だったかで確認済み
まずこのあたりを探ってみて>>292、これでなければおそらく環境 あ、>>292の下の方に書いてあったかすまん
ということは解決でいいのか 度々7ですが>>293は撤回します
親の高さ60pxは試したことがなく今出ました
それでwindow幅を400pxや450pxにするとけっこうな確率で出ますね
更に以前教えてもらった
#ads > ins { position: absolute;～}
も与えるとpタグの上の要素にまで上がって重なってしまう場合もあります
となると親の高さは何pxなら大丈夫という確信が取れないので要検討です
画像の上寄せは相変わらず>>297の通り出ますがこれは大した問題ではないように思えてきました htmlCSSド素人です
LINE風に画像を表示したいのですがそれだけではなく
左側に画像を横並びにしたり、それぞれ吹き出しの色を変えたりしたいです
○（コメント）
〇〇（コメント）
〇〇○（コメント）
吹き出しから伸びる三角と右側の画像と吹き出しはいらないです
よろしくおねがいします （１）画像上寄せが起こる → insはセンタリングできているが画像が上寄せなので広告がセンタリングできていないように見える
パターンと
（２）親要素以上のサイズの広告が出る → センタリング以前に位置がおかしくなる
パターン
どこまでウインドウ幅を縮めるのかによるけど
ウインドウ幅を縮められる最小幅を固定（スクリプト無しにできたっけ？）し
広告幅も範囲設定で（２）は攻略できそうだが 今更ですが、当初読んでるはずですが関係ないやで記憶にもありませんでした
https://support.google.com/adsense/answer/3213689?hl=ja
高さが固定または制限されているコンテナには設置しないでください。
メディアクエリのページは読んでいたのですが
@mediaだとサイズ決め打ちになってしまい、いまいちです
幅100%とシンプルかつ画面を最大活用したかったのですが
みなさんお騒がせしました、そしてありがとうございました >>301
(1)はあきらめましたが、(2)は親の高さ100px以上にしてかつ
overflow: hidden;
を入れるといいようです
確証ないのとwindow幅狭めると広告が消えていきますが
更にmax-～を組み合わせると進展ありそうな気がします
https://support.google.com/adsense/answer/6307124?hl=ja
（当初から今も見ていたページの方） >>300
やりたいことはわかったが
質問はなんなのかね 質問じゃなくてコード無料で書いてもらおうっていう乞食もきちゃうからこういうスレって難しいよね 余裕ある貴族が恵んでやればいい
恵んであげたくない人はスルーでいいんだよ >>304
すいません言葉足らずでした
検索して参考にしたサイトでは
CSSが
.balloon {
width: 100%;
margin: 10px 0;
overflow: hidden;}
.balloon .faceicon {
float: left;
margin-right: -50px;
width: 40px;}
.balloon .faceicon img{
width: 100%;
height: auto;
border-radius: 50%;}
htmlは以下のように書いてありました
<div class="balloon6">
<div class="faceicon">
ここにアイコン画像 <img~>
</div>
ここで画像を横に並べたいのですが
<img~>を並べるだけでは画像が縦に並んでしまうので横に並べる方法が知りたいです >>308
<div.faceicon>の幅を40pxで固定しているからだな
これとfloatで横に並べるのをやめにして
親要素作ってflexで横並びにすればいいと思うよ >>302
くどいようで申し訳ないが
googleは高さ固定ダメと言いつつメディアクエリで設定してるとは
結局同じことだと思うが曖昧というかなんなのだろう？極端な話、
width: 100%; height: 100px;
は
@media screen and (min-width:1px) {
width: 100%; height: 100px;
}
と等価なわけで
%指定がいけないのか、高さ幅共に何px指定しなければいけないのか
100%でも(レンダリング中変にjsで動かしたりしなければ)サイズ算出に問題ない気もするが
だがそんなニュアンスの文は見当たらないような、よくわからん html、CSS、画像ファイルで神経衰弱ゲームがつくれるとのことですが、
下記のまとめ項目にまとめたソースコードがあったり、枠内にいろいろなソースコードがあったり、
どこのファイルにどう記述すればよいのかサッパリわかりません。
https://magnets.jp/web_design/6308/#midashi2 >>311
よく読みたまえJSも使ってる
コードはデモページから拾えばいいよ
あとカードをひっくり返すエフェクトは
そのままだとIE11で苦労するから気をつけ…
…と、思ったけどCSS使ってないんかこれ >>312
まさかbackface-visibilityでハマった奴が俺以外にいたとは <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>神経衰弱</title>
<style>
</style>
</head>
<body>
<ul id="card"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";></script>
<script>
</script>
</body>
</html>
上のファイルに、適当な名前、index.htm とでも付けて、
BOM なしUTF-8 として、適当な名前の、test フォルダへ保存する
<style></style> の間に、CSS をコピペする。
jQuery の読み込みタグの下にある、<script></script> の間に、まとめたJavaScript をコピペする。
必ず、jQueryを上に書いて、先に読み込むこと！
testフォルダの直下に、img フォルダを作る。
そこに、裏向きのカードの画像ファイル、card.png と、
表向きのカードの画像ファイル、card1.png ～ card10.png を入れる Ruby, Selenium WebDriver を使って、
5ch のスレを解析して、書き込みから、画像ファイルへのリンクを抜き出して、
<img> へ変換しようと思っていますが、
各画像のサイズがバラバラで、表示される高さを、画面に収まるようにしたいので、
img { height: 550px; }
と設定して、画面の高さの80% ほどに見えますが、
他のPC では、80%にならないと思うので、
他のPCでも同じように、80%ぐらいに表示するには、どうすれば良いでしょうか？ height: 80%; では駄目な特別な理由がなにかあったりする？ 高さの100% の基準がわからない。
PC の画面の高さなの？
よくわからないので調べてみます 5ch のスレを解析して、書き込みから、画像ファイルへのURL を、あるだけ抜き出すから、
URLの数は決まらない
それらのURLをすべて、<img>に変換して、ドンドン追加していくから、全体の高さも決まらない
ただ画像本来の高さにすると、画像の大きさがバラバラで揃わない まず枠になるボックスを固定サイズで置いて
その中に<img>要素を置いて
position:absolute、margin:auto、上下左右:0で中央にして
width/height:autoでmax-width/max-height:100%でどうだろう >枠になるボックスを固定サイズで置いて
img { height: 550px; }
今は、画像を固定サイズにしていますが、枠を固定サイズにしても同じことでしょ？
漏れのPC では、550px で、画面の高さの80% ほどに見えますが、
他のPC やスマホでは、どうなのでしょう？
異なるデバイスでも、そのデバイスの画面の高さの、80%ほどに見えてほしいのです >>321
そんなあなたにvwとvh
ていうかまず試せよせっかく有用な助言もらってんだから
%の高さの使い方は誰でも通る混乱ポイントだから
こんな文字だけの掲示板であーだこーだ言うよりも
納得いくまで色々試しまくるんだ！ >枠になるボックスを固定サイズで置いて
<div class="img_wrapper">
<p></p>
<img>
</div>
<img> は、<div> の子要素にしています。
<p> には、画像のURL を書いています
.img_wrapper { height: 600px; }
ここで、div をpx で書くと、
漏れのPC では、画面の高さの80% ほどに見えますが、
他のPC やスマホでは、どうなのでしょう？
異なるデバイスでも、そのデバイスの画面の高さの、80%ほどに見えてほしいのです vw, vh は、異なるデバイスの、異なる画面の大きさに対する、割合で指定できますね
これを使ってみます！ htmlのタグが、どのcssファイル内でセレクトされているか、逆に、
cssのセレクタが、どのhtmlファイル内のタグをセレクトしているか
が簡単にわかる方法はありませんか・・・？
visual studio code と chromeの検証を使用しています
ファイル数が多かったり、ファイルの内容が多かったりすると、
どのタグがどのcssやjsで指定されているのかを見つけるだけでも一苦労でして・・・
宜しくお願いします。 >>330
よくわからんがおそらく
chromeでF12押してElements 結局>>297で親からはみ出る件は何がいけなかったのだ？ 画像(imgタグ)のレスポンシブ対応をしようと思ってます。
で、いろいろ調べたんですが
<picture>を使う方法と<img>に直接srcset属性を入れる方法がある
ということがわかりました。
これはどっちを使えばいいのでしょうか？
自分的には全部<picture>でいいんじゃないかと思うんですが
ttps://parashuto.com/rriver/responsive-web/picture-srcset-use-case
「なんでもかんでも<picture>要素を使えばいいわけじゃない！」
っていう記事に使い分けが書かれてるようなんですが、正直よくわかりません。（情報が古い？）
あと、<picture>で実装した場合
パソコンでブラウザの幅、大きくしたり小さくしたり繰り返してると
同じ画像を何度も読み込んでる気がしますが、これは仕様なんでしょうか？ ヒーローイメージくらいしか使いみちなさそう。そこまで通信量考えるなら画像使うなよと言いたい >>330
前者はブラウザの開発ツールで
後者はなかなか難しい >>330
>htmlのタグが、どのcssファイル内でセレクトされているか、
VSCode にそういうプラグインは無いか？
CSS Peek とか？
VSCode - 10 Useful Extensions for Web Development | GTCoding
https://youtu.be/wzreuKDbLyk?t=2m29s
>逆に、 cssのセレクタが、どのhtmlファイル内のタグをセレクトしているか
これは、無数のHTML要素に該当する可能性があるから、難しい
ブラウザのF12 開発者ツールで、見るのが良さそう >>333
>あと、<picture>で実装した場合
>パソコンでブラウザの幅、大きくしたり小さくしたり繰り返してると
>同じ画像を何度も読み込んでる気がしますが、これは仕様なんでしょうか？
ブラウザがキャッシュするから、同じ画像は、何度も読み込まないと思う
ブラウザのF12 開発者ツールで、読み込んだファイルを確認してみれば？ >>337
chromeのデブツールで確認したらなんども再読込してた。
<picture>
<source media="(max-width: 762px)" srcset="img_sp.jpg">
<img src="img_pc.jpg" alt="">
</picture>
こんな感じにして762pxを境にブラウザの幅行き来したら
再読込したりしなかったり。条件がよくわからない。
でもhttpステータスは304だから更新はないって判定なんだろうけど
リクエストはしてるのかな？と思って 304なら再読み込みしてないじゃん
cache使ってるでしょ 同一URL なら、キャッシュから読み込む。
キャッシュを使わない、ブラウザはないと思う
だから、ファイルの内容を変えた場合は、ファイル名も変えるようにする。
同一URL だと、キャッシュが使われてしまうから、内容が古いまま サーバーレスポンスCache-Controlで変えれる Chromeでデータセーバー有効かつ低速だとJSが無効化されるようになったそうですが、
目次の表示/非表示ってCSSだけで出来ますか？ >>342
出来なくもない
ラジオボタンやチェックボックスのcheckedと
表示非表示を切り替えたいブロックを
セレクタの+で繋げれば
なんか猫も杓子も目次書くようになったな
グーグル様のお達しはやっぱ効力あるな 俺がルールだ的な傲慢さは出てきたよね。
邪悪な企業まであと一歩。 ampとか開発者から見たら筋悪なの分かってたじゃん？
でも経営サイドが踊らされて業務として降ってくる。
センスないことゴリ押しされるとホント迷惑。 CSSでGridLayoutを使っている時にふと疑問に思ったのですが、
例えば日記を更新していく際に、
新しいトピックを一番上のグリッド（マス）持っていくにはどうすれば良いのでしょうか？
https://blog.splout.co.jp/wp-content/uploads/2017/12/grid02.png
こちらの画像で言いますと、
item1が一番新しい記事で、item9が一番古い記事だとしますと、
新たに最新の記事を加えた場合、
元々あったitem1の記事がitem2のマスに移動して、item2にあった記事がitem3のマスに移動して・・・
という風にしたいのですが・・・ CSS変数を使うとかでしょうか・・・？
基本的には、こういうのですとJavaScriptを使うのが普通でしょうか？ メディアクエリの幅指定はスクロールバーを含めた値ですが、
webkit系ブラウザだとそれを含めずに算出するバグがあると以前聞きました。
現在でもこのバグは継続していますか？ >>351
blinkも初期にそのバグあったが治ってた
safariは使ってないので知らん css overflow スクロールバー
css fit-content スクロールバー
で検索して それってネグレクトじゃね？
児相に通報した方がいいぞ
確信がなくても可能性があるなら通報する義務が国民にはある
そうじゃないと思っててそうだった時が一番大変だしね ウインドウズもぞろぞろスクロールバーはやめてくれると捗るんだがなあ レスポンシブで画像以外のコンテンツの表示分けって
どうやって対応してる？
wp_is_mobile();みたいに
ソースレベルでちゃんと出しわけしてるの？ >>360
CSSで表示だけ出し分けることが多いなあ >>361
ホッしたｗ
でも冷静に考えたら、ほんの数か所の為にサーバーサイドを必須にしなければいけないのは非効率だよね。
ブラウザに無駄なもの読み込ませているのは確かに気持ち悪いんだけど WEBってなんで2018年なってもいまだに
HTML,CSS,JavaScriptとかいう糞言語で描いてるんだろう。
絶対パフォーマンス悪いだろ。 クソ言語だとパフォーマンス悪くなる。
だけど今のウェブを見るとパフォーマンス悪くないので
クソではなかったということさ
事実を受け入れよう ブラウザってHTMLを受け取ってそれをパースして
DOMツリー作ってると思うんだけど
それならはじめからDOMツリー書いて渡せばよくね？ え？ DOMツリーをHTMLで書いて渡してますよね？ >>368
え？って言うのはこっちなんだけど？
例えば、<body><a href="http://example.com";></body> は
DOMツリーをHTMLで書いたものだけど、お前は何を渡せと？ 366と367の熾烈な争いの火蓋が切って落とされようとしている！ どうせ「だからhtmlじゃなくてdomツリーで渡せ」とか言ってくるアスペだろ パフォーマンスよりも扱いやすさを最重要視したんだろうなあ
取っつきやすいかどうかがネットをここまで普及させたんじゃね cssでhtmlを指定するときの範囲？がよくわからない
<div id="top">
<p> xxx </p>
<ul>
<li> xxx </li>
<li> yyy </li>
<li> zzz </li>
</ul>
</div>
というのを書いてそれをcssで指定しようと
#top p ul li { font-size: 10px; } でやっても上手くいかなくて
pを外して #top ul li で指定したら上手くいった
親子関係うんぬんってやつかね
後、指定するときは最初にどこから指定すれば良いのかもわからん
上のは短いから、divから( id="top"から)指定すれば良いってわかるけど、もっと長いコードになった場合、
一番最初に指定するセレクタ（親？）はどこからなのかもわからんちん
こういうのって何て単語で調べれば解説でる・・・？ 指定は短い方がいいっぽい
liがそれだけならliだけで指定できるはず >>373
topが親でpとulは兄弟
最初の書き方だとulがpの子になってるからcss効かない
コード書くときにちゃんとインデント付けるか、
ブラウザの開発者モードで▶︎を開けばそのうち慣れるよ >>373
まずタグ同士の関係がわかるようにツリー状に書くと
div#top
├p
└ul
├li
├li
└li
ってなるだろ？
cssでスペースで区切るのは「その下にある」って意味
なので「p ul」と書くと
p
└ul
のツリーを指定してることになる
これか「親子関係」 複数のdlで高さが違うものを横並びにさせるときに、
親要素の横幅以上になった際に折り返しますが、
それが崩れずに並ぶにはどのようにしたらよいでしょうか？ >>377
親要素にflexを指定して子の高さを揃えるようにする事もできるし
折り返しさせたくないのかなんなのか意味が良くわからないけど
横幅を可変で%なりでしていすればいけるよ。でも文章力も無いのになんで
文章だけでhtmlの構造ややりたいことが伝わると思ってるの？この文章見てもイメージが付きにくいと思わないかい？ flexでいいけど
なんでみんなそんなにdl使いたがるのん？ >>375
373じゃないけど
PとULって兄弟になるのか！
だから擬似要素でntfつかっても効いたりきかなかったりしたのか！
スッキリしたありがと 前回の記事はこちら
みたいな本文とは関係ない意味のない文言は
どうマークアップすべきなんせしょうか？ >>382
ナビゲーションという意味付けをしたいならこれでいいんじゃね？
<nav><a href="">前回の記事</a></nav>
まあ普通はやらないよ。
divでいいんだよdivで。
最近なんでもタグにしてきやがるからそのうちこんなの出てきそうだなｗ
<previousz>前回の記事</previousz> タグなんでもいいけどマイクロデータは最低限必要だぞ >>315-326
この辺で議論しましたが、
異なるデバイスでも、画面の高さの80% で画像を表示しようとして、
vh を使ったら、80%になったけど、
「Ctrl +-」で拡大縮小しても、画像が拡大縮小しません。
常に画面の高さの80%になります
つまり最初の表示は、画面の高さの80%で、拡大縮小もしたい。
どうすればよいですか？
>>373
VSCode の拡張機能、Beautify を使えば、ファイルの保存で整形してくれる 382です。
気が楽になりました、ありがとうございます。 >>387以外の方法でやろうとするとjsでマウスイベント拾ってきてどうのこうのになりぞう 高さの% は、いまだに意味がわからない。
何を基準にしているのかが、よくわからない
高さを%にしている、サンプルを探せない
これで画面の高さの80%になるかな？ 自分のPC だけなら、500px ぐらいで、画面の高さの80% ぐらいになるけど、
他のデバイスでも、画面の高さの80% になる、px を求めるのは、HTML, CSS では無理かな？
JavaScript で求めるしかないか？ なるほど 兄弟だからか・・・
インデントちゃんと使います
親子関係はしっかり覚えようかと思います
めっちゃ初心者な質問に答えてくれてどうもありがとう～｜ >>390
ググれば腐るほどでてくるとおもうけど…
高さの%は親の高さから算出されてる
bodyには高さがないからとりあえず親要素にposition absoluteでtop0 bottom0をしてやると要素の高さが出てそれに対して子要素%指定が生きる Tumblrでブログの外観をいじりたいのだけど、ここで質問しても答えてくれるかな。 <select multiple>
の選択ボックスの中を装飾する方法ってありませんか？
2カラムにして2つの情報を表示したいのです
---------------------
りんご abc
みかん def
バナナ ghi
いちご jkl
---------------------
みたいな感じで文字数が可変でも縦の列をそろえたい
かつ ドラッグやCtrl+クリックで選択はしたいのです
よろしくおねがいします FLOCSSのBEM記法で躓いてるんだが教えてくれ…
複数ページで使うボタンエレメントに対して、装飾かけたいとする。
でも、コンポーネントでは色や幅の指定は非推奨。ってことは、ボタンはマルチクラスつかって、コンポーネントとプロジェクトで指定するの？
考え出したら、コンポーネントの存在意義がわからなくなったんだが… >>395
無いと思う。
optionにid振って疑似要素使えば見た目としては再現できたけど
こんな不毛な手法、実装してほしくないし広めてはいけない
ディレ「ホラ、ここのサイトできてるじゃん？このサイトみたいにしたい」
ってなるから >>396
BEMは使ってないけど、
ボタンのマルチクラス作って、色のマルチクラス、色と幅のマルチクラスなどを別々で作って
それらを組み合わせてデザインを構成すしてるよ。 >>396
FLOCCSは使ってないけど、親がデフォルトで色違いなんかはModifierで量産してるよ >>397
そうなのですね…
じゃあ selectbox を使わずにリストボタンならべてjQuery でごりごりがんばります
複数選択自体はhidden checkbox 並べればなんとでもできるけど
ドラッグ選択が自分で実装するとめんどくさそうだったので…
ありがとうございました > じゃあ selectbox を使わずにリストボタンならべてjQuery でごりごりがんばります
selectboxを使って、jQueryで頑張るんだよ
HTMLは見た目を定義するものじゃない。意味を定義するもの。
だからselectboxが適切ならselectboxを使う
その上でCSSで見た目を整えるわけだが、CSSの機能不足でJavaScriptを
使う場合でも、それはCSSを補う形でなければいけない。 そうやって作ることで、JavaScriptが無効になっても
見た目が悪いだけで、機能的には問題ないように作ることができる
Android版Google Chromeで低速接続時にJavaScriptが自動的に無効になる
https://gigazine.net/news/20180827-google-chrome-java-script/ cssアニメーション覚えるのと無難にjsでアニメーションするのどっちがええかね？
cssのアニメーションも覚えてみようかと思うんだけど。 >>401
jQueryでがんばろうにも中にCSSがきかないんじゃどうしようもなくない？
どうがんばればいいかヒントだけでもください >>404
selectとoptionの情報（タグまたは内容）を読んで、別の場所にjQuery使ってUIを作る
selectは見えなくする
jQueryで作ったUIを操作したら、その情報を見えないselectに反映させる それってドラッグで選択するって無理じゃない？
じぶんでマウスイベントや座標管理できるようなプログラミングスキルないよ optionタグはテキストの無害化が必要だからとはいえ
タグ入れられないのは確かに不便だな HTML CSS スレに質問にきてる質問者に対して
jQueryができないってだけで上から目線どや顔回答者
スレチなのに気づけよ まあ要するにcssじゃ対応できないんだよ
できないものはできない
まだまだ未完成・発展途上の言語なんだよ
そのうち別のに変わるかもな 例えばですが
http://samuraigoal.doorblog.jp/archives/54092717.html
この 1の
バルセロナに所属するアルゼンチン代表FWリオネル・メッシが、、、、
という文章の背景がグレーになって囲まれますが
こういう書き方はどこを触ればいいのか？
あるいはHTMLでその箇所だけ背景を作る書き方を教えてください 👀
Rock54: Caution(BBR-MD5:f2c519fe5384e767e1c9e99abdcfc293) デザインをきめてるのはスタイル
１番簡単なのは html のタグの中に style="～" をかく
<p style="background-color: #eee; border: solid 2px #ccc;">
テキスト>br>
テキスト<br>
</p>
みたいな感じ
background-color: #eee; が背景を #eee (rgb: 240,240,240) にする
border: solid 2px #ccc; が周りの枠線を太さ 2px 色を #ccc (rgb: 192 192 192)
って意味
どのタグにどんなスタイルがつけられるか 書き方も決まってる
普通はスタイルは別ファイルにして管理するけど知りたければ
「CSS」ってキーワードでググって適当に入門サイト読むほうがおすすめ >>412
詳しくありがとうございます。
意外と自分で手を加えないと思うような形にはならないもんなんですねｗ
全部やってくれると思ってました、、 wordpress とか bootstrap とか使えばもっと書かなきゃいけないことは減る
ただ導入がスムーズにできるかは知らない
HTMLやCSSの勉強もかねるなら１つ１つ手書きがおすすめだけど
てっとりばやく見栄えのいいページつくりたいなら wordpress が１番はやい >>413
ひょっとしてまとめサイト作ってる？
>>411の参考のヤツはまとめサイト用のテンプレだろな
font-size:13.3333pxなんて記述してるから自動記述だろうな。
機能あると思うけどここはそういうスレじゃない >>415
ありがとうございます
どの辺のスレに行ったら余暇でしょうか？
自動記述とか勉強したいです。 selectとoptionを使ってDropDownメニューを作った場合、
optionの項目が縦に並びますよね。
[item1]
[item2]
[item3]
・・・
のように。
でもitemが100個くらいあるので、例えば横幅は100%まで広げるとして、
[item01][item06][item11][item16][item21][item26]
[item02][item07][item12][item17][item22][item27]
[item03][item08][item13][item18][item23][item28]
[item04][item09][item14][item19][item24][item29]
[item05][item10][item15][item20][item25][item30]
こんな風に並べたいのですが、いろいろやったのですが並びません。
これは無理ですか？ JavaScriptを使えないと、いろんなことができない displayのgridとかで対応できるんじゃね？ [item01][item02][item03][item04][item05][item06]
[item07][item08][item09][item10][item11][item12]
なら簡単なのだが flex-order:colum;
flex-wrap: wrap;
にすれば方向はそうならぶけど
selectbox の中ってなんかうまく折り返してくれなかった記憶ある 書き忘れた
>>422はselectタグでなくてね
何でもＯＫ >>416
アフィ用のまとめサイト自動生成セットとかgmatomみたいなツール使ってるなら
それ専用のスレがこっちにあるだろうからそこできいたらいいよ
https://mevius.5ch.net/affiliate/
ここの板はどちらかというとちゃんとweb技術を勉強したい人向け codepen って初めて使ったんだけど anonymous だと他の人にみえないの？ 仕事でcss使う人に聞きたいけど今ってどん感じなの？
1.コード規約作って手書き
2.ブートストラップとかのフレームワークつかう
3.sassとか使う
4.上のどれかの合わせ技？
勉強でシコシコ書いてるけど現場に近いことを勉強したい <body>
<header> (画面幅によって折返しが何行になるかわからない)
<div>
<sidebar> <main>
</div>
</body>
という構造で
body の高さを 100vh で固定して sidebar や main がのびたら
それぞれの中にだけスクロールバーが出て
全体の body にはスクロールが出ないようにするのってどうすればいいんですか？ >>434
間違えた。うちは1+3+sasslint です すみません、質問です。
レスポンシブサイトを作っていて
メディアクエリを以下のように設定しました。
pcとipadpro向け
@media screen and (min-width: 1024px) {}（実際には表記せず）
タブレット向け
@media only screen and (max-width: 1023.99px) {}
スマホ大向け
@media only screen and (max-width: 767.99px) {}
スマホ小向け
@media screen and (max-width: 413.99px) {}
Iphoneの無印とプラスでフォントサイズ等を変えようと思ってます。
Iphoneplusは414ピクセルなので上記で分かれると思うのですが、
実際には一番下のデザインで表示されます。
どうしてでしょうか？ >>433
slidebarやmainが固定幅ならslidebarやmain要素にそれぞれoverflow:scroll;とか >>431
SASSなしでは生きていけない軟弱な体になってしまった
bootstrapはbootstrap臭いデザインになって良い時は使うけど
たいていデザイナがそれを嫌うから使わんことが多いなあ >>431
自分も1,3,4
サスは自動でエラーチェックしてくれるのがイイ！
IEだと使えないfilterみたいな関数もあるし
ただ自分が制作して運用を誰かに託すことになるとサスが使えない >>440
他人が自分より馬鹿だと思うのやめたほうが良いですよ？ クライアントが自分より馬鹿だと思うのやめたほうが良いですよ？ >>438
ありがとうございます。
もうちょっと分かりやすく教えてくれるとありがたいんですが・・・ バカにしてるんじゃなくて、実際サスを使えないコーダーが多いんだよ
新しいこと覚えるの嫌なんだってさ
このスレにくる人たちはやる気があるからそんなわけないじゃんって思うかもしれないけど 過保護な会社は新人が電話に出るのが嫌ですっていったら、
じゃあ出なくていいよっていうんだろうね カタカナで「サス」って書いてるのが何よりバカっぽい やる気ないです。朝来るの嫌です。って言ったら昼出勤にしてくれるの？
いい会社だねｗ 必要に迫られれば覚える
だが今はまだその時ではないだけ >>443
2次受けしかしてないならその理屈はわかるけど、
異業界がクライアントなのに素人に何を求めるんだよｗ
臨床検査機器の使い方とトラブル時の対処方法は
販売店のあなたも全部覚えて下さいって言われたら嫌だろ？ > 異業界がクライアントなのに素人に何を求めるんだよｗ
CSSを勉強することを求めてるのでは？ クライアントに運用（＝CSSを自分でメンテしてください）
なんていうのなら、別にscssをメンテしてくださいって言っても構わないよ
そもそもすべてのcssはscssとしても解釈できるんだから
cssの知識だけでも十分対応可能 それともbootstrapみたいな複雑なcssをカスタマイズするのはクライアントでは
無理話、cssで書いていても運用は大変だろうってツッコミを入れればいい話かな？ >>417
column-width が一番簡単だろう
select みたいな UI 要素に効くかどうか怪しいが >>455
だから効かないって。常識で考えればわかるだろ
<option>はレンダリング対象ではない。
レンダリング対象である<select>の項目でしか無いんだから >>452
CSSをクライアントに勉強させるとかありえないよ。あなたは現実を知らなすぎる。
クライアントは本業があるんだから。
2次受けかIT蔵しかやったことないんじゃないの？
建築設計の事、法律の事、医療の事、金融の事、
お金払って専門家を雇ったのに、あなたはさらにそこを都度全部勉強しますか？ >>457
じゃあ現実を知ったお前なら理解できるだろ？
どーせ、クライアントはCSSなんか触らないんだが、
CSSで作ろうがSASSで作ろうが関係ない
運営（クライアント）はCSSを触らないと
最初からわかって言ってる
話は理解できたか？ >>458
うーん、、、CSSで作ろうがSASSで作ろうが関係ない事は理解できるけど
運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。
ただ自分が制作して運用を誰かに託すことになるとサスが使えない
↓
他人が自分より馬鹿だと思うのやめたほうが良いですよ？ >>460-461の続き
まあでもクライアントの種類や契約方法はそれぞれだから
それで上手くいっているなら全くそれでいいと思う。
けどそれがweb全般の一般的な対応であるかというとそうでもないという事
個人的にはそういうサービスが増えると困るお客が増えて仕事が増えるので助かる >>460
> 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。
俺に言うなって。>>440に言え
> 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。
運用を任せるやつがCSSじゃなきゃだめなんだとさ。
運用がCSSいじるわけでもないのに 訂正
>>460
> 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。
俺に言うなって。>>440に言え
> ただ自分が制作して運用を誰かに託すことになるとサスが使えない
運用を任せるやつがCSSじゃなきゃだめなんだとさ。
運用がCSSいじるわけでもないのに サスと書いた者だが、自分が言った運用の人って、
社内のコーディングできるはずのWEBデザイナーのこと
クライアントではない
extendもincludeもmixinも使ってない
入れ子にして色を変数にして、expandedでコンパイルしてCSSにしただけ
今の職場はBEM記法のSCSS
初めてのBEMだから命名規則が教科書的な人を見つけて勉強してる
新しいことを身につけるのは楽しい じゃあその社内のコーディングできるはずのWEBデザイナーに
sassを勉強させるのが前提ということで問題ない。
朝来るの嫌なんですーっていったら、
じゃあ昼からでいいよってなるのか？
仕事だろ デザイナーが本業だとすると
なんでついでやサービスでやってるコーディングなのに
さらに技能覚えないといけないんだよってなりそう デザイナーが自分より馬鹿だと思うのやめたほうが良いですよ？ デザイン業務はほとんどなくて、ホームページの運用更新が本業
この会社のことはもう忘れる…
flex使えない縛りで要素を横並びにするのって
inline-blockだったりtable-cellだったり人によって違うけど、
普通はこれを使いましょうっていう取り決めをするの？ SASS で提出するのが、ダメという会社は多い。
その場合、SASSで作って、提出物はCSS だけにする
ただ、向こうがCSSを修正した場合に、SASSは修正されていないので、
状態の不一致が起こり、保守が難しくなる じゃあ保守以降だけCSSにすればいいだけだろ
本当に頭が悪いな >>471
バージョン管理して差分をSassにフィードバックじゃダメなの？ >>473
頭じゃそうすりゃいいってわかっちゃいるけど
実行すんのは結構面倒なんだよね～ 結局は効率を考えるとCSSになる
個人でやってるならなんでもいいけど
会社組織で何人もの手が入るとなると面倒なんだよ >>475
勘違いするな。SASSの問題ではなく人の問題
個人でやってるからでも、何人も手が入るからじゃなく
会社全体の技術力が低いから。
人間に問題があることを認識したほうが良い >>470
floatはclearfixしなきゃいけないから嫌じゃー
>>471
まさにそれ
突貫で作ったからあとで綺麗に直そーと思ってたら
簡単な修正だけ奪って手に負えなくなってから回してきて
知らないうちに差分発生、ついでにCSS壊れてたりしてる >>477
それはCSSで開発して、CSSをメンテさせて、CSSを壊してるんだろ？
つまりSASSの話と全く関係ないじゃん 仕事をしてるって自覚がないのかな？
子供が会社に来て、ぼくもやりたーいっていうから
やらせてあげて、ぐちゃぐちゃにしても、
子供のやることだからと、怒らず何もせずに
甘やかして、ぐちゃぐちゃにしたものを直すだけ
子供は、頑張ったねーって褒められ、お前は何も評価されない
挙句の果てには子供でもできるような仕事だと思われる
それでも誰にも言わず、逆に見えない所で
俺が会社を支えてるんだって自己満足
こういう問題が発生します。発生してます。
だからあなたには無理です。ここより先には手を
付けないでください。尻拭いはしません。
これぐらいはっきり言えないもんかね？
仕事なんだからさ >>480
依存って言葉を使いたかったのかな？
SASSへの依存って言葉が成り立つなら
CSSへの依存って言葉も成り立つ
依存って言葉で優劣はつけられないので意味がない
まああえて依存って言葉を使うなら
より効率がいいものに依存したほうが良いってこと
効率が悪い人に依存するのは良くない CSSやJSをMinifyすることの高速効果ってどれほどのもんなの？ キャッシュが使われるように設定して、
gzip圧縮して配信してるなら大きな効果はない
ファイル結合のほうがまだ効果ある
ただしちゃんと効率化していれば、ファイル結合を
行う際に一緒にminifyするわけだが。簡単なのでね。 >>466
Node.jsとBackbone.js使うサイトがあって
別でajaxもネイティブで使うからjsエンジニアは覚えてきてね。jQueryは禁止ね。
jsエンジニアに一任するからマークアップコーダーはその部分は覚えなくても平気だけど
覚えてきた方がよりいいよね？
覚えますか？ >>486
自分がやる仕事なら当然覚えるし、
やる必要がないなら覚えないで全部プロに任せる
先輩方にスキルが高すぎるので俺でも使える道具を使ってくださいなんて
言わないし、お馬鹿な後輩を甘やかしたりしない
ましてや、やる気がないのやらせて、その尻拭いをするようなことは
絶対にしない 僕も編集したいです！CSSならできますって言ったら、
おもむろに開発では効率化のためにSASSを使っていて
メンテナンス性を上げるためにファイルを分けていて、
テキストエディタを使っていてCSSフレームワークは
○○を採用していて、自動化ツールを使ってCSSに変換しています。
そのやり方に従ってもらいます。
って言えばおおー、プロはやっぱり違う。
自分には無理です。メモ帳でやろうとしてました
諦めます。っていうだろうに
え？やるの？メモ帳だよね。じゃあ効率化とか仕組みとか全部なくして
メモ帳でもできるようにはぁ工数増えるなーと思いながら、
お膳立てして、このファイル編集すればいいですよって渡したら
あ、これなら僕にもできそうです。
なーんだ難しいことやってると思ってたら
大したことないですねーって思われるだけなんだが。
自分の仕事に誇り持ってないの？ >>490
え？何か間違ったこと言ってる？
ちょっと言い返し方がおかしいよｗ 誇りの意味が違うような気はする
悪い意味でのプライドじゃないかと いい意味のホコリじゃん
なんで無能に合わせないといけないのさ？ 見下すことにご満悦で、見下されていることに気付かない
自分だけは序列から超越していられると勘違いしている 論点はプロが素人のやり方をするなら
プロを雇う理由がないってところだよ jQueryがプロでjavascriptが素人
AngularJSがプロでjavascriptが素人
Cakeがプロでphpが素人
railsがプロでRubyが素人
って理屈になるな cssグリッド初めて使って、頭混乱しとる…
グリッドの分割ってみんなどうやってんの？
レイアウトと主要なブロックで分割だらけになるんだけど… >>497
正確に言えば、短い時間で最大の成果を上げるのがプロ
時間かけていいなら素人でもできる
sassとcssを比べれば、通常はsassの方が大きな成果を挙げられる
cssの方が上回ることがあるとすれば、
サンプルコードとか数行で完了するようなものぐらいだろうな。
その程度だとsassの準備をするほうが面倒
だけどプロだと仕事の量も多いんで、数行で終わるようなことはまずない >>499
短い時間で最大の成果を挙げられるから
もちろん>>502で言ったように例外はあるけどね >>502
そのうちsassはできるけどcssはできないとかいう新人類が溢れてきそうだな >時間かけていいなら素人でもできる
んなわけない
仮に半年かけてやったならそれは既に素人ではない
それとできるかできないかだけで素人玄人の判断するのはまるで素人みたいだよ SASSのほうが楽なのはわかるけど相手に押し付けるなよ >>504
できないっていうのは、精神的に辛いって意味だね。
cssはネストなし、変数なし、extend、minxなし縛りの
sassだから、発狂することだろう >>505
え？ やり終えるまでの、半年間は素人じゃん？
そして、やり終えて、次の半年、また同じことを繰り返していたら
半年で成長もしてないってことじゃん？
素人状態から成長してないなら、素人だよ >>506
押し付けじゃないね。
事実を述べているだけ。
効率が悪いやり方をやってるやつは素人同然 初心者なのですがよろしくおねがいします。
只今Word Pressを使っていて、フロントページを固定ページにしてナビゲーションバーから各ページに行く方法を取りたいと思っています
そして、個人ブログページを作りたいと思っているのですがうまく行かず困ってまして
フロントページは最新の投稿ページと固定ページで選択できますよね？
デフォルトでは最新の投稿ページになってますが
その最新の投稿ページと同様にしたいのですができないです。
TOPページ（固定ページ）→ナビゲーションのWeblogボタン→最新の投稿ページという流れが理想です
よろしくおねがいします >>510
・サイトトップページ用とブログトップページ用の固定ページを作る
・表示設定で「固定ページ」を選択し、ホームページにサイトトップページ、投稿ページにブログトップページを選択する
・テーマにfront-page.phpとhome.phpを作る
・home.phpでいつものwhile文を書く
front-page.phpがサイトトップページのテンプレート
home.phpがブログトップページのテンプレート あ、ここHTML/CSSスレか
答えちゃったごめん >>509
効率の良し悪しは
手数とそれによって得られるCSSだけによって決まるわけじゃないよ～
どっちかって言うと
手数とそれによって得られる金によって決まると思うよ～
仮に素CSSで書くことで5倍の時間がかかったとしても
得られるお金が5倍以上になるのなら
迷わずそちらを選ぶべきだよ～ > 仮に素CSSで書くことで5倍の時間がかかったとしても
> 得られるお金が5倍以上になるのなら
ん？ 客は成果物に対してお金を出すのであって、
作業時間にお金を出すわけじゃないよ
「すいません、効率が悪いやり方をして5倍の時間がかかったので、5倍の金額を請求させてください」
こんな言い訳が通用する客はよっぽどの馬鹿だよ。
SASSでやってもCSSで作っても、成果物が同じなんだから得られる金額は同じ。
得られるお金が5倍以上っていうのなら、どちらも同じ5倍以上だろうさ。
んでかかる時間はSASSだと1倍で、CSSだと5倍
言い換えると、CSSだとSASSの労力の5倍かかるのにもらえる金は同じ あ、でも要領が悪い人は作業時間 = 請求金額になっていて、
スキル上がって1ヶ月かかっていた仕事が、1週間でできるようになったら、
請求金額も1/4にしてしまい、どんなに力をつけても、力をつけた分だけ
儲けが減るという間抜けもいるみたいだけど
客「急いでいるんです！超特急で作業を願いします。」
間抜け「では通常の2倍の速度でがんばります。半分の時間ですむので請求金額は1/2です」
みたいになｗ
普通は通常料金に加えてと特急料金を請求する所 このSASSおじさんは都合の悪いことには返事しない習性があるな >>519
全て返事してると思うけど、どれに返事してほしいの？ >>517
そんな単純な話じゃないよ～
座組み、組織、関わる人員、期間、国、全てを考慮して
何を選ぶのがベストか決めるんだよ～
自分にとってベストな選択が
全体にとってベストでないことは多分にしてあるよ～
大きな案件でそれを間違えると
構築から1～2年で運用が瓦解して、向こう10年の売りを棒に振ることもあるよ～
だから目の前の構築作業時間を1/5に出来ても
長期的な効率が下がってしまうことは往々にしてあるんだよ～ >>521
人の問題と技術の問題は分けて考えよう。
技術的には優れているけど、技術力が低くて使えないっていうのはわかる。
だけどそれは、人間の問題であって技術の問題じゃない sassおじさんはbootstrapも
もちろんバッチリ使えるよね？ 異なるリストを繋げることってできるの？
例えば
<ul id="sono1">
<li class="gattai"></li>
<li></li>
</ul>
<div>要素</di>
<ul id="sono2">
<li></li>
<li class="gattai"></li>
</ul>
この.gattaiをPCでは別々で、
タブレットやスマホサイズの画面だと繋げるみたいな感じで。 >>524
見た目はできるよ
ソースを変えたい（DOM）ならjQueryでできるよ >>523
バッチリではないけど一応使えるよ
一応っていうのは、仕事でそこまで深いことを求められてないから
プロトタイプ的なものとかちゃんとしたデザインは必要ないけど
スマホに対応する必要があるときは、自力でやるのが大変なので使う
bootstrap使った方が効率はいいからね
bootstrapのデフォルトのデザインは好みじゃないし、
HTMLがごちゃごちゃするので個人的には嫌い
bootstrapじゃなくてもっと良いCSSフレームワークが欲しい所だけど
単純に今の仕事がそっち系じゃないので深く踏み込んではいない >>524
> 異なるリストを繋げることってできるの？
リストを"繋げる" のは良くない
CSSでやるのはあくまで、繋がってるように見せるだけ
見た目は置いといて、その２つのリストは
意味的には同じ1つのリストなのかどうなのか
同じリストなら最初から繋げて書いて
CSSで別れているように見せるべきだし
（つまりリストを分割するんじゃなくて、そう見せるだけ）
違うリストなら分けて書いて、繋げるんじゃなくて、
CSSで繋がっているかのように見せる
（つまりリストを繋げるじゃなくて、そう見せるだけ） web作成に挑戦しようと思ってるんだけど。
テキストのおすすめ教えてもらえないかな？
同人活動がしたいのでコードの勉強もしときたいという意味で自作を考えてます
最終的に使うのはWord Pressです
Word Pressを使ってみたのですが自作テーマでしたいと思いましたのでHTMLやCSSの勉強から始めようと思ってます
Word Pressのエディターは使い物にならないと言うことなのでATOMエディターで作成するつもりです
レンタルサーバーはさくらにしました
同人向けらしいので
ATOMの使い方のおすすめ本もあれば嬉しいです。
よろしくお願いいたします。 web制作の事はweb上で勉強した人がほとんどじゃないだろうか。
勉強順序を知りたいなら、はじめてのシリーズでもなんでもいいと思う。
ATOMは知らん ATOMの本って3冊しかない上にオススメできるものでもなく
なのでネットで調べるしかない
同人活動が目的ならそんなプロエディタも必要ないので
とりあえずなにもかも初めてならホームページの作り方系の本と
メモ帳でチマチマ手打ちして覚えた方がいいかもしれん HTML、CSS勉強中なんだけど
padding-buttonだけ違和感ある
なぜunderとかではなくbutton？
不必要なボタン？？みたいな意味になりそうなんだけど Atom は使わない
皆、VSCode を使っている。
質問は、プログラム板のVSCodeスレで聞けばよい レイアウトの仕方で色々試したけど
float
flex-box
grid
どれ使ってる？
個人的にはflexが使いやすいけど、gridが人気なんかね？IE対応がクソめんどいんだが… >>537
普通に作るんだったらflexばっかり使ってる
gridはIEがね flex大好き
floatは嫌い
gridは面倒くさい gridはまだ古いブラウザだと対応してないからなー
趣味サイトなら使うけど仕事では使わん <div class=“north”>
画像とかいろいろ、サイズ不確定
</div>
<div class=“south”>
<textarea class=”text”></textarea>
</div>
.south {padding:10px;}
ウインドウ内の.northを除いた領域に.southを出来るだけ大きく表示して、.textを.south内にできるだけ大きく表示するには.southや.textにどうCSSを指定したらいい？ ブラウザ問題が解消してもgridは流行んない気がしてならない >>541
外側のブロックサイズがきまってないとどこまでのばしていいかわからないかな
仮に body だとすると
body {
margin: 0;
height: 100vh; /* 外側の高さを画面サイズの設定 */
display: flex;
flex-direction: column; /* 子要素を縦に並べる */
}
.south {
flex-grow: 1; /* あまったスペースを拡大する(縦) */
display:flex;
align-items: stretch; /* 子要素をたていっぱいにつめる */
}
.south > textarea {
padding:10px;
flex-grow: 1; /* あまったスペースを拡大する(横) */
}
こんなかんじ？
内側は height:100% でもいけるかもしれないけど
一部環境で flex の内側は高さが聞かないバグがあったりしたから
１度 flex つかったら margin と height は忘れたほうがいいね
あれもうなおったのかな… 縦長や横長の画像があります。
その一部を正方形に切り取って表示したいのです。
例えば横長画像(W500xH1000)の場合、太線部分を200x200の正方形に表示したいのです。
┌───┏━━━━┓───┐
│ ┃ ┃ │
│ ┃ ┃ │ 500
│ ┃ ┃ │
└───┗━━━━┛───┘
1000
同様に縦長画像の場合には以下の部分を200x200の正方形に表示したいのです。
┌────┐
│ │
┏━━━━┓
┃ ┃
┃ ┃
┃ ┃
┗━━━━┛
│ │
└────┘
どうやれば良いでしょうか？
>>537
できることとできないことがあるんじゃないのかな
例えば４つ横に要素を並べるとき
□□□□
前者２つは要素が４つ要素使って詰めないとだめだったと思うけど、
gridだと要素３つで
□ □ □
みたいなことができる
同じように
□ □
□
□ □
みたいな
それに大きなメリットがあるのかどうかはわからんが >>545
ありがとうございました。
三時間やって出来なかった事が
一瞬で出来ました。
助かりました。 >>547
それflexでも出来るよ
画面全部グリッドみたいな構成はgrid一択だけど、他の場合はどちらでもって感じかなあ １番最後は flex だと無理じゃないかな
好きな位置で改行ってのはできないし行ごとにわけると高さを同じにできない この「５」の形なら flex でも２回つかえばできる
外側で縦３分割して１、３段目 between ２段目 center でいい
□ □
□ □
□
こういうのになると厳しいのかな
空要素をいれないと空白を要素と同じサイズにするってことができない 話ぶった切るけど、教えて
トグルボタンとかアニメーションとかcssで実装できるけど、js使ってる？
個人的にcssでできることは全部cssで実装する方がスマートと思ってるんだけど。 <figure></figure>はブロック？インライン？ >>553
ttps://developer.mozilla.org/ja/docs/Web/HTML/Element/figure
フローコンテンツ(前までのブロックに近い要素)に分類されてる >>552
トグルボタンをcssってcheckboxでやるやつでしょ？
それの方が強引だし、いちいち何でもcheckboxなんて応用効かないし嫌だわ
jsが使えない環境に遭遇したら仕方なくやる手法ってイメージ。 >>552
わけわからんjsがいくつも使われてるようだったらCSSで作る
発火しなかったら原因突き止めるの面倒だし cssはクリック関連、スクロール関連にめっぽう弱いのと
トラバーシングで子から親を認識するのができなかったり
結局jsは切り離せない。 >>559
試しに超大手の有名サイトでcheckboxでやってるとこ挙げてみてよ。
普通なら、ほとんどがそれでやってるってことだよね？ checkboxでアコーディオン考えた人はマジ天才だと思う >>560
大手でトグルボタンを使ってるところを探してきてくれ pixiv は CSS でやってた気がする
そもそもトグルボタン使ってる大手があんまりないよね ここって雑談もOKなのかな？
だいたい本スレ（雑談）と質問は別れてるけど
雑談できる場所探しても見つからないしここで雑談してそうだし
雑談してもいい？ WEBデザイナー技能検定っていうのがあって3級取ってみようかと思うんだけど
需要あるのかな？
2ちゃんでないからやっぱり人気ないのかな？ 左右で切り替える、on/off ボタンは、
どちらが、on か、off か、わからない
黒丸を付ければ、on で、
付いていなければ、off なら、わかりやすいけど >>559
ごめん、トグルボタンとアコーディオンを混同してた。
on/offフラグだけならチェックボックスでいいな HTMLの意味的にチェックボックスはフォーム部品なので
何かしら送信する要素でない限り表示切り替えのために使うべきではないんじゃないかな
アクセシビリティを考えても音声読み上げで意味不明なところにチェックボックスがはさまれると混乱するし
トグルに関してはONOFF状態を保持するのに意味があるからチェックボックスを使ってもいいけど
アコーディオンみたいに状態を保持することに意味がないものはフォームを使うべきではないかと >>569
アコーディオン（複数の選択肢から一つを選ぶ）ならラジオボタンだな
複数箇所を広げられるのはアコーディオンではないはず
（複数箇所を広げるならチェックボックス）
>>571
フォーム部品（inputやselect等）は送信しなくても良い
その証拠に<form>の外にかける
> アコーディオンみたいに状態を保持することに意味がないものはフォームを使うべきではないかと
複数のブロックのうちどれかを表示するのだから状態を持っている formの外に書けるって正気かよ。外に書いたらform属性でどのformとの関連性があるかを書かんとあかんぞ。 書けるのと推奨される書き方は違うからね
ガイドラインとかを１度よんでみれば
今後アクセシビリティを無視したりするとSEOで不利になったりするかもしれないし >>573
正気も何もHTMLで正式に認められている
正しいHTMLの書き方 普段スマホ使ってるのにウェブサイトのトグルボタンの使い方がわからなかったことある
普通のラジオボタンがいい
>>566
せめて2級からかと
自分は面接でスキルをうまくアピールできないから資格あった方が伝わりやすいかなぁと思い始めてる > 外に書いたらform属性でどのformとの関連性があるかを書かんとあかんぞ。
不要。form属性ができたのはHTML5からだが、HTML4のときから
formの外で使う事例が仕様に明記されている
https://www.w3.org/TR/html401/interact/forms.html
> 17.2.1 Control types
> HTML defines the following control types:
> buttons
略
> checkboxes
略
> text input
略
> The elements used to create controls generally appear inside a FORM element,
> but may also appear outside of a FORM element declaration when they are used to
> build user interfaces. This is discussed in the section on intrinsic events.
> Note that controls outside a form cannot be successful controls.
訳 コントロールの作成に使用される要素は、一般的にはFORM要素内に表示されますが、
ユーザーインターフェイスの作成に使用される場合は、FORM要素宣言の外に表示されることもあります。
（最後の formの外のcontrolsはsuccessful controlsではないというのは、
単にsubmitできないという意味、リンクが貼られてる） >>574
> ガイドラインとかを１度よんでみれば
そっくりそのまま返す
フォームの外にコントロールを置くのは、
ユーザーインターフェースを作成するための
HTMLで想定されてる使い方 ちなみにHTML5では、ファイルを選択し、サーバーに送信すること無く、
ローカルで処理してダウンロードも可能になってる
参考 Canvas上のイメージを画像ファイルとして保存する方法
https://st40.xyz/one-run/article/133/
また、formのactionを省略した場合、ページ自身へPOSTしてしまう。
だからローカルだけで処理する場合は、
"formの中に入れてはならない" >>574
> 今後アクセシビリティを無視したりするとSEOで不利になったりするかもしれないし
フォームの中に書くのと外に書くので、アクセシビリティに何の影響があるのかわからない
ページの閲覧者にとっては、表示されたフォームに対する処理が
サーバー側で処理されようが、ローカルで処理されようが、関係のない話 仕様でいえばテーブルでレイアウトしたり
HTML内にstyleをかいても何の問題もないが
なぜ嫌われるかを考えよう >>582
今話してるのはフォームの話であって
文書構造とデザインを分離しようとう話とは関係ないです 文書のコンテンツから表示スタイルを分離しましょうとW3Cで推奨されていますが、
コントロールはフォームの中に書きましょうとは推奨されていません checkboxがフォームの中か外かは重要じゃなく
checkboxがあるべきかどうかって話であって
checkboxをおくべきでない場所においてdisplay:hiddenにするのは論外
トグルボタンの場合はチェックボックスに置き換わっても意味的に問題なければどっちでもいい >>585
そんな話はしてない。
チェックボックスを置く場所は、
クリックさせたい場所に決まってる。
それがどういう見た目であるかは関係ない
押したいトグルボタンがあるのなら
その押したい場所にチェックボックスを置くだけの話 ところでチェックボックスっていうのはチェックボックスそのものを
クリックするとON/OFFされるが、チェックボックスに
紐付いた<label>を押してもON/OFFされるのは知っているかね？
このような使い方もHTMLでは想定されている ウェブ制作の現場で変なこだわりもってるやつ多いよなー
工数無限にかけていいなら好きにこだわればいいけど
結局実務になると案件の規模次第で何でもやるわ >>586
それ>>585といってること同じじゃん >>589
そもそも>>585が言ってることがおかしくて
「checkboxをおくべきでない場所においてdisplay:hiddenにする」
なんて話はしてないのです。
いきなり>>585がなにか関係ない話を始めたという認識 で、それとチェックボックスはフォームの中に置かなければいけないか？は
また別の話で、この結論はHTMLでも想定された使い方であり、
フォームの外に置いておいてもOK。アクセシビリティ的にも問題ない。という話 >>588
でもプログラムを書かないで良い分、実装は簡単だったりするわけだよ
UIのテストは大変だからね。なるべくブラウザの機能で対応させたい。 https://www.webcreatorbox.com/tech/myths-screen-reader
> 多くの場合スクリーンリーダーでコンテンツを読み上げるのにCSSが影響します。
> 例えばCSSの display:none が使われている要素は読みあげられないということを知っていましたか？
読み上げられたくないチェックボックスはdisplay:noneすればOK
その場合クリックさせたいボタンはチェックボックスに紐付いた<label>を用いる >>590
全部が自分に対するレスだと持ってるアスペなん？
アコーディオンをcheckboxで実現するかどうかって話もあっただろ
トグルをcheckboxでやるかどうかなんて
そもそもどっちもcheckboxを見えなくするんだからJSだろうとCSSだろうと
HTML側にはどうでもいい話 全部がHTML側だけの話だと思ってるん？
チェックボックス（アコーディオンのラジオボタンも同様）を使うと
状態保持をJavaScriptコードで制御しなくてすむから楽なんだよ
:checked擬似クラスが使えるからCSSとの連携がしやすいし
HTML側とか視野狭くしてないで、
JavaScriptやCSSと絡めた所まで考えなさい。 >状態保持をJavaScriptコードで制御しなくてすむから楽なんだよ
CSSで変なギミックいれると理解してかく側はいいけど
読む側の理解が大変になるからJS使えってうちではいわれてるな
プロジェクト規模の違いや複数人で開発するかにもよるんじゃない？
趣味で書いてじぶんしかメンテナンスしないならCSSだけでできる方が管理はらくだと思う そう、これもまた「人」の問題
技術の良し悪しの話をしてるのに
また「人」の話にすり替えられた つーか、JavaScriptで書いたって、自分で状態を管理して
class属性に反映させて、それ以降は全部CSSで
デザインするんだから比較するなら
自分で状態管理コードを書く + CSSで画面デザイン
VS
何も書かないで良い + CSSで画面デザイン
の2つなんだから後者のほうが楽なんだが
ほんとこの業界は技術力＝知識だよな
知識があれば楽をできる 間違いをゴメンネできないやつがうだうだいってるだけ放置しとけよ HTMLにcheckboxを1個追加して
:checked + でスタイルを書くか
$('#id').on('click', () => $('#id').togglClass('on'));
ってかいて
.on{} でスタイルかくかの違い
理解しやすい管理しやすいってのもCSSになれてるかJSになれてるかの差でしかない + の指定っているのか？
checkbox 自体に疑似要素うまく使ったりスタイル指定してトグルデザインって作れないの？
だとしたら実務では + や ~ 使いまくるのは他人が読みにくいから JS 使うわ >>576
2級は受験資格あるぽくてね
実務経験がいるんだとか
3級は楽勝かな？ 別スレで遊んでいる間にｗ
https://jsfiddle.net/utjxamrw/ チェックボックス版
https://jsfiddle.net/9zku1sat/ jQuery版
そうだよ。この程度ならほとんど変わらん。
だけどJavaScriptで書くとテストしなきゃいけないコードが増えるんだよ。
HTML+CSSだと宣言的にかけるからテスト対象が減る。
それからチェックボックスを使うとアクセシビリティの点でも強い
この場合チェックボックスでON/OFFがわかるからCSSを無効にしても使える。
さらにフォームで値を送る場合でもチェックボックスだから
そのまま値を遅れるというメリットもある
総合的に見ればHTML+CSSを基本にして、
JavaScriptはjQueryを使ってクラスを設定するだけという
使い方にしたほうが良い >>602
> だとしたら実務では + や ~ 使いまくるのは他人が読みにくいから JS 使うわ
それもまた、チェックボックスを使うのが良いか悪いかの話ではなく
「人」の問題にすり替わってる。
他人が読めないから、全部ひらがなで書くわって言ってるようなもん 585だけどトグルの話じゃなくアコーディオンでCSScheckbox使うなって話をしたのに
勝手にレスつけて話を拾った挙げ句延々とトグルの話しかしないアスペ
トグルボタンの場合はと追加でかいてるんだからアスペじゃなければトグルの話じゃないとわかるだろうに >>603
ずっとWEBの仕事してるけど、もし実務経験の証明を求められても自分は証明できない
テキトーでいいんじゃないかな
万が一聞かれたら委託でやってましたーとか
どこかに過去問あったと思うから見てみるといいよ <picture>タグって便利だけどHTMLにメディアクエリを書くのが気持ち悪い・・・
というかsassとかでメディアクエリの値を変数で管理したいんだけど
<picture>のメディアクエリをcssで書く方法はありますか？ pictureにメディアクエリ？と思ったが
そんなふうに使うのか知らんかったわｗ
メディアクエリとCSSは別の概念のもので
pictureのメディアクエリは読み込む画像を
切替えてるだけでCSSとは関係ないものと考えるべきだろう
だから結論としてはあるはずがないだな。
ちなみにこれは俺の案だがCSSと同じように
タグの属性もセレクタで指定できるようになればいいのにって思ってる
そうすりゃinputのplaceholderに長々と同じ文字を書かなくてすむのに
現状でやるならsassではなく何かしらのHTMLテンプレートエンジンを
使うしかないでしょうな >>605
こいつえらそうにしてるけどソース見る限り業務でさわってるとはとても思えん WEB作成し始めて間もないんだけどブラウザの検証から人のホームページのソースを覗き見できるの知って除きまくってるけど
サイトがこの人は手作り出してるなとかWordPress使ったなとかレンタルサーバーブログ使ってるなとかわかる方法あるかな？
どこ見たらわかるんだろう？
この人はライブドアブログ使ってるな！とか知りたい HTMLからその痕跡を消していればわからない
痕跡を消すのは意味がないことだから誰もやらないが >>613
クロームのアドオンにwhats appみたいな名前のがあった気がする
違ってたらゴメソ >>614
セキュリティ上の意味はあるよ
何使ってるかわかればそれに的絞って攻撃されるからリスクが大きくなる
消すことで一定の安全性が確保される
もちろん根本的な対策ではないから数撃ちゃ当たるが当たるまでの数が雲泥の差になる >>613
大抵はわかる
例えばwpなら/wp-content/のような文字列があるし
他も同様 checked属性ってｈｔｍｌ5からだから
今まではレガシー対応考えて、アコーディオンなんてjsでやればいいよって思ってたが
まあ今が考えなおす時期なのかもな
でもこれに限らず、まだcssの方が一部ブラウザで対応してないとか、バグがあるとか散見されるから
そんな見えていないトラブルに後で巻き込まれるくらいなら実装実績のあるjsのがいいやって今はなるんだよね
他人の人柱で安全を確認できた頃に実装しても遅くは無い 主流になってきたらその方法に切り替えると言った感じ
そういう意味ではまだアコーディオンはjsでやるのが主流ってイメージだなあ
大手含めてラジオボタンでやるのが主流になってきたらそうするわ >>613
なんとなく癖はわかる、こともある
コードだけでなくURLのパラメータのつけ方とか >>616
だからそれが意味がないよ。
攻撃なんか自動化してる。
いちいちページ見て何使ってるかなんて判定してない
もしセキュリティに問題があれば攻撃が通るだけ。 >>621
攻撃自動化なんか昔からしてる
その自動攻撃の最初にシステム判定をしてる
そこで判定できればそのシステムに絞った攻撃をする
判定できなければ通るまで全部実行する
システムが判定できてれば数日～数週間で通るのが判定できてなければ数ヶ月、1～2年かかることもある
自動化にもリソースはかかるので判定できなければやめて次のターゲットに移ることもある
別にそのサイトが目的なわけじゃないからね
ターゲットを移さない場合でも時間がかかれば攻撃されてることに気づいて対策もできる
なのでシステムを判定させないことは大事 > その自動攻撃の最初にシステム判定をしてる
その判定っていうのは、実際に挙動を調べるのであって
ページの文字列からの判定はしないよ >>613
WPはwp_～～～ってファイルやそれへのリンクで判別できる
レンタルサーバーブログかどうかはURLなりドメインなどでわかる
ソースのインデントとかバラバラだと大体手書き retinaディスプレイ対応がよくわからないので色々調べてたところ
こんな記述を見つけました。
「100x100の領域に100x100の画像を表示すると
retinaだと100x100xの画像が200x200に拡大されるから汚くなる！」
これって本当ですか？
私の認識だと、200x200には拡大されるけど結局ピクセルの大きさが半分だから
汚くなったりせずに普通のディスプレイと同じように表示されるんじゃないの？と思ってます。
逆に100x100の領域に200x200の画像を表示すれば
普通のディスプレイは半分に縮小されるけど
retinaは200x200のまま表示されて普通のディスプレイより綺麗に表示される。
この認識、間違ってますか？ 例えば「100, 200」という2つの色のピクセルが並んでいるとすると、
retina では「100, 100, 200, 200」となるから、粗く見える
「100, 150, 200, 200」みたいに、計算で存在しない色を補完するなら、よりカラフル
8K などは計算で補完するから、ものすごくカラフル >>628
「100,200」→「100,100,200,200」がなぜ荒く見えるんですか？
２倍にするけど実寸サイズは半分だから以下のようになって結局同じに見える気がするんですけど
「 100 , 200 」
「100,100,200,200」 初心者です
勉強はWs3というHTMLのサイトでします。なんかわからなければHTMLのBeginnerのサイトでします。
AtomやBracketsはプレビュー機能はあると思いますが、PCにインストールせずにGoogleの拡張やオンラインからではできるのでしょうか。
どちらかできる方を選択します。以上のことができればどんなエディターでもいいと思います。 >>627
見る立場の違いやろ
古いiPhone使ってる人にRetina見せたら画面綺麗っていうだろ？
逆にRetina使ってる人に古いiPhone見せたら、なにこれ汚なっ！ってなるだろ？
Retina対応サイト見てて綺麗なのに慣れた所に、
古いiPhoneと同じように見えるサイトに出くわしたら、
なにこれ汚なっ！ってなるだろ？
スーパーファミコンだって今からすれば画面汚いんだよ
100メガショックの100メガの単位はビットでたったの12.5MBしかなくて
少なすぎるという意味でショック受ける時代なんだよ
そういうことなんだよ
何が綺麗かは時代によって変わる。口裂け女が綺麗な時代だってあっただろう
でもまあ拡大するにしてもアンチエイリアスかけるという手段があるわけで
もしそういうことをしていれば単純に拡大するよりかは綺麗になってる
可能性はあるんだがな https://dotup.org/uploda/dotup.org1645180.png
このコードでプレビューに黒点が出てこないのはなぜだろう？
list-style: none;をいれて黒点を消しましょうみたいな課題なんだけどまだ入れてない状態で黒点がないのはなぜ？
よろしくおねがいします。 stylesheet.cssが隠されてるのが怪しいな
それが答えじゃね？ すみません一応CSSのコードも貼っておきます！
https://dotup.org/uploda/dotup.org1645236.png
Prgateでなくエディタを使ってコードをこぴーしてプレビューしてみようかと考えたのですが
皆さんはエディタを何を使っていますか？
brackets
ATOM
sublime text
が3強みたいになってるようですね。
アドビの月額は流石に苦しいので除いてますが
サイト巡ってるとbracketsが良さそうな感じ出してますが >>637
エディタはVisual Studio Code一強だぞ？ >>637
そのエディタが勝手に何か効かせてるとしか思えない。
その証拠に文字サイズや文字の色を指定していないのに
小さくてグレーの色が勝手に効いている。 エディタ論争はMac/Win論争よりも混沌とした世界だから、一強だとか断言せずにオススメエディタのストロングポイントとウィークポイントをサクッと語っておくれよ
VS Codeはとても良いエディタだとは思うけど、結構予想外な挙動をするから設定やカスタマイズが面倒でなぁ firefox62.0でunicodeの絵文字を表示させると色指定が効かないものがあります。
(例)ハートマーク(＆＃x2764;)は着色可
サッカーボール(＆＃x26BD;)は着色不可
htmlのfontタグでもcssのcolorでもだめでした。
着色する方法はありますでしょうか？
IE11では着色できます。 http://tvsyokai.net/akari-morning-psjyunkin/
このページの、範囲選択もできてコンテキストメニューも出せるのに
なぜかコンテキストでもCTRL+Cでも文章コピーできないのは
どういう仕組みなのでしょうか？ レスポンシブデザインをCSSで設定する時の最初の基準ってどうしています？
最初にPC画面を作るのかそれともスマホなのか。
今の主流（流行？）とかあるのかなと 三 ←今、こんなボタンでメニュー開くのが主流だけど、これが廃れたらどんな風になるんだろうか まだ廃れてはないけどだんだん下火にはなってきてる
今はフッターナビというか、アプリにあるような画面下に主要なボタンがくっついてるのが増えてきてる
もちろんヘッダーと同じようにスクロールで隠れたり出たりするやつね >>645
スマホが先
そこにメディアクエリでPC用を記述する
ちなみに一昔前、IE8をサポートしてた頃はPC用を書いてからスマホ用をメディアクエリしてた
IE8がメディアクエリ使えなかったから
IE8切った頃からはスマホが先になってたかな >>644
<body oncopy="return false;"> >>648
ありがとうございます。
やっぱり今はスマホが主みたいですね。 >>651
ありがとうございます。
やっぱり今はサングラスが主みたいですね。 いやいやいや
写真にブレンドモードかけてるだけだからな？ >>648
PCから書くほうが書きやすい僕は異端かな？
どうもスマホ用から書くのに慣れない… みんなPCで確認するからPCを先に作るためにPCから書くよ
モバイルファーストってなんや？ 完全趣味サイトでPCしか想定してないから、Google先生のお叱りはスルーしてるわ
アクセスも少ないけどなー >>658
この場合のモバイルファーストって、モバイルでもコンテンツをちゃんと用意しときましょうじゃないの？
cssの書き方にまで突っ込まれるとか思ってなかったんだけど。 >>648
どちらが先とか考えたことなかった…
いつも同時に書いてる… なるほど PhotoshopでなくCSSのブレンドモードがあるのか
https://fit-jp.com/blendmode/ Kompozerみたいにプレビューから編集できる無料HTML編集ソフトって無いでしょうか？
Kompozerは更新がないのと文字の表示がおかしくなるバグに困っていて他のソフトを探しています
後継のBlueGriffonも試してみましたが画像挿入の際にサイズを指定できないのが不便です。 >>613
cssのアドレスで大体わかるだろ。
livedoorとかwpって書いてんじゃん グラサンは？
グラサンもglassunとかsunglassとかの記述あるの？ >>666
<img src="gazou.jpg" filter="sunglass:rgba(0,0,0,0.8);" > <div style="border-style: solid ; border-color:#d3d3d3 ; border-width: 1px; padding: 10px 5px 10px 20px; background-color: #e6e6fa;">
axcdefg
</div>
このテンプレは文字のバックに色を指定したかったのですが
文字入れると改行ごとに
枠ができるんですけど
どう直したらいいですか？ >>669
意味不明だがエスパーしてみたぞ
<span style="line-height:2em; background-color: #e6e6fa;">
axcdefg
</span> アドブロックで自分に必要のない要素を消しまくっているのですが
Amazonのフッターが非表示にできません
なぜでしょうか？
緑色のエリアです
それとその上に出る「最近閲覧した商品とおすすめ商品」も非表示にしたいです >>672
やはり意味がわからんｗ
枠消したいだけならこれだが
<div style="padding: 10px 5px 10px 20px; background-color: #e6e6fa;">
axcdefgああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div> >>671
スレチだな
何のブラウザか知らんが、アドブロック以外のプラグインでも入れたらどうだ >>674
スレチですか
すみません
Chrome使ってます
他スレで聞いてみます web作成系の動画とか見て勉強してるとさ
解説の人が使ってるのってMACがものすごく多いよね
MACはコード打つような人に向いてる機能でもあるの？ adobeソフトはmacの方が使いやすい気がする
ツール配置の自由度高いしスポイトどこからでも取れるし >>677
コードに関しては特になにも無い
動画編集のノウハウが溜まってるだけ パソコンとスマホの横幅ってどれくらいとってる？
なんか色々考えてこれがいいって言えるのがなくて困った パソコンは最大の中身が1200、普通の中身は960～1000が多い気がする
スマホは600でデザインして、320で確認しながら作って、実際見せるのは375～400なんぼ
何がベストなのか自分もわからない >>683
PCは960～1024pxだな
ユーザーのデスクトップのモニターとノートの主流サイズを折衷して考えるとこれ。
1200px超えると制作負荷が異常に高くなる >>684
スマホは同じく。320pxを最低値としている。 情報量のやたら多いポータルサイトなどなら
1200pxでもまあわかるが、それ基準に作ると
小さいモニターの対応がしんどくなる リキッドで作ってるから画面が小さくなっても問題ないけど
３個の箱が横並びになってるアレはどうしたらいいのといつも思ってる
そもそもなんでいつも３個なのか
最後の一個を下に落としてセンターにすれば良いのか、全部縦並びにした方がいいのか
好みの問題なんだろうけど すみません初心者の質問なのですがSSはります。
https://dotup.org/uploda/dotup.org1647270.png
https://dotup.org/uploda/dotup.org1647272.png
https://dotup.org/uploda/dotup.org1647273.png
.top-wrapperのbackground-imageなのですがpaddingの指定で画像サイズが大きくなる理由がわからなくてお願いします。
少し自分で考えを巡らせ例えばbackground-imageを余白の扱いだと考えてみるとpaddingで変化するのはわかるのですが
そうすると<div class="top-wrapper">は空白状態なのでどこにあるのかという話になってきます
確か要素にはデフォルトで見えない□の枠が備わっているみたいな話も書いてありましたので始まりの左上に<div class="top-wrapper">
の見えない□の枠がありそこからpaddingで□に対する余白としてbackground-imageが貼り付けられたという理解でだいたいあってますでしょうか？
自分でも無茶な理屈だとは思うので間違っていたら正しい理解をお願いします。 >>689
コードのスクショ貼ってもあんま意味ないよん
んでcoverは文字通り
ボックス全域をカバーするように背景画像が拡大されるので
paddingによってボックスの大きさが変わったら
それに合わせて変化するよ >>691
>リキッドで作ってるから画面が小さくなっても問題ない
それは最大/最小の差がそこまで大きくないケースでは？ flex使って左右の要素の高さが何故か揃わない時の絶望感、、、
こねくりまわして裏技ぽい事してやっと揃った
こういう時間がホント嫌だ >>693
そうやってノウハウを積んで少しづつ作業は効率化されていくのだ パスについて質問なんですが現在位置がドキュメントってフォルダの中のインデックスHTML ってとこで画像を貼りたくて
画像のあるフォルダはダウンロードってフォルダの中の4つ奥にあるんですが表記させるにはどうすれば良いのでしょうか？ >>695
パスを書くには
二つのファイルの位置がわかってなきゃダメなんだ
で、その文章ではわからない、と言うことはわかるじゃろ？
プログラムではやりたいことを正確に文章化するのはわりと大事なんだ >>695
ドキュメントとダウンロードは同じ階層にあるとエスパーした
src="../フォルダ1/フォルダ2/フォルダ3/フォルダ4/画像名"
どこかの画像を使い回すことが増えそうなら、
ドキュメントやダウンロードと同じところにassets/imagesフォルダ作ったらどうでしょう まさかWindowsのドキュメントフォルダとダウンロードフォルダでやってるんだろうか え？ダメなんですか？パソコン初心者なんでフォルダの割り振りも分かってないんです そういえば昔、ローカル環境ではみえれるのに
WEBにあげたら画像がみれなくなった！！！どうなってんだ！！って
怒り狂ってたアホがいたけど
相対パス先が安定のユーザーフォルダ >>700
いや本物ですwパソコン買ったばかりでHTML も始めたばかりなので分からないんですけど
WindowsのダウンロードフォルダとドキュメントフォルダにそれぞれHTML ファイルと画像ファイルがあるからどう記述したら表示できるか知りたかったんです(´･_･`) ドキュンホルダーと同じ階層とかじゃないですが
どうやって自動で書きだすかきいてるんです >>702
すまんかった
ウェブページに画像などを貼るときのパスってのは
Webサーバの中でのパスになるので、ウィンドウズのフォルダ構成を使っても駄目なのよ
なので、まず「ore_no_site」ってフォルダをドキュメントフォルダの中に1個作って、その中に
ore_no_site
|- index.html
|- img/
|- image.jpg
となるようにファイルを置くといい、imgはフォルダだ
このindex.htmlにimage.jpgを貼る場合は
<img src="img/image.jpg">
となる んで、ここまで初心だと、文字しか書けない掲示板でいちいち聞いてたら大変なので
「HTML 入門」とかでググると懇切丁寧に図付きで教えてくれるサイトいっぱいあるんで
それ見ながらやって、それでもわからないことが出てきたら、それをここで聞くようにしてみるといいよ いやこれは超初心者向けの本を買って読んでから出直した方がいいレベルだろ
社会人野球の試合に出て勝ちたいのですが、まずルールを教えてくれませんか？レベル すまん、邪険に扱ったような書き方をしてしまった
その方が捗るよって意味です
ごめんなさい >>706
どんな質問にも優しく答えるスレなんで、多少はね？ ググれば基礎の事はいっぱい出てくるしググった方が自分の為になるぞ >>704
ご丁寧にありがとうございます
ちょっとここで聞くのもレベルが低すぎる話みたいですね(´･_･`)
もうちょい勉強してから出直してきます なんでパソコンかったばかりでいきなりHTML書こうと思ったの
そもそも画像はるとか以前にパソコンの中でHTMLかいただけでは他の人からはみえないよ インターネットやってホームページ作るためにパソコンを買った時代だってあるんですよ！ >>695
いんでっくすたんがどこだろうと
<img src="file:///ではじまるパス">
で画像は表記できるよ
画像を右クリックしてブラウザ（IEとかChromeとか）で開いてみて
そのときのURLにある file:// ではじまる文字を src="～" の中にはりつけるんだ
ただし >>711 だけどな >>718
それを今の彼に教えてなんの得があるのかと
優しく教えるスレなのに
なんでお前らそんなにウエメセなの？
そうすると何か良いことあるの？ >>696,704,705,707が俺のした回答だよ！
逆に聞くが
初心者馬鹿にするとどんな欲求が満たされるの？ >>718は全然上目線じゃないだろ
むしろ優しいと思ったが
でも結局、こんなとこで0から教えてあげてたら
次は1を教えて2を質問されるぞ >>704より>>718のほうがはるかに相手のレベル考えた優しい回答だと思うが
どこが上から目線かさっぱりわからん >>724
ごめん、そういうスレだわ
じゃ、じゃあ次はインターネッツの繋ぎ方だな
プロバイダ選びだったり、回線業者とプロバイダの違いや光ファイバーについて頼む・・・ >>726
ほとんどの人がスマホ使ってるだろうから、
キャリアの光回線でええと思うよ…割引あるし… htmlとcssのファイル管理の方法について教えて頂けないでしょうか
folder
-
- 手が震えてダブルクリックが上手くできませんってネタあったな >>728
|- assets/
| |- css/
| |- style.css
|- contentsname/
|- index.html
|- css/
|- style.css
こんな風にして、assetsにはサイト全体で共有するようなスタイルを書くのが基本 インデントが
|- assets/
| |- css/
| |- style.css
|- contentsname/
|- index.html
|- css/
|- style.css
こうだな 3階層以上になるサイトだったらそっちの方が良くない？
SASSとか使ってファイル分けて、ページ毎に固有のクラス名つけてってしても
流石にCSSファイル1つは運用効率落ちるし、部分的な分業とかもしづらくなるし
基本はこれで、ページ数や階層が少なかったりする場合に
ファイル数を減らす方向性を考える、って感じでいいと思うけどなあ >>736
同意。動的サイトじゃ通用しないし
共通パーツになったり、汎用クラスになったりすることがあるのに
後で修正したりするハメになる >>738
10000ページとかあったりしても
1ファイルにするの？？？ >>739
ページ数は関係ないだろ
サイト全体に統一感を出せてるかどうかの話
下手なやつが作るとページごとにいきあたりばったりで
微妙に幅や空白が変えてたりして統一感がない
統一感を出せていれば、必要なスタイルの数なんてたかが知れてる CSSは原則として1ファイルにするもの。
もちろんコレは最終的にそうするって話であって
sassで分割する分には構わない
CSSの使い方をわかってないやつは物理スタイル名を
名前にする。例えば<span class="red">みたいに
ここまで酷いのは少ないけど、本質をわかってないやつは
同じスタイル名だと、すべて同じデザインになると勘違いしてる
例えば、<div class="blog-contents">だとどのページでも全部
同じスタイルになると勘違いしてる。こういうのはCSSの使い方をわかってない。
ちゃんとした理解がある人は、
<div class="blog-list"><div class="blog-contents"></div></div> と
<div class="blog-detail"><div class="blog-contents"></div></div> で
異なるスタイルを適用することができることを知ってる。
<body id="blog-page-id-1234">
<div class="blog-list"><div class="blog-contents"></div></div>
</body>
とすることで、特定のページだけデザインを変えることだってできる。
CSSを複数に分けないとメンテナンスできないって言ってるやつは、
単にCSSの使い方を理解してない証拠でしか無い >>740
でもさー、それよく入門本にも書いてあるけど
実際には、ここのスタイル書き換えたら、どのページに影響あるの？ってなっちゃわね？
いや理想的だとは思うんだけど、実際のところは理想的な全体管理ってなかなか出来ないと思うんだよねー
そういう意味では>>737の言いたいこともわかるなー
代理店「リニューアルします」
代理店「予算が限られてるので、第三階層以下はヘッダフッタだけ変えて、中身はそのまま使います」
なーんてことがほとんどでさー
その度に共有フォルダがcommon、common2、new_common…って感じで増えてって
自社がこのサイトの運用を引き継いだ時点で、すでにサイトが秘伝のタレ化してるなーんて、よくあることじゃん？
まあ、俺が今までやってきたのにそういうのが多かったってだけで
全てがそうだとは思わないけどねー >>741
>例えば<span class="red">みたいに
それってさー、英語わかる人限定の話だよねー、英語わからなければ意味ないっつーか
例えば、左右に並べるブロックが
<div class="left"> <div class="right">
ってなってると怒る人いるけど、これ
<div class="haki"> <div class="kushoto">
実はこれスワヒリ語で右、左なんだけど、スワヒリ語わからない人が運用する限り
これが左右逆だろうが上下に並ぼうが関係ないよねー
あと同じ言葉が言語によって意味変わっちゃうこともあるよねー
redって英語だと「赤」だけどカタロニア語だと「網、ネット」って意味になる、それなら
<div class="red">網</div>
.red { color: #0000ff; }
ってしてもおかしいことはなにもない
つまり、classやidの属性値なんてただの識別子であればいいんだから
内容や見た目にこだわる必要は一切ないと思うんだよねー
まあ理想的ではあるとは思うけどさー >>742
> 実際には、ここのスタイル書き換えたら、どのページに影響あるの？ってなっちゃわね？
適当にスタイル設定してるからそうなる
すべてを.fooクラス以下にしか適用しないように書けば
.fooクラス以外には適用されないだろ
.foo {
.a { ・・・ }
.b { ・・・ }
.c { ・・・ }
}
と書いたものが.foo以外には適用されないのは当たり前 1. サイト全体の共通CSS
2. 各ページのCSS
まず1を適用して、次に2で、1を上書き適用する。
SASS のPartial とか、差分プログラミングのような感じ
例えば、1で赤にしていても、2で青に上書きするなど、
各ページで、変えたい部分だけを書く 自分も>>745の方法だな。
でもできるだけ共通にまとめる
このパーツはこっちのページにも設置してとか
どうせなるんだから 自分も>>745
今は動的やっててモジュール化したパーシャルscssが大量にあるツライ 俺も共通だな
>>745みたいな時は色用のclassを作っておく CSSで上書きかいたときって
先にCSS上で処理されてから要素に適用されるの
それとも要素１個１個に２回スタイルが適用される？
普通のドキュメントページなら管理しやすけれパフォーマンス気にしなくていいけど
SVGでかかれたグラフ上の何千個の点とかにスタイルあてる場合
少しのムダもはぶきたい場合とかもあるじゃん 初心者です よろしくです
テスト---------------------------------------------------------
みたいな感じで右端まで横罫線を無限に伸ばしたい
<hr />だと前後に改行が入るので横罫線のみとなって、文字列を混在させることが出来ません。
(だから、｢テスト<hr />｣としても無駄)
テスト<hr style="display: inline;" />
としても無意味でした。
どうしたらいいですか？ <html>
<style>
.after-line {
display: flex;
align-items: center;
}
.after-line > hr {
flex-grow: 1;
}
</style>
<body>
<div class="after-line">テスト<hr></div>
</body>
</html> はええ
ウェブデザイナーのプロってこの程度はみただけでコード浮かぶもの？ 定番っちゃ定番ですしおすし
flex使った現代風なやり方の他にも
古臭いやり方が何通りもある気がする 現代風といえば疑似要素使うんじゃね
<style>
.after-line {
display: flex;
align-items: center;
}
.after-line:after {
height: 1px;
display: block;
content: '';
flex-grow: 1;
background-color: #000;
}
</style>
<div class="after-line">テスト</div> >>752
ピッタリ上手くいきました
どうもです
ただ、それが、
<details>
<summary><div class="after-line">テスト<hr></div></summary>
abc
</details>
などとなると出来なくなってしまいますが、どうしたらいいですか？ 次これお願いします
----------------------------テスト----------------------------
線は1pxでいいです
出来たら文字と線の間の空きは調整したいです >>758は荒らしなのでスルーして結構です
>>756=>>751ですが、summaryをdisplay: inline; にしても、その中のdivをinlineにしても上手くいきませんでした そりゃ summary が flex の外にあるからね
summary に flex をつければいけるよ
flex は子要素を横１列（だけじゃないけど）に並べる flexで複数段にわたって並べた要素の内側の境界のみ表示させるにはどうしたらよいでしょうか？
○│○│○
─┼─┼─
○│○│○
─┼─┼─
○│○│○
↑こんなイメージです。
tableだとこんな感じ。
<table border="1" frame="void" rule="all" style="border-collapse:collapse">・・・ 各段 flex にするだけなら nth なり not:last-child なりで boprder 指定すればいい
wrapped だったら端になることが検知できないから無理
box-sizing: border-box で padding 0 にして外側に背景色のborderを上書きするぐらい 接戦だった
○│×│○
─┼─┼─
○│○│×
─┼─┼─
×│×│○ Flexコンテナにmargin:-1px、その親でoverflow:hiddenじゃだめ？ >>766 >>767
やっぱnthすか。
右と下をborder有にしておいて、
:nth(3n)で右をnone,
:nth(3n+1):nth-last(-n+3), :nth(3n+2):nth-last(-n+2), :last で下をnone
て感じでしょうか。
幅360pxのスマホ画面にbox(118px)-罫線(3px)-box(118px)-罫線(3px)-box(118px)
というように外側に隙間を作らず画面を目いっぱい使うレイアウトを作りたかった
のですが、なかなか簡単にはいかないものですね。
>>769
要素数が可変の場合、下側のborderを隠すための親の縦サイズの指定が難しくないですか？ 文章の背景に色を付けるやり方を教わったのですが
<div style="padding: 10px 5px 10px 20px; background-color: #e6e6fa;">
</div>
これだと改行が一行余計に取られてしまうのですが解決策を教えてください
ライブドアブログを使ってます >>775
padding: 10px 5px 10px 20px;
これが上、右、下、左の空きの大きさ
お好みの数値に変えるといいよ >>777
言葉足らずですみません、、
>>776でいう
padding:は白い余白の幅のことですよね？
勉強になりました、。
聞きたかったのはコピペした文章をペーストした時
>>776の画像のように
改行がおかしくなってしまうのです。 そりゃまた別だなあ
たぶん中で<p>とかついてて、そのmargin/paddingだろうな
スクショってあんまり意味ないから
HTMLコピって貼るなりできんもんかね >>779 ありがとうございます
文章カットしましたがこんなHTMLでした↓
<div style="padding: 10px 5px 10px 20px; background-color: #e6e6fa;"><div style="padding: 10px 5px 10px 20px;">
ペレス会長は現地時間24日にロンドンで開催されたFIFA</div>
<div style="padding: 10px 5px 10px 20px;"><br /></div><div style="padding: 10px 5px 10px 20px;">
「クリスティアーノは、全てのマドリディスタの心の中に残っている。</div>
<div style="padding: 10px 5px 10px 20px;"><br /></div>
<div style="padding: 10px 5px 10px 20px;">
1950年代の現役時代にレアルで5年連続の欧州王者に導き、引退後はアルゼンチン代表監督など</div><br /></div><br /> それを見やすくするとこうなってる
<div style="padding: 10px 5px 10px 20px; background-color: #e6e6fa;">
<div style="padding: 10px 5px 10px 20px;">
ペレス会長は現地時間24日にロンドンで開催されたFIFA
</div>
<div style="padding: 10px 5px 10px 20px;">
<br />
</div>
<div style="padding: 10px 5px 10px 20px;">
「クリスティアーノは、全てのマドリディスタの心の中に残っている。</div>
<div style="padding: 10px 5px 10px 20px;">
<br />
</div>
<div style="padding: 10px 5px 10px 20px;">
1950年代の現役時代にレアルで5年連続の欧州王者に導き、引退後はアルゼンチン代表監督など
</div>
<br />
</div>
<br />
paddingがつく度にガバガバと空きが出来る
ブログとかのエディタはEnterを押す度にこのpadding付きの<div>を挿入するから行間がすごく開くように見える
行末でShift+Enterにすると<br>だけになる、気がする >>781
ありがとうございます
要するにコピーした文章自体がそうだから
自分で変更しないといけないわけですね？
コピーした文章を
一度テキストなどに貼り付けてからコピーし直す作業がないと
必要ない枠などがが表示されてしまうんですけど
文字をコピーするだけで
どうしてもいろんなHTMLをコピーしてしまうんですね、、 >>784
ごめんちょっと何言ってるかわからない
けどブログの入力画面てこうなってる、でしょ
https://i.imgur.com/6TY4Wp2.jpg
普通に入力してると、Enterで改行したり
画像やリンク貼ったりすると、裏で勝手にHTMLに変換されてんのよ
んで、それが気に入らないときは「HTML編集」のボタン押して
直接HTMLをいじることになる
>>775の背景色がどうたら言うのもそうやったはず
ブラウザ上のエディタで直接やることも出来るはず
けど多少扱いにくいし、ブラウザ上のエディタが作ったHTMLは見にくいので
デスクトップのテキストエディタに一度コピペして
見やすく整形し直して編集するってのは間違ってないと思うよ >>785
HTML側で書くと今度は改行すらしてくれない訳で
無料のエディターなどでテンプレ作っておいて作成したあとコピペして
画像はライブドアブログから後で指定するって方法もあるわけですね
どちらにしても修正という手間は必要なんですね
詳しくありがとうございました！
おすすめの無料エディターあったら
紹介していただけたら、、、お願いします >>786
エディタはVSCodeかAtomでいいんじゃない？
自分はやってないけど、毎日のようにブログ書いてる人は
エディタでマークダウンでわーっと書いてブログに投入してる、んじゃないかな >>787
ありがとうございます。早速使ってみます！ いろいろがんばってみましたが、、、
コンテナに
display:flex; flex-wrap:wrap; justify-content:space-between; margin:-3px 0 0 0;
その親に overflow:hidden;
中身に margin-top:3px;
てやると最終行の中身の数が端数にならない場合に限りいい感じになりました。
あとは、最終行の端数処理がうまくできればいいのですが。。。 >>790
>>772で無駄にやった奴が参考になるかどうかわからんけど
コンテナの幅、アイテムの幅、アイテムの個数、この3つがわかってれば
行数・列数がわかるので
最後の行になるのは、((行数 - 1) × 列数 + 1)番目～アイテム個数番目になる
けど、たぶんアイテムの上と左にボーダー出すようにして
最初の1行の上、nth-child(列数+1)の左を消したほうが速い気がしてきた >>789
ですよね、CSSでできますよね、けど
書き方わからんですたい >>790 のつづき
中身の後ろに（列数－１）個のダミーdivを追加し
width:○○px; height:0px; margin:0; padding:0; border:none;
でできました！！ webデザイナーってやっぱり女性が多いのかな？
ここのスレも女性がおおいのかな？ >>795
開発が絡まない職場は女の園だったよ
毎日雑談できて楽しかった…今は…(´；ω；`) 若い頃この仕事やってて、結婚＋出産で辞めて
子供大きくなったから内職でまたやりたい
っておばちゃん集めて使ってる
夕方近くなるとslackの雑談チャンネルが晩飯メニューの話題で加速する レスポンシブで作るときってコンテンツのmax-widthを固定幅にしてwidth100%とかにするのが基本？
今までメディアクエリでディスプレイサイズごとにwidth書いてたんだけど非効率だよね 画像を左側に置いてその右横に〈h1〉と〈p〉で文章書いていくにはどう表記しますか？
文章の始めは画像の頭のすぐ隣に表示させたい
それを縦に３つ作りたいんです教えて下さいエロい人 >>802
<figure>
<p class="image"><img src="hoge.png"></p>
<figcaption>
<h1>fuga</h1>
<p>hage hage hage hage</p>
</figcaption>
</figure>
figure{
display: flex;
.image{
width: 適宜;
}
figcaption{
width: 適宜;
}
}
タグはお好みで好きなものに変えて
要するに、親になる箱の中に、横に並べたい箱が2つありゃあなんでもいいんで >>803
おー！ありがとうございます^_^
禿げてるんですか？ うわ・・センスないなら
余計な事言わなきゃいいのに >>801
おったよ
新卒同然の若い子らもおったよ
今はおっさんしかいないよ… >>800
簡単にでいいんだけど、どんなパターンがある？ >>809
たぶん誰もピクリとも笑って無いからマジで自分のセンスに気が付いた方がいいゾ・・
昔はそういうのをおやじギャグとか言われてた
それとこれ読んでおいた方がいい
http://dic.nicovideo.jp/a/hoge 十数年ぶりにみたら、hoge.comが別のサイトになってる… 【宗教の国連、ＵＲＩ】 日本軍の魔の手からアジアを救った国連に習い、テロを鎮める神々の連合が発足
http://rosie.5ch.net/test/read.cgi/liveplus/1538013497/l50
世界教師マ１トレーヤ出現の兆し cssとか全く分からないんですけど、ブログでカラム落ち？っぽいことが起きてしまっていて困っているので助けてほしいです。
無料ブログのデザインテンプレートみたいなのがあって、右側に「検索」「プロフィール」「最新記事」などが表示されるように設定してありました。
色々とデザインを触っている間に気付いたらそれらが記事の下に落ちてしまっていました。
調べてみたらcssの問題の可能性が高そうなのですが、私は素人でそういったことに疎いです。
そこでどなたかにおかしい点を指摘してほしいです。
url:fanblogs.jp/ratock
ちなみに、
トップページ以外ではなぜかカラム落ちしないこと
「検索」などのブロックをサイトの左側にするとカラム落ちが発生しないことは確認しています。
不明な点がありましたら分かる範囲で答えます。
どうかよろしくお願いします。 👀
Rock54: Caution(BBR-MD5:842eac59f97f47c0d6fb1bed016df49c) ニートの僕が1000万円あるけど素人で勉強するの面倒くさいからお前ら無料で直せ
はいどうぞ >>816
まだ1000万目指してる段階です。
我ながら安っぽくて恥ずかしい煽りでしたね >>815
<div id=content>略</div>
この直下に<div id=sideBoxRight>略</div>をまるごと置くだけ。
今は
<div id=content>
略
<div id=sideBoxRight>略</div>
</div>
という風にcontentに入ってる >>815
HTML関係ないけど
投稿毎に現在の預金額書いたら良いと思った
せっかく1000万目指してるんだから >>818の言ってる通りだね。
ブログのテンプレってそんなとこまで弄れるんだな～
個人的には文字サイズをもっと大きくしたほうがいいと思う
それとプログラムが好きで無職ならcss/htmlを勉強したほうがいいぞ >>818
本当にありがとう！
…でも設定？見てみたら独自タグとか使った変なhtmlの編集画面しかなくてハードル高かったので左側にサイトボックス移動させてだましだまし使うことにしたよ、、
>>820さんの言うように自分でhtml/cssの勉強してみて独自タグに怯まず編集出来るようになったら治そうかな
>>819
1000万が現実的になってきたら書こうかな、、今は書くのも恥ずかしい…
あと、アクセス集め頑張ったらファンブログの経済部門ランキングで20位入れました。これからめげずに頑張ります
http://fanblogs.jp/contents/category/fanblogs_economy/0001.html 👀
Rock54: Caution(BBR-MD5:842eac59f97f47c0d6fb1bed016df49c) フルスクラッチにしろ、<html> </html> <meta>などの一式備わっているテンプレはないのだろうか VSCode で、HTML ファイルで、! と入れると、Emmet の入力補完で、以下が展開される。
それか、よく使うコード片を、スニペットに登録しておくとか
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body></body>
</html> html テンプレで検索すればいくらでもでてくるじゃん
合ってるか合ってないかは自己判断だが
あとは各IDEにテンプレ入ってるね
それぞれ違うけど >>823
こういうほんとに基本要素だけのテンプレってなかなかないよね。 シングルページ vs 複数ページ
悩む。最近は前者が大半？
サイトの内容によってそれぞれに向き不向きがあるんだろうか。 >>828
んなもん、どちらかで悩むもんでもない気がする
提示しなきゃならん内容や見る人を考えて選択すればよいものであって >>821
普段から色々な金融・経済・投資のブログは見まくってるけど
そんな中身の無いサイトが上位にくるなんて悪害でしかない
小手先の小細工なんて誰の役に立つのか 最近のサイトは複雑に作られてて
勉強の参考にできないね
PHP勉強中だけどPHPが使われてるサイトが見当たらない
<?PHP
?>
であらわされるんでしょ？ liタグは絶対絶対olないしulタグで囲まないとダメですか？文法的にもseo的にも >>797
デザイナーと開発って何が違うの？
開発って言われるともうソフトやアプリの作成のイメージになるけど >>836
最近はデザイナーも開発に含まれるところが増えてるけど
自分はバックエンドやインフラのエンジニアを開発と呼んでる
HTML組んだ後にphpやらなんやら組み込まれて返ってきたものを修正して返すを繰り返しをやるところは女性少ない
デザイン要素ないもんな 画像の上に画像を重ねるのはpositionとか使う以外にどんな方法ありますか？ >>838
backgroundならいくつもかさねられるよ >>832
PHPってのはサーバのなかで動くプログラムなんだ
んでPHP is Hypertext Processorっていうくらいで
そのプログラムでHTMLを出力するもんなんだ
たとえば
<body>
<header><h1>hello</h1></header>
<div>
<?php
for($i=0 ; $i<3 ; $i++){
echo "<p>world</p>¥n";
}
?>
</div>
</body>
っていうHTMLファイルをブラウザがサーバにリクエストすると
サーバ内で<?php ～ ?>の部分がPHPコードとして実行されて
<body>
<header><h1>hello</h1></header>
<div>
<p>world</p>
<p>world</p>
<p>world</p>
</div>
</body>
っていうHTMLになって、サーバからブラウザへ送出されんの
だからソース見ても<?php ?>ってのは書かれてないんだわ
もし書かれてたらそれはサーバの設定ミスってPHPが実行されないようになってる
あとPHPって20年くらい前からあるんで、そんなに最近じゃないかも >>828
基本は複数ページ。
フレームワークの本では必ず、各ページを分けて作って、ルーティングする
シングルページは例えば、オンライン人狼の「るる鯖」みたいに、
5秒毎に、全プレイヤーの会話を取得するなど、ページの一部(会話欄)だけ変わればよいものなど >>839
ありがとうございます
ただpタグの中に入れて画像を表示させたいんですが
pタグが空っぽなので画像や背景色が表示されません
適当に文字入れたら出るんですけど何も文章入れずに表示させるにはどうすればいいんでしょう？ >>844
padding-topで適当な値を入れとくれ >>845
おぉ！出来ました！！ありがとうございます^_^ HTML5において各要素がインライン要素かブロックレベル要素なのかを確認する方法を教えて下さい favicon icoだと表示されんぞ！！ pngだと必ず表示される。 >>847
重ねてすみませんが
background imageで画像を重ねる時は親要素と子要素分けてきじゅつしますか？
親要素の背景の真ん中に画像を重ねたいんです >>834
ダメです。
私に親はいません私は土から自然発生しましたってくらいダメです。
>>848
ＨＴＭＬ5ではその概念は無くなりました。
但し、改行するか否か等の風習は残っているので、
ここで確認してください
http://www.htmq.com/htmlkihon/005.shtml >>851
親子分けて書いたらズレちゃうんじゃないかな
pに背景つけてるなら、
background:
一番上の背景,
真ん中の背景,
一番下の背景;
って書けば同じ位置に重なるよ
グラデも重ねられるよ >>853
一緒にしたら消えてしまうんですけど泣
あと画像の幅とか高さも一緒になりませんか？ HTMLでLaTeXみたいな数式番号って作れますか？ >>854
重ねる画像は透過してる？
背景色を書いてる場合は一番下にして
background-sizeに同じ数字書いてみて 多数のimgを碁盤の目のように並べる場合、
align-content: flex-start;
でやるのと、
display: flex;
flex-wrap: wrap;
でやるのと、同じような結果になるのですが、
どっち使っても良いですか？ このサイト（http://craverse.com/）のように
フォームの中の値をページ移動しても維持したいのですが、
どうすればいいんでしょうか？ >>861
Formだからpostに値を渡して遷移先でそのpost値をinputのvalueに設定している postはサーバーに送信されるから、サーバーで受け取って次のページを表示させるときに一緒にinputのvalueにpost値を設定しているわけ
つまりhtmlだけではできない（はず） >>862
>じゃあ好きなほうでやればいいじゃん
そうなんですが、
なぜ同じような機能が二つもあるのかなあ
と疑問なのです。 始めてそろそろ1ヶ月だけどcssが難しい
なんで適応されないのか分かんないです(´･_･`)
みんな簡単にやれてるのかな >>865
Flexアイテムのクロス軸方向の幅ないし高さが不揃いの時は違う挙動になるんじゃないかな 初心者なんだけど
WEB作成する上でPHPて必須かな？
PHPは自分のPCのみでの動作テストができないらしく特別な環境が必要だそうで
勉強使用にも答え？が見れないのでは勉強ができない。
そして、いまいち情報量が少なく古い情報ばかりが出てくる
なので、もし代替的にできるものがあるならそちらにしたい。
PHPでできることはジャバスプやPythonやRubyなどで可能なのでしょうか？ >>868
大雑把にいうと、どの認識も間違ってるよ
必須であるかどうかは作りたいものによって変わるし
環境作ればどこでも動くし
初心者向けの解説は掃いて捨てるほどあるし
フロントエンドではできないことをサーバサイドでやるためのものだよ >>868
あとJavaScriptはブラウザ側で
その他はサーバ側で動かすものなので
並べて考えるのも間違ってるよ
なんだジャバスプて ｒ'ﾟ'=、
/￣`''''"'x、
,-=''"`i, ,x'''''''v'"￣`x,__,,,＿
＿＿,,/ i! i,￣＼ ` 、
__x-='" | /ヽ /・l, l, ＼ ヽ
/（ 1 i・ ﾉ く、ﾉ | i i,
| i, {, ﾆ , .| | i,
.l, i, } 人 ﾉヽ | { {
}, '、 T`'''i, `ー" ＼__,/ .} |
.} , .,'、 }, `ー--ー'''" / } i,
| ,i_,iJ `x, _,,.x=" .| ,}
`" `ー'" iiJi_,ﾉ >>873
セクショニング・コンテンツには見出しは必須、と考えていいと思う >>868
https://www.lancers.jp/magazine/16424
これでも見てくれ。
HTMLとCSSだけでもウェブサイトは作れるけど、やれることは限られるってことだよ。ようはただ見せるだけのサイトになる。
PHPのようなサーバーサイドスクリプトはサーバーありきで動くため、MAMPみたいなローカルに仮想サーバーを構築するものが必要。
とは言ってもただで手に入れられるからそんなにハードルは高くない。
サーバーサイド側のjsとしてNode.jsがあるけど、普通のjsでさえよくわからないと言うのなら、無難にPHPやRuby触ってみればいいんじゃないかな。 >>872
それは ジャバスプ ではなく はいだスプー >>875
ありがとう！
Progateで勉強してるんだけど、codeの打ち方などは学べるけど
課題で打ち込んだcodeをいざ自分のPCで試して見ようと思うどどうしていいかわからなくなる
HTML＆CSSはVScodeで作ったファイルをブラウザ指定してクリックするとそのまま表示できて確認できるんだけど
PHPは無いものとしてあつかわれてしまう。
そこで調べてXAMPPというものを使ってローカルホストで表示させるといいとされてPHPファイルを表示させたら表示はできたんだけど
HTML＆CSSのなかにPHPを組み込んだcodeファイルを表示する方法がみつからない。
Progateではindex.phpとstylesheet.cssとsent.phpの3つのファイルで作られていてHTMLファイルがない理由もわからない
PHPってHTMLに組み込む書き方って書いてた気がするけどHTMLがないと組み込めないという矛盾に悩んでる。 Ruby なら1行で、自分のPC 内に、Web サーバー(WEBrick)を起動できる。
ruby -run -e httpd . -p 8080
フレームワークでは、Ruby on Rails が定番。
でも、HTML, CSS, JavaScript も必要 Ruby On RailsでできることはPython Djangoでも出来ると思うんだけども、Rubyの存在意義ってなんだい？
Python覚えたほうがデータサイエンスでは圧倒的に有利なのに >>878
busyboxでも１行でできることを何自慢してんの？
busybox httpd -p 8000 -h . rubyはそんなことすら自慢しなけりゃならんのか…追い詰めちゃってごめんね。
python -m http.server 8000 >>878,880,881
そのサーバでPHPを動かすにはどうしたら良いですか？ PHPをCGIモードで動かせばいい
他は知らんが、busybox httpdはCGIに対応している 今と時にそんな事言ってたら仕事にならない
趣味ならやんなくてもいいんじゃね もうスマホはpxでやらなくなった
ぜーんぶvw
ただcalcが使いにくくなる罠がある 縦長レイアウト難しい
どうしても凡庸なデザインになっちゃう 縦長レイアウトってあれか？
お悩み相談、解説、使用者の感想ときて
最後にお買い上げはこちらって書いてあるあれ ショートハンド積極的に使う？
わけわからなくなるから、あんまり使ってないんだけど。 margin: 1px solid black; をショートハンド使わずにかけと言われたら
気が狂いそうになるｗ 個人サイトではstylus+nibのショートハンド使ってる。 >>894
borderかな
まあこれ禁じられたら困るわな >>896
sassで言うところのcompassみたいなもん >>893
ショートハンド使いたいんだけど前に書いた人が全部書いててツライ みんなショートハンドガツガツ使ってるな
俺はわけわからなくなる… >>901
border: 1px solid #ff0000;
これを
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff0000;
border-right-color: #ff0000;
border-bottom-color: #ff0000;
border-left-color: #ff0000;
と書いてるのか！ borderやmargin/paddingなんかはショートのほうがわかりやすい、気がする
上から時計回りって覚えときゃいいんだよ
animationとかはバラで書いたほうがわかりやすいかもしれない
引数多い上に省略可能だから 文章タグの中にimgタグを入れて出す場合は画像と文章の間に余白入れたり出来ないんですか？ PHPはサーバーサイド側の言語っていうけど
HTMLは？何側なんだろうと思うんだよな
どちらもサーバー必要じゃんと。 HTMLはマークアップ言語だろ。プログラム言語と違って
動くわけじゃないんだから何側（で動く）とか言えるわけがない >>910
HTMLはサーバなくても、レンダラさえあれば使えるよ
Windows98あたりでは、デスクトップやエクスプローラに使っていたよ
最近だと、デスクトップアプリの画面をHTML/CSSで作る
Electronっていうフレームワークがあって
テキストエディタのAtomとか、メッセージのSlackとかがそれで作られているよ >>911
あーそういうことか
なんだか異常に腑に落ちたわ、ありがとう HTMLだって言語は言語
解釈して処理するのがサーバ側かクライアント側かということ 解釈して処理してるのがどちらかで考えたらクライアントサイドでしょ
サーバーはテキストを送信してるだけ HTML,CSS,JavaScriptはサーバーはファイルの内容を送信するだけで処理はクライアントだから「クライアントサイド」
PHPやCGIはサーバーが処理して結果を送信するからサーバーサイド
それだけのこと すみません、
犬のアイコンのエディターの名前わかりますでしょうか？
昔使っていたのですが失念して、、 クライアントサイドって言葉の存在を知らなかったぽいな 初心者なんですけど、ホームページをスマホ画面に対応させるツールでオススメはありますか？
どれが良いのか分からないのでお願いします >>923
スマホが流通し始めた頃から
それのサービス化を目指した会社は
ことごとく散っているなあ ブログの途中に広告を出したいのですが
http://ruggerman-kintore.com/supplement_kouza/carbodrink/
このブログの中ほどにヴィターゴ CCD 粉飴と
枠ができ下にamazonと楽天のボタンがあります。
こういうのを作りたいのですがテンプレなどあったら教えて下しませんでしょうか
お願いします 数学において数式に番号を付ける際、
y=f(x) ---------------- (1)
みたいな感じで横に伸びる線を書くことはよくありますが、HTML上でこれを実現したいです。
素朴に思いついたものとしては
<ul>
<li>y=f(x)<hr style="display:inline" /><span style="float:right">(1)</span></li>
</ul>
ですが、これは正しく機能しません。
どうすれば良いですか？
要望としては
- ブラウザのサイズに応じて自由に(無限に)伸縮する横線で、
数式番号(上の例で言えば(1))へ繋がる横線(くっついていても、いなくてもどちらでもいい)
- きちんと一行に収まる。改行していびつな形になるのはダメ
です。 はい、お前ら無報酬でやれ。休みなど関係なく今すぐに。 >>923
HTMLのみでホームページをつくれば
スマホ対応バッチリ！ PCでは画像の横に文字
スマホ用画面では画像の下に文字が配置されるようにしたいのですが、どうすれば良いでしょうか
スマホでも無理矢理PC画面のように表示されて見にくくなってしまいました
>>932
flexをメディアクエリで切り替える。
縦並び、横並び、順番などflex関係のcssで色々操作できるよ >>933
それだけじゃわからないのでもっと詳しく教えてください >>933
ありがとうございます！！！！！！！！！！！！
934≠932なので上の人は無視してもらって構いません 横並び縦並びを変えるのはflex-direction、
順序はjustify-content: flex-end とかで間接的に変えるか、orderを使う。
メディアクエリはまぁググってくれ 現在の行について、行全体をdivやspanで覆わずに、残りの行全体を占有する方法ってありますか？
例えば、現在の行について
あいう
とあった場合、｢あいう｣やその親要素に対して何もすることなく、｢あいう｣より後の残った行の幅全体を使って｢えお｣を記載する方法です。 新規の行で文字を書いていく時って、
―――――――――――――――――――――――
｜ ｜
―――――――――――――――――――――――
みたいな感じで、右端までいっぱいに領域が確保されていて、
―――――――――――――――――――――――
｜あいう□□□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――
｢あいう｣と書いた後でも□□□の部分が残りの行として残っていると思うんですが、この｢□□□｣全体を確保(？)したいのですが
どうすればいいですか？ float:rightだと
―――――――――――――――――――――――
｜あいう□□□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――
ではなく
―――――――――――――――――――――――
｜あいう■■■■■■■■■■■■■■■■■■□｜
―――――――――――――――――――――――
になってしまうからダメなんです
■の部分の領域は取らず、出来合いの□幅になってしまうんで。 あいうを float:left にして のこり div かけば自動的にめいっぱい使う
あるいは親に flex つけて flex-grow: 1 にしても自動的に残り全部使う やっぱり、行全体を占有するってしたいときは行全体を一旦divなりflexなりつけるなりしないといけないんですかね ん？どこに偉そうな言い方があったの？
｢～なんですかね｣が偉そうな言い方？ > ～なんですかね
読み方によっては、不満そうな印象を持つかもね
そこから、
「回答してくれたのに何が不満なんだ」→「偉そう」
という感じで展開していくことは考えられる
俺としても、丁寧語を使い慣れていない印象は受けるかな
というのは、丁寧語とくだけた表現が入り交じってるから
「語感が統一されていない」というだけで、悪い印象を持たれやすいよ
たとえ自分に悪意がなかったとしてもね
言葉遣いで損をするなんて、もったいないから
丁寧語か、くだけた表現か、どちらかに統一した方が良いと思う
あと、質問で書き込む時は、
解決するまでメール欄を空欄にするか「age」を入れて書き込んで欲しい
日付をまたぐ時は、名前欄に1回目の書き込みのレス番を入れてくれると助かる >>944は気にならないけど>>946は偉そうだと俺も思う
言い方の問題じゃなく普通質問する立場だったらそういう印象与えてすいませんっていうとこだろ 回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！ ワッチョイつけることを検討したほうが
良いかもという気がしてきた >>940
何故囲うのがダメなのか聞いて良い？
PタグとBRタグで構成できない特別な理由があるの？ >>940->>942
どうしたいのかがよくわからない。
どうしたくないかを図示するのではなく
どうしたいかを図示してほしい
■はなんなの？「えお」の部分？
こうしたいの？？
―――――――――――――――――――――――
｜あいう□□□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――
―――――――――――――――――――――――
｜えお□□□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――
それともこうしたいの？
―――――――――――――――――――――――
｜あいうえお□□□□□□□□□□□□□□□□□｜
――――――――――――――――――――――― 親に何もつけずに
あいう<span></span>
とかいて span のとこをめいっぱい広げたいってことだろ
ただこんなマナー悪いやつに答えるなよ
いくらそういうスレだからって不愉快すぎる 似たような質問で縦方向に残りの領域を占有したいんですが
（自分は親にflexをつけられないとかいう制限はありません）
親に１度でもflexがあると height:100% ってきかないんですか？
<div style="display:flex; flex-direction:column;">
<div>ヘッダ</div>
<div style="flex-grow:1">
<div style="height:100%">
<div style="height:100%"></div>
</div>
</div>
</div>
みたいにかいても flex-grow:1 の div までは高さがあるんですが
その子孫要素は height:100% 指定しても高さが０になってしまいます
１度でも親に flex を使ってしまうと
子孫要素全部 flex + justify-content:stretch とか flex-grow とかで広げるしかないんですか？ flexbox楽だけどほとんど使うことなくね？
ヘッダーのタブメニューくらいだし >>957
flex-grow:1 の divにもdisplay: flexを指定すれば？ grid嫌いだしfloatもっと嫌いだしflexばっか使ってる >>959
サイドバーとかも？
何故かpx指定したいんだよな >>958
横にものを並べる時
ほぼ全てに使ってると行っても過言ではないくらい使う
古いIEもターゲットなのでfloatでやってください
とか言われたら少し涙ぐむくらい使ってる >>958
真ん中寄せが楽だからなんにでも使ってる >>960
やっぱりそうして子孫全部に flex つけるしかないんですね
ありがとうございます 末端行は左寄せにする事の方が多いんだが
そうなるとfloatのがｽﾏｰﾄだよな？
123
4
ってする事多くない？ どうやるの？
flexって好きな位置でのwrapと
複数行にわたる縦幅の一致ができないよね
それさえできれば万能なのに >>969
縦幅の一致ってクロス軸に対する一致？
align-itemsじゃダメなの？ >>969
好きな位置でもできるし複数行のもできるけど
要はGridみたいなのってことだろ？ >>970
いや複数行間で一致
１行目が高さ100pxの要素で
2行目に200pxの要素があったら
自動的に１行目も200pxの要素にしたいみたいな感じ
外側を400pxのfixedにして等分配ってのはできるけど
auto-height で子要素最大の高さにあわせるみたいないわゆるグリッドは無理でしょ >>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 の等サイズの四角形に配置できます？ CSSにおいて、HTMLの要素内に記入された文字列を受け取る事って可能ですか？ 親が要素Xであるような子要素Yのセレクタは
X Y
ですが、
子要素がYであるような親要素Xのセレクタはなんですか？ wwwの読みかたは？
一般人「だぶりゅーだぶりゅーだぶりゅー」
げぇじ「わらわらわら」
他界系「わーるどわいどうぇぶ」
転載「すりーだぶりゅー」 >>978
CSSで先読みが必要なセレクターはまだ実装されていないから無理。
それにあたるものとして:has()が提案されてるけど実装したブラウザはないのでjsでやるしかない >>972
あぁ、そりゃ無理だね…
floatでできるの？
全然思いつかん 自分も動的サイトが主流だから
要素の数・高さが不定になるケースが多いわ
何が来ても大丈夫なようなcssを予め組まないといけないから
結局flexだけでは難しいというイメージだな
>>968の具体的回答は知りたい（動的前提で） いやできないと思う
できたら万能なのになーってだけ
しかもわりと使いたいケース多いし 複数行の高さ揃えはいまのCSSだとどうやっても無理じゃね
任意位置改行は float か inline-block なら<br>はさむだけだけど flex は無理じゃね >>986
試してないけどmargin-right伸ばすか空のアイテム置くかで出来ない？ >>984
968が何に対してかわからないけど、stretchで等分幅を維持しつつ、最後の余りは左寄せにしたいなら、親要素のafterにflex-glowを多めにとって余り部分を埋める方法があるけど、この場合上の行と余りアイテムの幅は等しくならないやね。 さいきん４Kモニタとかそれ以上のモニタもわりと安価でではじめたし
いつまでも1000pxとか固定幅とってるわけにもいかないんだよね
auto-size と wrap 使ってかないと１元ソースで 400px～4000px まで対応できんわ 968だけど、GridがIE11が未対応多いから俺はflexでやってるんだけど、要素不定の高さでも、固定高さでもどっちでもやってるから何ができないのかわからん
あとwidthとheightとmin-widthとflex使う
flex-glowは使わん │□□□□□│
こうなってるやつが
│□□□□│
│□ │
こうしたいの？ できるなら >>973 に答えてあげればいいんじゃないの >>993
widthもheightも一切指定なしって言われてるから無理 >要素不定の高さでも
height指定したら不定じゃないじゃん
要は子要素の１番大きいサイズにあわせた等サイズブロックを
wrapでならべたいけどflexだけじゃできないってことだろ めんどくせーから>>973ができるか だけでいいよ
これができれば途中の改行と複数行の高さの一致を「flexの機能で」できたってことになるかと 流れも全部読めよアスペかよ
>>972 読んでそれになるんだったら日本語勉強したほうがいい このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 88日 23時間 26分 10秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
