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 >>175
このサンプルを無理やりマークアップするならこんな感じになる。
<hrader><h1>掲示板</h1></header><main>投稿部分</main>
サンプルだからというのもあるけど、知らない人を集めようとするならもっと親切にサイトについて書かないといけない。
何の掲示板で、どういうルールがあって、どういうメニューがあって、問い合わせ先はどこで、とか。
それらが全て自然とマークアープに繋がるから本来は自然とnavもfooterも必要が出てくる。
必要ないというならそもそも人を集める必要がないページなんだよ => つまりSEOは不要 生cssでいつのまに変数が使えるようになってたか・・・
:root {
--main-gutter: 12px;
--main-position: center;
--main-lh: 1.5;
}
と思ったらIEだけ・・死ね ↑androidも含めてIE以外は主要ブラウザは全部対応OKなんだが使ってる？ >>171
table{width:100%;}
tr{display:flex;}
td{display:block;flex:1 1 1px;word-break:break-all;}
td.col1{flex:0 0 50px;}
tdのflex:1 1 1pxとword-break:break-allを追加しました。
ie11とfirefoxで確認。 >>170>>171>>181
どの方法でも上手く行きました。
ありがとうございました。 formって不便じゃない？
ネストできなしいサブミットにアドレスつけられないし
フォーム共通にして別のアクションにポストしたいときどうしたらいいの ネストできるしサブミットにアドレスつけられるが
そんな事しなくても普通に、フォームに複数のアクションボタンをつければいいだけ
サーバー側で同じアドレスへのポストをパラメータ見て振り分けるだけ >>183
アクション先を変えればいいだけじゃん
もしくはアクション先を同一にしてポストするsubmitボタンの判定で別けるとか
どうにでもできる どういうこと？
<form method="post">
<form method="get">
<input>
<input>
<submit>
</form>
<submit>
</form>
とか
<form>
<input>
<input>
<submit action="get">
<submit method="post">
</form>
ってできるの？ ＞サブミットにアドレスつけられるが
＞アクション先を変えればいいだけじゃん
これ具体的にどうかいて何をかえれるの？
name属性で同じCGI内でボタン識別できるのは知ってるけど
URLやGET,POSTメソッドかえることってできるの？ まあそうなんだけどだからJSの力をかりないとできないの不便だなーと スライダー沢山あるけど、使い分けるんじゃなく、どれか1つでカスタマイズ次第でなんでも可能なものですか
https://creive.me/archives/10461/#jQuery >>192
なんでも可能かはドキュメント見るしかないけどまぁ試して見るのが手っ取り早い。
可能なことが多いと設定が多岐にわたり簡単なスライダー実装する時めんどくさかったりもするけど。 俺はいつもswiperだな
前はslick、その前はbx使ってたけどもう使うことはないな 俺もswiperだな
bxsliderはautoの扱いが癖強くてなあ 私もSWIPERです。最初に覚えたのがそれだったので。Slickとかのほうがメジャーとは知らず。
先日画像サムネイルとキャプションをつけたくてFotorama使ったけど、Swiperでもできたのかも。 自分はbx
1つのページ内に複数のスライダーがあって全部違うの使ってるのに出会ったことがある
悩んだんだろうな スライドとかのアニメーションcssでも出来るけど無駄かね？
アニメーションであんまりjs使いたくない病なんだが… >>200
組んでるとパズルみたいで面白くはあるけど枚数変わるたび直さなくちゃいけないじゃん だいたい更新頻度高いじゃんスライダー入れるとこって 画像のサイズ同じならファイル名同じにして上書きすればいいだけだから
そんな面倒じゃなくね？ >>204
んで蔵がキャッシュ消さずに見て
更新されてないんですが!!
までテンプレ >>204
いや、CSSだけで作るやつの話
枚数増えると破綻するから そもそもcssだけだとフリックも吸着もできないなー スライダーに最低限必要なもの
・自動スライド
・スライドからのリンク
・フリック(左右)
・ナビゲーション(前次のやつ)(左右)
・ページネーション(ドット/サムネイル)
jsなしでできるのって最初の2つだけじゃね？ >>208
ナビゲーションとページネーションはcssでも出来る
フリックはやったことないな ページネーションをcssってまたチェックボックスだろｗ
そういうのさわりたくない すまん。教えてくれ。
<div class=外側>
<div class=内側>
<p>ああああ</p>
</div>
</div>
これで、全画面固定して、内側の上下にボーダー引こうとしても引けない…。
内側で線を引こうとしてるのは、全画面の半分の幅だけに引きたいからなんだけど。
別の方法探るしかないかね <label></label>
の内側ってブロックでも何でもいれてもいいの？ Form 作り方わからんぞ これHTMLとCSSで済む問題じゃないよな。
作り方サイト見てもことごとくそこにしか触れてない。 >>215
HTMLとCSSで
なんとかなってない人の方が少ないと思うけどなあ >>215
PHPかvus.jsかAWSのサービス使え htmlとcssができない人に
php、vue、awsを勧めるのかｗ ひょっとしてサーバーサイドがないと
form意味ないだろって言ってるのか form受け取る側で無料サービスでできるのってPHPぐらい？
他のフレームワーク無料で使えるとこってあるの？ htmlとcssって頑張ればどのくらいである程度できるようになります？
システム管理やってるものですが、急にHP担当がやめることになって勉強しないといけないです。
アドバイスもあれば教えて下さい >>212
線を付けるだけならcssで内側のdivにborder付ければいいだけ
内側div幅が画面いっぱい100%のまま線の横幅だけ50%にしたいって言うなら
内側divに疑似要素:beforeと:afterを使ってそれぞれにborderを付けて幅50%とかすればいい
>>214
HTMLのバージョンと仕様による ある程度って書いてるだろ
正直、3日もいらん
1日で十分 フォームはGoogle Formを埋め込むのが利用者目線ではベストじゃないかね。 >>223
人にもよるけど
だいたい3日から30年ってところ どっちにしても誰でもすぐに習得できる
できないなら人間やめろ システム管理やってるって書いてんだからプログラマだろ
JavaやC++を完璧にマスターしてるかもしれんから
HTMLくらい余裕だろ。 JavaやC++完璧にマスターしてる人はシス管なんてやんないよ >>232
って言う人って
蓋開けてみると条件付きでしか習得してない印象 キーボードを押すだけで、
リンク先に飛ぶような、ｈｔｍｌを記述する事ってできるのですか？
リンク先は、他のサイトでも良いし、同じページ内の別の場所でも良いのですが。
それとも、そんなサイトを作る事は不可能ですか？ HTMLもCSSも言語的には簡単よ
アルファベットわかるなら小学生でも覚えられる
ただそれらをつかってデザインする
デザイナーがつくったデザインをコーディングする
ディレクターやクラが言う要望のアクションをつけるってなると
また別なんよ まえに一度使おうとして断念したんだけど
CSSのscrollsnapって、JSで拾えるイベントあるもの？ まあそうなんだけど
snapしたときになんかイベントあったら便利なのになー
と思いまして そりゃあったほうがいいわな
transitionのtrantitionEndみたいなもんだろ？ わかる
snapした瞬間
ズギャーーーーーーン！！！
って鳴らしたいよね
このスレの総意 ごめん、人によって
ガシューーーーーーン！！！
かもしれないから総意とは言えなかった LP的なアニメーションごりごりを作る時に
ぶっぴがーん！に合わせてアニメーション始めたいというのは当然あるな
同等のことをするJSライブラリが
停止時に発火するコールバックを設定できるのもそのためだろう amazonと楽天にリンクするボタンがほしいのです
それっぽいのどこぞにプログラムございませんでしょうか？ アフィリンクのボタンならそれぞれのアフィ審査受けないとリンクはもらえん
ただのボタンならプログラムじゃなくてaタグ Superfish モバイル用のハンバーガーメニューの設定がわからない。 >>256
ありがとうございます
アマゾンも楽天も通ってます。
https://imgur.com/a/Yg8lNFi
このようなボタン形式のリンクがほしーのです、 >>258
aタグのリンクにcss適用すればいい
aタグ ボタン cssで検索すればいくらでもでてくる cssが何かもよくわかってないんだろ
カエレバ CSSで検索 >>259
>>260
ありがとうございます。こういうふうな仕組みなんですね、勉強になります
いろいろ触ってみますが、また何かあったらお助けお願いするかもです、、
ありがとうございます！ inline-blockである .dan と .jo がDOMツリー上で
男女女女男女男女男男女女
と並んでいるとき
男女
女
女
男女
男女
男
男女
女
と左右に並べ分けたいのですが、どういう方法がありますか？
floatとかですか？
.dan + .jo { float: left } …うーん？ .dan, .jo {
display: inline-block;
width: 49%;
}
.dan {
background-color: #eef;
margin-right: 2%;
}
.jo {
background-color: #fee;
}
.jo + .jo {
margin-left: 51%;
}
こんなじゃだめ？ >>238
JavaScriptの事で良いんですか？
解りました。
ありがとうございました。 >>269
ありゃ
htmlでって書いてたのにjsでいいの？ CSS Gridについて教えてください。
<div class="container">
<div class="a"><img></div>
<div class="b"><img></div>
<div class="c"><img></div>
...以下大量に。
</div>
この様な感じで、インスタグラムの様に、.a .b .c ...の中にあるimgをひたすら詰め込んで羅列したい場合は、
レイアウトする画像のサイズが決まっていれば(例えば300px角)
grid-auto-rows:300px と grid-template-columns:repeat(auto-fit,300px)
で可能ですが、
ウィンドウサイズによって画像のサイズも変動する様にするには、
（100px角にも800px角にもなったりする）
auto-rowsもrepeatも使用せずに、
.a .b .c ... にgrid-row と grid-columnをそれぞれのクラスに指定しなくてはならないのでしょうか？ IEのクソ対応を考えたらcss gridは使いたくない こちらのサイト（カントリーマウム）は
gridを使用しているとのことで、
ウィンドウサイズを変えるとそれに伴って中の画像のサイズも変動していますが、
これは画像1枚1枚をcolumnとrowで1/5や5/17と1つずつ指定しているのかと思いまして >>273
display: grid;を利用してるわけじゃなくてデザインがグリッドレイアウトなだけだと思う。 ■ このスレッドは過去ログ倉庫に格納されています
