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 col2とcol3をcalc(50%-25px)にしたら? 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 >>156
さっそく試してみました。
その結果col1は50pxに固定出来たのですが、
col2,col3が同じ幅になりません。
col3のほうが広くなります。原因わかりません。
>155
flexでやると言うのはtableを使わないと
言う事ですか?もしそうなら、どんな要素を使えば良いですか? >>158
156に加えて、tableにtable-layout: fixed;をつけてみたらどう? >>159
さっそく試してみたら、
col1,col2,col3が同じ幅になりました。
もうわけ分かりません。 >>154
col2とcol3の指定がいらないので外す。
<style>
table{
width:100%;
}
td.col1{
width:50px;
}
</style>
色付けて可視化
<style>
table{
width:100%;
}
td.col1{
width:50px;
background-color: #ddd;
}
td.col2{
background-color: #f5f5f5;
}
td.col3{
background-color: #eee;
}
</style> そういえばクロームは大丈夫なんだけど、
FirefoxとIEだとテーブルが崩れてtable-layout: fixedで直ったな
display:tableで子供全員に幅書いてたんだけど >>161
col2,col3のwidthを指定しないと、
それらのwidthは中のテキストの長さに応じて
勝手に決まりますよね。
ご提示いただきましたコードを試しましたが、
col2=col3にはならなかったです。 table-cellの幅の決まり方って独特だからポイントで使いたくなることはある >>164
ごめん。文字数考えてなかった
バグというかダメぽいな
もうdiv+tabelでやるしかないんじゃね >>164
tdの親、つまりtrに対してflexを使うか
tdに対してinline-blockだな
table{
width:100%;
}
tr{
display: flex;
}
td.col1{
width:50px;
}
td.col2{
width: calc( 50% - 25px );
}
td.col3{
width: calc( 50% - 25px );
} >>164
ごめん、flexならcalcは要らないか
んでIE11とかも考慮するなら下記みたいな感じIE9とかは知らない
col2とcol3は設定いらない
table{
width:100%;
}
tr{
display: flex;
}
td{
display: block;
flex: 1;
}
td.col1{
flex: 0 0 50px;
} header,footer,mainなどのタグでセクショニングすると、マシンリーダビリティが向上するのって、構成が分かりやすくなるから?それとも、タグで囲む事自体が重要なの?
タグで囲む事自体が重要なら、めちゃくちゃシンプルなコードでもセクショニングはした方がいいってこと?
例えば、php使った簡単な問い合わせフォームのコードをセクショニングすると、main要素だけになっちゃう場合とか。 構造がわかりやすくなるからだろ
header footerなど共通部分は重複コンテンツとみなさないように重要度下げるのに対し
main部分を重要視したり
でもアクセス数やアクセス内容の重要度に比べたらほんと大した差は無いと思うがね。 tableにdisplay:blockでレスポンシブにしたらいい >>175
このサンプルを無理やりマークアップするならこんな感じになる。
<hrader><h1>掲示板</h1></header><main>投稿部分</main>
サンプルだからというのもあるけど、知らない人を集めようとするならもっと親切にサイトについて書かないといけない。
何の掲示板で、どういうルールがあって、どういうメニューがあって、問い合わせ先はどこで、とか。
それらが全て自然とマークアープに繋がるから本来は自然とnavもfooterも必要が出てくる。
必要ないというならそもそも人を集める必要がないページなんだよ => つまりSEOは不要 生cssでいつのまに変数が使えるようになってたか・・・
:root {
--main-gutter: 12px;
--main-position: center;
--main-lh: 1.5;
}
と思ったらIEだけ・・死ね ↑androidも含めてIE以外は主要ブラウザは全部対応OKなんだが使ってる? >>171
table{width:100%;}
tr{display:flex;}
td{display:block;flex:1 1 1px;word-break:break-all;}
td.col1{flex:0 0 50px;}
tdのflex:1 1 1pxとword-break:break-allを追加しました。
ie11とfirefoxで確認。 >>170>>171>>181
どの方法でも上手く行きました。
ありがとうございました。 formって不便じゃない?
ネストできなしいサブミットにアドレスつけられないし
フォーム共通にして別のアクションにポストしたいときどうしたらいいの ネストできるしサブミットにアドレスつけられるが
そんな事しなくても普通に、フォームに複数のアクションボタンをつければいいだけ
サーバー側で同じアドレスへのポストをパラメータ見て振り分けるだけ >>183
アクション先を変えればいいだけじゃん
もしくはアクション先を同一にしてポストするsubmitボタンの判定で別けるとか
どうにでもできる どういうこと?
<form method="post">
<form method="get">
<input>
<input>
<submit>
</form>
<submit>
</form>
とか
<form>
<input>
<input>
<submit action="get">
<submit method="post">
</form>
ってできるの? >サブミットにアドレスつけられるが
>アクション先を変えればいいだけじゃん
これ具体的にどうかいて何をかえれるの?
name属性で同じCGI内でボタン識別できるのは知ってるけど
URLやGET,POSTメソッドかえることってできるの? まあそうなんだけどだからJSの力をかりないとできないの不便だなーと スライダー沢山あるけど、使い分けるんじゃなく、どれか1つでカスタマイズ次第でなんでも可能なものですか
https://creive.me/archives/10461/#jQuery >>192
なんでも可能かはドキュメント見るしかないけどまぁ試して見るのが手っ取り早い。
可能なことが多いと設定が多岐にわたり簡単なスライダー実装する時めんどくさかったりもするけど。 俺はいつもswiperだな
前はslick、その前はbx使ってたけどもう使うことはないな 俺もswiperだな
bxsliderはautoの扱いが癖強くてなあ 私もSWIPERです。最初に覚えたのがそれだったので。Slickとかのほうがメジャーとは知らず。
先日画像サムネイルとキャプションをつけたくてFotorama使ったけど、Swiperでもできたのかも。 自分はbx
1つのページ内に複数のスライダーがあって全部違うの使ってるのに出会ったことがある
悩んだんだろうな スライドとかのアニメーションcssでも出来るけど無駄かね?
アニメーションであんまりjs使いたくない病なんだが… >>200
組んでるとパズルみたいで面白くはあるけど枚数変わるたび直さなくちゃいけないじゃん だいたい更新頻度高いじゃんスライダー入れるとこって 画像のサイズ同じならファイル名同じにして上書きすればいいだけだから
そんな面倒じゃなくね? >>204
んで蔵がキャッシュ消さずに見て
更新されてないんですが!!
までテンプレ >>204
いや、CSSだけで作るやつの話
枚数増えると破綻するから そもそもcssだけだとフリックも吸着もできないなー スライダーに最低限必要なもの
・自動スライド
・スライドからのリンク
・フリック(左右)
・ナビゲーション(前次のやつ)(左右)
・ページネーション(ドット/サムネイル)
jsなしでできるのって最初の2つだけじゃね? >>208
ナビゲーションとページネーションはcssでも出来る
フリックはやったことないな ページネーションをcssってまたチェックボックスだろw
そういうのさわりたくない すまん。教えてくれ。
<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を勧めるのかw ひょっとしてサーバーサイドがないと
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を記述する事ってできるのですか?
リンク先は、他のサイトでも良いし、同じページ内の別の場所でも良いのですが。
それとも、そんなサイトを作る事は不可能ですか? HTMLもCSSも言語的には簡単よ
アルファベットわかるなら小学生でも覚えられる
ただそれらをつかってデザインする
デザイナーがつくったデザインをコーディングする
ディレクターやクラが言う要望のアクションをつけるってなると
また別なんよ まえに一度使おうとして断念したんだけど
CSSのscrollsnapって、JSで拾えるイベントあるもの? まあそうなんだけど
snapしたときになんかイベントあったら便利なのになー
と思いまして そりゃあったほうがいいわな
transitionのtrantitionEndみたいなもんだろ? わかる
snapした瞬間
ズギャーーーーーーン!!!
って鳴らしたいよね
このスレの総意 ごめん、人によって
ガシューーーーーーン!!!
かもしれないから総意とは言えなかった LP的なアニメーションごりごりを作る時に
ぶっぴがーん!に合わせてアニメーション始めたいというのは当然あるな
同等のことをするJSライブラリが
停止時に発火するコールバックを設定できるのもそのためだろう amazonと楽天にリンクするボタンがほしいのです
それっぽいのどこぞにプログラムございませんでしょうか? アフィリンクのボタンならそれぞれのアフィ審査受けないとリンクはもらえん
ただのボタンならプログラムじゃなくてaタグ ■ このスレッドは過去ログ倉庫に格納されています