HTML/CSS のどんな質問にも優しく答えるスレ 33
: Name_Not_Found [sage] 2018/07/11(水) 12:20:52.58ID:??? ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです 類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK 分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を age にすることをおすすめします。 回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!! 終わった話を蒸し返すやつは このスレにくるな!!! 自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!! 質問側も節度あるレスで!質問前にスレ内を検索しましょう ■次スレについて 基本的にレスナンバーを取った人(立てられない場合は次の宣言者)が立てて下さい 重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(を取った場合も) 立てられない事が予め分かっている場合は、付近の書き込みは自重しましょう ■前スレ HTML/CSS のどんな質問にも優しく答えるスレ 32 ttp://mevius.5ch.net/test/read.cgi/hp/1521035557/ ■関連スレ Webサイト制作初心者用質問スレ part249 ttp://mevius.5ch.net/test/read.cgi/hp/1529144063/ ■HTML HTML Living Standard 日本語訳 ttps://momdo.github.io/html/index.html ■CSS Selectors Level 4 日本語訳 ttps://triple-underscore.github.io/selectors4-ja.html : Name_Not_Found [sage] 2018/07/11(水) 12:43:55.43ID:??? AI によるHP自動生成 : Name_Not_Found [sage] 2018/07/11(水) 13:35:08.40ID:??? ベンデープレフェックスを削除する場合、なにかに置換するんですか? ただ削除すればOK? -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; こんなので上3行をただ削除? : Name_Not_Found [sage] 2018/07/11(水) 14:00:10.28ID:??? 1乙これはポニーテール云々 : Name_Not_Found [sage] 2018/07/11(水) 14:00:31.68ID:??? はい : Name_Not_Found [sage] 2018/07/11(水) 15:38:07.04ID:??? 乙カレー! : Name_Not_Found [sage] 2018/07/11(水) 20:23:34.07ID:??? >>前スレ992 (a)前者は大丈夫で後者はダメなのか、というか (c)前者は試してない、後者はダメ 、というか (a)は同一ブラウザでサイズは変わります (目的の位置は変わりませんが自分で書き換えることは可能です) 自分のページのコードに組み込んではいません js使えば簡単に制御できますが使わない条件ですので : Name_Not_Found [sage] 2018/07/11(水) 23:04:52.24ID:??? >js使えば簡単に制御できますが使わない条件 もちろん、「clickすると要素のサイズが変わる」っていうjsの部分は実際には組み込む必要なしだよ 単に、>広告のサイズが変わる という質問の部分をJSで再現しただけだから (jsfiddle上でいちいち手動で要素の幅を変更して、サイズ変更後も位置を保てるか? を再現してたら煩わしいだろうと思ったので) 最小構成はこれ ttp://https://jsfiddle.net/j96khbep/ "> ttps://jsfiddle.net/j96khbep/ これで灰色の要素が真ん中に表示されてれば、クロスブラウザの問題はひとまず置いといて 使えるのではと思う そもそも質問の意図が : Name_Not_Found [sage] 2018/07/11(水) 23:19:25.96ID:??? あるクラスをbody内のすべてのdivに適用させたいのですが、一つ一つ指定しないで適用する方法はありませんでしょうか? : Name_Not_Found [sage] 2018/07/11(水) 23:49:14.20ID:??? 一つ一つ要素を指定、というのがどういうレベルなのかわからないけど jQuery使えるなら $(document.body).find('div').addClass('hoge'); 使わないなら var elms = document.body.getElementsByTagName('DIV'); とやってelmsをループさせて云々すればいいと思う : Name_Not_Found [sage] 2018/07/11(水) 23:51:23.73ID:??? cssのみでは実装できない感じでしょうか? : Name_Not_Found [sage] 2018/07/11(水) 23:51:25.06ID:??? 補足 htmlが特殊な入れ子になってなければjQuery版は $('div').addClass('hoge'); でもおk : Name_Not_Found [sage] 2018/07/11(水) 23:55:57.11ID:??? CSSで既存divにクラス名を追加? : Name_Not_Found [sage] 2018/07/12(木) 00:05:10.38ID:??? セレクタに「div」って書けばいいんじゃね? : Name_Not_Found [sage] 2018/07/12(木) 00:28:11.56ID:??? なるべくcssのみで完結させたいんです。 そうです。 その追加するクラスはプラグインのものなので、どうにもこうにも : Name_Not_Found [sage] 2018/07/12(木) 00:33:41.47ID:??? CSSで既存divにクラス追加なんて出来ないぞ。 プールに生卵沈めても温泉卵にならないのと一緒。 htmlにあらかじめ書くか、jsで後から付加するか。 htmlにあらかじめ書くってのにはサーバーサイドで処理するようなのも含む。 : Name_Not_Found [sage] 2018/07/12(木) 00:55:16.28ID:??? jQオジサンわいてますやん : Name_Not_Found [sage] 2018/07/12(木) 09:39:45.34ID:??? そういう書き方は混乱の元だから止めた方がいい というよりそもそもclassの意味合いから外れるし それかユニバーサルセレクタでそのclassの内容を全指定とか : Name_Not_Found [sage] 2018/07/12(木) 12:51:13.58ID:??? body>div{あるクラスのスタイル} : Name_Not_Found [sage] 2018/07/12(木) 13:44:21.22ID:??? 何故にそこまでclass指定を拒む必要があるのかそこが理解できない コード的にもわかりにくだけだ : Name_Not_Found [sage] 2018/07/12(木) 14:27:56.81ID:??? >その追加するクラスはプラグインのものなので だそうだし、例えばそのプラグインを使うときに $$.red()みたいに指定するとred関数内部で '.プラグイン独自のクラス名'を使うっていう仕様なんじゃないの もしくは、プラグインから指定されたクラス名を使わないといけないとか。 なのでbody>divでいいじゃん、という指摘はそもそもプラグイン使わない方法なので的外れな気がする プラグインでセレクタ設定できたり改変できるならしらんけど : Name_Not_Found [] 2018/07/12(木) 16:16:37.37:LYauEbVP さっき寝ぼけて Chrome ブラウザの javascript で タグのid名.style.top = 0; とか書いたら有効だった・・・、 document.getElementById(〜) って要らなくなったのでしょうか??? : Name_Not_Found [sage] 2018/07/12(木) 16:28:02.59ID:??? > タグのid名.style.top = 0; とか書いたら有効だった・・・、 古い書き方 : Name_Not_Found [sage] 2018/07/12(木) 17:05:37.94ID:??? .red って指定すれば、赤色になるようなプラグインはあるよ ウィジェットなどもそう : Name_Not_Found [sage] 2018/07/12(木) 17:37:34.13ID:??? 何が言いたいのかがわからん : Name_Not_Found [sage] 2018/07/12(木) 18:27:03.33ID:??? 最初からいらないよ IDは たぶんNetscape4くらいまで遡っても動くと思うよ : Name_Not_Found [sage] 2018/07/12(木) 20:06:43.96ID:??? 左にメニュー、右にコンテンツというWEBサイトの場合、左のメニュー部分を コンテンツ毎にコピペするのは死ねるのですが、今時としてはどのような実装方法が使われるのでしょう? サーバーサイドにwordpressなどなにかしらのシステムが導入されているといったことは 一切ない、一から素でポチポチhtmlを書いてるスタイルです。 SSIやiframeは分かりますが、今時のトレンドってなんでしょう? : Name_Not_Found [sage] 2018/07/12(木) 20:25:39.46ID:??? <div id="status"> と window.status ってどっちが優先されるんですか? 新たに、DOMの仕様で window.hoge が追加された時 <div id="hoge"> があったら困りませんか? : Name_Not_Found [sage] 2018/07/12(木) 22:45:05.86ID:??? 困んないよ 上書きされるだけ : Name_Not_Found [sage] 2018/07/12(木) 22:56:47.97ID:??? 上書きされれば困りますね。 なんで困らないなんて嘘つくんですか? : Name_Not_Found [sage] 2018/07/12(木) 23:33:11.10ID:??? なんでー 変数(プロパティ)は上書きできるもんじゃん : Name_Not_Found [sage] 2018/07/12(木) 23:40:59.88ID:??? だよな。俺もjsでは変数は全部グローバルにしてるわ。 色々なところから読んだり書いたりできて便利。 本来これが普通。ローカル変数は甘え。 : Name_Not_Found [sage] 2018/07/13(金) 00:25:35.31ID:??? そりゃ上書きを想定してないからだとしか ブラウザによって、プロパティがあるかどうかは違いますからね 上書きされるかもしれないし、されないかもしれない こんなんじゃ困りますね : Name_Not_Found [sage] 2018/07/13(金) 02:07:26.91ID:??? それライブラリ入れたら死ぬやつ : Name_Not_Found [sage] 2018/07/13(金) 03:14:00.99ID:??? なんでーなんでー windowとかdocumentは出来ないけど 基本的には全部上書きできる仕様じゃん : Name_Not_Found [sage] 2018/07/13(金) 09:54:43.71ID:??? 上書きできちゃったら想定と動作が変わるから危険ですね : Name_Not_Found [sage] 2018/07/13(金) 13:32:42.38ID:??? 故意にやることもあるけどな。 toStringの書き換えでlogしたときの文字列化挙動を変えるなど。 : Name_Not_Found [sage] 2018/07/13(金) 13:53:53.53ID:??? 故意にHTMLでプロパティを上書きする人はいませんね : Name_Not_Found [sage] 2018/07/13(金) 17:54:28.66ID:??? スレチ : Name_Not_Found [sage] 2018/07/13(金) 21:34:50.66ID:??? 丁寧にありがとう 別件ですぐにはできないけど取り掛かってダメならまた質問させてもらうかもです >レスポンシブのadsenseを試してみたが高さだけを真ん中にすることはできたよ ちなみにそれ、display:grid;やalign-content:使わずmarginだけでできますか? : Name_Not_Found [sage] 2018/07/13(金) 23:55:23.49ID:??? getElementByIdを使えばいいでしょ グローバル変数なんぞ使う方が悪い : Name_Not_Found [sage] 2018/07/14(土) 01:13:33.44ID:??? はい 従来の方法でもできます 例 ttps://jsfiddle.net/3c9n5kjo/ (これは例なのでadsense側のスクリプトによる広告生成の工程は省く。 実用するときは<ins>要素のところに、adsenseのコードである<sciprt云々のコードが書かれる) adsenseコードを貼る要素の親要素に position:relative; adsenseが表示される要素(ここではins要素に直接)に position:absolute; top,right,bottom,leftそれぞれ0 margin:auto; : Name_Not_Found [] 2018/07/14(土) 15:52:49.30:fqhjeGmk divとかはborder-radiusで角を丸められるみたいだけど 直線でカットすることはできないんですか? 斜めにカットしたいです。 : Name_Not_Found [sage] 2018/07/14(土) 16:33:54.88ID:??? position:absoluteってリスキーだよな 自分で書いてる部分ならいいが : Name_Not_Found [sage] 2018/07/14(土) 19:03:58.46ID:??? カットしたい親ボックスをまず置く 中に子ボックスを置いてtrancefoamで回して斜めにして 辺が親の角斜めにカットするように配置 その中にもう一個孫ボックスを置いて逆に回転させて水平になるようにして 親の親の背景画像を貼ってbackground- position: fixedにする : Name_Not_Found [sage] 2018/07/14(土) 19:06:21.71ID:??? 黒:親 赤:子 青:孫 子はoverflow: hiddenで : Name_Not_Found [] 2018/07/14(土) 22:13:12.58:FhFnbJoo 例えばページにこんな風に要素があります。 <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設定だけでやる方法があれば教えて下さい。 : Name_Not_Found [sage] 2018/07/14(土) 22:50:01.58ID:??? 質問の例の雛形はこんな感じかな? ttps://jsfiddle.net/kejdqug4/ で、(リサイズも含め)ウインドウのサイズに合わせるように divIDの縦幅も一緒に伸び縮みしてかつ、スクロールバーも対応できるようにしたい、と? もしそうなら誰かに任せた : Name_Not_Found [sage] 2018/07/14(土) 22:55:27.37ID:??? 一応自分の環境ではdivIDにheight:100vh;で対応できたけど ttps://jsfiddle.net/qbart0jo/ 他にいろいろと良い方法があるとおもう : Name_Not_Found [] 2018/07/14(土) 23:51:15.47:FhFnbJoo >>49 ありがとうございました。 49さんの方法で全体をスクロール出来ますが、 でも、スクロールバーの長さが何かおかしいように思います。 100vhだとちょっと無理があるのではないでしょうか? : Name_Not_Found [sage] 2018/07/15(日) 04:55:52.94ID:??? > $.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>`)); : Name_Not_Found [sage] 2018/07/15(日) 10:47:23.17ID:??? mapのコールバックの第一引数捨ててるし、Arrayも無駄に破棄してる こっちのが短いし見やすい $('#divID').html('<p>divIDリスト</p>'.repeat(50)); : Name_Not_Found [sage] 2018/07/15(日) 12:05:57.87ID:??? jsは他所で : Name_Not_Found [sage] 2018/07/15(日) 13:10:53.01ID:??? jquererとrubyバカはところ構わずやりたい放題するところが似ている : Name_Not_Found [sage] 2018/07/15(日) 13:29:23.97ID:??? BEMとかアトミックデザインとか知らない。特に方法論も知らずにCSS組んでるんですけど問題ありますか? : Name_Not_Found [sage] 2018/07/15(日) 15:47:11.03ID:??? おい。 <p>divIDリスト ${i}</p> が <p>divIDリスト</p> になってるぞ ばれないとでも思ったか? : Name_Not_Found [sage] 2018/07/15(日) 15:57:31.54ID:??? アトミックデザインはホームページというよりアプリとかだよね サイト制作なら分子、生体くらいまでまとめて作っちゃっても問題ないことのほうがいい 原子レベルで作る必要がないものって絶対出てくるし : Name_Not_Found [sage] 2018/07/15(日) 15:58:12.12ID:??? 質問者からの52までの文脈読めばいらないことくらいわかるだろ・・ 野暮すぎ : Name_Not_Found [sage] 2018/07/15(日) 16:06:00.56ID:??? そういう問題じゃないだろ コードの話をしてるのに問題の話にすり替えてる : Name_Not_Found [sage] 2018/07/15(日) 16:17:04.27ID:??? いや、だから文脈読めって コードの話してるならもに対するレスなら別にそれでいいし が言ってることも”そもそも連番必要なしだからもっと短く書ける”って言ってるだけで別に何もおかしくないだろ : Name_Not_Found [sage] 2018/07/15(日) 16:19:19.19ID:??? を解釈すると「連番はいる」っているのと同義だからな 明らかに的外れで不要な指摘 : Name_Not_Found [sage] 2018/07/15(日) 16:35:53.85ID:??? > が言ってることも”そもそも連番必要なしだからもっと短く書ける”って言ってるだけで別に何もおかしくないだろ それはどう見ても後出しの言い訳なのがバレバレw > mapのコールバックの第一引数捨ててるし、Arrayも無駄に破棄してる って書いてる時点でわかるやろ? 第一引数捨ててることを問題視してるのに 第二引数使ってることに対して何も言ってない なら、第二引数に対しては問題ないということなんだから 当然自分も第二引数使うと思いきや、第二引数まで捨てた回答をしている コードに対していちゃもんつけたくせに、そのコードを直さずに 問題の方を変更して違う意味のコードを出した。 それなら元のコードに文句つけちゃいけないんだよ : Name_Not_Found [sage] 2018/07/15(日) 16:36:54.11ID:??? 元のコードっていうのは $('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); これのことな。 最初の$.eachを使ったクソコードじゃなくて : Name_Not_Found [sage] 2018/07/15(日) 17:27:20.95ID:??? >なら、第二引数に対しては問題ないということなんだから >文句つけちゃいけないんだよ 統失&アスペの方ですか・・? >mapのコールバックの第一引数捨ててるし >Arrayも無駄に破棄してる なんだから「mapの第一引数を捨てないように、Arrayも無駄にしないように」を考えてののコードでしょ は読みづらい。って明確に言ってるんだから。 なんでにつられて連番にこだわってmapで消耗してるの?という指摘がなんだが >読みづらい →>こっちのが短いし見やすい という自然な流れが文句に見えちゃうって危ない人だよ : Name_Not_Found [sage] 2018/07/15(日) 17:46:07.25ID:??? おれのコードに文句つけやがったとか曲解する人が仕事場にいたら大変そう : Name_Not_Found [sage] 2018/07/15(日) 22:06:13.36ID:??? > なんだから「mapの第一引数を捨てないように、Arrayも無駄にしないように」を考えてののコードでしょ だからのコードは、やってることが変わってるって言ってるだろ なんで仕様を変えるんだよ? 変えなきゃレスもできなかったの? : Name_Not_Found [sage] 2018/07/15(日) 22:25:12.46ID:??? 「読み辛い」って主観だよね。 読み辛い例としてLispのコード挙げたらLisperに猛然と抗議されたわ。 : Name_Not_Found [sage] 2018/07/15(日) 22:43:29.80ID:??? >やってることが変わってる そんなこと言い出したらはfor文を関数型に書いてるとも言えるんだから の#divIDを親としたappendは>48のコードの解釈とは違うじゃん >なんで仕様を変えるんだよ? というかお前が仕様わかってないのを見越して 質問者以降の文脈を見なさいよって以降で何度も言ってるんだよ 質問者の例 仕様 > <ul>や<p>など、数百行くらい >多数の要素が時と場合によって行数が変化するので、一定ではありません。 これに対し、>48が例として連番付きdivリストを生成するコードを記述 それに対し、>51が読みづらいとして改変(連番を引き継ぐ) それに対し、>52がさらに短縮と見やすさを追求(仕様によれば連番必要なし) それに対し、>56が急に連番にこだわりだす どう見てもがおかしいけど?? 逆に、なんで仕様変えたんだ? : Name_Not_Found [sage] 2018/07/15(日) 23:50:05.43ID:??? いいから人の話を聞け > $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`))); ↑このコードが汚いと言ったんだ。 このコードが。 だからこのコードを実行結果を変えずに まともなコードに直したのが↓このコードだ $('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); いいか?俺は最初からこのコードの話しかしてねぇ このコードに問題があるといっただけで、 仕様の話は最初からしてねぇ : Name_Not_Found [sage] 2018/07/16(月) 00:05:14.28ID:??? > 逆に、なんで仕様変えたんだ? 仕様を変えないとコードを短くできないだらだろ? 連番をなくさないとコードを短くできなかった つまりはこっちのほうが見やすいんじゃなくて 単に仕様を変えて連番をなくしたコードってだけ 違うもののコードを書いただけ : Name_Not_Found [sage] 2018/07/16(月) 01:47:23.86ID:??? >汚いと言ったんだ いや、のどこをどうみても >読みづらい と書いている 完全に >まともなコードに直した >51は>48のコードと解釈が違うし >48の質問者への返信として重要なのは 再現性であって、>51であろうが>48であろうがどっちでも良い すでにで説明済 は、 $.map云々のところにまだ無駄がある →質問者まで辿って思慮 →そもそも特に連番がいるわけではない →mapの空引数()=>``でどうにかなりそう →そもそもテキスト自体リピートでどうにかなりそう →結果、repeat()で短く見やすいコードを記述 して>こっちのが短くて見やすい と言ってるだけ で説明済 なので一貫して、質問者へのコードに対しては >48であろうが>51であろうが>52であろうがどれでもよいとしか言ってない それをやたら連番にこだわる石頭が 未だに>69,70みたいに、で説明したにも関わらず未だに 違うモノだの、どれが間違いで、どれが正解だの 的外れで読解力のない馬鹿を晒してるのがここまでの流れ : Name_Not_Found [sage] 2018/07/16(月) 12:03:41.63ID:??? `<p>divIDリスト ${i}</p>` <p> を文字列から作るよりも、 先に<p> 要素のひな形オブジェクトを作っておいて、 それからクローンしてオブジェクトを作れば? : Name_Not_Found [sage] 2018/07/16(月) 12:06:37.20ID:??? だからな。連番にこだわってるんじゃないんだよ。 連番をつけた場合のコードが読みづらい=汚いって 話をしてるんだよ > $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`))); ↑ 読みづらい = 汚い ↓ 読みやすい = 綺麗 $('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); : Name_Not_Found [sage] 2018/07/16(月) 12:25:21.82ID:??? そもそも指定数繰り返すのにArray(50)が汚い。 イテレータ返す範囲オブジェクトも自前で実装しなければならないクソ言語w : Name_Not_Found [sage] 2018/07/16(月) 12:28:42.84ID:??? それはあるね。lodashに_.loopとか入ってくれると良いんだが こんな風にかければ最高だろう $('#divID').append(_.loop(50, i => `<p>divIDリスト ${i}</p>`)); まあ今回のはjQueryだけで一番労力をかけずにシンプルに各方法ということで : Name_Not_Found [sage] 2018/07/16(月) 12:43:11.00ID:??? だから>69の言う >俺は最初からこのコードの話しかしてねぇ だとかお前の言う >48のコードのここを改変した とかは本筋と関係ないと何度も言ってんだろ >51→>52が問題じゃなく >52→>56が発端 に説明済 の解釈を間違って文句を言われたと勘違いし 的外れな指摘をしてきた(のレス)が発端 (1)>51は>48へレス (2)>52は単に質問者からの全体の流れで短縮コードを掲示 (3)>56は、>52が>51へ文句を言ったと勘違いしつっかかる 実際は、短縮コードを書いただけだというのが >60→>62→>63 の流れでわかる この当たりで>56の馬鹿も自分の勘違いを認知し始め かつ、”短縮コードを掲示しただけ”の何の落ち度もない>52に 「後出し」とさらに突っかかり自我を保とうとする もうほぼ、ここで>56の勘違いでした、終わってんだよ 半分本人も認めているがプライドが許さないみたい、という心情だろう だが 「>51は>48を改変しただけだぞ?」みたいに おれは(1)をしたんです、と意味不明な主張をしてくる馬鹿がいる 明らかに的外れだろ が、読解力なさすぎて>69から何度も繰り返す羞恥を未だに晒している これが現状 : Name_Not_Found [sage] 2018/07/16(月) 12:51:53.34ID:??? そろそろをお願いします : Name_Not_Found [sage] 2018/07/16(月) 12:55:28.92ID:??? ほんとお前人の話聞かないなw 俺はこのコードが読みづらい(汚い)って言ってるだけなの $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`))); お前の話なんかどうでもいいの : Name_Not_Found [sage] 2018/07/16(月) 13:03:53.02ID:??? え・・まだ理解してないの?? >51「俺は読みづらいと思い>48のコードを改変」 >52「質問者以降をみれば連番必要ないことがわかるので、さらに読みやすくコードを掲示」 で、こいつ、というよりこのレス↓ >56「おい>52、連番外れてるぞ」 だぞ?明らかにおかしいだろ で、半分認めたにも関わらず、その後もつっかかりつづける そして、「おれは>48にレスしたんだ」と蚊帳の外から割り込んでくる>78 病気かよ : Name_Not_Found [sage] 2018/07/16(月) 13:33:27.07ID:??? あほくさ : Name_Not_Found [sage] 2018/07/16(月) 13:47:48.48ID:??? > 病気かよ 分かってんじゃんw : Name_Not_Found [sage] 2018/07/16(月) 13:49:46.78ID:??? まとめ →の流れがあるにも関わらず 「読みづらい」の原因に、 for文($.each)を使っている 連番が${i}がある ()が多い ループにArrayで表現 などなど、いろいろな取捨選択があるのに 視野狭く以降しか見れず、$.each+mapの選択しかできなかったの落ち度 : Name_Not_Found [sage] 2018/07/16(月) 13:52:54.49ID:??? 訂正 $.each+map →$().append + $.map : Name_Not_Found [sage] 2018/07/16(月) 13:56:23.21ID:??? 自分の思う読みづらさを基準に、他人の思う読みづらさに厳しくする 視野が狭い、頭が固い人だと何かの拍子に理不尽に怒ってくる典型例でした : Name_Not_Found [sage] 2018/07/16(月) 16:44:11.23ID:??? だからなんども、勝手に仕様を変えるなと 言われてるだろ。いい加減自覚しろ : Name_Not_Found [sage] 2018/07/16(月) 16:58:03.38ID:??? $.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> にすればもっとシンプル書ける! ↓ (インデックス番号なくして、同じものの繰り返しにすれば、 そうだねそれは誰でも思いつくコードだから。何もすごくない) : Name_Not_Found [sage] 2018/07/16(月) 17:04:48.66ID:??? だからその仕様が視野狭いか広いかの違いだと言ってるだろ 文盲乙 >51の仕様→以降 >52の仕様→質問者以降 >48はのfork >51はのfork >52は>47→>48→>51へのfork そして馬鹿>56が勘違いして>48以降を適用しろ と喚き散らしてるだけ これでわからなかったらまじで病院池 : Name_Not_Found [sage] 2018/07/16(月) 17:05:55.93ID:??? 何度も同じこと書かなくていいよ うざいだけだから : Name_Not_Found [sage] 2018/07/16(月) 17:06:27.92ID:??? なんでそんなに必死なん? : Name_Not_Found [sage] 2018/07/16(月) 17:09:05.09ID:??? 仕様を変えればもっとシンプルに書ける(ドヤー 恥ずかしくないのかなw そのうちループも一回でいいから repeatいらないとか言い出しそうw : Name_Not_Found [sage] 2018/07/16(月) 17:09:32.59ID:??? 本筋は>47→>48 可読性ではなく再現性 スクロールバーが出る程度の要素が入ればなんでもいい なのでfor文ベースの>48はそもそも間違いでもなんでもないし オブジェクト指向ベースである$.append云々mapである>51は >47へのレスである>48とは解釈が異なる : Name_Not_Found [sage] 2018/07/16(月) 17:11:35.77ID:??? 最後にはテキストべた書きすればいいから JavaScriptはいらないとか言うでしょう 考えていることが手に取るようにわかるw : Name_Not_Found [sage] 2018/07/16(月) 17:16:01.21ID:??? 頑張って書いたコードがクソだと言われて 逆ギレしてるんだろうなw いくら別のことをするコードを書いたって、もともとのクソなコードが 良くなるわけじゃないよ。だって解いてる問題が違うんだから repeat使ったところで が汚いコードであることを否定することにはならないし、 repeat使ったところで のコードよりも良いコードになったわけでもない 単に別の問題を解くコードってだけ : Name_Not_Found [sage] 2018/07/16(月) 17:16:21.46ID:??? 俺はむしろ.append(map)の方が常用すぎてeachの方が参考になったけど…? : Name_Not_Found [sage] 2018/07/16(月) 17:16:44.64ID:??? > 単に別の問題を解くコードってだけ しかも誰でも簡単に思いつくw : Name_Not_Found [sage] 2018/07/16(月) 17:16:56.63ID:??? >頑張って書いたコードが へぇ・・ がんばって書いたように見えたんだ・・?w : Name_Not_Found [sage] 2018/07/16(月) 17:17:18.56ID:??? こんな変なコード書くやつがいるんだって参考になった なるほど : Name_Not_Found [sage] 2018/07/16(月) 17:18:47.75ID:??? そりゃ見えるよw だって普通に仕事していればあんな 変なコード書かない。恥ずかしくて出せない クソコードを恥ずかしげもなく出せるってことは 頑張って書いたんだろうさ それが自分が書ける精一杯のコードなんだろう : Name_Not_Found [sage] 2018/07/16(月) 17:19:11.89ID:??? mapでドヤ顔したかったのが本心だったわけか・・w しょうもな : Name_Not_Found [sage] 2018/07/16(月) 17:22:10.00ID:??? 勘違いで逆ギレしてくるようなみたいな人が職場にいたら大変そう・・ : Name_Not_Found [sage] 2018/07/16(月) 17:29:47.24ID:??? がんばって書いたように見えたようだし ごく見慣れたmapでの表現も、彼の中では特別な閃きだったようだな 流れぶった切ってまでレスして興奮してたようだし・・ : Name_Not_Found [sage] 2018/07/16(月) 17:31:38.60ID:??? 知ってることをドヤ顔で押し売りしてくるタイプだろう : 47 [] 2018/07/16(月) 20:43:41.77:nddvQeea あの、質問した本人ですが連休中にこんなに盛り上がっているとは驚きました。 元々の質問がまだ解決していないのですが、何か解決方法があればアドバイスよろしくお願いいたします。 50で指摘しましたが、100vhでは上手く行きませんでした。 : Name_Not_Found [sage] 2018/07/16(月) 20:45:14.12ID:??? 質問者は連休を満喫してたというのにお前らと来たら… : Name_Not_Found [sage] 2018/07/16(月) 23:37:58.74ID:??? タイトル欄やメニュー欄、 サブメニューの欄(カレンダーやタグ一覧や最新コメントを羅列している欄)など、 どのページ(記事)に行っても同じ内容が表記してある部分は、 全てのhtmlファイルにも記しておいているのでしょうか? それとも、それ専用のhtmlファイルがあって そのファイルを全てのhtmlファイルに読み込ませているのですか? (iframeとは別なのですよね) : Name_Not_Found [sage] 2018/07/17(火) 00:09:48.42ID:??? 動的サイトだろうが静的サイトだろうがそういうのはテンプレートという概念で管理を分けている。htmlという出力だけ見れば同じ内容がすべてのページに書かれているように見える(実際書かれているのだが、テンプレートエンジンがやる) : Name_Not_Found [sage] 2018/07/17(火) 02:46:38.22ID:??? テンプレートエンジンというのがあるのですね このテンプレートエンジンを利用するのと、 jQueryのloadを利用して使い回したい部分を読み込ませるのは どちらの方が良いのでしょうか? : Name_Not_Found [sage] 2018/07/17(火) 04:24:32.01ID:??? すれちー(´・ω・`) : Name_Not_Found [sage] 2018/07/17(火) 11:47:36.03ID:??? テンプレエンジン使っても使わなくても 後者の方が若干劣るような気がしなくもない程度 大差なし : Name_Not_Found [sage] 2018/07/17(火) 13:33:12.70ID:??? jQueryもやっているのでそちらで試してみようかと思います。 スレチ失礼しました; 消えます 教えて頂きどうもありがとうございました! : Name_Not_Found [sage] 2018/07/19(木) 18:52:00.68ID:??? 新しいlength?のviとかvbってどうなったん?(´・ω・`) : Name_Not_Found [sage] 2018/07/20(金) 00:44:09.93ID:??? <dl>のリストって、時と場合によってはdivタグを用いなきゃいけないことってあるよね? ttp://uproda.2ch-library.com/994742qFg/lib994742.gif 例えばこういう表を作りたい時、下の点線はdivで<dt><dd>を囲まないと実現できないよね。 もしこれをdtとddでそれぞれ単独でborder引いたら、テキストの改行が増えたり減ったりした時にこんな風になっちゃうよね。 ttp://uproda.2ch-library.com/9947438eF/lib994743.gif こういう時ってdivを使わずに、dtとddだけでborderを引く方法ってある? : Name_Not_Found [sage] 2018/07/20(金) 01:07:45.21ID:??? なんだ? 難しいのかと思ったら普通にできるじゃねーか ttps://jsfiddle.net/y4r5vxL2/ 余談だがjQueryのプロはHTML/CSSも得意でなければいけない いつもjQueryの話題で楽しくやってる俺が解いてやったんだ これぐらい言わせろ : Name_Not_Found [sage] 2018/07/20(金) 01:46:59.15ID:??? そんな簡単なこと得意気に言われても レベルご知れてるな : Name_Not_Found [sage] 2018/07/20(金) 03:10:01.73ID:??? はいはい。だったらさっさとレスしようねw : Name_Not_Found [sage] 2018/07/20(金) 05:56:03.80ID:??? あほくさ : Name_Not_Found [sage] 2018/07/20(金) 05:59:00.19ID:??? dlにborder−bottomとか? : Name_Not_Found [sage] 2018/07/20(金) 07:40:58.40ID:??? ごめん、この場合dt ddを直下に複数作りたいのよ。 ◯月◯日 あああああ -------------------------------- ×月 ×日 ああああ -------------------------------- みたいな感じで。 : Name_Not_Found [sage] 2018/07/20(金) 07:44:51.54ID:??? dtとddの高さを揃えるとか?なわけないか : Name_Not_Found [sage] 2018/07/20(金) 11:10:47.40ID:??? ttps://jsfiddle.net/twj1bp49/ : Name_Not_Found [sage] 2018/07/20(金) 11:44:27.59ID:??? むかーしからよくある手だけど dtとddの上辺にボーダー ボックスの高さを揃える必要があるなら flexにすればいいでしょう : Name_Not_Found [sage] 2018/07/20(金) 11:50:03.65ID:??? だからはちゃんとそれを実現できてる 人の回答を読まないやつはレスするな : Name_Not_Found [sage] 2018/07/20(金) 14:10:52.62ID:??? せやかて工藤 : Name_Not_Found [sage] 2018/07/20(金) 15:12:21.37ID:??? 113ってNGされて見えないからなんだと思ったらまたお前かw : Name_Not_Found [sage] 2018/07/20(金) 15:24:42.37ID:??? ファビコン(.icon)について聞きたいのですが マルチアイコンというのはブラウザによって自動で表示サイズ(16×16、48×48等)を 変更してくれるというものなのでしょうか? 例えば以下のサイトで複数画像をアップするとそういうことができるのかなと疑問がありまして・・・ ttps://ao-system.net/alphaicon/ スレチだったら申し訳ありません。 : Name_Not_Found [sage] 2018/07/20(金) 16:10:36.95ID:??? そうだよ。俺だよ。 jQueryの話をいつもしている俺だよw : Name_Not_Found [sage] 2018/07/20(金) 17:32:02.46ID:??? ファビコンに限らずアイコンとして使われるicoは 使う側が、格納されてる画像から適切なサイズを選択するのよ : Name_Not_Found [sage] 2018/07/20(金) 19:59:37.17ID:??? 使う側というのは閲覧者のことですか? : Name_Not_Found [sage] 2018/07/20(金) 22:58:16.15ID:??? ユーザのブラウザ : Name_Not_Found [sage] 2018/07/20(金) 23:04:48.46ID:??? これでファードアウトしない方法分かりますか? ttp://kachibito.net/css/text-blurring-animation : Name_Not_Found [sage] 2018/07/20(金) 23:05:57.57ID:??? FadeOutだった! 説明あるのですが、意味がわかりません。 : Name_Not_Found [sage] 2018/07/21(土) 00:18:51.40ID:??? すまぬ アプリケーションのこと : Name_Not_Found [sage] 2018/07/21(土) 01:54:51.81ID:??? @keyframes blurの中でフェイドイン(20%まで)→フェイドアウト(80%から)させてる で、最初のcssのanimationでinfinite してるから永遠に繰り返してる なのでフェイドアウト部分とinfiniteを消す : Name_Not_Found [sage] 2018/07/21(土) 15:20:00.60ID:??? アニメーションの最後がフェードアウトして消えていくって意味じゃないの? : Name_Not_Found [sage] 2018/07/21(土) 15:25:43.37ID:??? 最後は、白い文字が表示されたまま止めたいのかなと思った : 125 [sage] 2018/07/21(土) 15:43:49.00ID:??? なるほど、勉強になりました。 ありがとうございます。 : Name_Not_Found [sage] 2018/07/21(土) 16:05:14.62ID:??? どういたしまして : Name_Not_Found [sage] 2018/07/22(日) 00:31:43.62ID:??? @keyframesのアニメーションを 簡単に作れるアプリやジェネレーター(?)ありませんか? 今は手打ちでやってるんですが、いまいち思い通りの動きができないというか もっと視覚的にわかりやすく作れないものかと 昔のFLASHみたいな感じで見ながら動かせる的な感じの : Name_Not_Found [sage] 2018/07/22(日) 00:58:28.73ID:??? 一時期調べたことがあって、海外製のですげぇなと思うやついくつかあった、が出てこない… 今検索したら出てきたショボいのはこちら ttp://cssanimate.com : Name_Not_Found [sage] 2018/07/22(日) 11:01:48.21ID:??? そういうネタはしっかり記録し保存しておけよとw : 130 [sage] 2018/07/22(日) 23:56:04.70ID:??? のとおりです : Name_Not_Found [sage] 2018/07/24(火) 23:27:24.28ID:??? 久々に見たら@keyframesとかアニメションの話題とは・・ 時代がはえー : Name_Not_Found [sage] 2018/07/25(水) 00:34:41.80ID:??? @keyframeなんか5,6年前けら使ってるぞ? 何年来てないんだ : Name_Not_Found [sage] 2018/07/25(水) 02:36:45.56ID:??? アドビさんFLASHベースにして @keyframeアニメーション吐き出すソフトつくってくれよ : Name_Not_Found [sage] 2018/07/25(水) 02:52:16.17ID:??? なんだ有料でもいいのか。じゃこれ ttps://tumult.com/hype/ : Name_Not_Found [sage] 2018/07/25(水) 10:39:42.66ID:??? animateCCじゃいかんの? 使ったことないけど : Name_Not_Found [sage] 2018/07/25(水) 13:28:03.93ID:??? アニメイトCC : Name_Not_Found [sage] 2018/07/26(木) 12:33:37.34ID:??? このなかにつかえるものはないか? ttp://www.b-tm.co.jp/blog/detail/41.html : Name_Not_Found [] 2018/07/26(木) 12:42:19.06:mwawPH7T 文字の周囲にボーダーで四角い枠を書く事は出来ますか? 例えば、 あいうえお の「う」の文字だけ枠を書くとか。 : Name_Not_Found [] 2018/07/26(木) 13:01:59.13:mwawPH7T 出来ました。 : Name_Not_Found [sage] 2018/07/26(木) 14:15:42.44ID:??? 分からないことは人に質問した途端に自己解決するというマーフィーの法則を逆利用した問題解決法ですね分かる分かる : takutomonfever ◆ttEQ0kaR9U [age] 2018/07/28(土) 22:05:58.62ID:??? HTML5でページ内に動画を埋め込む方法を教えて下しあ>< : Name_Not_Found [sage] 2018/07/28(土) 22:54:58.83ID:??? <div> 動画 </div> : Name_Not_Found [sage] 2018/07/29(日) 00:40:11.14ID:??? <video></video> : 7 [sage] 2018/07/29(日) 17:55:41.95ID:??? 大変遅くなりましたが やはり一番上に固定されてしまいます 書かれてる内容は全て把握してる(他でよく使う)ので間違いないはずです レスポンジブ広告でなくただの固定サイズのdivなどでは できるのでスクリプトに関係してるものと思われます 今回は断念しますが、詳しくありがとうございました : Name_Not_Found [sage] 2018/07/29(日) 19:29:00.68ID:??? どういたしまして : Name_Not_Found [sage] 2018/07/29(日) 20:13:09.29ID:??? これだけでストリーミングでもどんとこいなんだから 便利な時代になったものよのう : Name_Not_Found [sage] 2018/07/30(月) 19:55:02.64ID:??? スクリプトでstyleかましてるからcssではできないのでは 中のiframeがposition:absolute;top:0;を持ってるがそこいじると後々まで機能するか保証できない : Name_Not_Found [sage] 2018/07/31(火) 13:34:32.43ID:??? HTMLとCSSで涼しくなりたい… : Name_Not_Found [sage] 2018/08/01(水) 20:47:03.86ID:??? できたって人がいたようだったがうさんくさいな : Name_Not_Found [sage] 2018/08/02(木) 00:20:55.75ID:??? というか広告スクリプトの親要素の設定次第じゃないの? そうじゃないと自動広告の意味ないよね : Name_Not_Found [sage] 2018/08/02(木) 00:24:11.98ID:??? 自分の場合、表示されるのはされるが若干のラグがある感じ 瞬間的に一番上に表示されるが0コンマの残像で真ん中にバシュッと表示されるわ 環境次第か? : Name_Not_Found [sage] 2018/08/02(木) 01:55:53.50ID:??? ttp://www.chickenramen.jp/shokan/ ソースみてもどう作ってるのかわからない こういうのはどうやって作るんでしょうか CSSだけでは無理ですよね? : Name_Not_Found [sage] 2018/08/02(木) 02:19:18.13ID:??? 2,400行のmain.js には、jQuery がコピペされているだけ 特に、変わった処理はない : 164 [sage] 2018/08/02(木) 02:36:57.43ID:??? 何百もの画像ファイルを読み込んで、無駄が多い。 1つのファイルにまとめていない それと、文字・文字情報が全くない。 すべて画像だから、文字をコピーしたり、できない また、画像にマウスを置いても、画像の説明が出ない こういう画像だけのページは、すごく多いけど、 通信料金を節約するため、画像をオフにすると、情報が0 になるw 通信料金ばかり掛かるが、情報が何もない たぶん、絵描きが作ったページ。 プログラミングができない人 なんで、こういう画像だけのページが多いのかね。 情報が何もない : Name_Not_Found [sage] 2018/08/02(木) 04:58:37.60ID:??? フォームの作り方に関するサイトどれを観ても、 入力されたデータの送り先のメールアドレスの指定方法が載ってないんですけど、 私はなにか勘違いしてるんでしょうか? : Name_Not_Found [sage] 2018/08/02(木) 10:11:39.00ID:??? はい、勘違いしています : Name_Not_Found [sage] 2018/08/02(木) 10:12:51.54ID:??? アンカー忘れた は宛て : Name_Not_Found [sage] 2018/08/02(木) 12:50:44.87ID:??? え? LPやったことないの? : Name_Not_Found [sage] 2018/08/02(木) 12:53:13.58ID:??? 20年以上前なら ブラウザのformから直接メール飛ばすなんてこともあったんだけど今はやらない 一度サーバサイドのプログラムにポストして そこから送信するのよ : Name_Not_Found [sage] 2018/08/02(木) 12:58:41.98ID:??? いまのブラウザはcssからjavascriptは実行できないんでしょうか? : Name_Not_Found [sage] 2018/08/02(木) 19:52:34.68ID:??? >自動広告の意味ないよね なんでやねん : Name_Not_Found [sage] 2018/08/02(木) 20:10:39.93ID:??? レスポンシブ広告って、ページをリロードしたとき 広告を貼ってある要素のサイズ(や比率)に合った広告が表示されるんじゃないの? 親要素関係なく位置も勝手に変更されるっていう謎仕様なの? : Name_Not_Found [sage] 2018/08/02(木) 22:38:28.15ID:??? >親要素関係なく位置も勝手に変更される どこでそんな話が? 基本親要素の中で、左右は中央、上下はtopに配置される 親要素のサイズ(や比率)に合った広告が表示される、はその通りだが 広告サイズはある程度パターンがある 親要素の高さ固定で幅可変の場合、左右や下に隙間ができる場合がある あるというかほとんどそうなる : Name_Not_Found [sage] 2018/08/02(木) 23:18:33.87ID:??? はい 昔から今もこれからも : Name_Not_Found [sage] 2018/08/02(木) 23:37:46.82ID:??? 親の親要素>親要素>広告 の場合 親の親要素>親要素は良い感じで 親要素>広告の親要素に隙間ができる、ということ? : Name_Not_Found [sage] 2018/08/02(木) 23:46:17.09ID:??? で、親要素のサイズにレスポンシブしたサイズの広告が表示される、と : Name_Not_Found [sage] 2018/08/03(金) 01:41:02.40ID:??? もういないかもしれないが 親要素にgridのcenter系、 もしくは 親要素にheight指定、width指定(これ以上広げないであろう横幅px,5000pxとか10000pxとか)、display:table-cell;、vertical-align:middle; でinsのスタイルいじる必要なくいけた ただし、広告に関する部分だけの最も簡単な構成でしか試してない : Name_Not_Found [sage] 2018/08/03(金) 12:11:46.73ID:??? 一応、従来の方法もいける google側がこういう場合に、一番上のins要素のstyleの設定をできるようにしてあるので レスポンシブコードの<script><ins style="">のところで直接書いてやればいい では見やすさのためcssウィンドウに書いてしまったが。 >あるというかほとんどそうなる この常識は知らなかったな 環境かもしれない 少なくともおれの環境では広告表示位置で困ったことないわ 全部網羅はしてないが一応複数ブラウザでは見てはいるが : Name_Not_Found [sage] 2018/08/03(金) 22:56:27.44ID:??? cssで親要素w:100%、h:300pxにしたとする PCでウィンドウの幅や、タブレットのサイズや縦横でたまたま親要素の幅が300pxだったとする するとたいてい広告は300x300(たまにw300xh250)が表示される だが親要素の幅が500pxだったとする すると例えばw500x60pxの広告がtop:0で表示される すると親要素の下側に空白ができる むろん親要素に高さ設定をしなければいいが今回の条件は高さ固定 親要素width指定なし、auto、100%でもできる? : Name_Not_Found [sage] 2018/08/03(金) 23:46:17.11ID:??? 今時横幅px,5000pxとか10000pxとかやってるのっているんだな : Name_Not_Found [sage] 2018/08/04(土) 01:09:16.92ID:??? >親要素width指定なし、auto、100%でもできる? それは例えばPCのウィンドウの幅の可変に対応したい、ということならできる gridの場合、 ttps://jsfiddle.net/4mgh7Ln2/ (レスポンシブ広告コードの部分は略) 広告コード側のstyleは変更無し ポイントは、inner要素かますことと grid-template-columns:1fr 10fr 1fr; で、レスポンシブが効くように広告が入る真ん中grid-area:b;を10frくらい(適当)大きく取り 左右を1frにして対称にすること ただ、左右対称に1/10比率の隙間が入るので もっとスマートなやり方があるかもしれない 従来の場合、 ttps://jsfiddle.net/1uc06f82/ (レスポンシブ広告コードの部分は略) inner要素もいらず position:absolute;top:0px;right:0px;bottom:0px;left:0px;margin:auto; をgoogleコード側のinsのstyleへ入れてやるだけ 親要素#hogeにposition:relative; 上記2つの場合どちらも親要素のwidthは指定なし ウィンドウのページ変更→リロード すると横長のバナーや、300x300みたいなスクエア広告が出て かつ、親要素に対し縦にも横にもセンターに配置される : Name_Not_Found [sage] 2018/08/04(土) 01:10:13.48ID:??? 訂正 ウィンドウのページ変更→リロード ウィンドウのページサイズ変更→リロード : Name_Not_Found [sage] 2018/08/04(土) 01:11:05.24ID:??? いや、ウィンドウのページサイズじゃなく ウィンドウの幅を変更→リロード だった : Name_Not_Found [sage] 2018/08/04(土) 01:55:47.21ID:??? 試したらgridの場合inner要素かまさなくてもレスポンシブ効いてくれるみたいだわ なので、inner消して #hogeにalign-content:center; そして広告コード側のins直接にgrid-area:b;でいけた ttps://jsfiddle.net/7k8e9zw6/ : Name_Not_Found [sage] 2018/08/04(土) 15:02:11.42ID:??? >googleコード側のinsのstyleへ入れてやるだけ js使わずどうやって? : Name_Not_Found [sage] 2018/08/04(土) 15:39:58.50ID:??? >js使わずどうやって ? 詳しくはこちらの方法を参考に ttps://support.google.com/adsense/answer/6307124?hl=ja <ins class="adsbygoogle" style=""へ入れなくても class="adsbygoogle example_responsive_1" みたいにして、.example_responsive_1{}をスタイルシートに書いてやってもいい (広告コードの<script>直前に<style>を書くのが正しいのかどうかは知らない) : Name_Not_Found [sage] 2018/08/04(土) 15:55:36.25ID:??? >js使わずにどうやって あぁ、もしかすると スクリプトで生成後のinsのスタイルも変わっちゃうから jsで後出しで生成されたinsにstyleを付加しないといけない、と思ってるってこと? : Name_Not_Found [sage] 2018/08/04(土) 20:42:20.48ID:??? を読んでの通りそのリンク先はこの件には関係ない 同じ画面幅で再読込みする度に別の広告が表示されるが 必ず毎回同じサイズの広告が表示されるわけではない あくまで親要素に(特に幅)合った広告が選ばれて表示されるだけ 広告が親要素のサイスピッタリになるわけではない : Name_Not_Found [sage] 2018/08/04(土) 21:29:32.65ID:??? リンク先はレスポンシブ広告コードを修正する方法で style設定の参考のために貼ったのであって リンク先にあるような、画面幅を固定するstyle設定を教えるために貼ったのではないですよ : Name_Not_Found [sage] 2018/08/04(土) 21:34:40.75ID:??? 親要素というのは親ins要素なのか それとも親ins要素の親要素のことなのか : Name_Not_Found [sage] 2018/08/04(土) 23:04:00.55ID:??? 紛らわしい意味ないことしないでくれや 広告を入れる自前のdivで、これがheight固定 (前スレより) : Name_Not_Found [sage] 2018/08/04(土) 23:30:45.15ID:??? >広告を入れる自前のdivで、これがheight固定 それなら難しく考えずに、自前の親divと広告コード側のins要素にスタイル設定すればよいのでは : Name_Not_Found [sage] 2018/08/05(日) 01:12:39.84ID:??? 全然わかってないな jsfiddleでなくて実際やってみなって : Name_Not_Found [sage] 2018/08/05(日) 01:37:57.75ID:??? jsfiddleでは簡略したものを掲示するのに便利なだけで 実際は自身のウェブサイトで最小構成でやってますよ そもそも質問って、レスポンシブ広告を貼る親要素のheightを固定して 広告のサイズ可変に対応かつ、親要素の真ん中(主に縦に対してセンター)に配置したい ってことですよね できてますよ >実際 というのが、いろいろとDOMやスクリプトが配置されたその一部の広告部分 だとすると、抽象的すぎて私には再現が無理です と言うのも、どういう構成でダメだったのかが 今の今まで掲示されていないので知る術がないです こうやってダメでしたという(広告コード伏せた状態でも)できるだけ最小のhtmlでも示してくれればいいのですが というか普通はそうすると思いますが : Name_Not_Found [sage] 2018/08/05(日) 02:02:37.38ID:??? 抽象的もなにも <div>広告</div> しかないだろう 前スレに書いてあったぞ : Name_Not_Found [sage] 2018/08/05(日) 02:12:42.70ID:??? 前スレみてきました 最小構成、例えば<html>なんたら<body><div>広告</div></body></html>なのか ページ全体の一部の<div>広告</div>なのかわかりません それこそjsfiddleなりなんなりで示せば明確にわかるんですけどね。 あともう一つはっきりさせておきたい部分があるのですが 広告の下に空白が開く、というのは親ins要素を親としたディスプレイ広告(特にスクエア広告が表示された時)ではないですかね? 自分的にはこの辺が引っかかっています そうであれば、親insに子ins用のスタイルを付加しないといけません : Name_Not_Found [sage] 2018/08/05(日) 13:30:44.81ID:??? どうも、最初に質問した者です ・<html>なんたら<body><div>広告</div></body></html> ・ページ全体の一部の<div>広告</div> 何が違うのでしょうか? <div>広告</div>の「広告」部分はscriptタグ含む生成されたコードそのままです ins含むそのHTMLコードは触れないようにしてほしいです あくまで外のdivのcssでの質問です 規定に抵触しなければinsのcss変更も可能です : Name_Not_Found [sage] 2018/08/05(日) 14:00:46.77ID:??? ページ全体から抜き出してる場合だと <div>広告</div>部分以外にDOMを操作するスクリプトが埋め込まれていたり その他にスタイルが設定されていたりして それに気づいてない可能性があります 一番良いのは,jsfiddleなんなりで 実際にhtmlやcss部分を見せれば こちら側でそのhtmlやcssをそのままコピペして 再現性が高まります 広告コードの修正例はのリンク先通りで、さらにその先 ttps://support.google.com/adsense/answer/1354736 センター配置はどれにも違反していません(あくまで最小構成で) >ins含むそのHTMLコードは触れないようにしてほしい ただ、それでも広告コードに設定をしたくない特殊な場合は、cssに 広告の親要素>ins{スタイル} という指定でも大丈夫 もしできなければjsfiddleなんなりで実際の(広告抜き、例えばID部分をXXXに変えたり)html,cssを示してみてください おそらくは、かなり単純なミスであると思います : Name_Not_Found [sage] 2018/08/05(日) 14:03:58.77ID:??? 補足 >ページ全体から抜き出している場合 実際はページ全体の本番環境でテストしているが 質問レスの段階では抜き出した部分<div>広告</div>として説明している可能性があるということです そういうことを避けるために実際にやった実行環境を示すのが手っ取り早いのです : Name_Not_Found [sage] 2018/08/05(日) 14:16:16.18ID:??? >AdSense 広告コードの修正 にもあるように >ユーザー エクスペリエンスの向上のために、コードの改変が不可欠になる場合もあります こういう場合にadsenseポリシーとして親insに設定できる機能が用意されているのですが そもそもそれが何らかの理由でできないので 親の親div>親div>広告 で、親の親>親だけでどうにかしたい という場合は難しいかもしれません : Name_Not_Found [sage] 2018/08/05(日) 14:34:11.45ID:??? どうもです >その他にスタイルが設定されていたり それはないです。HTML/css共100%自分のコードで ・<html>なんたら<body><div>広告</div></body></html> で完結しています 広告の親要素(=div) > ins{スタイル} はやりましたし、それは希望通りです そのdivに別のスタイルが上書きなどかかってることはありません >かなり単純なミス は先ずないと思いますが、ちょっと期間ください 削る作業が(汗 : Name_Not_Found [sage] 2018/08/05(日) 17:47:03.93ID:??? ちなみに HTMLは上そのまま、<div id="hoge">広告コード</div> cssも上そのまま、#hoge {} insにかますときは、#hoge > ins {} です #hogeに今回の件でのheight以外のプロパティはつけてません というかそのためだけのdivですので 試しにbackground色をつけると指定した高さ固定で背景色は出ます 広告サイズの余り部分=左右と下の足りない部分が色付けされています : Name_Not_Found [sage] 2018/08/05(日) 18:42:15.14ID:??? できればjsfiddle もしくは HTML(bodyタグの中) <div id="hoge"> 広告コード(できれば実際に貼った広告コードのIDなどを削った状態) </div> CSS #hoge { この中身まで書く } #hoge>ins { この中身まで書く } みたいな形式で書いた方がいいですね (htmlはあれを参考に、cssの中身の部分はあれを参考にしました、とかではなく) : Name_Not_Found [sage] 2018/08/05(日) 19:29:27.62ID:??? ここまで単純ならわざわざjsfiddle使わなくても同じことだろ jsfiddleの関係者? : Name_Not_Found [sage] 2018/08/05(日) 20:28:27.55ID:??? >ここまで単純なら 単純であるならのようなHTMLとCSS形式でも苦ではないのでは? : Name_Not_Found [sage] 2018/08/05(日) 20:32:16.00ID:??? あと できればjsfiddle、できなければHTMLCSS形式 という意味ではなく できれば jsfiddle か HTMLCSS形式 です つまり、コードを省くのはやめて、できればコードを掲示してください ということです : Name_Not_Found [sage] 2018/08/05(日) 20:33:45.77ID:??? 補足 >コードを掲示 実行したコードに近いコードを : Name_Not_Found [sage] 2018/08/05(日) 21:49:46.76ID:??? 広告のコードはdata-ad-部分が違うだけであとみな同じじゃないの? 自分のを当てはめてみればいいだけだからそこは要求しなくていいのでは : Name_Not_Found [sage] 2018/08/05(日) 22:15:51.20ID:??? 思いもよらない部分が原因かもしれない と言ったところで進まないので それならば簡単な作業だし、できる限り近いコードで出してもらった方が良いかと思います。 ここはいらない、そこはいるとなると余計な作業が増えたり認識がズレたりするので。 こういう質問スレでは認識がズレた際(今回の場合 広告が表示できる、できない)に コードをUPしてもらえるのが解決への近い道なのですが ただのテンプレにも明記されていないので、任意になります 仮に実行コードに近いコードを出してもらえれば こちら側でまず、実行コードとほぼ同じレベルの複写したコードで確認 その後、他のセンター配置のスタイル複数で置換したコードでも確認して原因を探ってみます もちろんその後、結果とコードは出します : Name_Not_Found [sage] 2018/08/05(日) 22:17:31.82ID:??? 前スレ(とココ合わせて)見ればわかる スクリプト、特に広告はシミュで想定通り動かないこともある 何もjsfiddleでなくていい : Name_Not_Found [sage] 2018/08/05(日) 22:35:14.24ID:??? 今回の場合、レスポンス広告が想定通りに配置されることはこちらの複数環境下ではきちんと表示されるケースがほとんどでしたが ある環境・コードでtopに表示されるケースも確認済みです その辺りは話が分岐してしまうので、質問者のソースに近いコードが出た際に、それをベースにまとめてみます もちろん別のサイトでもいいしみたいなHTMLCSS形式でレスとして投稿してもらってもかまいません タブやスペースでコードが左へ寄ってしまうなどはこちらで整形するので気にしなくてもいいです : Name_Not_Found [sage] 2018/08/06(月) 22:26:05.24ID:??? なんか雲行きが怪しくなってきたな : Name_Not_Found [sage] 2018/08/07(火) 04:28:01.79ID:??? 大雨やな : Name_Not_Found [sage] 2018/08/07(火) 21:02:46.59ID:??? おそらく実際の広告で試してなかったか、読み違えてたか : Name_Not_Found [sage] 2018/08/07(火) 22:18:57.51ID:??? >削る作業が(汗 このレスから察するに、削るなんてものの30秒で終わるくらいの単純作業だし たぶん広告コード周りで間違えてたのかなぁと予想 : Name_Not_Found [sage] 2018/08/07(火) 22:53:02.02ID:??? 広告コード周りで何間違えるんだよw コピペするだけだぞ : Name_Not_Found [sage] 2018/08/07(火) 23:13:40.52ID:??? もしかしたらアドセンスをまだ登録してなくて他のサイトに貼られている広告コードを文字通り コピペしてたとか >(汗 ってくらいだから面倒って意味合いだと思うけど CSSも数行だし、ていうかすでに試してたなら削る部分がないし となると考えられるのはやっぱり広告コード周りかなぁとしか : Name_Not_Found [sage] 2018/08/07(火) 23:17:05.44ID:??? 他のサイトに貼られている広告コード というか、生成されたあとのiframe入りの・・w さすがにそれだったらズコーだけど : Name_Not_Found [sage] 2018/08/08(水) 11:26:20.31ID:??? 広告は表示されている、と書かれてる つまり正常に動作している コードもずばりではないがどうしたかは前スレで予想はつく 言われた例を試してまたここ用に書くのが面倒なんだろ それはよくわかる : Name_Not_Found [sage] 2018/08/08(水) 11:35:01.85ID:??? それだと >ちょっと期間ください でその後の >ちなみに で簡易にレスしたニュアンスに合わないんだよなぁ 削る作業、とも言ってるし : Name_Not_Found [sage] 2018/08/08(水) 12:19:02.41ID:??? 前スレからの流れを見てみると具体的なコードを出したのは回答者だけぽいし 質問者は、現スレの最初の方かもしくは以降での回答者のコードをCSSで試したはずで そのまま試したとも言ってるみたいだし、ならcssとhtml共にかなり簡単なコードなはずで 少なくともCSSを削る作業は面倒というか必要すら無いはず (あるとすればクラス名とか) やはりcss部分以外に削る作業があったという可能性の方が高い adsense使ったことがある人なら削る部分はid部分だけなんてのは一目でわかるが つまりそれ以外の>削る作業(汗 面倒な部分を感じたということは、おそらくid部分以外の 削るかどうかの判断が必要な箇所があるということ つまり背景をざっくり予想すると 自分専用のadsenseはまだ取得していない(取得中)、 自分の管理外のサイトを見て広告の表示を確認、 (管理外のサイトの)スクリプト生成後の広告をコピペして自分の管理内のサイトで広告表示テスト ということでは。 広告は表示されている、というのもおそらく =広告は生きている=承認済の広告 というニュアンスかと : Name_Not_Found [sage] 2018/08/08(水) 12:30:13.85ID:??? なんで? 自分のページで言われたことを当てはめて試した(その結果は書いてある) 問題部分以外(コンテンツや他の広告部分など)を削る 削ったところで結果は同じ(はず) なのに作業する 面倒だわ : Name_Not_Found [sage] 2018/08/08(水) 12:33:52.12ID:??? ああ、すまん のなんで?はへ : Name_Not_Found [sage] 2018/08/08(水) 12:47:48.91ID:??? >(コンテンツや他の広告部分など) 他のコンテンツや他の広告部分があったまま試してるのなら 回答者のコードを(広告コード部以外)そのまま試しておらず 自分なりに改変してしまったってことなので それはそれで、まだ最小構成で試してないの?ってことになるがw 要は「今の状況で失敗しまくるけど、削るのが面倒だし自分のページは自分が一番よく理解しているので 最小構成でなくとも大丈夫」ってことでしょ 面倒くさい以前の問題だな >諦めました とも言ってるみたいだが、諦めたくないのかどちらなんだろう、みたいな : Name_Not_Found [sage] 2018/08/08(水) 12:50:07.31ID:??? 他人の広告だろうがpositonなど位置は変わらないのでは? やったことないしやるつもりもないからわからんが それはどっちでも関係ないような : Name_Not_Found [sage] 2018/08/08(水) 12:51:54.72ID:??? ただ、が質問者なら、最小で試してるんだよなぁ その試したコードから察するにcssは2,3行 htmlは広告コード含めて10行そこら : Name_Not_Found [sage] 2018/08/08(水) 12:53:39.30ID:??? >他人の広告だろうが ってとことは、他人の広告だろうが(自分の広告だろうが) ってこと? : Name_Not_Found [sage] 2018/08/08(水) 13:04:11.41ID:??? 単純な話で、質問者が広告コード(clientとslot抜き)のhtmlと cssを晒せば解決するだけの話な気がする (コードから個人情報的なのがバレる?みたいなのを気にしてるならもう仕方ないが・・) あとは各回答者がid部分を変えて 自前サイトで検証すればいいし、webキャプチャなりwebエミュレートなりの サービス使って検証すれば、(完璧ではないが)スレの共通認識として成立するよなぁと ウェブ系の質問スレではソース見せたりは(もちろん見せてはいけない部分は配慮して)当たり前の事なんだけどなぁ・・ ここだけは特別なことなのだろうか。。 : Name_Not_Found [sage] 2018/08/08(水) 13:19:32.38ID:??? おれは最小構成で、自前サイト、知人数名、 webキャプチャ系(こちらのスクリプトに反応しないタイプ厳守)、 webエミュレート系(こちらのスクリプト(adblockなど)に反応しないタイプ厳守)、 計10個×(各種grid系やらpositon系やら)を全部やって、 一部grid系3個(検証50中3個)が効かなかったのを確認した上での 質問者「できませんでした」なので だったら次は、質問者が試したコードに限りなく近いコードで試してみよう、 もしかしたら超レアケースかもしれないし ってところ だが質問者以外にも若干名できないって言ってる人がいるみたいだし 質問者+若干名の凡ミスなのか、やってないだけなのか、レアケースなのかに興味があるわ : Name_Not_Found [sage] 2018/08/08(水) 20:13:33.83ID:??? 7です、遅くなってすみません 最小限のページを新規に作ったらなぜかて表示しなくてはまってたというか諦めてました 最小限でなくいつもは普通に書いた記事なら1発目から表示されるのですが 何回もというか時間経ったら以降は表示されるようになりました 自分専用のadsenseはかなり以前から取得して、もちろん今回もそのidのものです 同じid、同じや別のページ、同じや別の広告で入金もされています : Name_Not_Found [sage] 2018/08/08(水) 20:22:24.76ID:??? の方法を試したときのコードです html宣言や<head>は省略してますが特別なことはしてないです 書き込めないので「script」は全角にしてあります <body> <h1>adsテスト</h1> <p class="etc">上の要素</p> <div id="ads"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="・・・" data-ad-slot="・・・" data-ad-format="auto"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p class="etc">下の要素</p> </body> : Name_Not_Found [sage] 2018/08/08(水) 20:23:12.48ID:??? 続き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; } : Name_Not_Found [sage] 2018/08/08(水) 21:00:54.23ID:??? ローカルでだが、 ・css の全角スペースを除く ・insにwidth,heightを与える でセンタリングされたぞ : Name_Not_Found [sage] 2018/08/08(水) 21:31:02.26ID:??? 失礼、全角スペース混在はここ用に書き直したときの漏れです 書いて気がつきましたが実際は全角ではないです >insにwidth,heightを与える プロパティの値は何でしょうか? レスポンシブでその意味はあるのでしょうか? : Name_Not_Found [sage] 2018/08/08(水) 21:43:23.37ID:??? margin: auto によるセンタリングは、子要素のサイズが明示されないと機能しない : Name_Not_Found [sage] 2018/08/08(水) 21:50:31.05ID:??? 言葉が足りてなかった position: absolute; top:0; bottom:0; left:0; right:0; margin:auto によるセンタリングは、センタリングされる要素にサイズが明示されていないと機能しない (サイズがわからないと表示する位置を計算できないから) 広告側でins要素のスタイルにwidth, height がされていればセンタリングされるはず : Name_Not_Found [sage] 2018/08/08(水) 21:59:05.96ID:??? 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; } : Name_Not_Found [sage] 2018/08/08(水) 22:15:44.39ID:??? ,233 なるほどありがとうございます こちらで整形しておきました ttp://https://jsfiddle.net/6d93bsge/ "> ttps://jsfiddle.net/6d93bsge/ 変更点は、#ads要素のheightを100pxから600pxした部分です。 意図的にスクエア広告も出したいため、と センタリングを誇張するため、という理由です(念の為height:100px;も検証済でセンタリングされました)。 (HTMLの<!-- -->内はこちらがレスポンシブ広告コードを取得したときのコードです) 結果のキャプチャ以下です (特にポリシー違反に紐付けされるわけではありませんが広告には一応モザイク入れておきます) ttps://i.imgur.com/4K3mVcO.jpg (つづく 1/2) : Name_Not_Found [sage] 2018/08/08(水) 22:17:43.08ID:??? ,239 (つづき 2/2) 次は、それぞれウィンドウ幅を変え、レスポンシブさせた場合 ttps://i.imgur.com/I3TxIkc.jpg ttps://i.imgur.com/8uPy2e5.jpg そして最後にウィンドウの幅をさらに狭めて、スクエア広告 ここでは、insにdata-full-width-responsive="true"を付加しています ttps://i.imgur.com/0wE5SIQ.jpg 縦が多少top寄りだと思います これは、親insの縦幅よりも広告のimgサイズが小さいために起こるみたいです なのでスクエアできっちり縦をセンタリングするのは難しいか別の方法があるのかもしれません こちら検証の最終コードは ttps://jsfiddle.net/2v5abfxy/ です。変更点は #abs>insにtext-align:center; insにdata-full-width-responsive="true" の2点です webキャプチャ、エミュレータなども試したところ上記画像と同じ結果でした(10数個検証)。 もしこれでダメなようであれば、ブラウザなど特殊な環境の可能性があります : Name_Not_Found [sage] 2018/08/08(水) 22:33:35.90ID:??? >最小限でなくいつもは普通に書いた記事なら1発目から表示されるのですが >何回もというか時間経ったら以降は表示されるようになりました >表示される、とはセンタリングができるということ? それとも、センタリングはされないが広告は表示される、ということ? : Name_Not_Found [sage] 2018/08/08(水) 22:34:08.55ID:??? insのwidth,heightは中のstyleで書かれるから意味なくね? : Name_Not_Found [sage] 2018/08/08(水) 23:01:49.39ID:??? 補足 >ブラウザなど特殊な環境 拡張とかブラウザの設定とか : Name_Not_Found [sage] 2018/08/10(金) 23:00:06.66ID:??? >書き込めないので「script」は全角に こういう作業がけっこう面倒なんだよな 初め原因わからなかたり書き込みブラウザ変えてみたり ブラウザ変えると後で自分のレスか否かとか面倒だったり : Name_Not_Found [sage] 2018/08/11(土) 01:12:15.67ID:??? ようはにテンプレとして ttps://codepen.io/pen/ ttps://jsbin.com/ ttps://jsfiddle.net/ ttps://ideone.com/ などがあれば面倒なことなど何もなかった もちろんレスだけで済むような事例にいちいち使わなくていいが 原因不明の場合その方が意思疎通がスムーズなのは明らか ついでにscreenshot系のサービスも信頼性が高ければ入れとけば完璧 何が起きても机上の空論で何がなんでもレスのみで解決 とかこの界隈ではありえん : Name_Not_Found [sage] 2018/08/11(土) 17:47:19.49ID:??? うざ : Name_Not_Found [sage] 2018/08/11(土) 19:50:27.46ID:??? ざらめ : Name_Not_Found [sage] 2018/08/11(土) 20:40:53.50ID:??? メンチカツ : Name_Not_Found [] 2018/08/12(日) 05:17:43.84:C4ZszdQk 釣り著しく好き三平 : Name_Not_Found [sage] 2018/08/13(月) 16:04:27.81ID:??? blogって自分で組めるの? : Name_Not_Found [sage] 2018/08/13(月) 22:34:45.91ID:??? はい : Name_Not_Found [sage] 2018/08/14(火) 02:44:10.63ID:??? formとblogはいまだによくわからない。 : Name_Not_Found [sage] 2018/08/14(火) 08:51:26.19ID:??? これおかしくないか? レスポンシブと言ってるのになんでサイズ指定してんだ #ads > ins { 〜 width: 100px; height: 50px; } : Name_Not_Found [sage] 2018/08/14(火) 09:42:43.94ID:??? <wbr> ってブラウザによっては対応してないの? : Name_Not_Found [sage] 2018/08/14(火) 10:59:31.25ID:??? > >これおかしくないか? >レスポンシブと言ってるのになんでサイズ指定してんだ > >#ads > ins { >〜 >width: 100px; >height: 50px; >} 広告がわのスクリプトでサイズが設定されればセンタリングされる、ということを示す例ですね : Name_Not_Found [sage] 2018/08/14(火) 11:27:34.43ID:??? はい : Name_Not_Found [sage] 2018/08/14(火) 14:26:06.83ID:??? 私もHTMLとCSSだけで簡易なブログというか日記みたいなのを載せたいのですが、 どこ参考にするのが一番でしょうか。 : Name_Not_Found [sage] 2018/08/14(火) 16:15:36.86ID:??? よく見るブログとかある? それをコピーしたらいいよ で、たとえば色の番号とか文字の大きさとか 自分でもわかりそうなところをまずいじって どんな変化が起こるのか試してみればいい 意地悪で言ってるのではなくわりとまじで : Name_Not_Found [sage] 2018/08/14(火) 18:02:24.04ID:??? HTMLとCSSだけでブログはできないぞ COOKIEやLocalStorageに保存して自分だけで見るならいいけど : Name_Not_Found [sage] 2018/08/14(火) 20:38:24.30ID:??? 紛らわしいな、コメントでも入れとけや : Name_Not_Found [sage] 2018/08/14(火) 22:09:35.85ID:??? コメントとトラックバックは難しいけど それ以外はなんとかなるなる : Name_Not_Found [sage] 2018/08/14(火) 23:59:58.80ID:??? Blogははてなとか使って、カスタマイズするのがよろしいのか : Name_Not_Found [sage] 2018/08/15(水) 01:43:52.45ID:??? このスレ的には WPやMT使ってごにょごにょするのを推奨したいな : Name_Not_Found [sage] 2018/08/15(水) 04:54:40.71ID:??? で、結局がセンタリングされなかった理由はなんなん : Name_Not_Found [sage] 2018/08/15(水) 19:15:50.43ID:??? その後の繰り返しでわかってきたことです ならないは不正確で、なるときとならないときがある、でした 箇条書きするとこんな感じです 広告によって上寄せになる広告もある 同じページを何回もリロードさせると現象がわかる 新規簡易ページでも従来の記事のページのどちらでも現象は出る ウィンドウ幅400〜500px位だと上寄せが出る回数が多い様子(幅100%、高さ100pxの場合) : Name_Not_Found [sage] 2018/08/17(金) 21:01:38.77ID:??? >・insにwidth,heightを与える 与えるものではなくて与えられるもの よって意味なし : Name_Not_Found [sage] 2018/08/17(金) 22:41:01.03ID:??? 確かに広告側でins要素にwidth,heightを設定してくれているなら、ins要素にwidth,heightをしておく意味はない ……というか設定すべきではないね 書き忘れてて申し訳ないが、そもそも >238 は広告側がそれをやってくれていればセンタリングされるはず、という例示だった で、センタリングされないという状況から推測できるのは ・広告側では必ずしもins要素にwidth, heightを設定しない →センタリング方法を変える必要あり もしくは ・表示される広告に対して間違ったwidth, heightが設定されている →こっちでins要素にwidth,heightをしているならそれが優先されている可能性があるが、そうでないならそういう広告だと考えるしかないような…… : Name_Not_Found [sage] 2018/08/17(金) 22:51:28.11ID:??? display: flex が使えるなら ins要素の親に以下を指定するだけでいい気がする display: flex; align-items: center; justify-content: center; : Name_Not_Found [sage] 2018/08/18(土) 15:33:40.19ID:??? 最初から読んでないならややこしくなるだけだから それと、自分でbox作って自分でwidth, height当ててできると言ってるのも問題外 (の人はちゃんとやってるから別) 最初からそういう問題ではないと書いてあったはず : Name_Not_Found [sage] 2018/08/18(土) 17:18:12.41ID:??? ぶっちゃけheightを100pxという狭い固定なら 出る広告の縦サイズも限られてるよね ならinsの直親要素をその広告の最大サイズに設定しとけば 少なくとも、その親の親要素の縦のセンタリングは気にする必要なくね どのみちテキスト白地広告とかディスプレイ広告だと 最下層の入れ子ins下で数pxの誤差のある広告が出ることあるし : Name_Not_Found [sage] 2018/08/18(土) 17:20:49.21ID:??? あとは、レスポンシブ広告側で縦の最大最小サイズを設定しとけば さらに確実 : Name_Not_Found [sage] 2018/08/18(土) 17:25:38.91ID:??? 上で言われてるinsにwidth,heightが与えられるときと与えられない時がある そういうの見たこと無いので、ほんとかどうかは知らないが もしかするとあえて広告側で最小最大設定すれば 確実にwidthとheightが与えられるかも 試すのめんどいからやらないけど : Name_Not_Found [sage] 2018/08/18(土) 20:45:13.85ID:??? 広告の仕組みわかってないようだな 数pxの誤差なんてレベルではないし、親の親ってなんだ? : Name_Not_Found [sage] 2018/08/18(土) 21:53:05.17ID:??? そもそも縦が100px固定ってほぼ横長バナーを想定してると思うのだが 広告の最小縦幅が60pxで次が90px? たったこの2種類幅を考慮するメリットがあるのだろうか レスポンシブで例えば縦幅73pxみたいな微妙な幅って出たっけ? : Name_Not_Found [sage] 2018/08/18(土) 22:46:53.44ID:??? 100px、75pxもあるよ 今後変わるかもしれんしいちいちそんなこと気にしてないだろ : Name_Not_Found [sage] 2018/08/18(土) 22:50:00.53ID:??? 100pxは例えであってそれで完成ではないかもしれんし 別の箇所では違う高さかもしれんし 今そこは重要なことではない : Name_Not_Found [sage] 2018/08/18(土) 22:58:24.96ID:??? いや質問者は二度も、高さ100pxの場合って言ってるから 100xp固定の場合の解決例を示しただけじゃん カモしれないって自分で言ってんのに、なぜそれを元に重要なことではないと断言できるんだろ 単にマウント取りたいだけか? : Name_Not_Found [sage] 2018/08/18(土) 23:02:53.55ID:??? そう、つまり微妙な幅も出るかもしれないし、今後変わるかもしれないから 広告側で範囲を設定した方が無難 もしかしたらその設定でwidthもheightの設定がデフォになるかもしれない そもそもinsにwidthやheightが設定されないor別の値が設定される という再現ができないんだよな ほんとか? : Name_Not_Found [sage] 2018/08/18(土) 23:04:39.40ID:??? width,heightが、設定されないor広告にあってないサイズ値が設定される というのを再現できれば 広告側で範囲設定後にサイズ値が強制的に設定される というのも確認できるんだがなぁ : Name_Not_Found [sage] 2018/08/18(土) 23:06:00.31ID:??? 訂正 設定されないor広告にあってないサイズ値が設定される →設定されないor広告にあってないサイズ値が設定される、場合がある : Name_Not_Found [sage] 2018/08/18(土) 23:09:50.51ID:??? ちなみに、広告の親要素にあってないサイズ これは広告の親要素の縦幅を100px以下、具体的には60pxにしたとき 縦幅100pxや90pxの広告が表示されたことは確認できた : Name_Not_Found [sage] 2018/08/19(日) 15:20:41.62ID:??? 君が最初から読んでないだけだから、もういいだろ >width,heightが、設定されないor広告にあってないサイズ値が設定される いつからそんな話に?無茶苦茶だな : Name_Not_Found [sage] 2018/08/19(日) 16:17:08.61ID:??? いや、前スレから読んでるから。 で、最初は高さは質問者も限定してないが その後に質問者が100px固定で回答する で、回答者がそれぞれ高さ固定の例を示してや その後に質問者が、100pxの場合について再度確認してる なので100pxの場合を示しただけ。 もちろん別の場合(100px固定以外)があれば その対処を示せばいいだけの話なんだが? が、なぜ”かもしれない”で100px固定限定の場合の回答を 重要でないと断言できたのかが意味不明 >width,heightが、設定されないor広告にあってないサイズ値が設定される の推察として可能性があがっていたから。 後者は確認済 前者がもし無いのであれば そもそもの、topに表示されてしまう、という原因がさらに絞れる : Name_Not_Found [sage] 2018/08/19(日) 16:32:13.77ID:??? ちなみにおれが思うに 前スレから今までの質問者の回答、 の >なるときとならないときがある >広告によって という部分から (1)最下層のins下のディスプレイ広告(img)のサイズよりも 最上のins要素のサイスがでかい かつ (2)広告の親要素の縦幅が100px固定で 最上ins要素の縦幅が100pxのディスプレイ広告がでた が、topに配置されているように(見える)原因だと思う これだと辻褄が合う つまり、 最上のinsは親要素(100px固定)の縦幅全部に表示されている(≒センタリングされている)が、 最下層のimgはトップに位置されている が正解かと (1)はレスポンシブ広告のを知っている人、実際に試してみた人、 広告の表示テストした人、しか伝わらないので注意な どうも想像で話してる人が紛れ込んでるようなのであえて言うが。 : Name_Not_Found [sage] 2018/08/19(日) 16:40:09.22ID:??? 訂正 256 × ○ : Name_Not_Found [sage] 2018/08/19(日) 19:23:59.51ID:??? 質問は高さ固定、つまり ・まだ決めてない ・幾つかあって異なる ・今後変更になる など様々考えられる 100pxは「場合」とあるがソース出すのにとりあえず書いた可能性がある それを100pxだけに絞る意味がない 勝手に問題文読み変えて答えてるようなもんだ あくまで質問は「高さ固定」 つまり80pxやその他もあるかもしれん >広告にあってないサイズ値が設定される 意味がわからん 仕様はサイズ値に合う広告が表示される 前者はソースで書かれている : Name_Not_Found [sage] 2018/08/19(日) 19:29:38.81ID:??? の最後の行は混じったので削除 >width,heightが、設定されない などどこにも書かれてない、ということ : Name_Not_Found [sage] 2018/08/19(日) 20:29:23.46ID:??? >100pxは「場合」とあるがソース出すのにとりあえず書いた可能性がある >その他もあるかもしれん それはわかってる、その先の話をしてる。 ひとりの回答者が100px固定以外での回答例を出したのにもかかわらず その後に再度で100pxでのテストを示した つまり、80pxでも500pxでも、他にあるのかは質問者以外にはわからないが 少なくともの時点では質問者は何らかの理由で100px固定でのこだわりを見せた。 それに答えただけ。ただ、それだけ。 今、他の高さ固定パターンがある云々は的外れ >広告にあってないサイズ値が設定される 意味がわからないのは、実際に試してないから もしくは例外に出会ってないからからだと思う 例えば広告の親要素の高さを60pxや80pxにして 何回かレスポンシブすると、高さ90pxや100px広告が出てくることがある : Name_Not_Found [sage] 2018/08/19(日) 20:35:07.27ID:??? >例えば広告の親要素の高さを60pxや80pxにして >何回かレスポンシブすると、高さ90pxや100px広告が出てくることがある それ大問題だろw : Name_Not_Found [sage] 2018/08/19(日) 20:39:17.91ID:??? よくよく見てみたら、最初の回答者の例も 500px固定なんだよな その後の「やってみました」というのも固定幅に関しては言及なしで テストにしろ質問者の具体的な固定幅が発覚したのはが初。 の現象(また、前スレから言っていた、広告がトップに表示される云々の現象)も 100px固定、もしくはディスプレイ広告のimageサイズの誤差が生じる範囲の縦幅 (自分は親要素(100pxから)500px固定の、横バナーとスクエア広告でズレを確認済み) だったという可能性がある : Name_Not_Found [sage] 2018/08/19(日) 20:56:39.27ID:??? ちなみに広告の親要素(薄紫)60px固定で、最上ins要素のheightが90pxで表示された例 ttps://i.imgur.com/rwEFw79.jpg こちらの環境では10回に3回以上は表示されるみたいなので 同じ現象の人もいるかも (もちろん広告の最大最小設定は外してる) : Name_Not_Found [sage] 2018/08/19(日) 20:56:58.13ID:??? 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まで設定を変えようとは思わないのでそこは無視でいいです ↑ということはこれ以上やりようがなさそうで納得してきた感じです : Name_Not_Found [sage] 2018/08/19(日) 21:01:40.96ID:??? すれ違いでした 数十回やってますが今の所広告画像がはみ出たことも一度もありません : Name_Not_Found [sage] 2018/08/19(日) 21:08:03.79ID:??? それはすまんかった もち、子孫insにcss設定してなくてだよな? でもそれ大問題だな ってもみなたいてい親要素に高さ指定しないから気がつかないかほったらかしなんだろうな : Name_Not_Found [sage] 2018/08/19(日) 21:11:55.63ID:??? >子孫insにcss設定してなくてだよな? もちろん、親を高さ60px固定で、広告に高さ60px以上出るような設定はなし : Name_Not_Found [sage] 2018/08/19(日) 21:16:44.06ID:??? リロードする度に広告下が上下に動いたりmarginによっては重なったりするってこと? 仕様かなりまずくないか? : Name_Not_Found [sage] 2018/08/19(日) 21:26:08.21ID:??? ちなみにを画像で説明した方がわかりやすいと思うので これが何もない状態 広告の親(薄紫)の高さ100px固定 ttps://i.imgur.com/Cd0dLlb.jpg これに対し、その高さ以下でレスポンシブ広告が表示され(赤枠、最上ins要素) さらにセンタリングされたときの例 ttps://i.imgur.com/JvCm7lr.jpg で、実際に目に見えるその広告部分(青色) ttps://i.imgur.com/6BU9nS3.jpg 実際には目に見えない赤枠を外すと、広告はこうみえる ttps://i.imgur.com/o6L3sIZ.jpg 一方で、広告によっては、青色の部分が中途半端な高さになることがある (今のところ一枚画像タイプの広告で確認) それがこれ ttps://i.imgur.com/vz8t900.jpg 実際に目に見える部分だけみると ttps://i.imgur.com/4k5aAuv.jpg もうおわかりかと思うので端折るが、親高さ100px固定と同じ広告が出た場合 ttps://i.imgur.com/mWZOgXt.jpg で、これ ttps://i.imgur.com/maxIBvL.jpg もちろん100px固定でなくとも同じ現象がある こちらでは100pxから500だったか600px固定だったかで確認済み まずこのあたりを探ってみて、これでなければおそらく環境 : 297 [sage] 2018/08/19(日) 21:31:20.57ID:??? あ、の下の方に書いてあったかすまん ということは解決でいいのか : Name_Not_Found [sage] 2018/08/19(日) 21:40:57.52ID:??? 度々7ですがは撤回します 親の高さ60pxは試したことがなく今出ました それでwindow幅を400pxや450pxにするとけっこうな確率で出ますね 更に以前教えてもらった #ads > ins { position: absolute;〜} も与えるとpタグの上の要素にまで上がって重なってしまう場合もあります となると親の高さは何pxなら大丈夫という確信が取れないので要検討です 画像の上寄せは相変わらずの通り出ますがこれは大した問題ではないように思えてきました : Name_Not_Found [] 2018/08/19(日) 21:56:39.57:1HXe1aM8 htmlCSSド素人です LINE風に画像を表示したいのですがそれだけではなく 左側に画像を横並びにしたり、それぞれ吹き出しの色を変えたりしたいです ○(コメント) 〇〇(コメント) 〇〇○(コメント) 吹き出しから伸びる三角と右側の画像と吹き出しはいらないです よろしくおねがいします : Name_Not_Found [sage] 2018/08/19(日) 21:57:07.34ID:??? (1)画像上寄せが起こる → insはセンタリングできているが画像が上寄せなので広告がセンタリングできていないように見える パターンと (2)親要素以上のサイズの広告が出る → センタリング以前に位置がおかしくなる パターン どこまでウインドウ幅を縮めるのかによるけど ウインドウ幅を縮められる最小幅を固定(スクリプト無しにできたっけ?)し 広告幅も範囲設定で(2)は攻略できそうだが : Name_Not_Found [sage] 2018/08/19(日) 22:20:56.28ID:??? 今更ですが、当初読んでるはずですが関係ないやで記憶にもありませんでした ttps://support.google.com/adsense/answer/3213689?hl=ja 高さが固定または制限されているコンテナには設置しないでください。 メディアクエリのページは読んでいたのですが @mediaだとサイズ決め打ちになってしまい、いまいちです 幅100%とシンプルかつ画面を最大活用したかったのですが みなさんお騒がせしました、そしてありがとうございました : Name_Not_Found [sage] 2018/08/19(日) 22:37:32.16ID:??? (1)はあきらめましたが、(2)は親の高さ100px以上にしてかつ overflow: hidden; を入れるといいようです 確証ないのとwindow幅狭めると広告が消えていきますが 更にmax-〜を組み合わせると進展ありそうな気がします ttps://support.google.com/adsense/answer/6307124?hl=ja (当初から今も見ていたページの方) : Name_Not_Found [] 2018/08/20(月) 14:37:34.19:m1CfMfwW やりたいことはわかったが 質問はなんなのかね : Name_Not_Found [sage] 2018/08/20(月) 15:31:18.65ID:??? やりたいことわかったのかすげえ… : Name_Not_Found [sage] 2018/08/20(月) 16:28:51.98ID:??? 質問じゃなくてコード無料で書いてもらおうっていう乞食もきちゃうからこういうスレって難しいよね : Name_Not_Found [sage] 2018/08/20(月) 18:52:26.23ID:??? 余裕ある貴族が恵んでやればいい 恵んであげたくない人はスルーでいいんだよ : Name_Not_Found [] 2018/08/20(月) 18:59:10.26:zj/EfJuA すいません言葉足らずでした 検索して参考にしたサイトでは 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~>を並べるだけでは画像が縦に並んでしまうので横に並べる方法が知りたいです : Name_Not_Found [sage] 2018/08/20(月) 19:13:27.75ID:??? <div.faceicon>の幅を40pxで固定しているからだな これとfloatで横に並べるのをやめにして 親要素作ってflexで横並びにすればいいと思うよ : Name_Not_Found [sage] 2018/08/20(月) 20:24:59.83ID:??? くどいようで申し訳ないが googleは高さ固定ダメと言いつつメディアクエリで設定してるとは 結局同じことだと思うが曖昧というかなんなのだろう?極端な話、 width: 100%; height: 100px; は @media screen and (min-width:1px) { width: 100%; height: 100px; } と等価なわけで %指定がいけないのか、高さ幅共に何px指定しなければいけないのか 100%でも(レンダリング中変にjsで動かしたりしなければ)サイズ算出に問題ない気もするが だがそんなニュアンスの文は見当たらないような、よくわからん : Name_Not_Found [] 2018/08/20(月) 20:58:35.89:CyDbVEPk html、CSS、画像ファイルで神経衰弱ゲームがつくれるとのことですが、 下記のまとめ項目にまとめたソースコードがあったり、枠内にいろいろなソースコードがあったり、 どこのファイルにどう記述すればよいのかサッパリわかりません。 ttps://magnets.jp/web_design/6308/#midashi2 : Name_Not_Found [sage] 2018/08/20(月) 21:05:48.55ID:??? よく読みたまえJSも使ってる コードはデモページから拾えばいいよ あとカードをひっくり返すエフェクトは そのままだとIE11で苦労するから気をつけ… …と、思ったけどCSS使ってないんかこれ : Name_Not_Found [sage] 2018/08/20(月) 23:31:01.52ID:??? まさかbackface-visibilityでハマった奴が俺以外にいたとは : Name_Not_Found [sage] 2018/08/21(火) 03:30:58.39ID:??? <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>神経衰弱</title> <style> </style> </head> <body> <ul id="card"></ul> <script src=" ttps://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 を入れる : Name_Not_Found [sage] 2018/08/21(火) 06:34:56.01ID:??? Ruby, Selenium WebDriver を使って、 5ch のスレを解析して、書き込みから、画像ファイルへのリンクを抜き出して、 <img> へ変換しようと思っていますが、 各画像のサイズがバラバラで、表示される高さを、画面に収まるようにしたいので、 img { height: 550px; } と設定して、画面の高さの80% ほどに見えますが、 他のPC では、80%にならないと思うので、 他のPCでも同じように、80%ぐらいに表示するには、どうすれば良いでしょうか? : Name_Not_Found [] 2018/08/21(火) 14:20:10.80:rZEbS2CO height: 80%; では駄目な特別な理由がなにかあったりする? : 315 [sage] 2018/08/22(水) 00:01:50.28ID:??? 高さの100% の基準がわからない。 PC の画面の高さなの? よくわからないので調べてみます : Name_Not_Found [sage] 2018/08/22(水) 00:37:09.15ID:??? 親だよ : 315 [sage] 2018/08/23(木) 01:18:12.75ID:??? 5ch のスレを解析して、書き込みから、画像ファイルへのURL を、あるだけ抜き出すから、 URLの数は決まらない それらのURLをすべて、<img>に変換して、ドンドン追加していくから、全体の高さも決まらない ただ画像本来の高さにすると、画像の大きさがバラバラで揃わない : Name_Not_Found [] 2018/08/23(木) 14:31:16.12:zFqa5sGT まず枠になるボックスを固定サイズで置いて その中に<img>要素を置いて position:absolute、margin:auto、上下左右:0で中央にして width/height:autoでmax-width/max-height:100%でどうだろう : 315 [sage] 2018/08/23(木) 23:52:16.35ID:??? >枠になるボックスを固定サイズで置いて img { height: 550px; } 今は、画像を固定サイズにしていますが、枠を固定サイズにしても同じことでしょ? 漏れのPC では、550px で、画面の高さの80% ほどに見えますが、 他のPC やスマホでは、どうなのでしょう? 異なるデバイスでも、そのデバイスの画面の高さの、80%ほどに見えてほしいのです : Name_Not_Found [sage] 2018/08/24(金) 00:01:59.08ID:??? 試す前に決めつけイクナイ : Name_Not_Found [sage] 2018/08/24(金) 02:10:55.57ID:??? そんなあなたにvwとvh ていうかまず試せよせっかく有用な助言もらってんだから %の高さの使い方は誰でも通る混乱ポイントだから こんな文字だけの掲示板であーだこーだ言うよりも 納得いくまで色々試しまくるんだ! : Name_Not_Found [sage] 2018/08/24(金) 09:17:37.00ID:??? 皆試行錯誤してノウハウ溜めていくんだよ : 315 [sage] 2018/08/25(土) 10:16:36.25ID:??? >枠になるボックスを固定サイズで置いて <div class="img_wrapper"> <p></p> <img> </div> <img> は、<div> の子要素にしています。 <p> には、画像のURL を書いています .img_wrapper { height: 600px; } ここで、div をpx で書くと、 漏れのPC では、画面の高さの80% ほどに見えますが、 他のPC やスマホでは、どうなのでしょう? 異なるデバイスでも、そのデバイスの画面の高さの、80%ほどに見えてほしいのです : 315 [sage] 2018/08/25(土) 10:34:21.12ID:??? vw, vh は、異なるデバイスの、異なる画面の大きさに対する、割合で指定できますね これを使ってみます! : Name_Not_Found [sage] 2018/08/25(土) 17:22:54.95ID:??? お、おう : Name_Not_Found [sage] 2018/08/25(土) 19:35:02.39ID:??? なに引いてんだよ(´・ω・`) : Name_Not_Found [sage] 2018/08/25(土) 20:05:50.73ID:??? う、うん… : Name_Not_Found [sage] 2018/08/25(土) 20:17:09.13ID:??? htmlのタグが、どのcssファイル内でセレクトされているか、逆に、 cssのセレクタが、どのhtmlファイル内のタグをセレクトしているか が簡単にわかる方法はありませんか・・・? visual studio code と chromeの検証を使用しています ファイル数が多かったり、ファイルの内容が多かったりすると、 どのタグがどのcssやjsで指定されているのかを見つけるだけでも一苦労でして・・・ 宜しくお願いします。 : Name_Not_Found [sage] 2018/08/25(土) 23:34:22.43ID:??? よくわからんがおそらく chromeでF12押してElements : Name_Not_Found [sage] 2018/08/25(土) 23:37:27.01ID:??? 結局で親からはみ出る件は何がいけなかったのだ? : Name_Not_Found [] 2018/08/26(日) 00:04:23.81:+6mfaudC 画像(imgタグ)のレスポンシブ対応をしようと思ってます。 で、いろいろ調べたんですが <picture>を使う方法と<img>に直接srcset属性を入れる方法がある ということがわかりました。 これはどっちを使えばいいのでしょうか? 自分的には全部<picture>でいいんじゃないかと思うんですが ttps://parashuto.com/rriver/responsive-web/picture-srcset-use-case 「なんでもかんでも<picture>要素を使えばいいわけじゃない!」 っていう記事に使い分けが書かれてるようなんですが、正直よくわかりません。(情報が古い?) あと、<picture>で実装した場合 パソコンでブラウザの幅、大きくしたり小さくしたり繰り返してると 同じ画像を何度も読み込んでる気がしますが、これは仕様なんでしょうか? : Name_Not_Found [sage] 2018/08/26(日) 02:54:03.23ID:??? ヒーローイメージくらいしか使いみちなさそう。そこまで通信量考えるなら画像使うなよと言いたい : Name_Not_Found [sage] 2018/08/26(日) 05:46:43.60ID:??? 前者はブラウザの開発ツールで 後者はなかなか難しい : Name_Not_Found [sage] 2018/08/26(日) 06:38:35.03ID:??? >htmlのタグが、どのcssファイル内でセレクトされているか、 VSCode にそういうプラグインは無いか? CSS Peek とか? VSCode - 10 Useful Extensions for Web Development | GTCoding ttps://youtu.be/wzreuKDbLyk?t=2m29s >逆に、 cssのセレクタが、どのhtmlファイル内のタグをセレクトしているか これは、無数のHTML要素に該当する可能性があるから、難しい ブラウザのF12 開発者ツールで、見るのが良さそう : Name_Not_Found [sage] 2018/08/26(日) 06:52:53.18ID:??? >あと、<picture>で実装した場合 >パソコンでブラウザの幅、大きくしたり小さくしたり繰り返してると >同じ画像を何度も読み込んでる気がしますが、これは仕様なんでしょうか? ブラウザがキャッシュするから、同じ画像は、何度も読み込まないと思う ブラウザのF12 開発者ツールで、読み込んだファイルを確認してみれば? : Name_Not_Found [] 2018/08/26(日) 13:54:00.35:XWM1JSh3 chromeのデブツールで確認したらなんども再読込してた。 <picture> <source media="(max-width: 762px)" srcset="img_sp.jpg"> <img src="img_pc.jpg" alt=""> </picture> こんな感じにして762pxを境にブラウザの幅行き来したら 再読込したりしなかったり。条件がよくわからない。 でもhttpステータスは304だから更新はないって判定なんだろうけど リクエストはしてるのかな?と思って : Name_Not_Found [sage] 2018/08/26(日) 17:56:43.24ID:??? 304なら再読み込みしてないじゃん cache使ってるでしょ : Name_Not_Found [sage] 2018/08/26(日) 23:58:37.83ID:??? 同一URL なら、キャッシュから読み込む。 キャッシュを使わない、ブラウザはないと思う だから、ファイルの内容を変えた場合は、ファイル名も変えるようにする。 同一URL だと、キャッシュが使われてしまうから、内容が古いまま : Name_Not_Found [sage] 2018/08/27(月) 00:46:27.68ID:??? サーバーレスポンスCache-Controlで変えれる : Name_Not_Found [sage] 2018/08/27(月) 19:41:46.78ID:??? Chromeでデータセーバー有効かつ低速だとJSが無効化されるようになったそうですが、 目次の表示/非表示ってCSSだけで出来ますか? : Name_Not_Found [sage] 2018/08/27(月) 20:42:00.31ID:??? 出来なくもない ラジオボタンやチェックボックスのcheckedと 表示非表示を切り替えたいブロックを セレクタの+で繋げれば なんか猫も杓子も目次書くようになったな グーグル様のお達しはやっぱ効力あるな : Name_Not_Found [sage] 2018/08/28(火) 02:06:19.10ID:??? Gに踊らされすぎやわ : Name_Not_Found [sage] 2018/08/28(火) 10:17:55.58ID:??? 俺がルールだ的な傲慢さは出てきたよね。 邪悪な企業まであと一歩。 : Name_Not_Found [sage] 2018/08/28(火) 10:32:39.69ID:??? 傲慢はいかんの? : Name_Not_Found [sage] 2018/08/28(火) 11:51:43.90ID:??? ampとか開発者から見たら筋悪なの分かってたじゃん? でも経営サイドが踊らされて業務として降ってくる。 センスないことゴリ押しされるとホント迷惑。 : Name_Not_Found [sage] 2018/08/28(火) 15:21:12.15ID:??? CSSでGridLayoutを使っている時にふと疑問に思ったのですが、 例えば日記を更新していく際に、 新しいトピックを一番上のグリッド(マス)持っていくにはどうすれば良いのでしょうか? ttps://blog.splout.co.jp/wp-content/uploads/2017/12/grid02.png こちらの画像で言いますと、 item1が一番新しい記事で、item9が一番古い記事だとしますと、 新たに最新の記事を加えた場合、 元々あったitem1の記事がitem2のマスに移動して、item2にあった記事がitem3のマスに移動して・・・ という風にしたいのですが・・・ : Name_Not_Found [sage] 2018/08/28(火) 15:48:43.28ID:??? CSS変数を使うとかでしょうか・・・? 基本的には、こういうのですとJavaScriptを使うのが普通でしょうか? : Name_Not_Found [sage] 2018/08/28(火) 16:36:23.65ID:??? HTMLの問題じゃない? : Name_Not_Found [sage] 2018/08/29(水) 00:52:36.84ID:??? メディアクエリの幅指定はスクロールバーを含めた値ですが、 webkit系ブラウザだとそれを含めずに算出するバグがあると以前聞きました。 現在でもこのバグは継続していますか? : Name_Not_Found [sage] 2018/08/29(水) 02:25:37.10ID:??? 逆に誰がバグにしたのか知りたい : Name_Not_Found [sage] 2018/08/29(水) 11:14:59.48ID:??? ありがとうございます 作成できました : Name_Not_Found [sage] 2018/08/29(水) 11:58:04.01ID:??? blinkも初期にそのバグあったが治ってた safariは使ってないので知らん : Name_Not_Found [sage] 2018/08/30(木) 02:24:39.67ID:??? css overflow スクロールバー css fit-content スクロールバー で検索して : Name_Not_Found [sage] 2018/08/31(金) 00:32:22.21ID:??? それってネグレクトじゃね? 児相に通報した方がいいぞ 確信がなくても可能性があるなら通報する義務が国民にはある そうじゃないと思っててそうだった時が一番大変だしね : Name_Not_Found [sage] 2018/08/31(金) 00:32:51.20ID:??? ごめんて : Name_Not_Found [sage] 2018/08/31(金) 18:24:58.89ID:??? スクロールバー虐待 : Name_Not_Found [sage] 2018/08/31(金) 23:07:18.11ID:??? ウインドウズもぞろぞろスクロールバーはやめてくれると捗るんだがなあ : Name_Not_Found [sage] 2018/09/01(土) 01:16:56.00ID:??? レスポンシブで画像以外のコンテンツの表示分けって どうやって対応してる? wp_is_mobile();みたいに ソースレベルでちゃんと出しわけしてるの? : Name_Not_Found [sage] 2018/09/01(土) 07:50:26.91ID:??? CSSで表示だけ出し分けることが多いなあ : Name_Not_Found [sage] 2018/09/02(日) 13:13:44.32ID:??? ホッしたw でも冷静に考えたら、ほんの数か所の為にサーバーサイドを必須にしなければいけないのは非効率だよね。 ブラウザに無駄なもの読み込ませているのは確かに気持ち悪いんだけど : Name_Not_Found [] 2018/09/02(日) 17:33:17.95:wnLLgn7D WEBってなんで2018年なってもいまだに HTML,CSS,JavaScriptとかいう糞言語で描いてるんだろう。 絶対パフォーマンス悪いだろ。 : Name_Not_Found [sage] 2018/09/02(日) 17:43:52.36ID:??? クソ言語だとパフォーマンス悪くなる。 だけど今のウェブを見るとパフォーマンス悪くないので クソではなかったということさ 事実を受け入れよう : Name_Not_Found [sage] 2018/09/02(日) 17:57:10.12ID:??? 何だったら納得するのさ(´・ω・`) : Name_Not_Found [] 2018/09/02(日) 18:09:28.65:wnLLgn7D ブラウザってHTMLを受け取ってそれをパースして DOMツリー作ってると思うんだけど それならはじめからDOMツリー書いて渡せばよくね? : Name_Not_Found [sage] 2018/09/02(日) 18:11:36.70ID:??? え? DOMツリーをHTMLで書いて渡してますよね? : Name_Not_Found [sage] 2018/09/02(日) 18:25:56.46ID:??? え : Name_Not_Found [sage] 2018/09/02(日) 18:30:27.15ID:??? え?って言うのはこっちなんだけど? 例えば、<body><a href=" ttp://example.com"></body> は DOMツリーをHTMLで書いたものだけど、お前は何を渡せと? : Name_Not_Found [sage] 2018/09/02(日) 20:00:07.34ID:??? 366と367の熾烈な争いの火蓋が切って落とされようとしている! : Name_Not_Found [sage] 2018/09/02(日) 21:19:13.56ID:??? どうせ「だからhtmlじゃなくてdomツリーで渡せ」とか言ってくるアスペだろ : Name_Not_Found [sage] 2018/09/02(日) 21:57:32.21ID:??? パフォーマンスよりも扱いやすさを最重要視したんだろうなあ 取っつきやすいかどうかがネットをここまで普及させたんじゃね : Name_Not_Found [sage] 2018/09/03(月) 04:31:23.42ID:??? 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"から)指定すれば良いってわかるけど、もっと長いコードになった場合、 一番最初に指定するセレクタ(親?)はどこからなのかもわからんちん こういうのって何て単語で調べれば解説でる・・・? : Name_Not_Found [sage] 2018/09/03(月) 06:43:10.22ID:??? 指定は短い方がいいっぽい liがそれだけならliだけで指定できるはず : Name_Not_Found [sage] 2018/09/03(月) 09:25:57.10ID:??? topが親でpとulは兄弟 最初の書き方だとulがpの子になってるからcss効かない コード書くときにちゃんとインデント付けるか、 ブラウザの開発者モードで▶︎を開けばそのうち慣れるよ : Name_Not_Found [sage] 2018/09/03(月) 10:11:38.78ID:??? まずタグ同士の関係がわかるようにツリー状に書くと div#top ├p └ul ├li ├li └li ってなるだろ? cssでスペースで区切るのは「その下にある」って意味 なので「p ul」と書くと p └ul のツリーを指定してることになる これか「親子関係」 : Name_Not_Found [sage] 2018/09/03(月) 13:22:00.29ID:??? 複数のdlで高さが違うものを横並びにさせるときに、 親要素の横幅以上になった際に折り返しますが、 それが崩れずに並ぶにはどのようにしたらよいでしょうか? : Name_Not_Found [sage] 2018/09/03(月) 16:41:34.87ID:??? 親要素にflexを指定して子の高さを揃えるようにする事もできるし 折り返しさせたくないのかなんなのか意味が良くわからないけど 横幅を可変で%なりでしていすればいけるよ。でも文章力も無いのになんで 文章だけでhtmlの構造ややりたいことが伝わると思ってるの?この文章見てもイメージが付きにくいと思わないかい? : Name_Not_Found [sage] 2018/09/03(月) 16:48:04.65ID:??? (´・ω・`) : Name_Not_Found [] 2018/09/03(月) 17:40:31.43:u044iTJ2 flexでいいけど なんでみんなそんなにdl使いたがるのん? : Name_Not_Found [sage] 2018/09/03(月) 17:48:52.52ID:??? 373じゃないけど PとULって兄弟になるのか! だから擬似要素でntfつかっても効いたりきかなかったりしたのか! スッキリしたありがと : Name_Not_Found [] 2018/09/03(月) 17:52:17.33:WsqVPrMs 前回の記事はこちら みたいな本文とは関係ない意味のない文言は どうマークアップすべきなんせしょうか? : Name_Not_Found [sage] 2018/09/03(月) 18:29:59.94ID:??? <a href="・・・">前回の記事</a> : Name_Not_Found [sage] 2018/09/03(月) 18:52:33.29ID:??? ナビゲーションという意味付けをしたいならこれでいいんじゃね? <nav><a href="">前回の記事</a></nav> まあ普通はやらないよ。 divでいいんだよdivで。 最近なんでもタグにしてきやがるからそのうちこんなの出てきそうだなw <previousz>前回の記事</previousz> : Name_Not_Found [sage] 2018/09/03(月) 19:13:24.00ID:??? タグなんでもいいけどマイクロデータは最低限必要だぞ : 315 [sage] 2018/09/03(月) 19:33:22.24ID:??? この辺で議論しましたが、 異なるデバイスでも、画面の高さの80% で画像を表示しようとして、 vh を使ったら、80%になったけど、 「Ctrl +-」で拡大縮小しても、画像が拡大縮小しません。 常に画面の高さの80%になります つまり最初の表示は、画面の高さの80%で、拡大縮小もしたい。 どうすればよいですか? VSCode の拡張機能、Beautify を使えば、ファイルの保存で整形してくれる : Name_Not_Found [] 2018/09/03(月) 19:50:24.14:tm545anC じゃあ%でやればいいじゃん : Name_Not_Found [] 2018/09/03(月) 20:15:49.34:WsqVPrMs 382です。 気が楽になりました、ありがとうございます。 : Name_Not_Found [sage] 2018/09/03(月) 20:40:41.61ID:??? 以外の方法でやろうとするとjsでマウスイベント拾ってきてどうのこうのになりぞう : 315 [sage] 2018/09/03(月) 21:26:07.87ID:??? 高さの% は、いまだに意味がわからない。 何を基準にしているのかが、よくわからない 高さを%にしている、サンプルを探せない これで画面の高さの80%になるかな? : 315 [sage] 2018/09/03(月) 21:35:40.46ID:??? 自分のPC だけなら、500px ぐらいで、画面の高さの80% ぐらいになるけど、 他のデバイスでも、画面の高さの80% になる、px を求めるのは、HTML, CSS では無理かな? JavaScript で求めるしかないか? : 373 [sage] 2018/09/03(月) 22:23:15.25ID:??? なるほど 兄弟だからか・・・ インデントちゃんと使います 親子関係はしっかり覚えようかと思います めっちゃ初心者な質問に答えてくれてどうもありがとう〜| : Name_Not_Found [sage] 2018/09/03(月) 22:26:59.32ID:??? ググれば腐るほどでてくるとおもうけど… 高さの%は親の高さから算出されてる bodyには高さがないからとりあえず親要素にposition absoluteでtop0 bottom0をしてやると要素の高さが出てそれに対して子要素%指定が生きる : Name_Not_Found [] 2018/09/03(月) 22:28:32.63:ZXC3auuv Tumblrでブログの外観をいじりたいのだけど、ここで質問しても答えてくれるかな。 : Name_Not_Found [sage] 2018/09/03(月) 23:38:06.03ID:??? <select multiple> の選択ボックスの中を装飾する方法ってありませんか? 2カラムにして2つの情報を表示したいのです --------------------- りんご abc みかん def バナナ ghi いちご jkl --------------------- みたいな感じで文字数が可変でも縦の列をそろえたい かつ ドラッグやCtrl+クリックで選択はしたいのです よろしくおねがいします : Name_Not_Found [age] 2018/09/04(火) 01:02:57.66ID:??? FLOCSSのBEM記法で躓いてるんだが教えてくれ… 複数ページで使うボタンエレメントに対して、装飾かけたいとする。 でも、コンポーネントでは色や幅の指定は非推奨。ってことは、ボタンはマルチクラスつかって、コンポーネントとプロジェクトで指定するの? 考え出したら、コンポーネントの存在意義がわからなくなったんだが… : Name_Not_Found [sage] 2018/09/04(火) 01:31:11.27ID:??? 無いと思う。 optionにid振って疑似要素使えば見た目としては再現できたけど こんな不毛な手法、実装してほしくないし広めてはいけない ディレ「ホラ、ここのサイトできてるじゃん?このサイトみたいにしたい」 ってなるから : Name_Not_Found [sage] 2018/09/04(火) 01:37:25.78ID:??? BEMは使ってないけど、 ボタンのマルチクラス作って、色のマルチクラス、色と幅のマルチクラスなどを別々で作って それらを組み合わせてデザインを構成すしてるよ。 : Name_Not_Found [sage] 2018/09/04(火) 07:51:25.10ID:??? FLOCCSは使ってないけど、親がデフォルトで色違いなんかはModifierで量産してるよ : Name_Not_Found [sage] 2018/09/04(火) 12:03:03.23ID:??? そうなのですね… じゃあ selectbox を使わずにリストボタンならべてjQuery でごりごりがんばります 複数選択自体はhidden checkbox 並べればなんとでもできるけど ドラッグ選択が自分で実装するとめんどくさそうだったので… ありがとうございました : Name_Not_Found [sage] 2018/09/04(火) 12:19:24.15ID:??? > じゃあ selectbox を使わずにリストボタンならべてjQuery でごりごりがんばります selectboxを使って、jQueryで頑張るんだよ HTMLは見た目を定義するものじゃない。意味を定義するもの。 だからselectboxが適切ならselectboxを使う その上でCSSで見た目を整えるわけだが、CSSの機能不足でJavaScriptを 使う場合でも、それはCSSを補う形でなければいけない。 : Name_Not_Found [sage] 2018/09/04(火) 12:20:53.08ID:??? そうやって作ることで、JavaScriptが無効になっても 見た目が悪いだけで、機能的には問題ないように作ることができる Android版Google Chromeで低速接続時にJavaScriptが自動的に無効になる ttps://gigazine.net/news/20180827-google-chrome-java-script/ : Name_Not_Found [] 2018/09/04(火) 14:24:47.56:tUeAGCpL cssアニメーション覚えるのと無難にjsでアニメーションするのどっちがええかね? cssのアニメーションも覚えてみようかと思うんだけど。 : Name_Not_Found [sage] 2018/09/04(火) 14:51:47.52ID:??? jQueryでがんばろうにも中にCSSがきかないんじゃどうしようもなくない? どうがんばればいいかヒントだけでもください : Name_Not_Found [sage] 2018/09/04(火) 15:09:26.10ID:??? selectとoptionの情報(タグまたは内容)を読んで、別の場所にjQuery使ってUIを作る selectは見えなくする jQueryで作ったUIを操作したら、その情報を見えないselectに反映させる : Name_Not_Found [sage] 2018/09/04(火) 16:43:37.95ID:??? それってドラッグで選択するって無理じゃない? じぶんでマウスイベントや座標管理できるようなプログラミングスキルないよ : Name_Not_Found [sage] 2018/09/04(火) 16:56:57.75ID:??? 無理ではない。あんたができないだけ : Name_Not_Found [sage] 2018/09/04(火) 18:08:36.72ID:??? optionタグはテキストの無害化が必要だからとはいえ タグ入れられないのは確かに不便だな : Name_Not_Found [sage] 2018/09/04(火) 18:52:44.43ID:??? HTML CSS スレに質問にきてる質問者に対して jQueryができないってだけで上から目線どや顔回答者 スレチなのに気づけよ : Name_Not_Found [sage] 2018/09/04(火) 19:06:09.99ID:??? まあ要するにcssじゃ対応できないんだよ できないものはできない まだまだ未完成・発展途上の言語なんだよ そのうち別のに変わるかもな : Name_Not_Found [sage] 2018/09/04(火) 20:42:48.16ID:??? 例えばですが ttp://samuraigoal.doorblog.jp/archives/54092717.html この 1の バルセロナに所属するアルゼンチン代表FWリオネル・メッシが、、、、 という文章の背景がグレーになって囲まれますが こういう書き方はどこを触ればいいのか? あるいはHTMLでその箇所だけ背景を作る書き方を教えてください 👀 Rock54: Caution(BBR-MD5:f2c519fe5384e767e1c9e99abdcfc293) : Name_Not_Found [sage] 2018/09/04(火) 21:07:01.44ID:??? デザインをきめてるのはスタイル 1番簡単なのは 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」ってキーワードでググって適当に入門サイト読むほうがおすすめ : Name_Not_Found [sage] 2018/09/04(火) 22:06:53.54ID:??? 詳しくありがとうございます。 意外と自分で手を加えないと思うような形にはならないもんなんですねw 全部やってくれると思ってました、、 : Name_Not_Found [sage] 2018/09/04(火) 22:27:35.59ID:??? wordpress とか bootstrap とか使えばもっと書かなきゃいけないことは減る ただ導入がスムーズにできるかは知らない HTMLやCSSの勉強もかねるなら1つ1つ手書きがおすすめだけど てっとりばやく見栄えのいいページつくりたいなら wordpress が1番はやい : Name_Not_Found [sage] 2018/09/04(火) 23:09:59.01ID:??? ひょっとしてまとめサイト作ってる? の参考のヤツはまとめサイト用のテンプレだろな font-size:13.3333pxなんて記述してるから自動記述だろうな。 機能あると思うけどここはそういうスレじゃない : Name_Not_Found [sage] 2018/09/05(水) 01:20:44.31ID:??? ありがとうございます どの辺のスレに行ったら余暇でしょうか? 自動記述とか勉強したいです。 : Name_Not_Found [] 2018/09/05(水) 03:02:52.69:vDkqWEHF 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] こんな風に並べたいのですが、いろいろやったのですが並びません。 これは無理ですか? : Name_Not_Found [sage] 2018/09/05(水) 03:05:38.32ID:??? JavaScriptを使えないと、いろんなことができない : Name_Not_Found [sage] 2018/09/05(水) 13:16:38.64ID:??? その程度ググれないのなら何もできない : Name_Not_Found [] 2018/09/05(水) 13:18:08.06:GLZRIPtq はい : Name_Not_Found [sage] 2018/09/05(水) 19:32:54.92ID:??? displayのgridとかで対応できるんじゃね? : Name_Not_Found [sage] 2018/09/05(水) 19:36:45.34ID:??? [item01][item02][item03][item04][item05][item06] [item07][item08][item09][item10][item11][item12] なら簡単なのだが : Name_Not_Found [sage] 2018/09/05(水) 21:11:00.11ID:??? flex-order:colum; flex-wrap: wrap; にすれば方向はそうならぶけど selectbox の中ってなんかうまく折り返してくれなかった記憶ある : Name_Not_Found [sage] 2018/09/05(水) 23:17:49.63ID:??? 書き忘れた はselectタグでなくてね 何でもOK : Name_Not_Found [sage] 2018/09/05(水) 23:22:14.63ID:??? アフィ用のまとめサイト自動生成セットとかgmatomみたいなツール使ってるなら それ専用のスレがこっちにあるだろうからそこできいたらいいよ ttps://mevius.5ch.net/affiliate/ ここの板はどちらかというとちゃんとweb技術を勉強したい人向け : Name_Not_Found [sage] 2018/09/05(水) 23:57:32.80ID:??? ttps://codepen.io/anon/pen/ZMJemZ : Name_Not_Found [sage] 2018/09/06(木) 00:03:00.34ID:??? codepen って初めて使ったんだけど anonymous だと他の人にみえないの? : Name_Not_Found [sage] 2018/09/06(木) 09:18:45.65ID:??? アドレスがわかれば見える : Name_Not_Found [sage] 2018/09/06(木) 12:04:14.12ID:??? パスワードが分かれば見える : Name_Not_Found [sage] 2018/09/06(木) 13:05:38.23ID:??? ありがとうございます! : Name_Not_Found [] 2018/09/06(木) 17:42:07.68:DEp0HwHT 仕事でcss使う人に聞きたいけど今ってどん感じなの? 1.コード規約作って手書き 2.ブートストラップとかのフレームワークつかう 3.sassとか使う 4.上のどれかの合わせ技? 勉強でシコシコ書いてるけど現場に近いことを勉強したい : Name_Not_Found [sage] 2018/09/06(木) 18:45:54.03ID:??? (´・ω・`) : Name_Not_Found [sage] 2018/09/06(木) 18:53:02.20ID:??? <body> <header> (画面幅によって折返しが何行になるかわからない) <div> <sidebar> <main> </div> </body> という構造で body の高さを 100vh で固定して sidebar や main がのびたら それぞれの中にだけスクロールバーが出て 全体の body にはスクロールが出ないようにするのってどうすればいいんですか? : Name_Not_Found [sage] 2018/09/06(木) 20:12:57.08ID:??? 1+4+sasslinter : Name_Not_Found [sage] 2018/09/06(木) 20:14:17.36ID:??? 間違えた。うちは1+3+sasslint です : Name_Not_Found [] 2018/09/06(木) 21:33:08.83:g2PGkIb9 すみません、質問です。 レスポンシブサイトを作っていて メディアクエリを以下のように設定しました。 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ピクセルなので上記で分かれると思うのですが、 実際には一番下のデザインで表示されます。 どうしてでしょうか? : Name_Not_Found [sage] 2018/09/06(木) 22:41:49.88ID:??? slidebarやmainが固定幅ならslidebarやmain要素にそれぞれoverflow:scroll;とか : Name_Not_Found [sage] 2018/09/06(木) 23:24:56.62ID:??? ttp://blog.96color.com/iphone6and6plus-media-aueries.html : Name_Not_Found [sage] 2018/09/07(金) 09:08:37.46ID:??? SASSなしでは生きていけない軟弱な体になってしまった bootstrapはbootstrap臭いデザインになって良い時は使うけど たいていデザイナがそれを嫌うから使わんことが多いなあ : Name_Not_Found [sage] 2018/09/07(金) 09:23:18.86ID:??? 自分も1,3,4 サスは自動でエラーチェックしてくれるのがイイ! IEだと使えないfilterみたいな関数もあるし ただ自分が制作して運用を誰かに託すことになるとサスが使えない : Name_Not_Found [sage] 2018/09/07(金) 11:31:56.67ID:??? 他人が自分より馬鹿だと思うのやめたほうが良いですよ? : Name_Not_Found [sage] 2018/09/07(金) 12:07:25.66ID:??? クライアントとかのことでしょ : Name_Not_Found [sage] 2018/09/07(金) 12:54:47.47ID:??? クライアントが自分より馬鹿だと思うのやめたほうが良いですよ? : 436 [sage] 2018/09/07(金) 13:45:00.60ID:??? ありがとうございます。 もうちょっと分かりやすく教えてくれるとありがたいんですが・・・ : Name_Not_Found [sage] 2018/09/07(金) 15:10:31.06ID:??? バカにしてるんじゃなくて、実際サスを使えないコーダーが多いんだよ 新しいこと覚えるの嫌なんだってさ このスレにくる人たちはやる気があるからそんなわけないじゃんって思うかもしれないけど : Name_Not_Found [sage] 2018/09/07(金) 16:56:21.31ID:??? 過保護な会社は新人が電話に出るのが嫌ですっていったら、 じゃあ出なくていいよっていうんだろうね : Name_Not_Found [sage] 2018/09/07(金) 17:13:00.61ID:??? カタカナで「サス」って書いてるのが何よりバカっぽい : Name_Not_Found [sage] 2018/09/07(金) 17:16:33.95ID:??? やる気ないです。朝来るの嫌です。って言ったら昼出勤にしてくれるの? いい会社だねw : Name_Not_Found [sage] 2018/09/08(土) 00:19:10.96ID:??? 必要に迫られれば覚える だが今はまだその時ではないだけ : Name_Not_Found [sage] 2018/09/08(土) 01:22:27.38ID:??? 俺はやればできる。まだ本気出していないだけ : Name_Not_Found [sage] 2018/09/08(土) 02:11:18.14ID:??? 2次受けしかしてないならその理屈はわかるけど、 異業界がクライアントなのに素人に何を求めるんだよw 臨床検査機器の使い方とトラブル時の対処方法は 販売店のあなたも全部覚えて下さいって言われたら嫌だろ? : Name_Not_Found [sage] 2018/09/08(土) 02:30:14.71ID:??? > 異業界がクライアントなのに素人に何を求めるんだよw CSSを勉強することを求めてるのでは? : Name_Not_Found [sage] 2018/09/08(土) 02:35:06.38ID:??? クライアントに運用(=CSSを自分でメンテしてください) なんていうのなら、別にscssをメンテしてくださいって言っても構わないよ そもそもすべてのcssはscssとしても解釈できるんだから cssの知識だけでも十分対応可能 : Name_Not_Found [sage] 2018/09/08(土) 02:36:33.35ID:??? それともbootstrapみたいな複雑なcssをカスタマイズするのはクライアントでは 無理話、cssで書いていても運用は大変だろうってツッコミを入れればいい話かな? : Name_Not_Found [sage] 2018/09/08(土) 11:22:38.11ID:??? column-width が一番簡単だろう select みたいな UI 要素に効くかどうか怪しいが : Name_Not_Found [sage] 2018/09/08(土) 11:37:09.55ID:??? だから効かないって。常識で考えればわかるだろ <option>はレンダリング対象ではない。 レンダリング対象である<select>の項目でしか無いんだから : Name_Not_Found [sage] 2018/09/08(土) 12:20:01.36ID:??? CSSをクライアントに勉強させるとかありえないよ。あなたは現実を知らなすぎる。 クライアントは本業があるんだから。 2次受けかIT蔵しかやったことないんじゃないの? 建築設計の事、法律の事、医療の事、金融の事、 お金払って専門家を雇ったのに、あなたはさらにそこを都度全部勉強しますか? : Name_Not_Found [sage] 2018/09/08(土) 13:02:19.11ID:??? じゃあ現実を知ったお前なら理解できるだろ? どーせ、クライアントはCSSなんか触らないんだが、 CSSで作ろうがSASSで作ろうが関係ない 運営(クライアント)はCSSを触らないと 最初からわかって言ってる 話は理解できたか? : Name_Not_Found [sage] 2018/09/08(土) 13:03:01.33ID:??? 運営じゃなくて運用だな。 : Name_Not_Found [sage] 2018/09/08(土) 13:55:55.25ID:??? うーん、、、CSSで作ろうがSASSで作ろうが関係ない事は理解できるけど 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。 ただ自分が制作して運用を誰かに託すことになるとサスが使えない ↓ 他人が自分より馬鹿だと思うのやめたほうが良いですよ? : Name_Not_Found [sage] 2018/09/08(土) 13:56:37.68ID:??? ↑馬鹿とかの問題ではないって事 : Name_Not_Found [sage] 2018/09/08(土) 14:05:11.42ID:??? の続き まあでもクライアントの種類や契約方法はそれぞれだから それで上手くいっているなら全くそれでいいと思う。 けどそれがweb全般の一般的な対応であるかというとそうでもないという事 個人的にはそういうサービスが増えると困るお客が増えて仕事が増えるので助かる : Name_Not_Found [sage] 2018/09/08(土) 14:13:40.69ID:??? > 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。 俺に言うなって。に言え > 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。 運用を任せるやつがCSSじゃなきゃだめなんだとさ。 運用がCSSいじるわけでもないのに : Name_Not_Found [sage] 2018/09/08(土) 14:14:53.43ID:??? 訂正 > 運用を任せて、その任された者にSASSを勉強させるの前提ってのはちょっと理解できないな。 俺に言うなって。に言え > ただ自分が制作して運用を誰かに託すことになるとサスが使えない 運用を任せるやつがCSSじゃなきゃだめなんだとさ。 運用がCSSいじるわけでもないのに : Name_Not_Found [sage] 2018/09/08(土) 16:52:35.49ID:??? サスと書いた者だが、自分が言った運用の人って、 社内のコーディングできるはずのWEBデザイナーのこと クライアントではない extendもincludeもmixinも使ってない 入れ子にして色を変数にして、expandedでコンパイルしてCSSにしただけ 今の職場はBEM記法のSCSS 初めてのBEMだから命名規則が教科書的な人を見つけて勉強してる 新しいことを身につけるのは楽しい : Name_Not_Found [sage] 2018/09/08(土) 16:56:56.34ID:??? じゃあその社内のコーディングできるはずのWEBデザイナーに sassを勉強させるのが前提ということで問題ない。 朝来るの嫌なんですーっていったら、 じゃあ昼からでいいよってなるのか? 仕事だろ : Name_Not_Found [sage] 2018/09/08(土) 17:43:41.84ID:??? デザイナーが本業だとすると なんでついでやサービスでやってるコーディングなのに さらに技能覚えないといけないんだよってなりそう : Name_Not_Found [sage] 2018/09/08(土) 17:59:45.32ID:??? デザイナーが自分より馬鹿だと思うのやめたほうが良いですよ? : Name_Not_Found [sage] 2018/09/08(土) 18:11:26.35ID:??? デザイン業務はほとんどなくて、ホームページの運用更新が本業 この会社のことはもう忘れる… flex使えない縛りで要素を横並びにするのって inline-blockだったりtable-cellだったり人によって違うけど、 普通はこれを使いましょうっていう取り決めをするの? : Name_Not_Found [sage] 2018/09/08(土) 23:22:29.13ID:??? floatあるだろ : Name_Not_Found [sage] 2018/09/08(土) 23:26:59.52ID:??? SASS で提出するのが、ダメという会社は多い。 その場合、SASSで作って、提出物はCSS だけにする ただ、向こうがCSSを修正した場合に、SASSは修正されていないので、 状態の不一致が起こり、保守が難しくなる : Name_Not_Found [sage] 2018/09/08(土) 23:37:22.95ID:??? じゃあ保守以降だけCSSにすればいいだけだろ 本当に頭が悪いな : Name_Not_Found [sage] 2018/09/09(日) 02:02:42.58ID:??? バージョン管理して差分をSassにフィードバックじゃダメなの? : Name_Not_Found [sage] 2018/09/09(日) 03:41:33.23ID:??? 頭じゃそうすりゃいいってわかっちゃいるけど 実行すんのは結構面倒なんだよね〜 : Name_Not_Found [sage] 2018/09/09(日) 05:36:36.71ID:??? 結局は効率を考えるとCSSになる 個人でやってるならなんでもいいけど 会社組織で何人もの手が入るとなると面倒なんだよ : Name_Not_Found [sage] 2018/09/09(日) 06:41:36.89ID:??? 勘違いするな。SASSの問題ではなく人の問題 個人でやってるからでも、何人も手が入るからじゃなく 会社全体の技術力が低いから。 人間に問題があることを認識したほうが良い : Name_Not_Found [sage] 2018/09/09(日) 10:18:59.47ID:??? floatはclearfixしなきゃいけないから嫌じゃー まさにそれ 突貫で作ったからあとで綺麗に直そーと思ってたら 簡単な修正だけ奪って手に負えなくなってから回してきて 知らないうちに差分発生、ついでにCSS壊れてたりしてる : Name_Not_Found [sage] 2018/09/09(日) 10:58:04.97ID:??? それはCSSで開発して、CSSをメンテさせて、CSSを壊してるんだろ? つまりSASSの話と全く関係ないじゃん : Name_Not_Found [sage] 2018/09/09(日) 11:34:25.93ID:??? 仕事をしてるって自覚がないのかな? 子供が会社に来て、ぼくもやりたーいっていうから やらせてあげて、ぐちゃぐちゃにしても、 子供のやることだからと、怒らず何もせずに 甘やかして、ぐちゃぐちゃにしたものを直すだけ 子供は、頑張ったねーって褒められ、お前は何も評価されない 挙句の果てには子供でもできるような仕事だと思われる それでも誰にも言わず、逆に見えない所で 俺が会社を支えてるんだって自己満足 こういう問題が発生します。発生してます。 だからあなたには無理です。ここより先には手を 付けないでください。尻拭いはしません。 これぐらいはっきり言えないもんかね? 仕事なんだからさ : Name_Not_Found [sage] 2018/09/09(日) 12:42:49.35ID:??? SASSへの依存も会社の問題だろ : Name_Not_Found [sage] 2018/09/09(日) 12:50:12.84ID:??? 依存って言葉を使いたかったのかな? SASSへの依存って言葉が成り立つなら CSSへの依存って言葉も成り立つ 依存って言葉で優劣はつけられないので意味がない まああえて依存って言葉を使うなら より効率がいいものに依存したほうが良いってこと 効率が悪い人に依存するのは良くない : Name_Not_Found [sage] 2018/09/09(日) 14:46:33.63ID:??? CSSやJSをMinifyすることの高速効果ってどれほどのもんなの? : Name_Not_Found [sage] 2018/09/09(日) 16:46:34.77ID:??? キャッシュが使われるように設定して、 gzip圧縮して配信してるなら大きな効果はない ファイル結合のほうがまだ効果ある ただしちゃんと効率化していれば、ファイル結合を 行う際に一緒にminifyするわけだが。簡単なのでね。 : Name_Not_Found [sage] 2018/09/09(日) 17:06:41.03ID:??? またSASS厨かスレタイみれないなら帰れよ : Name_Not_Found [sage] 2018/09/09(日) 18:50:28.51ID:??? お前、(ストレス)たまってんだろ。 : Name_Not_Found [sage] 2018/09/09(日) 19:39:28.81ID:??? Node.jsとBackbone.js使うサイトがあって 別でajaxもネイティブで使うからjsエンジニアは覚えてきてね。jQueryは禁止ね。 jsエンジニアに一任するからマークアップコーダーはその部分は覚えなくても平気だけど 覚えてきた方がよりいいよね? 覚えますか? : Name_Not_Found [sage] 2018/09/09(日) 19:50:21.14ID:??? 自分がやる仕事なら当然覚えるし、 やる必要がないなら覚えないで全部プロに任せる 先輩方にスキルが高すぎるので俺でも使える道具を使ってくださいなんて 言わないし、お馬鹿な後輩を甘やかしたりしない ましてや、やる気がないのやらせて、その尻拭いをするようなことは 絶対にしない : Name_Not_Found [sage] 2018/09/09(日) 19:51:31.88ID:??? やると決めたなら、足を引っ張るようなことはしない : Name_Not_Found [sage] 2018/09/09(日) 20:21:27.15ID:??? 僕も編集したいです!CSSならできますって言ったら、 おもむろに開発では効率化のためにSASSを使っていて メンテナンス性を上げるためにファイルを分けていて、 テキストエディタを使っていてCSSフレームワークは ○○を採用していて、自動化ツールを使ってCSSに変換しています。 そのやり方に従ってもらいます。 って言えばおおー、プロはやっぱり違う。 自分には無理です。メモ帳でやろうとしてました 諦めます。っていうだろうに え?やるの?メモ帳だよね。じゃあ効率化とか仕組みとか全部なくして メモ帳でもできるようにはぁ工数増えるなーと思いながら、 お膳立てして、このファイル編集すればいいですよって渡したら あ、これなら僕にもできそうです。 なーんだ難しいことやってると思ってたら 大したことないですねーって思われるだけなんだが。 自分の仕事に誇り持ってないの? : Name_Not_Found [sage] 2018/09/10(月) 01:02:26.09ID:??? なんでこの人こんな顔まっかなの? : Name_Not_Found [sage] 2018/09/10(月) 01:18:40.08ID:??? え?何か間違ったこと言ってる? ちょっと言い返し方がおかしいよw : Name_Not_Found [sage] 2018/09/10(月) 02:00:13.02ID:??? 誇りの意味が違うような気はする 悪い意味でのプライドじゃないかと : Name_Not_Found [sage] 2018/09/10(月) 02:32:29.55ID:??? 固執している老害とかわらん : Name_Not_Found [sage] 2018/09/10(月) 03:24:58.75ID:??? いい意味のホコリじゃん なんで無能に合わせないといけないのさ? : Name_Not_Found [sage] 2018/09/10(月) 04:14:41.93ID:??? 見下すことにご満悦で、見下されていることに気付かない 自分だけは序列から超越していられると勘違いしている : Name_Not_Found [sage] 2018/09/10(月) 04:49:57.91ID:??? 論点はプロが素人のやり方をするなら プロを雇う理由がないってところだよ : Name_Not_Found [sage] 2018/09/10(月) 16:49:41.74ID:??? sassがプロでcssが素人なの? : Name_Not_Found [sage] 2018/09/10(月) 16:53:47.42ID:??? jQueryがプロでjavascriptが素人 AngularJSがプロでjavascriptが素人 Cakeがプロでphpが素人 railsがプロでRubyが素人 って理屈になるな : Name_Not_Found [sage] 2018/09/10(月) 18:52:24.76ID:??? なんで : Name_Not_Found [sage] 2018/09/10(月) 21:19:09.75ID:??? 面白いスレですね : Name_Not_Found [] 2018/09/10(月) 21:23:01.12:qJBH+xYa cssグリッド初めて使って、頭混乱しとる… グリッドの分割ってみんなどうやってんの? レイアウトと主要なブロックで分割だらけになるんだけど… : Name_Not_Found [sage] 2018/09/10(月) 21:30:01.90ID:??? 正確に言えば、短い時間で最大の成果を上げるのがプロ 時間かけていいなら素人でもできる sassとcssを比べれば、通常はsassの方が大きな成果を挙げられる cssの方が上回ることがあるとすれば、 サンプルコードとか数行で完了するようなものぐらいだろうな。 その程度だとsassの準備をするほうが面倒 だけどプロだと仕事の量も多いんで、数行で終わるようなことはまずない : Name_Not_Found [sage] 2018/09/10(月) 21:30:52.43ID:??? 短い時間で最大の成果を挙げられるから もちろんで言ったように例外はあるけどね : Name_Not_Found [sage] 2018/09/10(月) 21:42:00.48ID:??? そのうちsassはできるけどcssはできないとかいう新人類が溢れてきそうだな : Name_Not_Found [sage] 2018/09/10(月) 21:44:46.79ID:??? >時間かけていいなら素人でもできる んなわけない 仮に半年かけてやったならそれは既に素人ではない それとできるかできないかだけで素人玄人の判断するのはまるで素人みたいだよ : Name_Not_Found [sage] 2018/09/10(月) 22:13:57.81ID:??? SASSのほうが楽なのはわかるけど相手に押し付けるなよ : Name_Not_Found [sage] 2018/09/10(月) 22:49:37.34ID:??? できないっていうのは、精神的に辛いって意味だね。 cssはネストなし、変数なし、extend、minxなし縛りの sassだから、発狂することだろう : Name_Not_Found [sage] 2018/09/10(月) 22:50:46.72ID:??? え? やり終えるまでの、半年間は素人じゃん? そして、やり終えて、次の半年、また同じことを繰り返していたら 半年で成長もしてないってことじゃん? 素人状態から成長してないなら、素人だよ : Name_Not_Found [sage] 2018/09/10(月) 22:51:30.51ID:??? 押し付けじゃないね。 事実を述べているだけ。 効率が悪いやり方をやってるやつは素人同然 : Name_Not_Found [sage] 2018/09/10(月) 23:23:09.65ID:??? 初心者なのですがよろしくおねがいします。 只今Word Pressを使っていて、フロントページを固定ページにしてナビゲーションバーから各ページに行く方法を取りたいと思っています そして、個人ブログページを作りたいと思っているのですがうまく行かず困ってまして フロントページは最新の投稿ページと固定ページで選択できますよね? デフォルトでは最新の投稿ページになってますが その最新の投稿ページと同様にしたいのですができないです。 TOPページ(固定ページ)→ナビゲーションのWeblogボタン→最新の投稿ページという流れが理想です よろしくおねがいします : Name_Not_Found [sage] 2018/09/10(月) 23:58:21.73ID:??? スレチ : Name_Not_Found [sage] 2018/09/11(火) 00:02:24.65ID:??? ・サイトトップページ用とブログトップページ用の固定ページを作る ・表示設定で「固定ページ」を選択し、ホームページにサイトトップページ、投稿ページにブログトップページを選択する ・テーマにfront-page.phpとhome.phpを作る ・home.phpでいつものwhile文を書く front-page.phpがサイトトップページのテンプレート home.phpがブログトップページのテンプレート : Name_Not_Found [sage] 2018/09/11(火) 00:04:22.95ID:??? あ、ここHTML/CSSスレか 答えちゃったごめん : Name_Not_Found [sage] 2018/09/11(火) 01:14:55.62ID:??? ありがとう : Name_Not_Found [] 2018/09/11(火) 02:22:11.93:K8YK5RJa 効率の良し悪しは 手数とそれによって得られるCSSだけによって決まるわけじゃないよ〜 どっちかって言うと 手数とそれによって得られる金によって決まると思うよ〜 仮に素CSSで書くことで5倍の時間がかかったとしても 得られるお金が5倍以上になるのなら 迷わずそちらを選ぶべきだよ〜 : Name_Not_Found [sage] 2018/09/11(火) 02:24:55.35ID:??? SASSスレ立ててそっちでやってー : Name_Not_Found [sage] 2018/09/11(火) 02:39:06.73ID:??? > 仮に素CSSで書くことで5倍の時間がかかったとしても > 得られるお金が5倍以上になるのなら ん? 客は成果物に対してお金を出すのであって、 作業時間にお金を出すわけじゃないよ 「すいません、効率が悪いやり方をして5倍の時間がかかったので、5倍の金額を請求させてください」 こんな言い訳が通用する客はよっぽどの馬鹿だよ。 SASSでやってもCSSで作っても、成果物が同じなんだから得られる金額は同じ。 得られるお金が5倍以上っていうのなら、どちらも同じ5倍以上だろうさ。 んでかかる時間はSASSだと1倍で、CSSだと5倍 言い換えると、CSSだとSASSの労力の5倍かかるのにもらえる金は同じ : Name_Not_Found [sage] 2018/09/11(火) 02:45:04.65ID:??? あ、でも要領が悪い人は作業時間 = 請求金額になっていて、 スキル上がって1ヶ月かかっていた仕事が、1週間でできるようになったら、 請求金額も1/4にしてしまい、どんなに力をつけても、力をつけた分だけ 儲けが減るという間抜けもいるみたいだけど 客「急いでいるんです!超特急で作業を願いします。」 間抜け「では通常の2倍の速度でがんばります。半分の時間ですむので請求金額は1/2です」 みたいになw 普通は通常料金に加えてと特急料金を請求する所 : Name_Not_Found [sage] 2018/09/11(火) 03:54:18.28ID:??? このSASSおじさんは都合の悪いことには返事しない習性があるな : Name_Not_Found [sage] 2018/09/11(火) 04:50:04.19ID:??? 全て返事してると思うけど、どれに返事してほしいの? : Name_Not_Found [] 2018/09/11(火) 08:25:10.27:UX9A55Db そんな単純な話じゃないよ〜 座組み、組織、関わる人員、期間、国、全てを考慮して 何を選ぶのがベストか決めるんだよ〜 自分にとってベストな選択が 全体にとってベストでないことは多分にしてあるよ〜 大きな案件でそれを間違えると 構築から1〜2年で運用が瓦解して、向こう10年の売りを棒に振ることもあるよ〜 だから目の前の構築作業時間を1/5に出来ても 長期的な効率が下がってしまうことは往々にしてあるんだよ〜 : Name_Not_Found [sage] 2018/09/11(火) 11:03:51.15ID:??? 人の問題と技術の問題は分けて考えよう。 技術的には優れているけど、技術力が低くて使えないっていうのはわかる。 だけどそれは、人間の問題であって技術の問題じゃない : Name_Not_Found [sage] 2018/09/11(火) 12:17:30.04ID:??? sassおじさんはbootstrapも もちろんバッチリ使えるよね? : Name_Not_Found [sage] 2018/09/11(火) 12:20:50.76ID:??? 異なるリストを繋げることってできるの? 例えば <ul id="sono1"> <li class="gattai"></li> <li></li> </ul> <div>要素</di> <ul id="sono2"> <li></li> <li class="gattai"></li> </ul> この.gattaiをPCでは別々で、 タブレットやスマホサイズの画面だと繋げるみたいな感じで。 : Name_Not_Found [sage] 2018/09/11(火) 12:31:53.90ID:??? 見た目はできるよ ソースを変えたい(DOM)ならjQueryでできるよ : Name_Not_Found [sage] 2018/09/11(火) 15:38:02.92ID:??? バッチリではないけど一応使えるよ 一応っていうのは、仕事でそこまで深いことを求められてないから プロトタイプ的なものとかちゃんとしたデザインは必要ないけど スマホに対応する必要があるときは、自力でやるのが大変なので使う bootstrap使った方が効率はいいからね bootstrapのデフォルトのデザインは好みじゃないし、 HTMLがごちゃごちゃするので個人的には嫌い bootstrapじゃなくてもっと良いCSSフレームワークが欲しい所だけど 単純に今の仕事がそっち系じゃないので深く踏み込んではいない : Name_Not_Found [sage] 2018/09/11(火) 15:44:18.05ID:??? > 異なるリストを繋げることってできるの? リストを"繋げる" のは良くない CSSでやるのはあくまで、繋がってるように見せるだけ 見た目は置いといて、その2つのリストは 意味的には同じ1つのリストなのかどうなのか 同じリストなら最初から繋げて書いて CSSで別れているように見せるべきだし (つまりリストを分割するんじゃなくて、そう見せるだけ) 違うリストなら分けて書いて、繋げるんじゃなくて、 CSSで繋がっているかのように見せる (つまりリストを繋げるじゃなくて、そう見せるだけ) : Name_Not_Found [sage] 2018/09/11(火) 18:58:14.41ID:??? web作成に挑戦しようと思ってるんだけど。 テキストのおすすめ教えてもらえないかな? 同人活動がしたいのでコードの勉強もしときたいという意味で自作を考えてます 最終的に使うのはWord Pressです Word Pressを使ってみたのですが自作テーマでしたいと思いましたのでHTMLやCSSの勉強から始めようと思ってます Word Pressのエディターは使い物にならないと言うことなのでATOMエディターで作成するつもりです レンタルサーバーはさくらにしました 同人向けらしいので ATOMの使い方のおすすめ本もあれば嬉しいです。 よろしくお願いいたします。 : Name_Not_Found [sage] 2018/09/11(火) 22:12:10.89ID:??? web制作の事はweb上で勉強した人がほとんどじゃないだろうか。 勉強順序を知りたいなら、はじめてのシリーズでもなんでもいいと思う。 ATOMは知らん : Name_Not_Found [sage] 2018/09/11(火) 22:30:19.26ID:??? ATOMの本って3冊しかない上にオススメできるものでもなく なのでネットで調べるしかない 同人活動が目的ならそんなプロエディタも必要ないので とりあえずなにもかも初めてならホームページの作り方系の本と メモ帳でチマチマ手打ちして覚えた方がいいかもしれん : Name_Not_Found [sage] 2018/09/12(水) 00:50:21.16ID:??? sassガーの猿飛 : Name_Not_Found [sage] 2018/09/12(水) 01:22:07.97ID:??? HTML、CSS勉強中なんだけど padding-buttonだけ違和感ある なぜunderとかではなくbutton? 不必要なボタン??みたいな意味になりそうなんだけど : Name_Not_Found [sage] 2018/09/12(水) 02:09:13.80ID:??? Atom は使わない 皆、VSCode を使っている。 質問は、プログラム板のVSCodeスレで聞けばよい : Name_Not_Found [sage] 2018/09/12(水) 06:04:37.96ID:??? マジレスすると bottom : 底 : Name_Not_Found [sage] 2018/09/12(水) 16:26:44.05ID:??? 手の込んだネタだなあw : Name_Not_Found [sage] 2018/09/12(水) 18:36:22.97ID:??? 割とまじで英語の勉強した方が良いのでは : Name_Not_Found [] 2018/09/12(水) 22:08:02.43:21QoiYUs レイアウトの仕方で色々試したけど float flex-box grid どれ使ってる? 個人的にはflexが使いやすいけど、gridが人気なんかね?IE対応がクソめんどいんだが… : Name_Not_Found [sage] 2018/09/12(水) 22:22:13.69ID:??? 普通に作るんだったらflexばっかり使ってる gridはIEがね : Name_Not_Found [sage] 2018/09/12(水) 23:33:13.05ID:??? flex大好き floatは嫌い gridは面倒くさい : Name_Not_Found [sage] 2018/09/13(木) 01:37:25.68ID:??? gridはまだ古いブラウザだと対応してないからなー 趣味サイトなら使うけど仕事では使わん : Name_Not_Found [sage] 2018/09/13(木) 01:53:52.33ID:??? <div class=“north”> 画像とかいろいろ、サイズ不確定 </div> <div class=“south”> <textarea class=”text”></textarea> </div> .south {padding:10px;} ウインドウ内の.northを除いた領域に.southを出来るだけ大きく表示して、.textを.south内にできるだけ大きく表示するには.southや.textにどうCSSを指定したらいい? : Name_Not_Found [] 2018/09/13(木) 05:50:32.85:da1Unf3/ ブラウザ問題が解消してもgridは流行んない気がしてならない : Name_Not_Found [sage] 2018/09/13(木) 11:07:49.41ID:??? 外側のブロックサイズがきまってないとどこまでのばしていいかわからないかな 仮に 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 の内側は高さが聞かないバグがあったりしたから 1度 flex つかったら margin と height は忘れたほうがいいね あれもうなおったのかな… : Name_Not_Found [] 2018/09/13(木) 12:15:14.92:2IvbJYFf 縦長や横長の画像があります。 その一部を正方形に切り取って表示したいのです。 例えば横長画像(W500xH1000)の場合、太線部分を200x200の正方形に表示したいのです。 ┌───┏━━━━┓───┐ │ ┃ ┃ │ │ ┃ ┃ │ 500 │ ┃ ┃ │ └───┗━━━━┛───┘ 1000 同様に縦長画像の場合には以下の部分を200x200の正方形に表示したいのです。 ┌────┐ │ │ ┏━━━━┓ ┃ ┃ ┃ ┃ ┃ ┃ ┗━━━━┛ │ │ └────┘ どうやれば良いでしょうか? : Name_Not_Found [sage] 2018/09/13(木) 16:35:36.77ID:??? ごれ ttps://www.webcreatorbox.com/tech/object-fit : Name_Not_Found [sage] 2018/09/13(木) 17:00:14.62ID:??? ありがとう 家に帰ったら試してみる : Name_Not_Found [sage] 2018/09/13(木) 18:17:21.56ID:??? できることとできないことがあるんじゃないのかな 例えば4つ横に要素を並べるとき □□□□ 前者2つは要素が4つ要素使って詰めないとだめだったと思うけど、 gridだと要素3つで □ □ □ みたいなことができる 同じように □ □ □ □ □ みたいな それに大きなメリットがあるのかどうかはわからんが : Name_Not_Found [] 2018/09/13(木) 19:17:53.58:2IvbJYFf ありがとうございました。 三時間やって出来なかった事が 一瞬で出来ました。 助かりました。 : Name_Not_Found [sage] 2018/09/14(金) 08:35:07.44ID:??? それflexでも出来るよ 画面全部グリッドみたいな構成はgrid一択だけど、他の場合はどちらでもって感じかなあ : Name_Not_Found [sage] 2018/09/14(金) 10:01:28.75ID:??? 1番最後は flex だと無理じゃないかな 好きな位置で改行ってのはできないし行ごとにわけると高さを同じにできない : Name_Not_Found [sage] 2018/09/14(金) 10:48:21.75ID:??? この「5」の形なら flex でも2回つかえばできる 外側で縦3分割して1、3段目 between 2段目 center でいい □ □ □ □ □ こういうのになると厳しいのかな 空要素をいれないと空白を要素と同じサイズにするってことができない : Name_Not_Found [] 2018/09/14(金) 12:38:33.49:Dc/3aJVT 話ぶった切るけど、教えて トグルボタンとかアニメーションとかcssで実装できるけど、js使ってる? 個人的にcssでできることは全部cssで実装する方がスマートと思ってるんだけど。 : Name_Not_Found [sage] 2018/09/14(金) 15:53:33.50ID:??? <figure></figure>はブロック?インライン? : Name_Not_Found [sage] 2018/09/14(金) 16:31:08.11ID:??? flow content : Name_Not_Found [sage] 2018/09/14(金) 17:49:04.86ID:??? ttps://developer.mozilla.org/ja/docs/Web/HTML/Element/figure フローコンテンツ(前までのブロックに近い要素)に分類されてる : Name_Not_Found [sage] 2018/09/14(金) 19:34:04.88ID:??? トグルボタンをcssってcheckboxでやるやつでしょ? それの方が強引だし、いちいち何でもcheckboxなんて応用効かないし嫌だわ jsが使えない環境に遭遇したら仕方なくやる手法ってイメージ。 : Name_Not_Found [sage] 2018/09/14(金) 20:51:24.89ID:??? わけわからんjsがいくつも使われてるようだったらCSSで作る 発火しなかったら原因突き止めるの面倒だし : Name_Not_Found [sage] 2018/09/14(金) 21:01:26.39ID:??? cssはクリック関連、スクロール関連にめっぽう弱いのと トラバーシングで子から親を認識するのができなかったり 結局jsは切り離せない。 : Name_Not_Found [sage] 2018/09/14(金) 21:28:58.10ID:??? 強引じゃなくてそれが普通 : Name_Not_Found [sage] 2018/09/15(土) 00:25:12.13ID:??? 試しに超大手の有名サイトでcheckboxでやってるとこ挙げてみてよ。 普通なら、ほとんどがそれでやってるってことだよね? : Name_Not_Found [sage] 2018/09/15(土) 00:43:07.78ID:??? checkboxでアコーディオン考えた人はマジ天才だと思う : Name_Not_Found [sage] 2018/09/15(土) 01:16:51.32ID:??? 大手でトグルボタンを使ってるところを探してきてくれ : Name_Not_Found [sage] 2018/09/15(土) 01:29:27.33ID:??? pixiv は CSS でやってた気がする そもそもトグルボタン使ってる大手があんまりないよね : Name_Not_Found [sage] 2018/09/15(土) 01:32:53.18ID:??? ここって雑談もOKなのかな? だいたい本スレ(雑談)と質問は別れてるけど 雑談できる場所探しても見つからないしここで雑談してそうだし 雑談してもいい? : Name_Not_Found [sage] 2018/09/15(土) 01:33:28.71ID:??? teratail は JSでやってたわ : Name_Not_Found [sage] 2018/09/15(土) 01:37:07.40ID:??? WEBデザイナー技能検定っていうのがあって3級取ってみようかと思うんだけど 需要あるのかな? 2ちゃんでないからやっぱり人気ないのかな? : Name_Not_Found [sage] 2018/09/15(土) 01:38:23.48ID:??? display ブロック がかなり優秀! : Name_Not_Found [sage] 2018/09/15(土) 01:59:07.83ID:??? 左右で切り替える、on/off ボタンは、 どちらが、on か、off か、わからない 黒丸を付ければ、on で、 付いていなければ、off なら、わかりやすいけど : Name_Not_Found [sage] 2018/09/15(土) 11:00:43.03ID:??? ごめん、トグルボタンとアコーディオンを混同してた。 on/offフラグだけならチェックボックスでいいな : Name_Not_Found [sage] 2018/09/15(土) 11:04:22.72ID:??? あかん : Name_Not_Found [sage] 2018/09/15(土) 11:55:17.56ID:??? HTMLの意味的にチェックボックスはフォーム部品なので 何かしら送信する要素でない限り表示切り替えのために使うべきではないんじゃないかな アクセシビリティを考えても音声読み上げで意味不明なところにチェックボックスがはさまれると混乱するし トグルに関してはONOFF状態を保持するのに意味があるからチェックボックスを使ってもいいけど アコーディオンみたいに状態を保持することに意味がないものはフォームを使うべきではないかと : Name_Not_Found [sage] 2018/09/15(土) 12:53:57.35ID:??? アコーディオン(複数の選択肢から一つを選ぶ)ならラジオボタンだな 複数箇所を広げられるのはアコーディオンではないはず (複数箇所を広げるならチェックボックス) フォーム部品(inputやselect等)は送信しなくても良い その証拠に<form>の外にかける > アコーディオンみたいに状態を保持することに意味がないものはフォームを使うべきではないかと 複数のブロックのうちどれかを表示するのだから状態を持っている : Name_Not_Found [sage] 2018/09/15(土) 14:42:18.79ID:??? formの外に書けるって正気かよ。外に書いたらform属性でどのformとの関連性があるかを書かんとあかんぞ。 : Name_Not_Found [sage] 2018/09/15(土) 15:13:14.92ID:??? 書けるのと推奨される書き方は違うからね ガイドラインとかを1度よんでみれば 今後アクセシビリティを無視したりするとSEOで不利になったりするかもしれないし : Name_Not_Found [sage] 2018/09/15(土) 15:32:29.91ID:??? 正気も何もHTMLで正式に認められている 正しいHTMLの書き方 : Name_Not_Found [sage] 2018/09/15(土) 15:40:37.06ID:??? 普段スマホ使ってるのにウェブサイトのトグルボタンの使い方がわからなかったことある 普通のラジオボタンがいい せめて2級からかと 自分は面接でスキルをうまくアピールできないから資格あった方が伝わりやすいかなぁと思い始めてる : Name_Not_Found [sage] 2018/09/15(土) 15:46:32.44ID:??? > 外に書いたらform属性でどのformとの関連性があるかを書かんとあかんぞ。 不要。form属性ができたのはHTML5からだが、HTML4のときから formの外で使う事例が仕様に明記されている ttps://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できないという意味、リンクが貼られてる) : Name_Not_Found [sage] 2018/09/15(土) 15:47:54.08ID:??? > ガイドラインとかを1度よんでみれば そっくりそのまま返す フォームの外にコントロールを置くのは、 ユーザーインターフェースを作成するための HTMLで想定されてる使い方 : Name_Not_Found [sage] 2018/09/15(土) 15:59:41.54ID:??? ちなみにHTML5では、ファイルを選択し、サーバーに送信すること無く、 ローカルで処理してダウンロードも可能になってる 参考 Canvas上のイメージを画像ファイルとして保存する方法 ttps://st40.xyz/one-run/article/133/ また、formのactionを省略した場合、ページ自身へPOSTしてしまう。 だからローカルだけで処理する場合は、 "formの中に入れてはならない" : Name_Not_Found [sage] 2018/09/15(土) 16:03:14.71ID:??? > 今後アクセシビリティを無視したりするとSEOで不利になったりするかもしれないし フォームの中に書くのと外に書くので、アクセシビリティに何の影響があるのかわからない ページの閲覧者にとっては、表示されたフォームに対する処理が サーバー側で処理されようが、ローカルで処理されようが、関係のない話 : Name_Not_Found [sage] 2018/09/15(土) 16:18:00.69ID:??? まーたキチガイにさわってしまったか : Name_Not_Found [sage] 2018/09/15(土) 16:20:18.93ID:??? 仕様でいえばテーブルでレイアウトしたり HTML内にstyleをかいても何の問題もないが なぜ嫌われるかを考えよう : Name_Not_Found [sage] 2018/09/15(土) 16:22:12.74ID:??? 今話してるのはフォームの話であって 文書構造とデザインを分離しようとう話とは関係ないです : Name_Not_Found [sage] 2018/09/15(土) 16:25:34.55ID:??? 文書のコンテンツから表示スタイルを分離しましょうとW3Cで推奨されていますが、 コントロールはフォームの中に書きましょうとは推奨されていません : Name_Not_Found [sage] 2018/09/15(土) 16:51:28.46ID:??? checkboxがフォームの中か外かは重要じゃなく checkboxがあるべきかどうかって話であって checkboxをおくべきでない場所においてdisplay:hiddenにするのは論外 トグルボタンの場合はチェックボックスに置き換わっても意味的に問題なければどっちでもいい : Name_Not_Found [sage] 2018/09/15(土) 17:26:58.26ID:??? そんな話はしてない。 チェックボックスを置く場所は、 クリックさせたい場所に決まってる。 それがどういう見た目であるかは関係ない 押したいトグルボタンがあるのなら その押したい場所にチェックボックスを置くだけの話 : Name_Not_Found [sage] 2018/09/15(土) 17:29:19.66ID:??? ところでチェックボックスっていうのはチェックボックスそのものを クリックするとON/OFFされるが、チェックボックスに 紐付いた<label>を押してもON/OFFされるのは知っているかね? このような使い方もHTMLでは想定されている : Name_Not_Found [sage] 2018/09/15(土) 17:40:32.18ID:??? ウェブ制作の現場で変なこだわりもってるやつ多いよなー 工数無限にかけていいなら好きにこだわればいいけど 結局実務になると案件の規模次第で何でもやるわ : Name_Not_Found [sage] 2018/09/15(土) 17:42:27.38ID:??? それといってること同じじゃん : Name_Not_Found [sage] 2018/09/15(土) 18:02:30.40ID:??? そもそもが言ってることがおかしくて 「checkboxをおくべきでない場所においてdisplay:hiddenにする」 なんて話はしてないのです。 いきなりがなにか関係ない話を始めたという認識 : Name_Not_Found [sage] 2018/09/15(土) 18:03:53.65ID:??? で、それとチェックボックスはフォームの中に置かなければいけないか?は また別の話で、この結論はHTMLでも想定された使い方であり、 フォームの外に置いておいてもOK。アクセシビリティ的にも問題ない。という話 : Name_Not_Found [sage] 2018/09/15(土) 18:05:42.81ID:??? でもプログラムを書かないで良い分、実装は簡単だったりするわけだよ UIのテストは大変だからね。なるべくブラウザの機能で対応させたい。 : Name_Not_Found [sage] 2018/09/15(土) 18:19:23.57ID:??? ttps://www.webcreatorbox.com/tech/myths-screen-reader > 多くの場合スクリーンリーダーでコンテンツを読み上げるのにCSSが影響します。 > 例えばCSSの display:none が使われている要素は読みあげられないということを知っていましたか? 読み上げられたくないチェックボックスはdisplay:noneすればOK その場合クリックさせたいボタンはチェックボックスに紐付いた<label>を用いる : Name_Not_Found [sage] 2018/09/15(土) 18:26:33.29ID:??? 全部が自分に対するレスだと持ってるアスペなん? アコーディオンをcheckboxで実現するかどうかって話もあっただろ トグルをcheckboxでやるかどうかなんて そもそもどっちもcheckboxを見えなくするんだからJSだろうとCSSだろうと HTML側にはどうでもいい話 : Name_Not_Found [sage] 2018/09/15(土) 18:50:25.21ID:??? 全部がHTML側だけの話だと思ってるん? チェックボックス(アコーディオンのラジオボタンも同様)を使うと 状態保持をJavaScriptコードで制御しなくてすむから楽なんだよ :checked擬似クラスが使えるからCSSとの連携がしやすいし HTML側とか視野狭くしてないで、 JavaScriptやCSSと絡めた所まで考えなさい。 : Name_Not_Found [sage] 2018/09/15(土) 18:58:44.09ID:??? 自分のスタイルが絶対に正しいと思ってるガイジ : Name_Not_Found [sage] 2018/09/15(土) 19:02:59.97ID:??? >状態保持をJavaScriptコードで制御しなくてすむから楽なんだよ CSSで変なギミックいれると理解してかく側はいいけど 読む側の理解が大変になるからJS使えってうちではいわれてるな プロジェクト規模の違いや複数人で開発するかにもよるんじゃない? 趣味で書いてじぶんしかメンテナンスしないならCSSだけでできる方が管理はらくだと思う : Name_Not_Found [sage] 2018/09/15(土) 19:09:45.52ID:??? そう、これもまた「人」の問題 技術の良し悪しの話をしてるのに また「人」の話にすり替えられた : Name_Not_Found [sage] 2018/09/15(土) 19:13:14.52ID:??? つーか、JavaScriptで書いたって、自分で状態を管理して class属性に反映させて、それ以降は全部CSSで デザインするんだから比較するなら 自分で状態管理コードを書く + CSSで画面デザイン VS 何も書かないで良い + CSSで画面デザイン の2つなんだから後者のほうが楽なんだが ほんとこの業界は技術力=知識だよな 知識があれば楽をできる : Name_Not_Found [sage] 2018/09/15(土) 19:22:01.48ID:??? 間違いをゴメンネできないやつがうだうだいってるだけ放置しとけよ : Name_Not_Found [sage] 2018/09/15(土) 19:45:57.73ID:??? HTMLにcheckboxを1個追加して :checked + でスタイルを書くか $('#id').on('click', () => $('#id').togglClass('on')); ってかいて .on{} でスタイルかくかの違い 理解しやすい管理しやすいってのもCSSになれてるかJSになれてるかの差でしかない : Name_Not_Found [sage] 2018/09/15(土) 19:50:37.98ID:??? + の指定っているのか? checkbox 自体に疑似要素うまく使ったりスタイル指定してトグルデザインって作れないの? だとしたら実務では + や ~ 使いまくるのは他人が読みにくいから JS 使うわ : Name_Not_Found [sage] 2018/09/15(土) 19:50:54.84ID:??? 2級は受験資格あるぽくてね 実務経験がいるんだとか 3級は楽勝かな? : Name_Not_Found [sage] 2018/09/15(土) 19:53:39.95ID:??? その書き方IEで動かないけどな : Name_Not_Found [sage] 2018/09/15(土) 20:12:54.96ID:??? 別スレで遊んでいる間にw ttps://jsfiddle.net/utjxamrw/ チェックボックス版 ttps://jsfiddle.net/9zku1sat/ jQuery版 そうだよ。この程度ならほとんど変わらん。 だけどJavaScriptで書くとテストしなきゃいけないコードが増えるんだよ。 HTML+CSSだと宣言的にかけるからテスト対象が減る。 それからチェックボックスを使うとアクセシビリティの点でも強い この場合チェックボックスでON/OFFがわかるからCSSを無効にしても使える。 さらにフォームで値を送る場合でもチェックボックスだから そのまま値を遅れるというメリットもある 総合的に見ればHTML+CSSを基本にして、 JavaScriptはjQueryを使ってクラスを設定するだけという 使い方にしたほうが良い : Name_Not_Found [sage] 2018/09/15(土) 20:14:30.42ID:??? > だとしたら実務では + や ~ 使いまくるのは他人が読みにくいから JS 使うわ それもまた、チェックボックスを使うのが良いか悪いかの話ではなく 「人」の問題にすり替わってる。 他人が読めないから、全部ひらがなで書くわって言ってるようなもん : Name_Not_Found [sage] 2018/09/15(土) 20:36:54.28ID:??? 585だけどトグルの話じゃなくアコーディオンでCSScheckbox使うなって話をしたのに 勝手にレスつけて話を拾った挙げ句延々とトグルの話しかしないアスペ トグルボタンの場合はと追加でかいてるんだからアスペじゃなければトグルの話じゃないとわかるだろうに : Name_Not_Found [sage] 2018/09/15(土) 22:35:37.05ID:??? ずっとWEBの仕事してるけど、もし実務経験の証明を求められても自分は証明できない テキトーでいいんじゃないかな 万が一聞かれたら委託でやってましたーとか どこかに過去問あったと思うから見てみるといいよ : Name_Not_Found [] 2018/09/15(土) 23:43:05.19:YhbxuBGX <picture>タグって便利だけどHTMLにメディアクエリを書くのが気持ち悪い・・・ というかsassとかでメディアクエリの値を変数で管理したいんだけど <picture>のメディアクエリをcssで書く方法はありますか? : Name_Not_Found [sage] 2018/09/16(日) 00:27:49.83ID:??? pictureにメディアクエリ?と思ったが そんなふうに使うのか知らんかったわw メディアクエリとCSSは別の概念のもので pictureのメディアクエリは読み込む画像を 切替えてるだけでCSSとは関係ないものと考えるべきだろう だから結論としてはあるはずがないだな。 ちなみにこれは俺の案だがCSSと同じように タグの属性もセレクタで指定できるようになればいいのにって思ってる そうすりゃinputのplaceholderに長々と同じ文字を書かなくてすむのに 現状でやるならsassではなく何かしらのHTMLテンプレートエンジンを 使うしかないでしょうな : Name_Not_Found [sage] 2018/09/16(日) 00:49:15.76ID:??? こいつえらそうにしてるけどソース見る限り業務でさわってるとはとても思えん : Name_Not_Found [sage] 2018/09/16(日) 00:52:18.92ID:??? お前の個人的な感想なんかいらん : Name_Not_Found [sage] 2018/09/16(日) 01:02:06.71ID:??? WEB作成し始めて間もないんだけどブラウザの検証から人のホームページのソースを覗き見できるの知って除きまくってるけど サイトがこの人は手作り出してるなとかWordPress使ったなとかレンタルサーバーブログ使ってるなとかわかる方法あるかな? どこ見たらわかるんだろう? この人はライブドアブログ使ってるな!とか知りたい : Name_Not_Found [sage] 2018/09/16(日) 01:08:03.37ID:??? HTMLからその痕跡を消していればわからない 痕跡を消すのは意味がないことだから誰もやらないが : Name_Not_Found [sage] 2018/09/16(日) 09:15:46.22ID:??? クロームのアドオンにwhats appみたいな名前のがあった気がする 違ってたらゴメソ : Name_Not_Found [sage] 2018/09/16(日) 09:22:28.47ID:??? セキュリティ上の意味はあるよ 何使ってるかわかればそれに的絞って攻撃されるからリスクが大きくなる 消すことで一定の安全性が確保される もちろん根本的な対策ではないから数撃ちゃ当たるが当たるまでの数が雲泥の差になる : Name_Not_Found [sage] 2018/09/16(日) 11:27:05.91ID:??? 大抵はわかる 例えばwpなら/wp-content/のような文字列があるし 他も同様 : Name_Not_Found [sage] 2018/09/16(日) 11:35:39.96ID:??? checked属性ってhtml5からだから 今まではレガシー対応考えて、アコーディオンなんてjsでやればいいよって思ってたが まあ今が考えなおす時期なのかもな でもこれに限らず、まだcssの方が一部ブラウザで対応してないとか、バグがあるとか散見されるから そんな見えていないトラブルに後で巻き込まれるくらいなら実装実績のあるjsのがいいやって今はなるんだよね 他人の人柱で安全を確認できた頃に実装しても遅くは無い : Name_Not_Found [sage] 2018/09/16(日) 11:38:39.31ID:??? 主流になってきたらその方法に切り替えると言った感じ そういう意味ではまだアコーディオンはjsでやるのが主流ってイメージだなあ 大手含めてラジオボタンでやるのが主流になってきたらそうするわ : Name_Not_Found [sage] 2018/09/16(日) 13:00:43.11ID:??? なんとなく癖はわかる、こともある コードだけでなくURLのパラメータのつけ方とか : Name_Not_Found [sage] 2018/09/16(日) 13:37:56.71ID:??? だからそれが意味がないよ。 攻撃なんか自動化してる。 いちいちページ見て何使ってるかなんて判定してない もしセキュリティに問題があれば攻撃が通るだけ。 : Name_Not_Found [sage] 2018/09/16(日) 14:20:13.04ID:??? 攻撃自動化なんか昔からしてる その自動攻撃の最初にシステム判定をしてる そこで判定できればそのシステムに絞った攻撃をする 判定できなければ通るまで全部実行する システムが判定できてれば数日〜数週間で通るのが判定できてなければ数ヶ月、1〜2年かかることもある 自動化にもリソースはかかるので判定できなければやめて次のターゲットに移ることもある 別にそのサイトが目的なわけじゃないからね ターゲットを移さない場合でも時間がかかれば攻撃されてることに気づいて対策もできる なのでシステムを判定させないことは大事 : Name_Not_Found [sage] 2018/09/16(日) 15:03:36.67ID:??? > その自動攻撃の最初にシステム判定をしてる その判定っていうのは、実際に挙動を調べるのであって ページの文字列からの判定はしないよ : Name_Not_Found [sage] 2018/09/16(日) 16:06:55.08ID:??? 質問と関係無い方向へ行ったな : Name_Not_Found [sage] 2018/09/16(日) 22:53:03.35ID:??? マジレスすると金と時間の無駄 : Name_Not_Found [sage] 2018/09/16(日) 22:56:14.38ID:??? WPはwp_〜〜〜ってファイルやそれへのリンクで判別できる レンタルサーバーブログかどうかはURLなりドメインなどでわかる ソースのインデントとかバラバラだと大体手書き : Name_Not_Found [] 2018/09/16(日) 23:16:09.60:5adjVSuH retinaディスプレイ対応がよくわからないので色々調べてたところ こんな記述を見つけました。 「100x100の領域に100x100の画像を表示すると retinaだと100x100xの画像が200x200に拡大されるから汚くなる!」 これって本当ですか? 私の認識だと、200x200には拡大されるけど結局ピクセルの大きさが半分だから 汚くなったりせずに普通のディスプレイと同じように表示されるんじゃないの?と思ってます。 逆に100x100の領域に200x200の画像を表示すれば 普通のディスプレイは半分に縮小されるけど retinaは200x200のまま表示されて普通のディスプレイより綺麗に表示される。 この認識、間違ってますか? : Name_Not_Found [sage] 2018/09/16(日) 23:51:54.49ID:??? 例えば「100, 200」という2つの色のピクセルが並んでいるとすると、 retina では「100, 100, 200, 200」となるから、粗く見える 「100, 150, 200, 200」みたいに、計算で存在しない色を補完するなら、よりカラフル 8K などは計算で補完するから、ものすごくカラフル : Name_Not_Found [] 2018/09/17(月) 00:03:25.65:hS59Zs62 「100,200」→「100,100,200,200」がなぜ荒く見えるんですか? 2倍にするけど実寸サイズは半分だから以下のようになって結局同じに見える気がするんですけど 「 100 , 200 」 「100,100,200,200」 : Name_Not_Found [] 2018/09/17(月) 00:17:01.84:nejF7rlI 初心者です 勉強はWs3というHTMLのサイトでします。なんかわからなければHTMLのBeginnerのサイトでします。 AtomやBracketsはプレビュー機能はあると思いますが、PCにインストールせずにGoogleの拡張やオンラインからではできるのでしょうか。 どちらかできる方を選択します。以上のことができればどんなエディターでもいいと思います。 : Name_Not_Found [sage] 2018/09/17(月) 01:15:50.03ID:??? 見る立場の違いやろ 古いiPhone使ってる人にRetina見せたら画面綺麗っていうだろ? 逆にRetina使ってる人に古いiPhone見せたら、なにこれ汚なっ!ってなるだろ? Retina対応サイト見てて綺麗なのに慣れた所に、 古いiPhoneと同じように見えるサイトに出くわしたら、 なにこれ汚なっ!ってなるだろ? スーパーファミコンだって今からすれば画面汚いんだよ 100メガショックの100メガの単位はビットでたったの12.5MBしかなくて 少なすぎるという意味でショック受ける時代なんだよ そういうことなんだよ 何が綺麗かは時代によって変わる。口裂け女が綺麗な時代だってあっただろう でもまあ拡大するにしてもアンチエイリアスかけるという手段があるわけで もしそういうことをしていれば単純に拡大するよりかは綺麗になってる 可能性はあるんだがな : Name_Not_Found [sage] 2018/09/17(月) 15:55:58.32ID:??? あ! : Name_Not_Found [sage] 2018/09/17(月) 19:29:48.16ID:??? (´・ω・`)? : Name_Not_Found [sage] 2018/09/17(月) 20:32:07.43ID:??? いいえ : Name_Not_Found [sage] 2018/09/17(月) 22:40:34.10ID:??? ttps://dotup.org/uploda/dotup.org1645180.png このコードでプレビューに黒点が出てこないのはなぜだろう? list-style: none;をいれて黒点を消しましょうみたいな課題なんだけどまだ入れてない状態で黒点がないのはなぜ? よろしくおねがいします。 : Name_Not_Found [sage] 2018/09/17(月) 23:02:42.38ID:??? stylesheet.cssが隠されてるのが怪しいな それが答えじゃね? : Name_Not_Found [sage] 2018/09/17(月) 23:32:42.96ID:??? すみません一応CSSのコードも貼っておきます! ttps://dotup.org/uploda/dotup.org1645236.png Prgateでなくエディタを使ってコードをこぴーしてプレビューしてみようかと考えたのですが 皆さんはエディタを何を使っていますか? brackets ATOM sublime text が3強みたいになってるようですね。 アドビの月額は流石に苦しいので除いてますが サイト巡ってるとbracketsが良さそうな感じ出してますが : Name_Not_Found [sage] 2018/09/17(月) 23:46:49.44ID:??? エディタはVisual Studio Code一強だぞ? : Name_Not_Found [sage] 2018/09/17(月) 23:59:28.37ID:??? そのエディタが勝手に何か効かせてるとしか思えない。 その証拠に文字サイズや文字の色を指定していないのに 小さくてグレーの色が勝手に効いている。 : Name_Not_Found [sage] 2018/09/17(月) 23:59:43.92ID:??? エディタ論争はMac/Win論争よりも混沌とした世界だから、一強だとか断言せずにオススメエディタのストロングポイントとウィークポイントをサクッと語っておくれよ VS Codeはとても良いエディタだとは思うけど、結構予想外な挙動をするから設定やカスタマイズが面倒でなぁ : Name_Not_Found [sage] 2018/09/18(火) 00:45:05.19ID:??? 己が使いやすいのが一番やで : Name_Not_Found [age] 2018/09/18(火) 00:49:40.69ID:??? firefox62.0でunicodeの絵文字を表示させると色指定が効かないものがあります。 (例)ハートマーク(&#x2764;)は着色可 サッカーボール(&#x26BD;)は着色不可 htmlのfontタグでもcssのcolorでもだめでした。 着色する方法はありますでしょうか? IE11では着色できます。 : Name_Not_Found [sage] 2018/09/18(火) 04:11:50.39ID:??? modernizr は必要なのか? : Name_Not_Found [sage] 2018/09/18(火) 05:56:17.63ID:??? ttp://tvsyokai.net/akari-morning-psjyunkin/ このページの、範囲選択もできてコンテキストメニューも出せるのに なぜかコンテキストでもCTRL+Cでも文章コピーできないのは どういう仕組みなのでしょうか? : Name_Not_Found [sage] 2018/09/18(火) 09:37:55.59ID:??? レスポンシブデザインをCSSで設定する時の最初の基準ってどうしています? 最初にPC画面を作るのかそれともスマホなのか。 今の主流(流行?)とかあるのかなと : Name_Not_Found [sage] 2018/09/18(火) 09:53:32.86ID:??? 三 ←今、こんなボタンでメニュー開くのが主流だけど、これが廃れたらどんな風になるんだろうか : Name_Not_Found [sage] 2018/09/18(火) 11:53:18.04ID:??? まだ廃れてはないけどだんだん下火にはなってきてる 今はフッターナビというか、アプリにあるような画面下に主要なボタンがくっついてるのが増えてきてる もちろんヘッダーと同じようにスクロールで隠れたり出たりするやつね : Name_Not_Found [sage] 2018/09/18(火) 12:00:18.17ID:??? スマホが先 そこにメディアクエリでPC用を記述する ちなみに一昔前、IE8をサポートしてた頃はPC用を書いてからスマホ用をメディアクエリしてた IE8がメディアクエリ使えなかったから IE8切った頃からはスマホが先になってたかな : Name_Not_Found [sage] 2018/09/18(火) 12:04:30.90ID:??? <body oncopy="return false;"> : Name_Not_Found [sage] 2018/09/18(火) 12:08:42.88ID:??? サングラス越しに見たようなこういう背景画像ってどうやって表示するの? ttps://technext.github.io/Nupital/blog.html : Name_Not_Found [sage] 2018/09/18(火) 12:24:41.53ID:??? サングラス越しに写真をとる : Name_Not_Found [sage] 2018/09/18(火) 15:40:47.99ID:??? ありがとうございます。 やっぱり今はスマホが主みたいですね。 : Name_Not_Found [sage] 2018/09/18(火) 18:10:39.72ID:??? ありがとうございます。 やっぱり今はサングラスが主みたいですね。 : Name_Not_Found [sage] 2018/09/18(火) 18:23:12.12ID:??? はい、私の主はサングラスです : Name_Not_Found [sage] 2018/09/18(火) 18:26:14.18ID:??? いやいやいや 写真にブレンドモードかけてるだけだからな? : Name_Not_Found [sage] 2018/09/18(火) 19:13:55.45ID:??? PCから書くほうが書きやすい僕は異端かな? どうもスマホ用から書くのに慣れない… : Name_Not_Found [sage] 2018/09/18(火) 20:14:03.09ID:??? みんなPCで確認するからPCを先に作るためにPCから書くよ モバイルファーストってなんや? : Name_Not_Found [sage] 2018/09/18(火) 20:41:23.88ID:??? モバイルファーストにしないとグーグル様が怒るよ : Name_Not_Found [sage] 2018/09/18(火) 20:47:35.74ID:??? 完全趣味サイトでPCしか想定してないから、Google先生のお叱りはスルーしてるわ アクセスも少ないけどなー : Name_Not_Found [sage] 2018/09/18(火) 20:49:48.08ID:??? この場合のモバイルファーストって、モバイルでもコンテンツをちゃんと用意しときましょうじゃないの? cssの書き方にまで突っ込まれるとか思ってなかったんだけど。 : Name_Not_Found [sage] 2018/09/18(火) 21:12:50.01ID:??? どちらが先とか考えたことなかった… いつも同時に書いてる… : Name_Not_Found [sage] 2018/09/18(火) 22:36:58.21ID:??? いや写真自体は普通の色です。 : Name_Not_Found [sage] 2018/09/18(火) 22:38:07.10ID:??? なるほど PhotoshopでなくCSSのブレンドモードがあるのか ttps://fit-jp.com/blendmode/ : Name_Not_Found [sage] 2018/09/19(水) 07:35:46.80ID:??? Kompozerみたいにプレビューから編集できる無料HTML編集ソフトって無いでしょうか? Kompozerは更新がないのと文字の表示がおかしくなるバグに困っていて他のソフトを探しています 後継のBlueGriffonも試してみましたが画像挿入の際にサイズを指定できないのが不便です。 : Name_Not_Found [sage] 2018/09/19(水) 08:58:54.31ID:??? cssのアドレスで大体わかるだろ。 livedoorとかwpって書いてんじゃん : Name_Not_Found [sage] 2018/09/19(水) 11:16:44.09ID:??? グラサンは? グラサンもglassunとかsunglassとかの記述あるの? : Name_Not_Found [sage] 2018/09/19(水) 11:33:37.77ID:??? グランディスサングラス 略してグラサン : Name_Not_Found [sage] 2018/09/19(水) 12:14:57.95ID:??? <img src="gazou.jpg" filter="sunglass:rgba(0,0,0,0.8);" > : Name_Not_Found [sage] 2018/09/19(水) 15:16:38.25ID:??? <div style="border-style: solid ; border-color:#d3d3d3 ; border-width: 1px; padding: 10px 5px 10px 20px; background-color: #e6e6fa;"> axcdefg </div> このテンプレは文字のバックに色を指定したかったのですが 文字入れると改行ごとに 枠ができるんですけど どう直したらいいですか? : Name_Not_Found [sage] 2018/09/19(水) 16:52:59.63ID:??? 意味不明だがエスパーしてみたぞ <span style="line-height:2em; background-color: #e6e6fa;"> axcdefg </span> : Name_Not_Found [] 2018/09/19(水) 17:22:53.32:sJ+CMbIT アドブロックで自分に必要のない要素を消しまくっているのですが Amazonのフッターが非表示にできません なぜでしょうか? 緑色のエリアです それとその上に出る「最近閲覧した商品とおすすめ商品」も非表示にしたいです : Name_Not_Found [sage] 2018/09/19(水) 17:35:01.15ID:??? ありがとうございます ttp://blog.livedoor.jp/footcalcio/archives/52468735.html この記事のように文章の後ろを色づけたいのです。 : Name_Not_Found [sage] 2018/09/19(水) 18:42:10.86ID:??? やはり意味がわからんw 枠消したいだけならこれだが <div style="padding: 10px 5px 10px 20px; background-color: #e6e6fa;"> axcdefgああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> : Name_Not_Found [sage] 2018/09/19(水) 18:43:50.55ID:??? スレチだな 何のブラウザか知らんが、アドブロック以外のプラグインでも入れたらどうだ : Name_Not_Found [] 2018/09/19(水) 19:22:27.40:sJ+CMbIT スレチですか すみません Chrome使ってます 他スレで聞いてみます : Name_Not_Found [sage] 2018/09/19(水) 19:26:44.79ID:??? ありがとうございま〜〜ス!!!!! : Name_Not_Found [sage] 2018/09/20(木) 00:29:50.21ID:??? web作成系の動画とか見て勉強してるとさ 解説の人が使ってるのってMACがものすごく多いよね MACはコード打つような人に向いてる機能でもあるの? : Name_Not_Found [sage] 2018/09/20(木) 00:31:55.99ID:??? スレチ : Name_Not_Found [sage] 2018/09/20(木) 00:32:34.58ID:??? adobeソフトはmacの方が使いやすい気がする ツール配置の自由度高いしスポイトどこからでも取れるし : Name_Not_Found [sage] 2018/09/20(木) 00:33:15.44ID:??? コードに関しては特になにも無い 動画編集のノウハウが溜まってるだけ : Name_Not_Found [sage] 2018/09/20(木) 03:15:25.86ID:??? 最強のコーディングマシンだと思う : Name_Not_Found [sage] 2018/09/20(木) 05:57:23.43ID:??? 理由はないので書いてない(笑) : Name_Not_Found [] 2018/09/20(木) 08:22:01.75:W3PYp6SA パソコンとスマホの横幅ってどれくらいとってる? なんか色々考えてこれがいいって言えるのがなくて困った : Name_Not_Found [sage] 2018/09/20(木) 09:14:55.24ID:??? パソコンは最大の中身が1200、普通の中身は960〜1000が多い気がする スマホは600でデザインして、320で確認しながら作って、実際見せるのは375〜400なんぼ 何がベストなのか自分もわからない : Name_Not_Found [sage] 2018/09/20(木) 12:07:24.03ID:??? PCは960〜1024pxだな ユーザーのデスクトップのモニターとノートの主流サイズを折衷して考えるとこれ。 1200px超えると制作負荷が異常に高くなる : Name_Not_Found [sage] 2018/09/20(木) 12:08:47.15ID:??? スマホは同じく。320pxを最低値としている。 : Name_Not_Found [sage] 2018/09/20(木) 12:14:09.92ID:??? 情報量のやたら多いポータルサイトなどなら 1200pxでもまあわかるが、それ基準に作ると 小さいモニターの対応がしんどくなる : Name_Not_Found [sage] 2018/09/20(木) 13:26:45.25ID:??? リキッドで作ってるから画面が小さくなっても問題ないけど 3個の箱が横並びになってるアレはどうしたらいいのといつも思ってる そもそもなんでいつも3個なのか 最後の一個を下に落としてセンターにすれば良いのか、全部縦並びにした方がいいのか 好みの問題なんだろうけど : Name_Not_Found [sage] 2018/09/20(木) 15:41:34.82ID:??? すみません初心者の質問なのですがSSはります。 ttps://dotup.org/uploda/dotup.org1647270.png ttps://dotup.org/uploda/dotup.org1647272.png ttps://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が貼り付けられたという理解でだいたいあってますでしょうか? 自分でも無茶な理屈だとは思うので間違っていたら正しい理解をお願いします。 : Name_Not_Found [sage] 2018/09/20(木) 16:02:36.65ID:??? コードのスクショ貼ってもあんま意味ないよん んでcoverは文字通り ボックス全域をカバーするように背景画像が拡大されるので paddingによってボックスの大きさが変わったら それに合わせて変化するよ : Name_Not_Found [sage] 2018/09/20(木) 18:13:48.72ID:??? センターは流石にどうかと思う : Name_Not_Found [sage] 2018/09/20(木) 18:29:17.49ID:??? >リキッドで作ってるから画面が小さくなっても問題ない それは最大/最小の差がそこまで大きくないケースでは? : Name_Not_Found [sage] 2018/09/21(金) 00:43:03.56ID:??? flex使って左右の要素の高さが何故か揃わない時の絶望感、、、 こねくりまわして裏技ぽい事してやっと揃った こういう時間がホント嫌だ : Name_Not_Found [sage] 2018/09/21(金) 02:30:54.62ID:??? そうやってノウハウを積んで少しづつ作業は効率化されていくのだ : Name_Not_Found [sage] 2018/09/21(金) 08:26:40.44ID:??? パスについて質問なんですが現在位置がドキュメントってフォルダの中のインデックスHTML ってとこで画像を貼りたくて 画像のあるフォルダはダウンロードってフォルダの中の4つ奥にあるんですが表記させるにはどうすれば良いのでしょうか? : Name_Not_Found [sage] 2018/09/21(金) 08:42:36.65ID:??? パスを書くには 二つのファイルの位置がわかってなきゃダメなんだ で、その文章ではわからない、と言うことはわかるじゃろ? プログラムではやりたいことを正確に文章化するのはわりと大事なんだ : Name_Not_Found [sage] 2018/09/21(金) 12:13:16.62ID:??? ドキュメントとダウンロードは同じ階層にあるとエスパーした src="../フォルダ1/フォルダ2/フォルダ3/フォルダ4/画像名" どこかの画像を使い回すことが増えそうなら、 ドキュメントやダウンロードと同じところにassets/imagesフォルダ作ったらどうでしょう : Name_Not_Found [sage] 2018/09/21(金) 14:01:11.13ID:??? まさかWindowsのドキュメントフォルダとダウンロードフォルダでやってるんだろうか : Name_Not_Found [sage] 2018/09/21(金) 20:02:23.01ID:??? え?ダメなんですか?パソコン初心者なんでフォルダの割り振りも分かってないんです : Name_Not_Found [sage] 2018/09/21(金) 21:27:07.90ID:??? 貴様!偽物だな! : Name_Not_Found [sage] 2018/09/21(金) 21:42:58.04ID:??? そういえば昔、ローカル環境ではみえれるのに WEBにあげたら画像がみれなくなった!!!どうなってんだ!!って 怒り狂ってたアホがいたけど 相対パス先が安定のユーザーフォルダ : Name_Not_Found [sage] 2018/09/21(金) 21:51:25.38ID:??? いや本物ですwパソコン買ったばかりでHTML も始めたばかりなので分からないんですけど WindowsのダウンロードフォルダとドキュメントフォルダにそれぞれHTML ファイルと画像ファイルがあるからどう記述したら表示できるか知りたかったんです(´・_・`) : Name_Not_Found [sage] 2018/09/21(金) 21:51:49.35ID:??? ドキュンホルダーと同じ階層とかじゃないですが どうやって自動で書きだすかきいてるんです : Name_Not_Found [sage] 2018/09/21(金) 21:57:05.21ID:??? すまんかった ウェブページに画像などを貼るときのパスってのは Webサーバの中でのパスになるので、ウィンドウズのフォルダ構成を使っても駄目なのよ なので、まず「ore_no_site」ってフォルダをドキュメントフォルダの中に1個作って、その中に ore_no_site |- index.html |- img/ |- image.jpg となるようにファイルを置くといい、imgはフォルダだ このindex.htmlにimage.jpgを貼る場合は <img src="img/image.jpg"> となる : Name_Not_Found [] 2018/09/21(金) 22:00:20.02:VAKGU9vY んで、ここまで初心だと、文字しか書けない掲示板でいちいち聞いてたら大変なので 「HTML 入門」とかでググると懇切丁寧に図付きで教えてくれるサイトいっぱいあるんで それ見ながらやって、それでもわからないことが出てきたら、それをここで聞くようにしてみるといいよ : Name_Not_Found [sage] 2018/09/21(金) 22:00:48.02ID:??? いやこれは超初心者向けの本を買って読んでから出直した方がいいレベルだろ 社会人野球の試合に出て勝ちたいのですが、まずルールを教えてくれませんか?レベル : Name_Not_Found [] 2018/09/21(金) 22:01:01.79:VAKGU9vY すまん、邪険に扱ったような書き方をしてしまった その方が捗るよって意味です ごめんなさい : Name_Not_Found [] 2018/09/21(金) 22:02:04.18:VAKGU9vY どんな質問にも優しく答えるスレなんで、多少はね? : Name_Not_Found [sage] 2018/09/21(金) 22:13:30.50ID:??? ググれば基礎の事はいっぱい出てくるしググった方が自分の為になるぞ : Name_Not_Found [sage] 2018/09/21(金) 22:21:59.71ID:??? ご丁寧にありがとうございます ちょっとここで聞くのもレベルが低すぎる話みたいですね(´・_・`) もうちょい勉強してから出直してきます : Name_Not_Found [sage] 2018/09/21(金) 23:14:04.84ID:??? なんでパソコンかったばかりでいきなりHTML書こうと思ったの そもそも画像はるとか以前にパソコンの中でHTMLかいただけでは他の人からはみえないよ : Name_Not_Found [sage] 2018/09/22(土) 01:14:42.75ID:??? 追い打ちかけることもあるまい : Name_Not_Found [sage] 2018/09/22(土) 01:58:05.11ID:??? インターネットやってホームページ作るためにパソコンを買った時代だってあるんですよ! : Name_Not_Found [sage] 2018/09/22(土) 08:37:40.51ID:??? インターネットください : Name_Not_Found [sage] 2018/09/22(土) 13:05:57.26ID:??? 何もしてないのにインターネットが壊れました : Name_Not_Found [sage] 2018/09/22(土) 13:16:30.02ID:??? わしもマイコンはじめるかのお : Name_Not_Found [sage] 2018/09/22(土) 16:17:14.33ID:??? ここはひどいインターネットですね : Name_Not_Found [sage] 2018/09/22(土) 16:36:29.46ID:??? いんでっくすたんがどこだろうと <img src="file:///ではじまるパス"> で画像は表記できるよ 画像を右クリックしてブラウザ(IEとかChromeとか)で開いてみて そのときのURLにある file:// ではじまる文字を src="〜" の中にはりつけるんだ ただし だけどな : Name_Not_Found [sage] 2018/09/22(土) 19:49:03.10ID:??? なにが間違ってるのかわからない… : Name_Not_Found [sage] 2018/09/22(土) 19:50:06.28ID:??? それを今の彼に教えてなんの得があるのかと 優しく教えるスレなのに なんでお前らそんなにウエメセなの? そうすると何か良いことあるの? : Name_Not_Found [sage] 2018/09/22(土) 19:54:37.04ID:??? じゃあどういう回答すればいいか見本見せて : Name_Not_Found [sage] 2018/09/22(土) 20:21:34.71ID:??? ,704,705,707が俺のした回答だよ! 逆に聞くが 初心者馬鹿にするとどんな欲求が満たされるの? : Name_Not_Found [sage] 2018/09/22(土) 20:45:03.19ID:??? は全然上目線じゃないだろ むしろ優しいと思ったが でも結局、こんなとこで0から教えてあげてたら 次は1を教えて2を質問されるぞ : Name_Not_Found [sage] 2018/09/22(土) 20:49:26.35ID:??? そういうスレなんだと思ってた : Name_Not_Found [sage] 2018/09/22(土) 21:04:13.07ID:??? よりのほうがはるかに相手のレベル考えた優しい回答だと思うが どこが上から目線かさっぱりわからん : Name_Not_Found [sage] 2018/09/22(土) 21:55:00.50ID:??? ごめん、そういうスレだわ じゃ、じゃあ次はインターネッツの繋ぎ方だな プロバイダ選びだったり、回線業者とプロバイダの違いや光ファイバーについて頼む・・・ : Name_Not_Found [sage] 2018/09/23(日) 10:08:21.21ID:??? ほとんどの人がスマホ使ってるだろうから、 キャリアの光回線でええと思うよ…割引あるし… : 373 [sage] 2018/09/23(日) 10:31:14.43ID:??? htmlとcssのファイル管理の方法について教えて頂けないでしょうか folder - - : Name_Not_Found [sage] 2018/09/23(日) 12:41:27.37ID:??? 手が震えてダブルクリックが上手くできませんってネタあったな : Name_Not_Found [sage] 2018/09/23(日) 13:58:37.06ID:??? おじいちゃんならじゅうぶんありえる : Name_Not_Found [sage] 2018/09/23(日) 14:43:42.45ID:??? アル中かな : Name_Not_Found [sage] 2018/09/23(日) 16:31:26.73ID:??? シャキッとさせなきゃ : Name_Not_Found [sage] 2018/09/23(日) 20:21:57.30ID:??? HTML/CSSだけじゃバカヤロウ! : Name_Not_Found [sage] 2018/09/23(日) 20:29:48.55ID:??? |- assets/ | |- css/ | |- style.css |- contentsname/ |- index.html |- css/ |- style.css こんな風にして、assetsにはサイト全体で共有するようなスタイルを書くのが基本 : Name_Not_Found [sage] 2018/09/23(日) 21:20:40.65ID:??? インデントが |- assets/ | |- css/ | |- style.css |- contentsname/ |- index.html |- css/ |- style.css こうだな : Name_Not_Found [sage] 2018/09/23(日) 22:23:41.82ID:??? ページごとにcss分けるなよくそが : Name_Not_Found [] 2018/09/23(日) 23:26:32.91:bpuHyx+v 3階層以上になるサイトだったらそっちの方が良くない? SASSとか使ってファイル分けて、ページ毎に固有のクラス名つけてってしても 流石にCSSファイル1つは運用効率落ちるし、部分的な分業とかもしづらくなるし 基本はこれで、ページ数や階層が少なかったりする場合に ファイル数を減らす方向性を考える、って感じでいいと思うけどなあ : Name_Not_Found [sage] 2018/09/24(月) 00:06:54.51ID:??? 同意。動的サイトじゃ通用しないし 共通パーツになったり、汎用クラスになったりすることがあるのに 後で修正したりするハメになる : Name_Not_Found [sage] 2018/09/24(月) 00:13:10.55ID:??? 10000ページとかあったりしても 1ファイルにするの??? : Name_Not_Found [sage] 2018/09/24(月) 00:25:10.56ID:??? ページ数は関係ないだろ サイト全体に統一感を出せてるかどうかの話 下手なやつが作るとページごとにいきあたりばったりで 微妙に幅や空白が変えてたりして統一感がない 統一感を出せていれば、必要なスタイルの数なんてたかが知れてる : Name_Not_Found [sage] 2018/09/24(月) 00:32:41.48ID:??? 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の使い方を理解してない証拠でしか無い : Name_Not_Found [sage] 2018/09/24(月) 01:07:37.33ID:??? でもさー、それよく入門本にも書いてあるけど 実際には、ここのスタイル書き換えたら、どのページに影響あるの?ってなっちゃわね? いや理想的だとは思うんだけど、実際のところは理想的な全体管理ってなかなか出来ないと思うんだよねー そういう意味ではの言いたいこともわかるなー 代理店「リニューアルします」 代理店「予算が限られてるので、第三階層以下はヘッダフッタだけ変えて、中身はそのまま使います」 なーんてことがほとんどでさー その度に共有フォルダがcommon、common2、new_common…って感じで増えてって 自社がこのサイトの運用を引き継いだ時点で、すでにサイトが秘伝のタレ化してるなーんて、よくあることじゃん? まあ、俺が今までやってきたのにそういうのが多かったってだけで 全てがそうだとは思わないけどねー : Name_Not_Found [sage] 2018/09/24(月) 01:24:22.06ID:??? >例えば<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の属性値なんてただの識別子であればいいんだから 内容や見た目にこだわる必要は一切ないと思うんだよねー まあ理想的ではあるとは思うけどさー : Name_Not_Found [sage] 2018/09/24(月) 03:02:23.14ID:??? > 実際には、ここのスタイル書き換えたら、どのページに影響あるの?ってなっちゃわね? 適当にスタイル設定してるからそうなる すべてを.fooクラス以下にしか適用しないように書けば .fooクラス以外には適用されないだろ .foo { .a { ・・・ } .b { ・・・ } .c { ・・・ } } と書いたものが.foo以外には適用されないのは当たり前 : Name_Not_Found [sage] 2018/09/24(月) 04:50:42.30ID:??? 1. サイト全体の共通CSS 2. 各ページのCSS まず1を適用して、次に2で、1を上書き適用する。 SASS のPartial とか、差分プログラミングのような感じ 例えば、1で赤にしていても、2で青に上書きするなど、 各ページで、変えたい部分だけを書く : Name_Not_Found [sage] 2018/09/24(月) 09:33:59.83ID:??? 自分もの方法だな。 でもできるだけ共通にまとめる このパーツはこっちのページにも設置してとか どうせなるんだから : Name_Not_Found [sage] 2018/09/24(月) 11:30:46.81ID:??? 自分も 今は動的やっててモジュール化したパーシャルscssが大量にあるツライ : Name_Not_Found [sage] 2018/09/24(月) 13:04:33.10ID:??? 俺も共通だな みたいな時は色用のclassを作っておく : Name_Not_Found [sage] 2018/09/24(月) 13:11:01.97ID:??? CSSで上書きかいたときって 先にCSS上で処理されてから要素に適用されるの それとも要素1個1個に2回スタイルが適用される? 普通のドキュメントページなら管理しやすけれパフォーマンス気にしなくていいけど SVGでかかれたグラフ上の何千個の点とかにスタイルあてる場合 少しのムダもはぶきたい場合とかもあるじゃん : Name_Not_Found [] 2018/09/24(月) 14:35:05.59:FEyDxRmL 前者 : Name_Not_Found [sage] 2018/09/24(月) 14:52:13.51ID:??? 初心者です よろしくです テスト--------------------------------------------------------- みたいな感じで右端まで横罫線を無限に伸ばしたい <hr />だと前後に改行が入るので横罫線のみとなって、文字列を混在させることが出来ません。 (だから、「テスト<hr />」としても無駄) テスト<hr style="display: inline;" /> としても無意味でした。 どうしたらいいですか? : Name_Not_Found [sage] 2018/09/24(月) 15:04:01.31ID:??? <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> : Name_Not_Found [sage] 2018/09/24(月) 15:15:15.16ID:??? はええ ウェブデザイナーのプロってこの程度はみただけでコード浮かぶもの? : Name_Not_Found [sage] 2018/09/24(月) 15:54:59.60ID:??? 定番っちゃ定番ですしおすし flex使った現代風なやり方の他にも 古臭いやり方が何通りもある気がする : Name_Not_Found [sage] 2018/09/24(月) 16:26:39.90ID:??? 現代風といえば疑似要素使うんじゃね <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> : Name_Not_Found [sage] 2018/09/24(月) 16:29:31.40ID:??? ピッタリ上手くいきました どうもです ただ、それが、 <details> <summary><div class="after-line">テスト<hr></div></summary> abc </details> などとなると出来なくなってしまいますが、どうしたらいいですか? : Name_Not_Found [sage] 2018/09/24(月) 16:45:25.33ID:??? hrは使わない方がいいぞ : Name_Not_Found [sage] 2018/09/24(月) 17:39:37.09ID:??? 次これお願いします ----------------------------テスト---------------------------- 線は1pxでいいです 出来たら文字と線の間の空きは調整したいです : Name_Not_Found [sage] 2018/09/24(月) 18:03:33.65ID:??? バックグラウンドイメージに横線ひいとけ : Name_Not_Found [sage] 2018/09/24(月) 18:07:08.30ID:??? は荒らしなのでスルーして結構です =ですが、summaryをdisplay: inline; にしても、その中のdivをinlineにしても上手くいきませんでした : Name_Not_Found [sage] 2018/09/24(月) 18:25:26.26ID:??? そりゃ summary が flex の外にあるからね summary に flex をつければいけるよ flex は子要素を横1列(だけじゃないけど)に並べる : Name_Not_Found [sage] 2018/09/24(月) 20:53:35.28ID:??? しどい…(´・ω・`) : Name_Not_Found [sage] 2018/09/24(月) 21:07:26.99ID:??? 出荷 : Name_Not_Found [sage] 2018/09/24(月) 21:28:58.51ID:??? 俺も1つサイト作っておいてほしいんだが : Name_Not_Found [] 2018/09/24(月) 21:36:36.68:yqXlZmzF flexで複数段にわたって並べた要素の内側の境界のみ表示させるにはどうしたらよいでしょうか? ○│○│○ ─┼─┼─ ○│○│○ ─┼─┼─ ○│○│○ ↑こんなイメージです。 tableだとこんな感じ。 <table border="1" frame="void" rule="all" style="border-collapse:collapse">・・・ : Name_Not_Found [sage] 2018/09/24(月) 21:52:55.99ID:??? nthで頑張れば? : Name_Not_Found [sage] 2018/09/24(月) 22:00:56.91ID:??? 各段 flex にするだけなら nth なり not:last-child なりで boprder 指定すればいい wrapped だったら端になることが検知できないから無理 box-sizing: border-box で padding 0 にして外側に背景色のborderを上書きするぐらい : Name_Not_Found [sage] 2018/09/24(月) 22:48:58.01ID:??? 接戦だった ○│×│○ ─┼─┼─ ○│○│× ─┼─┼─ ×│×│○ : Name_Not_Found [sage] 2018/09/25(火) 00:07:52.52ID:??? Flexコンテナにmargin:-1px、その親でoverflow:hiddenじゃだめ? : Name_Not_Found [sage] 2018/09/25(火) 00:15:46.76ID:??? オーバーフローヒドゥン!パァーッ! : Name_Not_Found [] 2018/09/25(火) 00:17:38.70:6Yz3F5kq やっぱ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) というように外側に隙間を作らず画面を目いっぱい使うレイアウトを作りたかった のですが、なかなか簡単にはいかないものですね。 要素数が可変の場合、下側のborderを隠すための親の縦サイズの指定が難しくないですか? : Name_Not_Found [sage] 2018/09/25(火) 00:33:28.50ID:??? えぬすで頑張ってみた ttp://jsfiddle.net/ns9k6Lmq/1/ 何に使えるのかが思いつかない… : Name_Not_Found [sage] 2018/09/25(火) 02:03:53.84ID:??? センスある : Name_Not_Found [] 2018/09/25(火) 11:05:20.17:e6s7AcF4 【天文台閉鎖、FBI】 アポロ捏造のキューブリックも真っ青、太陽に映ったのはマ@トレーヤのUFO ttp://rosie.5ch.net/test/read.cgi/liveplus/1537840672/l50 : Name_Not_Found [sage] 2018/09/25(火) 13:16:54.60ID:??? 文章の背景に色を付けるやり方を教わったのですが <div style="padding: 10px 5px 10px 20px; background-color: #e6e6fa;"> </div> これだと改行が一行余計に取られてしまうのですが解決策を教えてください ライブドアブログを使ってます : Name_Not_Found [sage] 2018/09/25(火) 13:20:21.96ID:??? 追加説明 画像 ttps://imgur.com/a/4sbQdPu : Name_Not_Found [sage] 2018/09/25(火) 13:43:43.53ID:??? padding: 10px 5px 10px 20px; これが上、右、下、左の空きの大きさ お好みの数値に変えるといいよ : Name_Not_Found [sage] 2018/09/25(火) 14:26:56.74ID:??? 言葉足らずですみません、、 でいう padding:は白い余白の幅のことですよね? 勉強になりました、。 聞きたかったのはコピペした文章をペーストした時 の画像のように 改行がおかしくなってしまうのです。 : Name_Not_Found [] 2018/09/25(火) 14:31:37.91:ywGJM4lt そりゃまた別だなあ たぶん中で<p>とかついてて、そのmargin/paddingだろうな スクショってあんまり意味ないから HTMLコピって貼るなりできんもんかね : Name_Not_Found [sage] 2018/09/25(火) 14:40:38.32ID:??? ありがとうございます 文章カットしましたがこんな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 /> : Name_Not_Found [sage] 2018/09/25(火) 14:52:46.59ID:??? それを見やすくするとこうなってる <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>だけになる、気がする : Name_Not_Found [sage] 2018/09/25(火) 14:53:48.26ID:??? おわぁ : Name_Not_Found [sage] 2018/09/25(火) 14:59:02.42ID:??? IE11ならflex使っていいよね? : Name_Not_Found [sage] 2018/09/25(火) 15:00:13.32ID:??? ありがとうございます 要するにコピーした文章自体がそうだから 自分で変更しないといけないわけですね? コピーした文章を 一度テキストなどに貼り付けてからコピーし直す作業がないと 必要ない枠などがが表示されてしまうんですけど 文字をコピーするだけで どうしてもいろんなHTMLをコピーしてしまうんですね、、 : Name_Not_Found [sage] 2018/09/25(火) 15:55:12.86ID:??? ごめんちょっと何言ってるかわからない けどブログの入力画面てこうなってる、でしょ ttps://i.imgur.com/6TY4Wp2.jpg 普通に入力してると、Enterで改行したり 画像やリンク貼ったりすると、裏で勝手にHTMLに変換されてんのよ んで、それが気に入らないときは「HTML編集」のボタン押して 直接HTMLをいじることになる の背景色がどうたら言うのもそうやったはず ブラウザ上のエディタで直接やることも出来るはず けど多少扱いにくいし、ブラウザ上のエディタが作ったHTMLは見にくいので デスクトップのテキストエディタに一度コピペして 見やすく整形し直して編集するってのは間違ってないと思うよ : Name_Not_Found [sage] 2018/09/25(火) 17:03:01.18ID:??? HTML側で書くと今度は改行すらしてくれない訳で 無料のエディターなどでテンプレ作っておいて作成したあとコピペして 画像はライブドアブログから後で指定するって方法もあるわけですね どちらにしても修正という手間は必要なんですね 詳しくありがとうございました! おすすめの無料エディターあったら 紹介していただけたら、、、お願いします : Name_Not_Found [] 2018/09/25(火) 17:19:16.01:ywGJM4lt エディタはVSCodeかAtomでいいんじゃない? 自分はやってないけど、毎日のようにブログ書いてる人は エディタでマークダウンでわーっと書いてブログに投入してる、んじゃないかな : Name_Not_Found [sage] 2018/09/25(火) 18:02:43.24ID:??? ありがとうございます。早速使ってみます! : Name_Not_Found [sage] 2018/09/25(火) 19:21:47.81ID:??? cssは使わんのけ? : 771 [] 2018/09/25(火) 21:13:57.73:6Yz3F5kq いろいろがんばってみましたが、、、 コンテナに display:flex; flex-wrap:wrap; justify-content:space-between; margin:-3px 0 0 0; その親に overflow:hidden; 中身に margin-top:3px; てやると最終行の中身の数が端数にならない場合に限りいい感じになりました。 あとは、最終行の端数処理がうまくできればいいのですが。。。 : Name_Not_Found [] 2018/09/25(火) 21:42:02.22:ywGJM4lt で無駄にやった奴が参考になるかどうかわからんけど コンテナの幅、アイテムの幅、アイテムの個数、この3つがわかってれば 行数・列数がわかるので 最後の行になるのは、((行数 - 1) × 列数 + 1)番目〜アイテム個数番目になる けど、たぶんアイテムの上と左にボーダー出すようにして 最初の1行の上、nth-child(列数+1)の左を消したほうが速い気がしてきた : Name_Not_Found [sage] 2018/09/25(火) 22:11:57.33ID:??? ですよね、CSSでできますよね、けど 書き方わからんですたい : Name_Not_Found [] 2018/09/25(火) 23:02:38.50:6Yz3F5kq のつづき 中身の後ろに(列数−1)個のダミーdivを追加し width:○○px; height:0px; margin:0; padding:0; border:none; でできました!! : Name_Not_Found [] 2018/09/25(火) 23:49:55.11:6Yz3F5kq scssがわからない。。。orz : Name_Not_Found [sage] 2018/09/26(水) 10:16:09.10ID:??? webデザイナーってやっぱり女性が多いのかな? ここのスレも女性がおおいのかな? : Name_Not_Found [sage] 2018/09/26(水) 14:27:50.02ID:??? ここは男ばっかだと思う : Name_Not_Found [sage] 2018/09/26(水) 15:39:04.95ID:??? 開発が絡まない職場は女の園だったよ 毎日雑談できて楽しかった…今は…(´;ω;`) : Name_Not_Found [sage] 2018/09/26(水) 16:04:53.86ID:??? 若い頃この仕事やってて、結婚+出産で辞めて 子供大きくなったから内職でまたやりたい っておばちゃん集めて使ってる 夕方近くなるとslackの雑談チャンネルが晩飯メニューの話題で加速する : Name_Not_Found [sage] 2018/09/26(水) 16:58:47.24ID:??? レスポンシブで作るときってコンテンツのmax-widthを固定幅にしてwidth100%とかにするのが基本? 今までメディアクエリでディスプレイサイズごとにwidth書いてたんだけど非効率だよね : Name_Not_Found [] 2018/09/26(水) 17:03:17.84:0WxjLcdc 場合による : Name_Not_Found [sage] 2018/09/26(水) 17:03:26.01ID:??? 可愛い子はおった? : Name_Not_Found [sage] 2018/09/26(水) 17:28:44.06ID:??? 画像を左側に置いてその右横に〈h1〉と〈p〉で文章書いていくにはどう表記しますか? 文章の始めは画像の頭のすぐ隣に表示させたい それを縦に3つ作りたいんです教えて下さいエロい人 : Name_Not_Found [] 2018/09/26(水) 17:42:36.46:0WxjLcdc <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つありゃあなんでもいいんで : Name_Not_Found [sage] 2018/09/26(水) 18:02:30.14ID:??? おー!ありがとうございます^_^ 禿げてるんですか? : Name_Not_Found [sage] 2018/09/26(水) 18:41:37.17ID:??? うわ・・センスないなら 余計な事言わなきゃいいのに : Name_Not_Found [] 2018/09/26(水) 19:04:39.60:0WxjLcdc おい! おい… : Name_Not_Found [sage] 2018/09/26(水) 19:26:21.40ID:??? おったよ 新卒同然の若い子らもおったよ 今はおっさんしかいないよ… : Name_Not_Found [sage] 2018/09/26(水) 19:48:34.59ID:??? 俺がいるじゃねえか・・・ : Name_Not_Found [sage] 2018/09/26(水) 20:41:25.11ID:??? ごめん。スカルプDがいいらしいよ : Name_Not_Found [sage] 2018/09/26(水) 21:35:15.54ID:??? 簡単にでいいんだけど、どんなパターンがある? : Name_Not_Found [sage] 2018/09/26(水) 21:37:18.66ID:??? たぶん誰もピクリとも笑って無いからマジで自分のセンスに気が付いた方がいいゾ・・ 昔はそういうのをおやじギャグとか言われてた それとこれ読んでおいた方がいい ttp://dic.nicovideo.jp/a/hoge : Name_Not_Found [sage] 2018/09/27(木) 01:50:57.67ID:??? ほげほげ : Name_Not_Found [] 2018/09/27(木) 11:44:00.35:isTpLREu 十数年ぶりにみたら、hoge.comが別のサイトになってる… : Name_Not_Found [] 2018/09/27(木) 12:24:55.06:dwQ79skC 【宗教の国連、URI】 日本軍の魔の手からアジアを救った国連に習い、テロを鎮める神々の連合が発足 ttp://rosie.5ch.net/test/read.cgi/liveplus/1538013497/l50 世界教師マ1トレーヤ出現の兆し : Name_Not_Found [] 2018/09/27(木) 18:00:46.50:jlZ5H/Wb cssとか全く分からないんですけど、ブログでカラム落ち?っぽいことが起きてしまっていて困っているので助けてほしいです。 無料ブログのデザインテンプレートみたいなのがあって、右側に「検索」「プロフィール」「最新記事」などが表示されるように設定してありました。 色々とデザインを触っている間に気付いたらそれらが記事の下に落ちてしまっていました。 調べてみたらcssの問題の可能性が高そうなのですが、私は素人でそういったことに疎いです。 そこでどなたかにおかしい点を指摘してほしいです。 url:fanblogs.jp/ratock ちなみに、 トップページ以外ではなぜかカラム落ちしないこと 「検索」などのブロックをサイトの左側にするとカラム落ちが発生しないことは確認しています。 不明な点がありましたら分かる範囲で答えます。 どうかよろしくお願いします。 👀 Rock54: Caution(BBR-MD5:842eac59f97f47c0d6fb1bed016df49c) : Name_Not_Found [sage] 2018/09/27(木) 18:25:16.13ID:??? ニートの僕が1000万円あるけど素人で勉強するの面倒くさいからお前ら無料で直せ はいどうぞ : Name_Not_Found [] 2018/09/27(木) 18:34:06.69:AC5gOtLC まだ1000万目指してる段階です。 我ながら安っぽくて恥ずかしい煽りでしたね : Name_Not_Found [sage] 2018/09/27(木) 19:58:49.11ID:??? <div id=content>略</div> この直下に<div id=sideBoxRight>略</div>をまるごと置くだけ。 今は <div id=content> 略 <div id=sideBoxRight>略</div> </div> という風にcontentに入ってる : Name_Not_Found [] 2018/09/27(木) 20:09:15.41:isTpLREu HTML関係ないけど 投稿毎に現在の預金額書いたら良いと思った せっかく1000万目指してるんだから : Name_Not_Found [sage] 2018/09/27(木) 22:14:03.47ID:??? の言ってる通りだね。 ブログのテンプレってそんなとこまで弄れるんだな〜 個人的には文字サイズをもっと大きくしたほうがいいと思う それとプログラムが好きで無職ならcss/htmlを勉強したほうがいいぞ : Name_Not_Found [] 2018/09/28(金) 07:34:35.19:UoM384i4 本当にありがとう! …でも設定?見てみたら独自タグとか使った変なhtmlの編集画面しかなくてハードル高かったので左側にサイトボックス移動させてだましだまし使うことにしたよ、、 さんの言うように自分でhtml/cssの勉強してみて独自タグに怯まず編集出来るようになったら治そうかな 1000万が現実的になってきたら書こうかな、、今は書くのも恥ずかしい… あと、アクセス集め頑張ったらファンブログの経済部門ランキングで20位入れました。これからめげずに頑張ります ttp://fanblogs.jp/contents/category/fanblogs_economy/0001.html 👀 Rock54: Caution(BBR-MD5:842eac59f97f47c0d6fb1bed016df49c) : Name_Not_Found [sage] 2018/09/28(金) 10:44:55.47ID:??? フルスクラッチにしろ、<html> </html> <meta>などの一式備わっているテンプレはないのだろうか : Name_Not_Found [sage] 2018/09/28(金) 11:36:16.14ID:??? 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> : Name_Not_Found [sage] 2018/09/28(金) 12:03:28.52ID:??? html テンプレで検索すればいくらでもでてくるじゃん 合ってるか合ってないかは自己判断だが あとは各IDEにテンプレ入ってるね それぞれ違うけど : Name_Not_Found [sage] 2018/09/28(金) 12:27:20.61ID:??? 有名サイトから拝借するのが一番 : Name_Not_Found [sage] 2018/09/28(金) 15:09:09.60ID:??? 意外と仕様がバラバラなのだよ。 : Name_Not_Found [sage] 2018/09/28(金) 15:42:33.88ID:??? こういうほんとに基本要素だけのテンプレってなかなかないよね。 : Name_Not_Found [sage] 2018/09/28(金) 16:40:39.36ID:??? シングルページ vs 複数ページ 悩む。最近は前者が大半? サイトの内容によってそれぞれに向き不向きがあるんだろうか。 : Name_Not_Found [sage] 2018/09/28(金) 17:01:47.42ID:??? 基本要素のテンプレなんかいらないレベルだろ : Name_Not_Found [] 2018/09/28(金) 17:14:47.43:KtKV5cvU んなもん、どちらかで悩むもんでもない気がする 提示しなきゃならん内容や見る人を考えて選択すればよいものであって : Name_Not_Found [sage] 2018/09/28(金) 19:05:08.19ID:??? 普段から色々な金融・経済・投資のブログは見まくってるけど そんな中身の無いサイトが上位にくるなんて悪害でしかない 小手先の小細工なんて誰の役に立つのか : Name_Not_Found [sage] 2018/09/28(金) 20:08:36.47ID:??? 最近のサイトは複雑に作られてて 勉強の参考にできないね PHP勉強中だけどPHPが使われてるサイトが見当たらない <?PHP ?> であらわされるんでしょ? : Name_Not_Found [sage] 2018/09/28(金) 20:23:37.40ID:??? 知ったかぶりだな なんだこいつ : Name_Not_Found [sage] 2018/09/28(金) 20:27:56.82ID:??? liタグは絶対絶対olないしulタグで囲まないとダメですか?文法的にもseo的にも : Name_Not_Found [sage] 2018/09/28(金) 20:30:05.77ID:??? マグロはタタキが美味い : Name_Not_Found [sage] 2018/09/28(金) 21:15:33.20ID:??? デザイナーと開発って何が違うの? 開発って言われるともうソフトやアプリの作成のイメージになるけど : Name_Not_Found [sage] 2018/09/28(金) 21:50:29.45ID:??? 最近はデザイナーも開発に含まれるところが増えてるけど 自分はバックエンドやインフラのエンジニアを開発と呼んでる HTML組んだ後にphpやらなんやら組み込まれて返ってきたものを修正して返すを繰り返しをやるところは女性少ない デザイン要素ないもんな : Name_Not_Found [sage] 2018/09/28(金) 21:53:53.13ID:??? 画像の上に画像を重ねるのはpositionとか使う以外にどんな方法ありますか? : Name_Not_Found [sage] 2018/09/28(金) 22:02:02.63ID:??? backgroundならいくつもかさねられるよ : Name_Not_Found [sage] 2018/09/28(金) 22:02:51.52ID:??? ない : Name_Not_Found [] 2018/09/28(金) 22:04:19.34:KtKV5cvU 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年くらい前からあるんで、そんなに最近じゃないかも : Name_Not_Found [] 2018/09/28(金) 22:04:46.08:KtKV5cvU transformで動かしてみるとか : Name_Not_Found [sage] 2018/09/28(金) 22:15:11.16ID:??? 基本は複数ページ。 フレームワークの本では必ず、各ページを分けて作って、ルーティングする シングルページは例えば、オンライン人狼の「るる鯖」みたいに、 5秒毎に、全プレイヤーの会話を取得するなど、ページの一部(会話欄)だけ変わればよいものなど : Name_Not_Found [sage] 2018/09/28(金) 23:41:37.82ID:??? ありがとうございます ただpタグの中に入れて画像を表示させたいんですが pタグが空っぽなので画像や背景色が表示されません 適当に文字入れたら出るんですけど何も文章入れずに表示させるにはどうすればいいんでしょう? : Name_Not_Found [sage] 2018/09/28(金) 23:49:57.96ID:??? padding-topで適当な値を入れとくれ : Name_Not_Found [sage] 2018/09/28(金) 23:58:36.90ID:??? おぉ!出来ました!!ありがとうございます^_^ : Name_Not_Found [sage] 2018/09/29(土) 00:28:13.08ID:??? (⌒▽⌒) : Name_Not_Found [sage] 2018/09/29(土) 00:37:40.79ID:??? HTML5において各要素がインライン要素かブロックレベル要素なのかを確認する方法を教えて下さい : Name_Not_Found [sage] 2018/09/29(土) 00:38:39.16ID:??? ありがとう : Name_Not_Found [sage] 2018/09/29(土) 10:17:09.76ID:??? favicon icoだと表示されんぞ!! pngだと必ず表示される。 : Name_Not_Found [sage] 2018/09/29(土) 15:29:53.19ID:??? 重ねてすみませんが background imageで画像を重ねる時は親要素と子要素分けてきじゅつしますか? 親要素の背景の真ん中に画像を重ねたいんです : Name_Not_Found [sage] 2018/09/29(土) 15:38:06.74ID:??? ダメです。 私に親はいません私は土から自然発生しましたってくらいダメです。 HTML5ではその概念は無くなりました。 但し、改行するか否か等の風習は残っているので、 ここで確認してください ttp://www.htmq.com/htmlkihon/005.shtml : Name_Not_Found [sage] 2018/09/29(土) 18:22:24.01ID:??? 親子分けて書いたらズレちゃうんじゃないかな pに背景つけてるなら、 background: 一番上の背景, 真ん中の背景, 一番下の背景; って書けば同じ位置に重なるよ グラデも重ねられるよ : Name_Not_Found [sage] 2018/09/29(土) 19:10:30.31ID:??? 一緒にしたら消えてしまうんですけど泣 あと画像の幅とか高さも一緒になりませんか? : Name_Not_Found [sage] 2018/09/29(土) 19:23:58.64ID:??? HTMLでLaTeXみたいな数式番号って作れますか? : Name_Not_Found [sage] 2018/09/29(土) 19:37:14.94ID:??? 今日のcss night行った? : Name_Not_Found [sage] 2018/09/29(土) 23:24:32.58ID:??? 重ねる画像は透過してる? 背景色を書いてる場合は一番下にして background-sizeに同じ数字書いてみて : Name_Not_Found [] 2018/09/30(日) 01:50:01.13:MyZB4m5r 多数のimgを碁盤の目のように並べる場合、 align-content: flex-start; でやるのと、 display: flex; flex-wrap: wrap; でやるのと、同じような結果になるのですが、 どっち使っても良いですか? : Name_Not_Found [sage] 2018/09/30(日) 07:36:50.09ID:??? 画面狭くした時どうなる? : Name_Not_Found [] 2018/09/30(日) 09:25:22.46:MyZB4m5r どちらの方式でも整列します : Name_Not_Found [] 2018/09/30(日) 10:28:15.09:Zj6QHBb7 このサイト( ttp://craverse.com/ )のように フォームの中の値をページ移動しても維持したいのですが、 どうすればいいんでしょうか? : Name_Not_Found [sage] 2018/09/30(日) 10:52:26.33ID:??? じゃあ好きなほうでやればいいじゃん : Name_Not_Found [sage] 2018/09/30(日) 10:54:41.45ID:??? Formだからpostに値を渡して遷移先でそのpost値をinputのvalueに設定している : Name_Not_Found [sage] 2018/09/30(日) 10:57:05.28ID:??? postはサーバーに送信されるから、サーバーで受け取って次のページを表示させるときに一緒にinputのvalueにpost値を設定しているわけ つまりhtmlだけではできない(はず) : Name_Not_Found [] 2018/09/30(日) 12:10:45.63:jGYPP8J8 >じゃあ好きなほうでやればいいじゃん そうなんですが、 なぜ同じような機能が二つもあるのかなあ と疑問なのです。 : Name_Not_Found [sage] 2018/09/30(日) 14:02:24.50ID:??? 始めてそろそろ1ヶ月だけどcssが難しい なんで適応されないのか分かんないです(´・_・`) みんな簡単にやれてるのかな : Name_Not_Found [sage] 2018/09/30(日) 14:05:05.04ID:??? Flexアイテムのクロス軸方向の幅ないし高さが不揃いの時は違う挙動になるんじゃないかな : Name_Not_Found [sage] 2018/09/30(日) 17:39:57.03ID:??? 初心者なんだけど WEB作成する上でPHPて必須かな? PHPは自分のPCのみでの動作テストができないらしく特別な環境が必要だそうで 勉強使用にも答え?が見れないのでは勉強ができない。 そして、いまいち情報量が少なく古い情報ばかりが出てくる なので、もし代替的にできるものがあるならそちらにしたい。 PHPでできることはジャバスプやPythonやRubyなどで可能なのでしょうか? : Name_Not_Found [sage] 2018/09/30(日) 18:09:14.57ID:??? 大雑把にいうと、どの認識も間違ってるよ 必須であるかどうかは作りたいものによって変わるし 環境作ればどこでも動くし 初心者向けの解説は掃いて捨てるほどあるし フロントエンドではできないことをサーバサイドでやるためのものだよ : Name_Not_Found [sage] 2018/09/30(日) 18:15:14.92ID:??? てめえ釣りだろ : Name_Not_Found [sage] 2018/09/30(日) 18:17:11.14ID:??? あとJavaScriptはブラウザ側で その他はサーバ側で動かすものなので 並べて考えるのも間違ってるよ なんだジャバスプて : Name_Not_Found [sage] 2018/09/30(日) 20:23:17.69ID:??? r'゚'=、 / ̄`''''"'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_,ノ : Name_Not_Found [sage] 2018/09/30(日) 20:32:34.53ID:??? <section>の中には<h1>が必要なのか? : Name_Not_Found [] 2018/09/30(日) 21:29:10.83:2A2bChZF セクショニング・コンテンツには見出しは必須、と考えていいと思う : Name_Not_Found [sage] 2018/09/30(日) 22:50:05.04ID:??? ttps://www.lancers.jp/magazine/16424 これでも見てくれ。 HTMLとCSSだけでもウェブサイトは作れるけど、やれることは限られるってことだよ。ようはただ見せるだけのサイトになる。 PHPのようなサーバーサイドスクリプトはサーバーありきで動くため、MAMPみたいなローカルに仮想サーバーを構築するものが必要。 とは言ってもただで手に入れられるからそんなにハードルは高くない。 サーバーサイド側のjsとしてNode.jsがあるけど、普通のjsでさえよくわからないと言うのなら、無難にPHPやRuby触ってみればいいんじゃないかな。 : Name_Not_Found [sage] 2018/09/30(日) 23:06:16.19ID:??? それは ジャバスプ ではなく はいだスプー : Name_Not_Found [sage] 2018/10/01(月) 00:32:01.91ID:??? ありがとう! 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がないと組み込めないという矛盾に悩んでる。 : Name_Not_Found [sage] 2018/10/01(月) 01:33:27.05ID:??? Ruby なら1行で、自分のPC 内に、Web サーバー(WEBrick)を起動できる。 ruby -run -e httpd . -p 8080 フレームワークでは、Ruby on Rails が定番。 でも、HTML, CSS, JavaScript も必要 : Name_Not_Found [sage] 2018/10/01(月) 01:38:26.83ID:??? Ruby On RailsでできることはPython Djangoでも出来ると思うんだけども、Rubyの存在意義ってなんだい? Python覚えたほうがデータサイエンスでは圧倒的に有利なのに : Name_Not_Found [sage] 2018/10/01(月) 02:33:44.31ID:??? busyboxでも1行でできることを何自慢してんの? busybox httpd -p 8000 -h . : Name_Not_Found [sage] 2018/10/01(月) 02:40:13.75ID:??? rubyはそんなことすら自慢しなけりゃならんのか…追い詰めちゃってごめんね。 python -m http.server 8000 : Name_Not_Found [sage] 2018/10/01(月) 07:35:04.48ID:??? ,880,881 そのサーバでPHPを動かすにはどうしたら良いですか? : Name_Not_Found [sage] 2018/10/01(月) 08:48:05.16ID:??? PHPをCGIモードで動かせばいい 他は知らんが、busybox httpdはCGIに対応している : Name_Not_Found [sage] 2018/10/01(月) 08:54:32.36ID:??? スレタイ見ろよ : Name_Not_Found [sage] 2018/10/01(月) 23:09:25.58ID:??? レスポンシブWebデザイン難くね?(´・_・`) : Name_Not_Found [sage] 2018/10/01(月) 23:22:26.44ID:??? 今と時にそんな事言ってたら仕事にならない 趣味ならやんなくてもいいんじゃね : Name_Not_Found [sage] 2018/10/01(月) 23:38:37.11ID:??? 縦長と横長をふたつ用意すればいいだけちゃうのん? : Name_Not_Found [sage] 2018/10/02(火) 00:00:26.26ID:??? 320px固定幅のレイアウトにすれば良くね : Name_Not_Found [sage] 2018/10/02(火) 00:06:02.76ID:??? 良くない もっと多く対応すべき : Name_Not_Found [sage] 2018/10/02(火) 01:36:02.60ID:??? もうスマホはpxでやらなくなった ぜーんぶvw ただcalcが使いにくくなる罠がある : Name_Not_Found [sage] 2018/10/02(火) 04:06:08.05ID:??? 縦長レイアウト難しい どうしても凡庸なデザインになっちゃう : Name_Not_Found [sage] 2018/10/02(火) 05:25:03.35ID:??? 縦長レイアウトってあれか? お悩み相談、解説、使用者の感想ときて 最後にお買い上げはこちらって書いてあるあれ : Name_Not_Found [] 2018/10/02(火) 19:22:15.40:7LxuwSjW ショートハンド積極的に使う? わけわからなくなるから、あんまり使ってないんだけど。 : Name_Not_Found [sage] 2018/10/02(火) 19:29:53.15ID:??? margin: 1px solid black; をショートハンド使わずにかけと言われたら 気が狂いそうになるw : Name_Not_Found [sage] 2018/10/02(火) 19:43:54.41ID:??? 個人サイトではstylus+nibのショートハンド使ってる。 : Name_Not_Found [sage] 2018/10/02(火) 20:25:55.92ID:??? nibって何? : Name_Not_Found [sage] 2018/10/02(火) 20:26:51.40ID:??? borderかな まあこれ禁じられたら困るわな : Name_Not_Found [sage] 2018/10/02(火) 20:29:12.26ID:??? sassで言うところのcompassみたいなもん : Name_Not_Found [] 2018/10/02(火) 20:35:26.91:x0gKZze6 【アフィ】元宇宙人のスピリチュアルブログ【詐欺】 ttps://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232 : Name_Not_Found [sage] 2018/10/02(火) 21:14:59.17ID:??? ショートハンド使いたいんだけど前に書いた人が全部書いててツライ : Name_Not_Found [sage] 2018/10/02(火) 21:34:07.10ID:??? みんなショートハンドガツガツ使ってるな 俺はわけわからなくなる… : Name_Not_Found [sage] 2018/10/02(火) 21:44:54.29ID:??? ショートハンドって名前あったのか 知らなかった : 834 [sage] 2018/10/02(火) 22:30:02.27ID:??? ありがとうございましたm(__)m : Name_Not_Found [sage] 2018/10/02(火) 22:49:55.57ID:??? 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; と書いてるのか! : Name_Not_Found [sage] 2018/10/02(火) 23:24:52.49ID:??? こうやって見るとかなり面倒いな : Name_Not_Found [sage] 2018/10/03(水) 00:05:04.36ID:??? ペレが得意なやつか! : Name_Not_Found [sage] 2018/10/03(水) 12:14:41.45ID:??? borderやmargin/paddingなんかはショートのほうがわかりやすい、気がする 上から時計回りって覚えときゃいいんだよ animationとかはバラで書いたほうがわかりやすいかもしれない 引数多い上に省略可能だから : Name_Not_Found [sage] 2018/10/03(水) 17:45:11.14ID:??? それはLP : Name_Not_Found [sage] 2018/10/03(水) 20:18:21.30ID:??? 文章タグの中にimgタグを入れて出す場合は画像と文章の間に余白入れたり出来ないんですか? : Name_Not_Found [sage] 2018/10/03(水) 20:34:06.79ID:??? PHPはサーバーサイド側の言語っていうけど HTMLは?何側なんだろうと思うんだよな どちらもサーバー必要じゃんと。 : Name_Not_Found [sage] 2018/10/03(水) 20:43:11.99ID:??? HTMLはマークアップ言語だろ。プログラム言語と違って 動くわけじゃないんだから何側(で動く)とか言えるわけがない : Name_Not_Found [] 2018/10/03(水) 21:06:20.52:me7DnDT8 HTMLはサーバなくても、レンダラさえあれば使えるよ Windows98あたりでは、デスクトップやエクスプローラに使っていたよ 最近だと、デスクトップアプリの画面をHTML/CSSで作る Electronっていうフレームワークがあって テキストエディタのAtomとか、メッセージのSlackとかがそれで作られているよ : Name_Not_Found [sage] 2018/10/03(水) 21:33:36.81ID:??? あーそういうことか なんだか異常に腑に落ちたわ、ありがとう : Name_Not_Found [sage] 2018/10/03(水) 21:36:33.18ID:??? HTMLだって言語は言語 解釈して処理するのがサーバ側かクライアント側かということ : Name_Not_Found [sage] 2018/10/03(水) 21:37:37.91ID:??? ならCSSは何に分類されるんだ? : Name_Not_Found [] 2018/10/03(水) 21:40:18.38:me7DnDT8 スタイルシート : Name_Not_Found [sage] 2018/10/03(水) 22:35:53.76ID:??? CSSは設定ファイみたいなもんだな : Name_Not_Found [sage] 2018/10/03(水) 23:59:02.82ID:??? 解釈して処理してるのがどちらかで考えたらクライアントサイドでしょ サーバーはテキストを送信してるだけ : Name_Not_Found [sage] 2018/10/04(木) 01:25:24.84ID:??? HTML,CSS,JavaScriptはサーバーはファイルの内容を送信するだけで処理はクライアントだから「クライアントサイド」 PHPやCGIはサーバーが処理して結果を送信するからサーバーサイド それだけのこと : Name_Not_Found [sage] 2018/10/04(木) 01:42:52.09ID:??? すみません、 犬のアイコンのエディターの名前わかりますでしょうか? 昔使っていたのですが失念して、、 : Name_Not_Found [] 2018/10/04(木) 03:18:08.05:YDpPwDz1 【アフィ】元宇宙人のスピリチュアルブログ【詐欺】 ttps://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232 : Name_Not_Found [sage] 2018/10/05(金) 15:39:37.14ID:??? クライアントサイドって言葉の存在を知らなかったぽいな : Name_Not_Found [sage] 2018/10/06(土) 11:55:09.75ID:??? 初心者なんですけど、ホームページをスマホ画面に対応させるツールでオススメはありますか? どれが良いのか分からないのでお願いします : Name_Not_Found [sage] 2018/10/06(土) 13:36:14.14ID:??? スマホが流通し始めた頃から それのサービス化を目指した会社は ことごとく散っているなあ : Name_Not_Found [sage] 2018/10/06(土) 13:40:34.11ID:??? Bootstrapで作っとけばいんじゃない : Name_Not_Found [sage] 2018/10/06(土) 14:53:37.92ID:??? ブログの途中に広告を出したいのですが ttp://ruggerman-kintore.com/supplement_kouza/carbodrink/ このブログの中ほどにヴィターゴ CCD 粉飴と 枠ができ下にamazonと楽天のボタンがあります。 こういうのを作りたいのですがテンプレなどあったら教えて下しませんでしょうか お願いします : Name_Not_Found [sage] 2018/10/06(土) 15:33:11.46ID:??? 数学において数式に番号を付ける際、 y=f(x) ---------------- (1) みたいな感じで横に伸びる線を書くことはよくありますが、HTML上でこれを実現したいです。 素朴に思いついたものとしては <ul> <li>y=f(x)<hr style="display:inline" /><span style="float:right">(1)</span></li> </ul> ですが、これは正しく機能しません。 どうすれば良いですか? 要望としては - ブラウザのサイズに応じて自由に(無限に)伸縮する横線で、 数式番号(上の例で言えば(1))へ繋がる横線(くっついていても、いなくてもどちらでもいい) - きちんと一行に収まる。改行していびつな形になるのはダメ です。 : Name_Not_Found [sage] 2018/10/06(土) 15:39:17.75ID:??? はい、お前ら無報酬でやれ。休みなど関係なく今すぐに。 : Name_Not_Found [sage] 2018/10/06(土) 16:09:15.60ID:??? でいけるだろ : Name_Not_Found [sage] 2018/10/06(土) 16:20:26.26ID:??? liにafterでいい感じにしな : Name_Not_Found [sage] 2018/10/06(土) 17:04:02.55ID:??? HTMLのみでホームページをつくれば スマホ対応バッチリ! : Name_Not_Found [sage] 2018/10/06(土) 17:17:22.31ID:??? PCでは画像の横に文字 スマホ用画面では画像の下に文字が配置されるようにしたいのですが、どうすれば良いでしょうか スマホでも無理矢理PC画面のように表示されて見にくくなってしまいました : Name_Not_Found [sage] 2018/10/06(土) 17:46:50.23ID:??? flexをメディアクエリで切り替える。 縦並び、横並び、順番などflex関係のcssで色々操作できるよ : Name_Not_Found [sage] 2018/10/06(土) 18:13:52.43ID:??? それだけじゃわからないのでもっと詳しく教えてください : Name_Not_Found [sage] 2018/10/06(土) 19:20:11.18ID:??? ありがとうございます!!!!!!!!!!!! 934≠932なので上の人は無視してもらって構いません : Name_Not_Found [sage] 2018/10/06(土) 20:16:51.56ID:??? まさかー : Name_Not_Found [sage] 2018/10/06(土) 20:53:07.98ID:??? 人狼してるの? : Name_Not_Found [sage] 2018/10/06(土) 20:53:35.99ID:??? 狼牙風風拳 : Name_Not_Found [sage] 2018/10/06(土) 22:32:31.69ID:??? 横並び縦並びを変えるのはflex-direction、 順序はjustify-content: flex-end とかで間接的に変えるか、orderを使う。 メディアクエリはまぁググってくれ : Name_Not_Found [sage] 2018/10/06(土) 23:00:59.06ID:??? 現在の行について、行全体をdivやspanで覆わずに、残りの行全体を占有する方法ってありますか? 例えば、現在の行について あいう とあった場合、「あいう」やその親要素に対して何もすることなく、「あいう」より後の残った行の幅全体を使って「えお」を記載する方法です。 : Name_Not_Found [sage] 2018/10/06(土) 23:06:12.41ID:??? 新規の行で文字を書いていく時って、 ――――――――――――――――――――――― | | ――――――――――――――――――――――― みたいな感じで、右端までいっぱいに領域が確保されていて、 ――――――――――――――――――――――― |あいう□□□□□□□□□□□□□□□□□□□| ――――――――――――――――――――――― 「あいう」と書いた後でも□□□の部分が残りの行として残っていると思うんですが、この「□□□」全体を確保(?)したいのですが どうすればいいですか? : Name_Not_Found [sage] 2018/10/06(土) 23:12:28.21ID:??? float:rightだと ――――――――――――――――――――――― |あいう□□□□□□□□□□□□□□□□□□□| ――――――――――――――――――――――― ではなく ――――――――――――――――――――――― |あいう■■■■■■■■■■■■■■■■■■□| ――――――――――――――――――――――― になってしまうからダメなんです ■の部分の領域は取らず、出来合いの□幅になってしまうんで。 : Name_Not_Found [sage] 2018/10/06(土) 23:58:14.23ID:??? あいうを float:left にして のこり div かけば自動的にめいっぱい使う あるいは親に flex つけて flex-grow: 1 にしても自動的に残り全部使う : Name_Not_Found [sage] 2018/10/07(日) 00:01:33.30ID:??? やっぱり、行全体を占有するってしたいときは行全体を一旦divなりflexなりつけるなりしないといけないんですかね : Name_Not_Found [sage] 2018/10/07(日) 00:13:10.19ID:??? なんで質問する側なのにそんな偉そうなん? : Name_Not_Found [sage] 2018/10/07(日) 00:14:32.39ID:??? ん?どこに偉そうな言い方があったの? 「〜なんですかね」が偉そうな言い方?
凡例:
レス番
100 (赤) → 2つ以上レスが付いている
100 (紫) → 1つ以上レスが付いている
名前
名無しさん (青) → sage のレス
名無しさん (緑) → age のレス
ID
ID:xxxxxxx (赤) → 発言が3つ以上のID
ID:xxxxxxx (青) → 発言が2つ以上のID
このページは2ch勢いランキング が作成したアーカイブです。削除についてはこちら 。