HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>204
んで蔵がキャッシュ消さずに見て
更新されてないんですが!!
までテンプレ >>204
いや、CSSだけで作るやつの話
枚数増えると破綻するから そもそもcssだけだとフリックも吸着もできないなー スライダーに最低限必要なもの
・自動スライド
・スライドからのリンク
・フリック(左右)
・ナビゲーション(前次のやつ)(左右)
・ページネーション(ドット/サムネイル)
jsなしでできるのって最初の2つだけじゃね？ >>208
ナビゲーションとページネーションはcssでも出来る
フリックはやったことないな ページネーションをcssってまたチェックボックスだろｗ
そういうのさわりたくない すまん。教えてくれ。
<div class=外側>
<div class=内側>
<p>ああああ</p>
</div>
</div>
これで、全画面固定して、内側の上下にボーダー引こうとしても引けない…。
内側で線を引こうとしてるのは、全画面の半分の幅だけに引きたいからなんだけど。
別の方法探るしかないかね <label></label>
の内側ってブロックでも何でもいれてもいいの？ Form 作り方わからんぞ これHTMLとCSSで済む問題じゃないよな。
作り方サイト見てもことごとくそこにしか触れてない。 >>215
HTMLとCSSで
なんとかなってない人の方が少ないと思うけどなあ >>215
PHPかvus.jsかAWSのサービス使え htmlとcssができない人に
php、vue、awsを勧めるのかｗ ひょっとしてサーバーサイドがないと
form意味ないだろって言ってるのか form受け取る側で無料サービスでできるのってPHPぐらい？
他のフレームワーク無料で使えるとこってあるの？ htmlとcssって頑張ればどのくらいである程度できるようになります？
システム管理やってるものですが、急にHP担当がやめることになって勉強しないといけないです。
アドバイスもあれば教えて下さい >>212
線を付けるだけならcssで内側のdivにborder付ければいいだけ
内側div幅が画面いっぱい100%のまま線の横幅だけ50%にしたいって言うなら
内側divに疑似要素:beforeと:afterを使ってそれぞれにborderを付けて幅50%とかすればいい
>>214
HTMLのバージョンと仕様による ある程度って書いてるだろ
正直、3日もいらん
1日で十分 フォームはGoogle Formを埋め込むのが利用者目線ではベストじゃないかね。 >>223
人にもよるけど
だいたい3日から30年ってところ どっちにしても誰でもすぐに習得できる
できないなら人間やめろ システム管理やってるって書いてんだからプログラマだろ
JavaやC++を完璧にマスターしてるかもしれんから
HTMLくらい余裕だろ。 JavaやC++完璧にマスターしてる人はシス管なんてやんないよ >>232
って言う人って
蓋開けてみると条件付きでしか習得してない印象 キーボードを押すだけで、
リンク先に飛ぶような、ｈｔｍｌを記述する事ってできるのですか？
リンク先は、他のサイトでも良いし、同じページ内の別の場所でも良いのですが。
それとも、そんなサイトを作る事は不可能ですか？ HTMLもCSSも言語的には簡単よ
アルファベットわかるなら小学生でも覚えられる
ただそれらをつかってデザインする
デザイナーがつくったデザインをコーディングする
ディレクターやクラが言う要望のアクションをつけるってなると
また別なんよ まえに一度使おうとして断念したんだけど
CSSのscrollsnapって、JSで拾えるイベントあるもの？ まあそうなんだけど
snapしたときになんかイベントあったら便利なのになー
と思いまして そりゃあったほうがいいわな
transitionのtrantitionEndみたいなもんだろ？ わかる
snapした瞬間
ズギャーーーーーーン！！！
って鳴らしたいよね
このスレの総意 ごめん、人によって
ガシューーーーーーン！！！
かもしれないから総意とは言えなかった LP的なアニメーションごりごりを作る時に
ぶっぴがーん！に合わせてアニメーション始めたいというのは当然あるな
同等のことをするJSライブラリが
停止時に発火するコールバックを設定できるのもそのためだろう amazonと楽天にリンクするボタンがほしいのです
それっぽいのどこぞにプログラムございませんでしょうか？ アフィリンクのボタンならそれぞれのアフィ審査受けないとリンクはもらえん
ただのボタンならプログラムじゃなくてaタグ Superfish モバイル用のハンバーガーメニューの設定がわからない。 >>256
ありがとうございます
アマゾンも楽天も通ってます。
https://imgur.com/a/Yg8lNFi
このようなボタン形式のリンクがほしーのです、 >>258
aタグのリンクにcss適用すればいい
aタグ ボタン cssで検索すればいくらでもでてくる cssが何かもよくわかってないんだろ
カエレバ CSSで検索 >>259
>>260
ありがとうございます。こういうふうな仕組みなんですね、勉強になります
いろいろ触ってみますが、また何かあったらお助けお願いするかもです、、
ありがとうございます！ inline-blockである .dan と .jo がDOMツリー上で
男女女女男女男女男男女女
と並んでいるとき
男女
女
女
男女
男女
男
男女
女
と左右に並べ分けたいのですが、どういう方法がありますか？
floatとかですか？
.dan + .jo { float: left } …うーん？ .dan, .jo {
display: inline-block;
width: 49%;
}
.dan {
background-color: #eef;
margin-right: 2%;
}
.jo {
background-color: #fee;
}
.jo + .jo {
margin-left: 51%;
}
こんなじゃだめ？ >>238
JavaScriptの事で良いんですか？
解りました。
ありがとうございました。 >>269
ありゃ
htmlでって書いてたのにjsでいいの？ CSS Gridについて教えてください。
<div class="container">
<div class="a"><img></div>
<div class="b"><img></div>
<div class="c"><img></div>
...以下大量に。
</div>
この様な感じで、インスタグラムの様に、.a .b .c ...の中にあるimgをひたすら詰め込んで羅列したい場合は、
レイアウトする画像のサイズが決まっていれば(例えば300px角)
grid-auto-rows:300px と grid-template-columns:repeat(auto-fit,300px)
で可能ですが、
ウィンドウサイズによって画像のサイズも変動する様にするには、
（100px角にも800px角にもなったりする）
auto-rowsもrepeatも使用せずに、
.a .b .c ... にgrid-row と grid-columnをそれぞれのクラスに指定しなくてはならないのでしょうか？ IEのクソ対応を考えたらcss gridは使いたくない こちらのサイト（カントリーマウム）は
gridを使用しているとのことで、
ウィンドウサイズを変えるとそれに伴って中の画像のサイズも変動していますが、
これは画像1枚1枚をcolumnとrowで1/5や5/17と1つずつ指定しているのかと思いまして >>273
display: grid;を利用してるわけじゃなくてデザインがグリッドレイアウトなだけだと思う。 >>275
検証を使うとdisplay:gridなら縦横の点線が出ると思うのですが、これにはでないので不思議でした
そういうことだったのですね・・・
このサイトはテーブルセルとtext-alignで画像を配置しているのでしょうか
ありがとうございます！ >>276
flex-boxでwrapすればいいのでは？ CSSに凝りだすと、ちょっと画面が狭い場合にはこんな感じで
@media screen and (max-width: 480px){
設定を書く
}
とやりますよね。
でも、こう言うメディアクエリを一箇所に集めるのは手間が掛かります。
別の要素に対してCSSを書いていて、その場合にも少し狭い場合には、
@media screen and (max-width: 480px){
別の設定を書く
}
みたいに、CSSの中に上のような同じ記述が何度も出て来ます。
WEBプログラミング上級者の人は、こう言う場合どのように対処されているのでしょうか？
@media screen and (max-width: 1030px){・・・}
@media screen and (max-width: 768px){・・・}
@media screen and (max-width: 480px){・・・}
みたいなのは一箇所にまとめるべきですか？ >>279
ファイルをメディアによって分け、linkタグのmedia属性でメディア種別やクエリを指定する。
このリソースはメディアの条件が真になった場合のみ読み込まれるので、
１ファイルにまとめるより読み込まれる容量も減る。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link
SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ツールが何をやっているかも分からずツールに使われている>>280のようになってはいけないよ。 >>281
えええええ
そっちの方が面倒臭いじゃん… >>282
面倒くさいにも二通りの意味があってな
作業を効率化する（のが面倒くさい）が、その後の作業自体は楽になる
と
作業を効率化しなくて楽だが、その後の作業自体は面倒くさい
どっちの面倒くさいを取るかなんだよ？ まぁそれがめんどくさいレベルの規模なら自動化の契機だな。PostCSSとnpm scriptまたはgulpで自動化できる。 >>281
> SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ブラウザで直接解釈されても、同じことでは？ >>281
解説ありがとうございました。
>このリソースはメディアの条件が真になった場合のみ読み込まれるので、
これはブラウザのウインドウ幅を変化された場合に、
それに応じてメディアファイルが読み込まれると言う事ですか？ >>283
あたまかたーい
普通は
その後の作業が面倒くさくならないように、作業を効率化するよねー @media なんかを使っている、WEBプログラミング上級者は100%、SASS！
というか、海外では初心者でも90%、SASS
知らないのは、50% の日本人だけ >>289
日本でもそんなに変わらんじゃろ
流石に
普及してから何年経ったと >>270
すんません。
さっぱり解らないんですが、ｈｔｍｌのｊｓってのが有るんですか？
それと、ｊａｖａとｈｔｍｌってのは違うものなのですか？
自分としては目的のサイトを作れるのなら、方法については
何でも良いのですが。 >>291
なんでもいいのなら他人に任せたほうが良い
自分でやるなら、理解しろ >>291
JSはJavaScriptのことだ
名前はJAVAと似ているが全くの別物だ
JAVAとJavaScriptは、メロンとメロンパンくらい違うものだ
JavaScriptはブラウザの中で動くプログラムのことだ
んでHTMLは文章の構造を決めるものでたいした機能はないんだ
何かを押したらどうこうする、みたいなのはJavaScriptの仕事だ >>293
まったくわかりません。
もっとわりやすく説明できませんか？ ミニ丼セットの丼だけのオーダーはお受けできませ「ぬ！」 英語圏で色々もあるよー
difference java javascript でググると似たような与太話しいっぱいヒットする
CatとCatfish
hamとhamstar
CarとCarpet
CockとCocktail
とかとか 仕様見てると
<h1>
<p>~</p>
</h1>
も
<p>
<h1>
~~~~
</h1>
</p>
もどっちも書いても良さそうだけど、ブログで後者はNGって記事をよく見る
実際どうなんやろ？ >>293
自分は２９１ですが、
良くわかりました。
ありがとうございました。 >>266
20代前半はそういう職場で働いてたわ
皆おっとりしてたから居心地は良かったが
性格悪い奴とか気性が荒い女が紛れてると
パシリに使われるかボイコットされたり最悪な環境にもなりえるんだろうな >>279
それは汎用性、メンテナンス性に欠けるクソ構造だよ
更新や編集の多いサイトを深く運用してみれば意味がわかるようになる。
優れたデザインは常にシンプル。
複雑なものを複雑に書くより
必要なもの以外をいかにそぎ落としていくかに尽力した方がいい。 >>303
>優れたデザインは常にシンプル
それ複雑なデザインをまとめられないだけなんじゃ… ■ このスレッドは過去ログ倉庫に格納されています
