HTML/CSS のどんな質問にも優しく答えるｽﾚ 47
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 45
https://mevius.5ch.net/test/read.cgi/hp/1601474123/
HTML/CSS のどんな質問にも優しく答えるｽﾚ 46
https://mevius.5ch.net/test/read.cgi/hp/1608967433/
■関連スレ
Webサイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html 昔流行った、複数画像を連結して1画像にして
positionでずらす方法ってレスポンシブと相性悪いと思うけど仕方ない？
imgならwidth100％でheightも可変だけど、
height固定のずらしだけだと画面一杯には難しいか
計算式とか使うといけるかもしれないけど、手早くレスポンシブするならwidth100%は諦めてfloat:noneするほうが良いのかな
https://jsfiddle.net/mL75vcas/ まあ何がしたいのかよくわからないな
floatにCSSスプライトとか、XHTML/CSS2/HTTP1時代のテクニックをなんで今更 >>5-6
すまん、昔のサイトをcssだけ触ってレスポンシブ化しないといけないんだが
連結した画像とbackground-positionを多用しているのもあって、
どうすればいいかなと思って 結論
CSSだけいじってレスポンシブとか都合の良い改変なんてできません >>7
レスポンシブ化って言うけど、結果的にどうなって欲しいの？
現状でも、画面幅が小さくなると、画面に入りきらない画像が下に繰り下がるようになってるけど
これもある意味、レスポンシブ化が出来てるってことになるんだけど
画像の縦横比と横並びを維持しつつ、画面幅に合わせて縮小したいって事？ 多分モバイルファーストにってことだろ
スマホで閲覧時に見にくいからスマホに最適化させろとか言われたんじゃね？ >>9
小さい大量のアイコンに使うのは、現代の一番標準的な使い方だが
それがどうしたの？ >>7
たぶん考えているほど複雑な計算にはならないと思うよ
いくつかのサイトでスプライトやってるけど
そんなに困ったことないし
SP表示の方を%とか使うと詰むから
vwのような、ほぼほぼpxと同等に扱える単位でやるといいと思う bootstrapは色を変更するとき、自分でクラスを作って指定するんでしょうか？
bootstrapで用意されているものは、primaryみたいな数パターンだけですよね。 カンプでスマホデザインが横幅375px、左右の余白は37px(横幅の約10%）の場合。
ブレイクポイントが768pxの時って、左右の余白って実際のコーディングだとどうなるんでしょうか。
カンプに従ってそのまま37px指定なのか、カンプの横幅のと余白の割合を維持させるようにするのか
画面が768pxの場合はカンプの比率と同じ10%(76pxあたり)にするものなのでしょうか？ >>17
相対単位で指定した場合、カンプで指定されているpxぴったりにならないこともあるかと思いますが、
そういうケースの時はどういう方針にするかってのはデザイナーやクライアントとの話し合いってことになるんでしょううか。
デザインの横幅以外で見られたときに余白や各コンテンツの幅などの部分は。 >>15
bootstrap-4.4.1/scss/_variables.scss で、
$primary: $blue !default;
みたいに、変数を定義してる
そういう所をカスタマイズすれば？
テーマとか
カスタマイズの方法は、文書に載っていないかな？ フォント変えようと思っても変わらない仕様の時ってありますか？
ebayでフォントをキリッとしたのに変えたいんだけど、説明のhtmlいじってもなぜかフォントが変わらない… すいません。教えてください。
javascriptでtableを出したときに、
文字列を例えばvileのleだけを赤字にするときに(単語の一部を赤字にする)
<span class="">で囲ってやっています。
こういうときってタグはspanでいいでしょうか？
vi<span class="c1-1exam1">le</span> ageていませんでした。
すいません。教えてください。
javascriptでtableを出したときに、
文字列を例えばvileのleだけを赤字にするときに(単語の一部を赤字にする)
<span class="">で囲ってやっています。
こういうときってタグはspanでいいでしょうか？
vi<span class="c1-1exam1">le</span> >>16
デザイナーのつくるカンプはあくまで目安
そもそもスマホの機種によって横幅なんて変わるんだから
見た目が同じになれば数値なんてどうでもいいんだよ >>24-25
ありがとうございます。
別件で下記お願いします。
https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&;display=swap
グーグルフォントをリンクで指定するときは、
パラメータにdisplay=swapにしておくとフォントブロック期が0秒になるのでしょうか？
このリンクにdisplay=swapが入っていると
「`&display` は不明な実体参照です。」とゲートウェイ lintで出るのですが
無視でいいでしょうか？
参考
https://laboradian.com/show-text-immediately-using-font-display/
http://www.htmllint.net/html-lint/htmllint.html >>28
そう？
webフォント使えるようになってからは
大して困ることもなくなったと思うけどなあ
目分量でやらなきゃならんことがほとんどない bootstrapでカラムにパディングを指定したいんですけど、なぜか反映されません。
mainの箇所にpl-100を指定したんですが、反映されません。
padding-left:100px;という意味ではないんでしょうか？
ただ、デフォルトで左右のパディングは指定されているんですね。bootstrapでは。
<div class="container-fluid bg-warning p-5" style="max-width:1000px;">
<div class="row">
<div class="col text-center bg-primary">ブログタイトル</div>
</div>
<div class="row">
<div class="col-sm-8 text-center bg-primary pl-100" style="border:2px solid gray;">
<div style="border:1px solid black;">
main<br>
main
</div>
</div>
<div class="col-sm-4 text-center bg-success">sidebar</div>
</div>
<div class="row">
footer
</div>
</div> 最近てbootstrapからウェブ制作の学習を始める人が多いの？ >>35
cssはある程度出来るんですが、レスポンシブ部分だけ使おうかなと
装飾は自分で作ったほうが楽ですわ bootstrapのcssに.pl-100なんて書いてないよ そういう細かい調整ができないのがbootstrap >>30
>>32-33
ありがとうございます。
href内は&で正常に動いくのですが、今確認しました。
っということはグーグルフォントの貼り付け用のタグで&になっているのは
lintでエラー出るのでダメですやん。
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&;display=swap" rel="stylesheet"> ＆amp;でした
掲示板では勝手に&に変更されるのですね >>39
細かい調整出来ないからこそ、整うとも言えるんですよね
>>37
pl-5でもなぜか効きませんでした
原因特定の方法はわかりませんか ブラウザのF12 開発者ツールを起動して、スタイルを確認すれば？
JSFiddle などにアップロードして確かめるとか >>44
>>43
どうもです
変わってるんですね
5はまだ記事が少ないみたいでｓ >>44
まだbootstrap4にしといたほうがいいんでしょうか？ 連投すみません。
bootstrapでは以下のようにclassを指定していきますよね。
フォントサイズを変更したい場合、fs-3をfs-5などとすればいいのですが、３箇所すべて置き換えていくのでしょうか？
これが通常のスタイルシートであれば、CSSファイルの編集だけで済みます。bootstrapのこのような点は不便だったりしませんか？
これだとstyle属性に書いていたころと変わらないような。
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
</div> <ed>
<dt></dt>
<dt></dt>
<dt></dt>
</ed> >>47
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
みたいに繰り返し使うものを、
card みたいなコンポーネントにして、再利用できないかな？ >>49
では、１つずつ置き換えるのが普通なんですか？
それほど手間ではないですけどね。 >>51
回答どうも。
テンプレにするしかないんですね。
カードというのはなんですか？検索しても出てこなかったです。 bootstrapやめてフルスクラッチでやってみろよ
そうしたらbootstrapの意味がわかるから bootstrapの意味…小回りが利かないとかかな >>55そこまで必要性はないのではないでしょうか？
>>54
フルスクラッチはやってましたが、レスポンシブ部分を使おうかなと
装飾も出来るだけbootstrapにしないと、整わないのでは？ >>57
cssはHTMLとデザインを分けるというのはわかると思うけど、
元来はクラス名が文字や余白の大きさを示すものではないんだわ
bootstrapは効率のためそうしているけど、そうなったらbootstrapを使い始めたら意味がわかりながら使いこなせるはず >>58
bootstrapではクラス名がそのままCSSの内容を表しますよね
これってデメリットにならないんでしょうか？
これによるメリットがよくわからんのですが >>59
良く気付いたな
昔はNGだったけど、効率よく金儲けするために数を捌くにはメリットがあるってこった。
もう教えることは無くなってしまった、達者でな。 本来、クラス名は意味や役割で命名すべきなんだが
フレームワーク側では使う側がどんな意味や役割を与えるかわからんからな >>58,59
20年くらい前から
「右にあるからright」というクラス名を使うべきではない、なぜならスタイルの内容を変えて左にしたら意味不になるからだって論調あるけど
あんまり意味ないと思うよ
クラスもIDもただの識別子でしかないんだから >>62
そんな論陣には
「スタイルを左にするならcssの中を変える阿呆。leftクラスを作ってタグのclass属性を変えろ」
と答えるようにしてる mb10でマージントップ10pxとか、普通に使ってた
ただ、スタイルシートは分かれてたけど >>62
そんな「テレビ買ったらNHK映るから今は持ってなくても料金払えや」みたいな言い分は納得いかんな クラス名はつまり変数みたいなもんですよね
bootstrapだと同じ内容の変数を何度も定義してるようなもんじゃないですか？
これのメリットってなんですかね .right{ froat: right; }
これに文句言ってたおじさんは
当時のCSSのメーリングリストで
.derecho{ froat: right; }
.haki{ froat: right; }
.migi{ froat: right; }
とかはスルーして
破綻してんじゃんって突っ込まれてた思い出 たしかに
bootstrapを飲んでも飲まれるなとは言ったものだ メリットがわからないうちは使う必要もないだろうしな だからスクラッチでやれっていってんの
フルスクラッチでやってたらぶち当たる問題にたいして
bootstrap便利だなと感じる事ができるようになる
さらに使ってくとbootstrap不便だなってなってBEMの方が楽では？となって
さらにやってると結局自分でルール作る方が楽
に落ち着く >>73
「やべぇ、複数クラス組み合わした方が楽かも知んねぇ」ってなる bootstrapがセンス悪いのはその通り
正しい答えはsass（scss）を使うこと
cssはクラス名であって属性名じゃない
bootstrapは属性名になってる
例えばボタンのlargeとか
sassを使うとその属性が名前に抽象化される
bootstrapのセンスの悪さに気づいたら
上級者への仲間入り >>75
なんか次元の違うものを並べて比較されるとムズムズする クラス名を意味や役割で付けると、
名前を考える時間・見返し時間が増える
2つの物を見返して、一致してる事を確かめるのが、人間には難しい。
左右に同じ文書を置いて、内容が一致してるかどうかとか
それでクラス名に、red とか使うようになった。
即座に色がわかるから、イメージしやすい >>77
Back to the 1995やね
サイトのデザインも一周回ってシンプルだし
Netscape Navigatorは天国から喜んでいるだろう >>75
いやbootstrapはsass製のcssフレームワークなんだけど…
まさかそんなことも知らないでそんなトンチンカンなこと言ってるの？ プログラミングの世界には難問が２つある。
キャッシュの不活化、名前付け、そしてオフバイワンエラーだ。 > それでクラス名に、red とか使うようになった。
> 即座に色がわかるから、イメージしやすい
redで赤といっても原色に限らず赤っぽいとかやや暗い赤とか複数出てくると思うがそういう場合はどう付けるんだ？ 好きにすればいいんじゃね
クラス名をredとつけたいときは、たいていアラート的なとこだから
なんも考えてないf00だろうと思うけど .red {
color: red;
background: red;
} bootsrapでml-1というクラスを一括変更したい場合、どうすべきなんでしょうか
cssのコアファイルをいじるのはよろしくないし、意味がないんですよね。 >>86
bootstrapのクラスは、上書きしたり、調整したりすること前提だぞ
色々と勘違いしている気がする >>86
君bootstrapやめて、缶詰工場とかで単純作業した方が良いよ
柔軟性が無い馬鹿だから >>86
手っ取り早いのは
自分のCSSで上書きすることよ
んでファイルが増えるのが嫌だったら
Bootstrapのソースのscssファイルとってきて
パーシャルで上書きすれば良いよ
そうすりゃいつでも元に戻せるし >>85
それがオフバイワンエラーだ！
勉強になったなｗ 最近はあんまり言わんのかも知れんな
開発ツールも親切だし
開発の仕方、手順も手厚いから
off by oneが個人の手元以外で起こらなくなってるんだろうな スマホ対応ってbootstrapなくても大丈夫でしょうか？
難しくなければbootstrapやめようかな。
他にメリットあれば教えてや うちはbootstrap使ってないけどモバイルファーストチェック通ってるよ 質問です。
CSSを本格的に勉強しようとしています。
（※今まではCMSを使ってCMSの範疇でレイアウト調整していました。）
bootstrapをスタートに始めるべきでしょうか。それとも純粋なcssから勉強を始めるべきでしょうか。
親は「別にbootstrapなくてもwebサイト作れる。勉強するなら純粋なCSSから始めるべき。」
と言いますが、信用してもいいんでしょうか… css分かってた方がいいと思うけど
bootstrap必要になったとき何やればいいか理解しやすいんじゃないかな
あと今TailwindCSSの方が流行ってるらしい bootstrap最大の利点は、世界で一番使われているCSSフレームワークって点なわけで
個人開発だと自分ルールで書いても問題ないから、利点を感じにくいんだよな >>99
やっぱそのへんの対応って面倒なもんでしょうかね
スマホといっても幅は色々だろうし
目的はスマホ対応と、あと、デザインを整えたいってことですね >>101
俺の管理しているサイトはbootstrap無いおかげで
40000行超えたぞ、別に編集は苦じゃないけどさ >>100
世界でと言うならもう一番じゃないよ。
https://2020.stateofcss.com/
和訳：
https://coliss.com/articles/build-websites/operation/css/the-state-of-css-2020.html
フレームワークは2020年で大きな変動がありました。Tailwind CSSが1位になり、Bootstrapは大きく順位を落としています。
Tailwind CSS: 87%
PureCSS: 71%
Bulma: 61%
Ant Design: 60%
Materialize CSS: 53%
ちなみに、Bootstrapは48%、Foundationは31%です。 >>104
デバイスの幅というのは統一された基準ってのはないんでしょうか？
https://getbootstrap.jp/docs/5.0/layout/grid/
例えばbootstrapのグリッドシステムだと、スマホを想定した幅は576pxになっているようです。
この辺の対応にメリットがあるということですかね。
自分で作るの大変すか？ >>103
内容は興味深かったから感謝だけど、それは
アンケートに回答するような意識高い系の開発者達が、2020年時点でどれを使ってるかって集計結果な
例えばjQueryを使ってるかって尋ねられれば、もう使ってないって答える人が多いけど、
世界的にはWebサイトの77%以上で使われてるのと一緒で
Bootstrapは単独で22%あるんだから、tailwindに抜かされる日なんてこないよ
tailwindを愛用している私が言うんだから間違いない Bootstrap は、有名な会社だし、誰かの日本語文書もあるから
Ruby on Rails でも使う人が多い。
フロントを知らないサーバー側の人が、レスポンシブ対応するのに簡単だから
float など、CSS の直書きは難しい。
主に、CSSの素人が使う >>106
今はピクセルパーフェクトってのは無く大体この辺という感じで組めばいい 推奨ＮＧワード： Ruby
推奨ＮＧワード： Rails >>109
ついついピクセルパーフェクトになってしまうけど
今風なざっくりデザインだとどこに気をつければならないの？
flexで間隔をブラウザに任せるとか？ >>109
なんでそんな面倒なことするのん？
いちいちCSS書くときに「こんなもんかな？」って考えるの無駄な手間かけてまで >>109
基準は何ピクセルなんでしょうか？
pc版とスマホ版の２つだけでいいんですが、境界線はどこかなーと
これさえ自分でやればbootstrapは必要ないんじゃないですかね >>113
ピケセルで考えるのやめた方がいいんでない？
画面幅は100vwなんだよ
スマホ用の大きさの単位は全部vwにすれば
どんな画面幅のスマホでも全部同じになる >>115
VWというのを調べてみます
でもbootstrap使ったほうが楽ですか？ これまでbootstrap使ってきた人には楽だよ。過去の知識通用するもん。
過去のしがらみ全くない新規が今から採用するメリットあるかと言われたらうーん…
素のCSSやって面倒なこと増えてきたらtailwind使って楽するのが覚えること少なくていいと思うけどな。 >>116
次元の違うものを並べられても困る
vwってのは単位
%がは親要素の幅を100とした単�ﾊなのに対し
vwは画面の幅を100とした単位なので
スマホみたいに画面幅が変わるデバイスと相性がいい
BootstrapやBulmaてのは、若干暴論だけど
デザインにさほどこだわりのない人が
手軽にそれっぽい見た目を得るためのフレームワーク
勘違いされがちだけどフレームワークは
自分で作れない人を助けてくれるマジックワンドではないよ
あくまで、できる人が楽をするためのツール んでフレームワークてのはCSSに限らず
そのフレームワークが想定しているケースから逸脱すると、むしろ使う方が面倒なことになりがち
使わない理由のひとつとして「デザインがBootstrap臭くなるから」というのが良くあるのはそのため
なので、CSSフレームワークなら
まずCSS自体を習得して、その上で
そのフレームワークの理念を理解して使うのが必須だよ >>115
どのスマホでも同じ表示に描写にしたいならvwよりviewportを500pxとかに固定にしてpxでデザインする方が楽という結論に至ったわ
最初はinitial-scale=1じゃないのに抵抗あったがモバイルフレンドリーテストは普通にクリアできたし気にし過ぎだったかも
initial-scale=1はどんな大きさのスマホでもテキストが見やすいようにってことなんだろうけど日本だとみんな同じような大きさのスマホ使ってるしinitial-scale=1にこだわることはなかったわ width=device-widthとinitial-scale=1のセットだったわ device-widthを500にしたら
initial-scaleは機種ごとに計算しなきゃならんのではないか？ meta viewportをwidth=500にするだけ
initial scaleはなくてOK
ちなみにviewportをJavaScriptでスマホのみwidth=500、それ以外はwidth=1000とかにしておくとスマホのブラウザの「PC用サイトを表示」が使えるようになるからユーザー目線でもメリットあると思う vw は、画像などが拡大できない。
小さくて見えない場合に、拡大していっても見えないまま
Line のトップページがそう
どれだけ拡大しても、中央の画像が小さいまま。
画面の8割ぐらいは、画像の外の黒色のまま
見えない・読めないので、ほぼ情報の価値がないページw へぇ、その辺りは詳しくないから勉強になるわ
未だに表示解像度周りの挙動はよくわからん 画像はmaxwidthでpx指定とwidthで%指定の併用じゃあかんの？ スマホで困ることはほぼないけどな
むしろタブレット対応が辛い タブレットは横900くらいにすれば大体対応だから楽だろ
スマホほど10～20pxの違いの影響なんてないし タブレットは縦持ちと横持ち両方考慮せんといかんしね
スマホだとほぼ縦持ちオンリーと考えて差し支えないと思うけど >>126
拡大ってピンチのこと？
たぶんそれはvw関係ないよ bootstrapなしでレスポンシブつくったほうがいいのかな？
あと、８の倍数がやりやすいらしいねbootstrap >>135
まずはbootstrapでさっくり作って、重くて嫌になったら普通のSCSSに切り替えたら？
ぶっちゃけ何で作るかより、デザインとコンテンツの方が重要だし
そこで悩むのは時間の無駄よ >>135
良いか悪いかは自分で決めることだよ
作る人とサイトの数だけ答えは違う
なんかずっと拘ってるみたいだけど
いいじゃん、とりあえずやってみれば
別にそれで失敗しても特に問題はねえし
ここで質問に答えてる人達に
失敗したことない奴なんて一人もいねえよ >>135
コード書かずにグダグダする奴にろくな奴いない 大手でもタブレットとPCで同じ表示にしているの見るにタブレットとPCは分けなくていいんじゃない >>139
うちの客も
タブレットはPC表示ってのが多いな
ただこの辺こだわり出すと
幅のメディアクエリだけでは対応しきれなくなってくることもある >>135
一連のレスを見てると、お前さんはどうもフレームワークというものが
どういうものかをまだよく分かってないように見える CSS初学者が体系的にCSSを学習するのに役立つ書籍・サイトなどを教えて下さいm(_ _)m なんでもいいから書籍でHTML/CSSの書き方覚えたりいくつかプロパティ覚えればいいんじゃないかな
良く使われてるようなパーツ作ってみるとかカードやらアコーディオンやらモーダルなど
後はダサくてもいいから自分で配置していくとFlexboxかgridを嫌でも調べながらやる事になるだろうし スマホでスクロールしたら、上からヘッダーが「ｽｩ」って降りてくるあれは
transition？ >>146
JavaScriptである程度スクロールしたらヘッダーにクラス付けてして表示してるpageYOffset使えば簡単
cssでは表示されてない時はposition:fixedでtopをマイナスにしてブラウザ表示の外にしてクラスがついた時にtopを0で出てくる感じ
スムーズに動かしたいなら当然transition >>147
サンクス、やはりどれだけスクロールしたかは
jQueryとかのjs使わないとダメよね。
元のヘッダーをクローンして表示する方法とかあるのね、色々できるんだなぁ >>148
別にjQはいらんよ
初心者にちょうどいい難易度だと思うよ >>149
jsで2つのy位置を比較して、差が基準値以上、以下になったら
cssプロパティを変更したらtransition付なら「ｽｩ」って感じかな、と妄想してみる >>150
scrollTopが設定した閾値を超えているか否かで
要素のクラス付け外し
という関数作っといてonScrollで発火
アニメーションはCSS
てやるのが昔ながらの定番だと思う >>151
ありがとう、感謝です。
しかしこういう常時、値をチェックするようなjsだとブラウザが重くならないのかな
今日日の性能なら無いに等しいぐらい？ チェックボックスについて教えてください。
チェックボックスA
チェックボックスB
チェックボックスC
チェックボックスAにチェックいた場合、チェックボックスBとCは
チェックできなくすることは可能でしょうか？ >>153
チェックボックス ラジオボタンのように
で検索
でも正直なこと言えば、なにその糞UI ありがとうございます。
表の並び替えがあるのですが、
並び替えのルールをチェックボックスで指定しています。
なので、どれかにチェック入れたら、他はチェック入らなくしたかったです。
でもUIとして使いずらいですかね？
webデザインされる方はどのようにしていますか？
日付順(最新が上)
日付順(最新が下)
逆さ読みでA-Z
逆さ読みでZ-A
A-Z
Z-A >>144-145
ありがとうございます！
そのサイト見ながら自分で色々書いてみます >>152
頻繁に、関数が呼ばれるのが気になるなら、
Lo-dash のdebounce, throttle などで、
何秒に1回しか呼ばれないようにすれば？
0.1秒に1回しか呼ばれないとか、制限を付ける >>152
scrollイベント起きた時だけだから常時ではないしscrollTopの値チェックするだけだからたいした負荷ではない
IE除外できるならintersectionObserver使う方法もあるよ >>156
ラジオボタンかselectの複数行表示じゃダメなんですか？
他のにチェック入らなくしたら他に変えたい時は選択済みのチェック外してからでないと選べない罠 今のスマホとかPCのスペックならその程度の処理誤差でしょ
SVGも昔は負荷がとか言われてたけど今は普通にあちこちで使われてるし
そんなもんよりターゲティング系のweb広告の方がよほど負荷かかってると思うよ >>156
HTMLはラジオボタンで作って
見た目だけチェックボックスにすればいいじゃない >>143
コリスをチェックしてれば大体わかるっしょ
SNSでフォローしとけばTLで更新情報は随時流れてくるし 157
161
163
並び替えは、あくまでオプションなので、選択しなくてもいいため
チェックボタンで、1つチェック入れると他はグレーアウトにします。
ちなみに、趣味でWebサイト作っているため、仕事は関係ないです。
お金稼ぐwebサイトとかでもなく、あくまで趣味です。 それなら並び替え無しを選択肢に入れればいいのでは？ 並び替えなしがデフォルトで選択されている感じですね。
これはあまり好みじゃないです。 デフォルトも登録順なり何からのソートされたデータになるから
ソート機能つけるなら1個初期値を選択状態にして
ラジオボタンかselectが多いんじゃいかな？
好みのチェックボックス＋グレー処理もjs併用で出来るだろうけどそこに時間を割くほどのメリットがないからその方式はあまり見ない
とはいえ好みがあるならそれを形にする方向でいいんじゃ？
グレーアウトにする方法は、いざ他のソートに切り替えたいって時にどういう動きを想定してる？
毎回チェックボックスを外して新しく選択し直すのか、一度チェック入れると変更不可なのか
どちらも利便性はあまりないと思う
一般的にはどういうのが多いって聞き方をしておいて
好みじゃないですって返答はなんかずれてると思う >>165
であれば、ラジオもチェックも
本来の機能では賄えないので自作が必要
ボタンとなるオブジェクト
・画面上での要素
・[メソッド] チェックされる機能
・[メソッド] チェックはずされる機能
複数のボタンを統括するオブジェクト
・複数のボタンオブジェクトを保持
・[メソッド] ひとつのボタンを渡されたら、その他のチェックを外す機能
この二つを作ってやるのが定番だと思う
ボタンの画面上での要素は何でもいい
inputでもいいし、aやdivで手作りしてもいい
んでchangeやclickイベントを拾って
そのボタンオブジェクトを、統括オブジェクトのメソッドに渡せばいい >>169 つづき
チェック解除機能を忘れてたすまん
ボタンオブジェクトはこう
・画面上での要素の参照
・現在のチェック状態
・[メソッド] チェックされる機能
・[メソッド] チェックはずされる機能
んで要素のchangeかclickイベントで
まず現在のチェック状態を見て
チェックされてたら、外すメソッド発動
チェックされてなかったら、統括オブジェクトのメソッドに自分のオブジェクトを渡す
こんな感じ >>168
すいません。
>>169
ありがとうございます。 これ、selectで終わる話じゃないの？
なんでcheckboxで実装？ そんな詰まらない独自性をやりたがる顧客っているんだよ
下手に忠告すると逆ギレして営業に文句付けてくるから、忠告なんてするもんじゃないんだよな 他には複数選択できて、一つ選択するとパタパタパタと矛盾する項目が不活性になるUIはあった
仕様書とテスト項目は丸投げで作るのがめんどかった
提出しても顧客担当者はレビューもしやしねぇ
「あ、これ直してね。悪いけど期日は変えられないから」
(思いだし怒り >>172
UI/UXの観点では
selectは一覧性に欠ける
radioは選択解除ができない
という弱点があるので
それほど間違った要望でもないとは思う UIとしてはタグクラウドの選択みたいなのになるんやな >>143
「HTML5 & CSS3デザイン 現場の新標準ガイド（第2版）」
「CSS設計完全ガイド ～詳細解説＋実践的モジュール集」
あと体系的ではないけども、エビスコムっていう著者（企画制作会社）の書籍が
読みやすくて実際に手を動かしながら学べるのが多くておすすめ
https://ebisu.com/
Kindle Unlimited（月額980円の電子書籍読み放題サブスク）に入れば
エビスコムのコーディング・プラクティスブックっていうシリーズが1～6まで無料で全部読める
他にもWEBデザイン関連の書籍や雑誌バックナンバーも充実してるからコスパは最強 HTMLファイルに
<form method='post' action='sample.php'>
<input type='text' name='a'>
<input type='submit' value='送信'>
</form>
とUTF-8で記述して、(sample.phpは独自のPHPファイル名です)
XAMPPのフォルダ内に置き、クロムで開いたら、
送信の部分が文字化けしてしまいました
どう対処したらよいでしょうか？ >>178
head内の頭の方に
<meta charset="UTF-8">
を書く <meta charset="UTF-8">は不要
HTML5のエンコーディングはUTF-8と決まってる >>181
まず大前提としてMDNに書いてあることは個人レベルの意見だから
誰もが参考にするべきものではない
そして、翻訳に罠がある
「UTF-8 を使用しないというとても明白な理由がない限りは使用するべきです」
これを見ると、まるでUTF-8を使うならmeta charsetを書けと言っているように見えるが
原文のニュアンス的には単にエンコーディングはUTF-8を使え、他は使うなと言っているに過ぎない
そして脆弱性を持ったIEを利用してる人なんて最早いない
例えば最も著名なiframe+UTF-7の脆弱性は10年前のパッチで塞がれてるし
今のIEに特別に気をつけないといけないような脆弱性は残っていない
（そもそもIEはCSPに殆ど対応していなかったり、
一定の脆弱性は残っているのでcharset云々という話にはならない）
ということはわざわざ指定する必要はないということはアホでも分かる 必要性はともかく、>>178を解決する答えにはなってないわな しかしmetaかhttpヘッダにcharset書いてないと実際に化ける事があるわけだが？ HTML LSだとcharsetにはutf8しか指定できないし
指定しなかったらutf8になるので不要ということだろう
一方HTML4時代のブラウザを相手にするなら必要
とは言えそれなら<meta http-equiv="Content-Type" ......
と書かないといけない VSCode のemmet で、! と入力すると、charset="UTF-8" がある
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
</html> お題目とか定型文みたいなもんで、無いよりはあった方が良いって程度のもんなんだから
とりあえず書いとけよ 無駄なものは省くってコーディングに限らず仕事の基本だと思うし
万が一これが必要な状況と環境になったとして
その環境じゃCSSもJSもそのサイトの機能がまともに機能しない可能性が高いとは思うが >>188
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
これもいらないらしいね 無駄かどうかは分からない
HTMLファイルがBOMから始まっておらず、HTTPなどで指定もされない場合は
metaタグで指定する必要がある まぁ、偉そうに要らねぇだの講釈垂れてないで
解決のための現実的な回答してやれや 議論を遮ってすまんが
>>178
formタグにaccept-charsetでUTF-8設定すればいいんでね？ >>193
これ以上の現実的な回答をするのは現実的に無理だということは分かってるだろう？
質問者が提供する情報が少なすぎるもの
そういうレベルの質問者に対してあれこれ想像して色々な方向性示してもどうせ付いて来れないでしょ？
それこそ「無駄」というもの
とりあえず質問者が>>179試して、だめだったらより詳しい状況とともにそれを報告しないと前に進まないでしょ 私のために多くのレス数を割いて議論して下さりありがとうございます
meta charset … を入力したらあっさり解消しました
お手数を掛けてすいませんでしたm(_ _)m doctypeの指定によってはブラウザが後方互換モードになるからな。
そうするとhtml4時代の記述が有効に動いたりする。 >>196
いいってことよ
誰でも最初は初心者だわ
おまいさんも来年は教える側になるだろう >>195
お前みたいなのは、回答者には向いてないので
別に答えなくていいよ >>199
俺の言ったとおり解決したじゃないか
君はオナニーが好きみたいだけど
それはチラ裏にお願いね >>200
負け惜しみ乙
顔と尻が真っ赤だぜお猿さんww >>183
>そして脆弱性を持ったIEを利用してる人なんて最早いない
そうやって、ただの願望を
あたかも事実であるかのように書いたりするから
頑張って書いた長文の信頼性も薄まるんだよ そう思うのならどんな脆弱性を持ったIEがどれくらいの割合で使われているのか示してくれ
それともMDNに書いてあることは無条件に一語一句信じてそれ以外は一切受け付けませんってことかな? >>204
1人でもいることを示せばいいのん？
なぜそんな負け戦を挑むの？ <meta charset="UTF-8">は不要とか言ってたくせに
直後にしっかり解決してて草 たとえ仕様がどうなっていようが、
昔はIE、今はSafariが無視して勝手な実装するから、仕様ではこうなっているからOKというのは危険な考え。 chrome使ってて文字化けするっていう質問者に対して
IEなんて使ってる奴いねーし、charsetなんてｲﾗﾈ
とか言ってたのに、しっかりcharset指定して解決したのを
どう説明するのか興味ある >>206 >>209
仕様だからcharset要らないとか言ってる奴のサイトは
他所で文字化けしまくってる疑惑 IEシェア0.73%もあって利用者が居るって証明にしかなってなくて草 >>210
逆だと思う
Chrome使ってるのにmetaタグがないと上手く動かないという方が問題
HTTPヘッダで別のエンコード指定してるとか
BOM無しのUTF8を使っててたまたま出だしが悪いか
何れにせよ原因は他にあるからそっちを解決しないと「たまたま上手く」行ってるだけだと思う IEにエンコーディング周りで特異な脆弱性が合ったのってIE7まででしょ
IE8以降でセキュリティパッチ当ててれば大まかな脆弱性は塞がれてる
そりゃCSPに対応してなかったりと根本的にサイトの隙に付け入られる可能性は大きいが、
だからこそそこを気にするのならその前にすべきことが５万と出てくる
例えるなら、昔はノーヘル禿げ頭だったが今は一応簡易ヘルメットを付けてるバイク乗り
そりゃフルフェイスにして欲しいがもう変えたくないというので、こいつ危ないねとなるのは分かる
でもmetaタグを書くのは育毛したら安全になるんじゃねというようなもの
禿げ頭のときならアフロにすれば何倍も安全になるだろうが
ヘルメットをかぶっている今ではそんなの気持ちの問題にしかならない
そういうこと >>216
>>206にあるcharset無いとsafariでも化けるっていうのに対しては
どういう屁理屈を捏ねてcharset不要っていう主張を正当化するの？ 結局、御託を垂れ流すだけで、質問者から大した情報も引き出せず
質問者にとって有益な解決方法を、何ら提示出来なかったっていうね
現実に対処出来ない頭でっかちの無能が何か言ってる、って印象しか
残らなかったわ このままだと何か悪いので、出来る限り私の情報をお伝えしたいと思います
使ってるOSはWindows10です
本に書いてある通りに、前述のHTMLファイル(input.html)を作成しました
htmlヘッダやbodyヘッダなどは書いていません あれだけです
そのファイルを、xamppフォルダ内のhtdocsフォルダ内に、
1つ新しくフォルダ(phpbook)を作ってそこに置きました
使ったエディタはVSCodeで、UTF-8に設定して記述しました
PHPファイルは、半角数字の1が送られてきたら、echoでメッセージを表示する
という単純なものです <?PHPで始め、?>で終わります(コードは割愛します)
同じくVSCodeで作成し、上のHTMLファイルと同じフォルダに置きました
そしてChromeで、http://localhost/phpbook/input.htmlと入力し
HTMLファイルを開くと、「送信」の部分が文字化けしてしまったというわけです DOCTYPE宣言すらしてなかったってことなら、勝手にhtml5だと判断した
前提からして間違ってたって話だな >>223
php.iniとか修正した？
「xampp 文字化け」とかで検索してみるといいかも やっぱりここの人ってIE対応求められて咽び泣いたりするの？ >>215
歴史と文化と国民性の問題
諸説あるけど
俺はそう思ってる 実はIEは官公庁や銀行などの一部では使われてる
本来はセキュリティを一番に考えないとダメな職種なのに
ActiveXで作っちゃって、更にリプレースの予算をケチったため IE使ってても外部へのアクセスを適切に遮断していれば、大した問題にもならないけどな
え？どこにでもアクセス出来るって？ >>228
実はもクソもついこの間だってコロナ給付金サイトがIE専用で炎上してたろ >>230
炎上したのはまともなセキュリティ教育を受けた一般人は誰も使ってないIEでしか動かない化石ページを作ったからだろ
今は(まともな知性があれば)誰も使ってないという論旨は正しい >>230
当時、既にEdgeからIEを起動するオプションも消えているくらいで、
どうやってIE起動するのかわざわざググった覚えがあるわ 超大手サイトですら対応してないどころか明確に利用できないから他のブラウザ使えって表示するブラウザに対応するなんて無駄な労力過ぎる
そんな無駄な労力を誰かが割くから未だに日本ではそれなりにシェアを持ってしまっているわけだがそのコストを他に割く方がよほど有益だわ 対応デバイスや対応ブラウザを好きに選べる立場で制作するなら
好きにすればいいだけだし ワンマン社長の某企業のサイト作ってて
社長の奥さんの
「うちのテレビのブラウザで見られないじゃないの」
に対応したことを思い出せば
IEなんて可愛いもんだ あ、でもワンマン社長の話は意外と含蓄あるかも
年寄りはパソコンもスマホも使えない人はおそらく多い
そんな人がネットにアクセスするとしたらテレビのブラウザは重要な選択肢
顧客層がテレビのブラウザを使う層ならば対応するのは理にかなってる >>225
手を加えてないです
ありがとうございます テレビじゃ操作しにくいじゃんね、、
しかし今時のテレビは
いざというときさくっとモニター代わりに出来て
いいな <input type="hidden" value="あああ" id="aaa">のように
inputタグのnameは省略して書かなくてもIDで区別すれば問題ないですか？ 送信formで使うんだったらそういうわけにもいかないと思うけど 学校や図書館においてあるPCも古いの多いからな
あと老人たちは壊れるまで家電は買い換えないから
高齢者の家のPCはいまだにwin98が現役だったり恐ろしいことがある 今どき素のsubmitは使わずにfetchやらでやり取りするだろうからnameはもういらないかもね ol li で○数字が出せるように、li:before で調整しましてそれは上手くいきました。
しかし、ol li の中で一部ul liの箇条書き設定している部分のli にまで ol li と同じ効果になってしまいます。
どうやったら入れ子状態になっているul liだけ別に指定すれば良いでしょうか？ >>246
ol > li
ul > li
ol ul > li ハンバーガーを押すと、ページが少し暗くなって横からニュッと出てきて、暗くなった部分を押すと解除したことになるけど、
あれってcss的には100vw 100vh、opacity0.8みたいなのを重ねて、
その上にメニューのdivを用意して横に動かしているの？ >>250
まあそんな感じ
出方が違うだけで
ライトボックス的なやつとやってることは変わらん >>251
ライトボックス懐かしい
あれと同じものと言われても作れと言われてもできぬ・・・ >>252
どこまで多機能にするかにもよるけど
わりと脱初心者向けな気もするけどね
おっちゃんも若造の頃
何個もあれこれ試行錯誤して作った思い出 固定のHTMLを表示するだけなら簡単
ライブラリダウンロードしてくるより楽 ローディング画面って使用頻度少ないですか？
試しに作ってみてるけど皆はアニメーションストックしてあったりします？ ローディングってサイト作成業者のオナだわな
クライアントからすればカッケーってことになるけど、邪魔以外の何者でもない そんなの作るくらいならサイト軽くしろや！って事ですか
自分もユーザー視点じゃ邪魔だとは思うので
一応実装は出来る程度の知識でいいですかね >>258
演出としての場合は少ないなあ
本当にうまくいけばそれなりの効果はあるんだろうけど
逆に、APIの返りとか画像のロード待ちであることが
ユーザに伝わらないと困るケースでは
絶対必要だと思ってる
んで過去に作ったのは纏めてあるけど
使いまわすことはあまりなくて
都度都度作ってる気もする >>262
ありがとうございます
ここなんかは演出っぽいですよね
https://supercub-anime.com/
とりあえず3Dでアニメーションするのを書くのが苦手なので試しにいくつか作ってみたいと思います このてのアニメのオフィシャルサイトの
動画を先に表示させるの
なんかのテンプレかってくらいどこも同じことする
うっとおしいことこの上ない
あれ喜んでる人間っているのか？ アニメとか映画のサイトって
中身ないくせに重いのばっかりだよな
見るやつほとんどいないからだろうけど 興味ある人が見るためのサイトだし問題ないんじゃないか？ PCサイトをレスポンシブに変えることはできるんだけど、
htmlとcssを新規で作る時って、PCファーストとスマホファーストって難易度はどっちが高い？
そもそもスマホファーストの定義ってPCで見た時に横幅いっぱいに広がること？
横幅変えた時に動的に変わるのって％だと思うけど、かなり難しそう
ブレイクポイントは580pxぐらいの1つにする予定です 難易度というより、面倒臭い度ならスマホ
%だけじゃなくvwとかも勉強しといた方がいいよ >>268
動的に変えるという幻想は早く捨てるんだ
スマホの画面はどの機種もみんな幅100vwなんだ >>270
スマホは大丈夫なんだけど、
PCやタブレット、スマホ横だと幅がバラバラだから難しそうだな・・
50vw, 25vwとかで区切りはいいけど、ピクセルパーフェクトばっかりやってきたので
余白とかの扱い方が不慣れです。
やっぱ幅960pxぐらいでdiv.container作った方が製作はやりやすいのかなと 1stビューで横幅いっぱい写真の場合
写真のサイズもネックになってくるから
PCの方がめんどい >>271
単位全部vwでいいじゃない
どんなタブレットで見ても同じ見た目 PCでvw効かないブラウザってある？
ネットスケープナビゲーターぐらい？ 単位全部vmって横幅100px固定でデザインするのと数値一緒じゃね？
ならもっと横幅大きくとってpxでやった方がデザインしやすいし小数点減るだろう >>271
今の時代にピクセルパーフェクトという概念は捨てるんだ >>271
このアプリ使うと視覚的にわかりやすくなって作りやすいぞ
Responsively App
https://responsively.app/ PCサイト全盛のときもそうだったけど結局リキッドデザインではなく固定幅デザインに行き着くんだな
vmでデザインするってのはその流れなんだろう
となるとピクセルパーフェクトの時代が来ているとも言える
デバイスの多様化でPCサイトのときほど厳格ではないにしてもね
作る方からしたら面倒な話ではある vmってなに
vminとvmaxの総称みたいなもの？ ここで聞いていいもんかわかりませんが、
.htaccessファイル自体のキャッシュを強制的に、またはキャッシュ期限を設ける方法ってあるのでしょうか？
いまはブラウザ側で強制的にクリアしてる状態ですが、
なにか訪問者側のブラウザに残っているhtaccessを更新させる方法があれば教えていただけると助かります。
よろしくお願いします ブラウザが側で強制的にというのは、手動でスーパーリロードをしてるという事です。 >>280
htaccessによってブラウザキャッシュを制御するって話じゃなくて？
ブラウザにhtaccessは保存されないし、htaccess自体はサーバーを制御するファイルで
ブラウザで自由に更新できたりはしないよ？
.htaccess（ブラウザキャッシュ高速化・無効化）制御による表示速度UP
ttps://lpeg.info/html/htaccess_cache.html >>282
そうなんですね！
一応コンテンツ内の画像やスクリプトなどはキャッシュさせたりするためにhtaccessに書いて設定してます。
ただhtaccessであれこれ設定したり、リダイレクトのルールとかいじってると、
設定が合ってるハズなのに挙動がおかしくなって効かなくなったりするんです
そういう時ブラウザのキャッシュをクリアすると直るので設定が残ってるのかと思ってました
ありがとう御座いました！ 質問があります。
以下のデザインカンプでコーディングの練習をしています
https://xd.adobe.com/spec/5ad2e100-1381-4ec0-5e45-2ec7bb5f66a2-2ce3/grid/
↓コーディングサンプル
https://shptomoya.github.io/shiro/
デザインカンプでは、ページの「Concept」や「Work」のページに対する左右の余白は160pxとなっています。
ただ、コーディングサンプルだと、左右の余白は160px以上あるように見えます。
「Concept」や「Work」自体の横幅は960pxとなっていますが、こういったデザインの場合、
コーディングはデザインの左右の余白よりも横幅のほうに合わせてレイアウトするものなのでしょうか？
コーディングする場合、以下の二つが考えられると思いますが、どちらが正しいのでしょうか？
①max-widthを960pxに指定し、左右の余白は気にせず中央寄せにする（コーディングサンプルと同じ？）
②横幅960pxの指定はせずに、相対単位で160px付近になるように左右の余白を指定（この場合、「Concept」や「Work」は横幅960pxにならずに横に広がりすぎる？） このデザインカンプ見て余白をpx指定して本体のwidthがautoとか
普通は考えないんじゃね？ なんかすごいな、人のデザインカンプ見てたら
コードで書ける気、全然しないわ・・ 画面横1280pxの時両端に160pxの余白があるだけでしょう
重要なのはコンテンツ表示する960pxの方
当り前にブラウザ広げたら余白は増えますサンプルもそうなっている カンプの見方の問題だな
んなの素人にはわからんだろ
この場合は中のコンテンツ幅が
960pxって指定あるならそれがメイン
んで中央寄せ
一番上の花の背景写真
中間の所々にあるグレー背景と
一番下の花の背景写真が
ブラウザがどんなに横に広がってもMAXになるように
って解釈
仕事の場合だいたいはコーディングする前に
デザイナーから指定あるか指定ないなら聞くかするもんなので
まーわからなくても気にすんな >>268
レスポンシブ対応なら、Bootstrap を使えば？
>>280
Ruby on Rails では、ファイル名に、MD5 みたいなハッシュ値を付ける。
ファイルを変更したら、ハッシュ値も変わり、ファイル名も変わるので、
ちゃんと更新後のファイルがダウンロードされる
ファイルの内容が変更されているのに、ファイル名が同じだと、
古いキャッシュの方が使われるから、ダメ
ファイル名が同じ場合は、常にダウンロードさせるような設定があったように思う レイルズのコード書けない
レイルズ布教厨ってこんなところにも出没するんだ cssで間延びされたぼやけた背景画像がどうも好きになれない
解像度多めの画像用意しとけYo! <input type="file">について質問させてください
①画像Aを選択
②画像Aを差し替えようと再度INPUTボタンを押す
③思い留まり画像を選択せずに、キャンセルでファイル選択画面を閉じる
と上記のような操作をした場合も
input内の①で選択した画像データがリセットされるようです
この動きは仕様でしょうか？
また、③の操作を行っても画像Aを保持したい場合は
①のタイミングで別途用意したinput等へデータを仮置する対応で相違ないでしょうか？ >>293です
すみません、ID表示操作ミスりました float: left で浮かせたコンテンツを解除させるクリアフィックスの下のコードは、別にどこに記載しても良いんですよね？
.clearfix::after {
content: " ";
display: block;
clear: both;
} >>293
前者は気にしたことなかったけど
後者は出来ないんじゃないか？
File API使ってやるのが手っ取り早いと思う とりあえず全てのタグに class="clearfix" をつけて叱られた良い想い出 <ul>タグの中の<li>のコンテンツを横並びにしたい時は
昔→float: left;
今→display: flex;
で良いですか？ 選択肢が多いと迷うのはわかるけど今は恵まれているかと思うの かなりマシになりましたがタイピングミスが多いです（汗
タグやプロパティはエディターでわかるけどダブルクォーテーションを片方忘れてたり
集中力を上げるしか無いですか？慣れると減りますか？ エディターで補完してくれるよVScodeとかAtomとか >>293
2 の「再度INPUTボタンを押す」という状態がよく分からない
画像A を、1度でも確定させましたか？
単なる仮入力なら、むしろそれが保存・表示されると面倒
ユーザーからすると、取り消した処理なのに、
Aが保存されてしまったかもと思って、Aを削除する処理を探さないといけなくなる
単にキャンセルできないのは、面倒。
キャンセルしたいのに、保存されてしまったかも知れない、という事を考えるのが面倒
空白に戻らないのが、トラブルになる >>302
クォートやカッコの類は
閉じてから中身を書くってのが割と昔からある定番 >>297,304
言われて確かに！と腑に落ちました、リセット機能がないと困りますね
今実装したいのがファイル選択後に画像をそのままアップロードではなく
画像トリミング(cropper.js)→プレビュー→アップロードと一部加工する関係で
画像再選択をキャンセルしても画像データが一部残るのが基本(取消ボタン必須)になっており、その認識が抜けてました
現時点でキャンセル時に消えて困るのが参照元の画像名のみなので
そこだけ仮置で対応するようにしてみます
助言ありがとうございました >>299
display: inline-blockもある inline-blockでやる時は
コードの</li>と<li>の間に
改行やインデントが挟まらないように気をつけよ canvasに表示されている画像それぞれにリンクを貼るにはどうやればいいんですか？ canvas要素でclickイベントを拾って
event.clientX/Yでクリックされた座標拾って
そこに対象となるオブジェクトがあれば
window.openでリンク >>277
ごめん、検査入院してた。
亀レスだけど本当にありがてぇ、使いこなせるとは思わないけど、
実行してびっくりした、インパクトすごいなこれ。
>>278
時代はぐるぐる回ってるよな、そんな感じする >>309
<div><a href="url"></a></div>を重ねるとかは？ 超朗報！
マイクロソフトが Internet Explorer 11 の提供終了を発表！
2022年6月15日公式サポートを終了 2週に1度ウイルス感染する客が、
IE11使うのをやめてくれないわ ホームページの特定の領域だけ可視化するようにすることはできますか？
例えばホームページの座標(100,100)幅300高さ200の領域にある
部分だけを見えるようにしてそれ以外は隠すということです body{width:300px;height:200px;position:fixed;left:100px;top:1000px;overflow:scroll;}
令和にやることではない 質問にあたって目的の開示って大事よな。
もしかしてintro.jsみたいなことやりたいのかもしれん。 <input type="text" style="position:absolute; transform:translate(200px, 200px)">
こんな感じにtranslateを当てた入力欄で、テキスト選択しながら左の欄外までドラッグすると範囲選択が途切れるのって何か対処法ありますか？
バグっぽい挙動なのにニッチ過ぎるのかググっても提議すら出て来ないです SafariつかってるやつはIEの次くらいに少ないし
windows使ってる奴らみたいにIEで見えるようにしろやってゴネる民度ではないので iPhoneのSafariはPCと違って
仕様はほぼChromeとかわらんし
表示が崩れたり動かないとかないから
独自な変な仕様もないし 質問です。
不正請求をしない整骨院を運営したいのですが、まっとうに運営すると健康保険の取扱いは完全に無いに等しいです。
健康保険の取扱いは原因の明らかな外傷性の骨折、脱臼、打撲、捻挫、挫傷（肉離れ）と、厚労省保険局医療課からの通知により限定されております。
しかしながら、はっきり事実を言うと大半の整骨院の健康保険請求が不正です。
これは会計検査院、保険者機能を推進する会（柔整問題研究会）、保険医協会等々の調査により立証されている事実です。
更に言うと柔道整複療養費の算定基準（医師で言うところの保険点数）は初診は別として1部位10割で610円です。仮に本当にケガにしか健康保険を使って請求していなかったとしても真面目に請求すると1部位10割610円の単価にしかなりません。
そんな単価では当然経営できないので3箇所4箇所5箇所とケガをしたことにして保険請求をするという行為が長年蔓延してきました。
極めて特殊な仕組みで一般人に分かり難い、政治絡み、昔は数が少なく目立たなかったということもあり、今まではお目こぼし的な側面が強かったのですが
近年のSNS社会の広がりで一般人の人にも仕組みが認知されつつあり、社会的なコンプライアンス意識の風潮も相まって、今ではあらゆる関連業界から袋叩きにあっています。
どうすれば整骨院（接骨院）で不正請求をせずに経営できますか？ 柔道整復師の不正請求にNO！
接骨院や整骨院での柔道整復師による施術を受ける場合、
※健康保険が使えるのは「骨折、脱臼、打撲、ねんざ」といった【ケガ】に限られていますが、
実際はさまざまな不正請求の実態が確認されています。
http://www.tosyoku.org/jusei_seikyu/
（動画あり） <table style="width:400px;height:300px">の上にクリック用のdivで作った四角形を重ねて
複数置きたいんだけどtableからハミ出ないようにしたい。
１つ１つdivがtableからハミでないように座標や幅を調節するのはめんどくさいので
自動的にdivの端がtableから出ないやり方あったら教えてください >>331
relativeとabsoluteでは無理？ >>332
それやってもだめでした。
もっと何やりたいかわかりやすく言うと
tableの上にランダムな位置にposition absoluteでdiv四角形を複数配置したくてそれはできたんだけど
divの四角形がtableからはみ出た部分だけカットされるようにしたいってことです >>333
はみ出し要素のカットだけでいいなら overflow: hidden;
tdではなくtable自体の大枠が対象範囲の場合は
親要素に上記と合わせて display: inline-block; position: relative; でどうだろ？
はみ出し自体を防ぎたい場合は
大枠と浮き要素の大きさによっては多少レスポンシブの調整必要だけど
topとleftとtransform: translate(-XX%, -XX%);で%指定 >>327
どっちかっつーと逆じゃね？
iOSではChromeの中身がWebKitだからではなかろか table内の上にあるdivのはみ出しを表示しないのはできたけど
canvasの上にあるdivはできませんでした。どうすればいいんですか？
<canvas width="400" height="300" style="border:Solid 10px #0000ff;overflow:hidden">
<div style="width:100px;height:500px;background:#ff0000;display:inline-block;position:relative;left:0px;top:0px"></div>
</canvas> cssについて分からない事があるので質問させて下さい。
text-alignプロパティが適用されません。
初心者なので、どこが間違っているのか分からず
困っています。
一応こんな感じです。
（htmlファイル)https://d.kuku.lu/e54460461
(cssファイル)https://d.kuku.lu/b57628569
宜しくお願いします。 コードを画像にしてどうする・・・
ここにコード張って左上のセーブボタン押した後のURLを教えて
https://jsfiddle.net/ >>339
text-alignの上のline-height行の最後のセミコロンが抜けてる >>338
overflowを設定するのは親要素だよ
canvasの親要素が無いか、サイズが異なる場合は親となるdivを追加してoverflowとrelativeを設定
その子要素にcanvasとdivを同列で置いてみて >>343
タグやCSSの括弧が閉じられてなかったり、セミコロンが抜けてたり、全角が混在してたり
とりあえずjsfiddle上でエラーが出てる部分を修正しよう レスポンシブデザインについて教えて下さい。
レスポンシブデザインでスマホ表示させる場合、画像も縮小されますが、縮小の場合は劣化しないのでしょうか？
画像処理ソフトで縮小しているわけではなく、スケーリングであれば無劣化なのでしょうか？ すみません
追加の質問です
コンテナをmargin autoにするとなぜ可変になるのでしょうか？
コンテナにwidth 1000pxを設定しているにも関わらずです。 https://www.aizulab.com/blog/css-flexbox-liquid-layout/
flex:1;とはどういう意味ですか？
ラッパーにdisplay:flex;を指定し、中の子要素１つ目に100px,もう1つにflex:1;を指定します
そうすると固定と可変になるのですが、1の意味がよくわからない
2にしても結果が変わらない >>349
そのリンク先に詳細解説してるリンクあるんだから、それぐらい読もう
flex - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex htmlにyoutube動画を埋め込むには<body>の中にyoutubeの埋め込みコードをコピペするだけですか？
youtube動画の<iframe>から</iframe>をコピペして貼り付けても再生されません。
試しにバリデーションしてみると、「<IFRAME> に不明な属性 `ALLOW` が指定されています。」と出ます。
これは、どの様に修正すれば良いのでしょうか？
*jsfiddle上では何故か上手く機能します。
https://jsfiddle.net/p12onafk/1/ >>351
読んでますけど、よくわからなかったです >>352
埋め込み制限でfile:// urlからだとだめな動画なんじゃない？ >>354
色々試したのです、埋め込める動画と埋め込めない動画がある様です。
何でそうなっているのかは分かりませんが、埋め込めない動画を埋め込む事は可能なのでしょうか？ ブラウザでローカルファイルを開いても、そこに埋め込んだYouTube動画は再生できない
埋め込み制限された動画は、YouTubeの「共有」で埋め込み用のタグは生成されないし
埋め込めても再生は出来ないので諦めましょう >>357
ローカルファイルを埋め込む場合は<video>を使うんですよね？
それは出来ました。
>>358
そうですか、分かりました。 >>355
i understand now about it.thank you african guy. >>360
Good job.
I surprised that Even yellow fool monkey like you can understand it. VSCode の拡張機能、open in browser では、ローカルファイル・アクセスだから、CORS 制限あり
file:///C:/Users/Owner/Documents/test.htm
一方、Live Server では、サーバーを立てているから、CORS にならない
http://127.0.0.1:5500/test.htm
同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080
これも、サーバー経由だから、CORS にならない
http://localhost:8080/test.htm
Ruby on Rails では、Node.js のwebpack-dev-server を使っている >>353
これでも嫁
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
ttps://parashuto.com/rriver/development/how-flex-item-width-is-calculated https://developer.mozilla.org/ja/docs/Web/CSS/:empty#browser_compatibility
ブラウザーの互換性の箇所に書かれている数字はなんでしょうか？
chrome 1となっていますが、最初のバージョンから対応しているという意味になりますでしょうかな(´・ω http://newpuru.doorblog.jp/
このサイトのフィードってjavascriptのみで構築されているんでしょうか？
だってlivedoorブログのドメインなので、phpは使えないはずですす 今、書籍を見ながら仮のウェブページを作っています。
レスポンシブに対応させるべく、viewportの設定ををしています。
head内に下記のmeta タグを追加しましょうと書いてますが、head内ならどこに書いても構わないですか？
<meta name="viewport" content="width=device-width, initial-scale=1"> 聞く前に手を動かせ、困ってから質問しろ
と、俺もここでよく言われたわ >>368
構わんし
なんならinitial-scaleもいらん気もする
少なくとも自分は書かん >>368
できるだけ早めに読み込まれるように、なるべく上の方に書け >>372
これでも嫁
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
ttps://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html そういやinitial-scaleとか書かなくなったなぁ html、cssの基本的な事は大体理解しました。
しょぼいhpくらいなら作れるようになりました。
そこで、もっとカッコいいhpを作りたいのですが、どの様な本を参考にしたら良いか
量が多すぎて分かりません。
お勧めの参考書があったら教えて下さい。 <section>
<h2>
<div class="contentes">
<section>
<div class="contentes">
<h2>
この2つ、いつも書き方が迷うんだけど
div.contentsってあったほうが良いの？ え？まじで・・・
たしかに前者でいつもやってきたけど、
section枠の中にdiv枠作って・・見出し、ってのができないのか >>375
まずどういうサイトを作りたいのか、プランを煮詰める
今ある知識で可能な範囲でサイトを組む
今ある知識ではできないことを洗い出す
自分に足りないことを調べる、勉強する >>380
いや、あくまで出だしの差を書いただけだからタグは当然閉じるよ >>378
いやだから
h2の中にdivは入れられない
divの中にh2は入れられる
h2の中にdiv入れても表示はされるけどコードとして間違ってる
そういう時はh2の中にspan入れてdisplayをblockにするンだわ htmlとcssの用語、タグの意味を体系的に図解してあるサイトはありますか？
ちなみに自分はプログラマで、htmlはいじりだしてから20年くらいになりますが、
今風のサイトを自分で作れるようになりたいんです。 メインカラムとサイドバーの余白の指定ってどうしてますか？
pcとスマホのレスポンシブを考えた場合、margin-right:16px;みたいな、ピクシェルでの指定はしないほうがいいのでしょうか？
スタンダードを教えて下さい。 >>368
VSCode で、! と入力すると、emmet が働いて、以下のように展開される
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
</html> >>387
例えば自分は8の倍数ルールでデザインしているのですが、
この場合、余白をピクセル指定をしないと8の倍数とはならないわけですよね。 よく考えたら高解像度モニタが普及してきてブラウザ表示領域を縦長
例えば1280x1600にして使ってるような人もいると思うんだけど
この手の人を考えて書くことあります？
トップページを100vwx100vhで決め打ちしちゃうとき困ることもあると思うんだけど 質問させていただきます。
HTMLでできるのかJavaScriptでできるのか分からないのですが
webサイト上の新しいリンクをクリックした時にGoogle Chrome指定で開くことってできますか？ >>392
>>393
ガン無視了解です
ありがとうございました marginのpx指定というのは使わないでサイトを構築したほうがいいのでしょうか？ 8の倍数だのpx指定だの、便利かどうか慣れてるかどうかなんて人それぞれだから
個人サイトだったら好きにしろ Swiperに関しての質問でも大丈夫でしょうか?
他スレありますか? class="hero"
って何の名残？google的には現代でも意味があるクラス名？ >>400
Bootstrapがで始めた頃
キービジュアルになるような大きなバナーにheroってクラス名がついてたのを真似したのの名残り
今のBootstrapでは使われてない あとクラス名なんてGoogle先生にはなんの意味もない >>401
そうなんだ、ありがとう
テンプレートに使うクラス名の付け方って難しいわ・・
1語、2語とか、これで本当にいいのか悩んでしまう >>400
メインビジュアルの別名をヒーローイメージという スマホ、iPhoneの背景全画面のcssがうまく行かず悩んでいます。
リロードするとうまくいくのですが
初回は必ずbackgroundcolorの色が下部の足りない部分に出てきてしまいます。 文字だけじゃわからないか、一眼レフで状況がわかる様子のモニターを撮影してアップロードして >>406
100vhじゃいかんの？
実際には初期ビューより少し長くなっちゃうけど https://shirakedo.com/news.html
https://shirakedo.com/discography.html
のiPhoneXRサファリでみた時のページになります。
スクロールすると下部が黒（background）になります。
リロードすると治ります。
height:100vh;したりといろいろいじってしまい
スッキリしないコードになってる気もしますが・・・ 下部ってナビゲーションバーのこと？これ半透明の黒でいいんじゃないの
background: rgba(0, 0, 0, 0.85); 指定されてるけど >>412
newsページでいくと
.news {
background: url(../img/news-vertically.jpg) #000 no-repeat center center ;
ほにゃらら
｝
の#000が画面をスクロールするときに表示されてしまいます。
分かりづらいので＃FFFに変更しておきますね。 >>411
これは？
CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
ttps://coliss.com/articles/build-websites/operation/css/css-fix-for-100vh-in-ios.html >>414
解決しました！ありがとうございます！
本当にありがとうございます！ ああ～自分iPhone持ってないから借りて見たらこういう事か
iPhone8のsafariで見ると背景の高さを内の要素が超えてる事になってるね
firefoxだと大丈夫だ >>417
アンドロイドもあるのですがfirefoxとchromeでは大丈夫でした。
iPhoneのサファリのみ表示がおかしくなります。 safariはねー
いろいろあるよねー
ユーザー多いから無視できないという(´･ω･`) background-attachment:fixedはiOS SafariどころかMacOSのほうでも
ずっと未対応なだけであって、別に不具合ではない
Appleがクソなことにかわりはないけどね
https://caniuse.com/mdn-css_properties_background-attachment_fixed うわーん、pタグのmargin-bottomとその下のh2のmargin-topが重なってしまう・・・
どうすれば良いの？ >>422
とりあえず「CSS margin 相殺」で検索 ありがとう、理解できた。
透明なhr挟んでも良いのか。
統一性を持たせようとしても、チマチマ修正して破綻しそう >>411
iPhoneで見てるだけなのでコードは読んでないのだけど
背景用にdiv.bgを用意して
position: fixed;
height: 100;
background-size: cover;
とするのはどうだろう
Safariに限らずbackground-attachment: fixedは昔みたいに機能しなくなってきてるから
自分はもう使わなくなってる >>425
だからみんな
マージンは片方だけ使うようになっていくのだと思う >>423
やっぱ初心者はマージンの相殺で躓くよなｗ 上だけ使う派？
下だけ使う派？
でも、結局その親タグのpaddingの世話になるかしないとダメよね
俺は上だけ派 上が無難だと思ってる
＋使って、何かと自分の間って書くことが多いな >>428
あとマージンの飛び出しも
この仕様は誰が得するのかいまだにわからん >>431
初期設定の段階での敢えてそうしたのか漏れなのか
でも今更仕様変更されたら阿鼻叫喚になる図しか見えない 上から写真、テキストのカードリストを横に3つ並べるデザインがあって、スマホサイズにした時カラムで縦に並ぶようにしたんだけど横幅が100%にならずに小さく真ん中に縦方向に並んでしまう……なんでだろう？？ formタグの要素の順番は変わってもいいですか？
<form action='foo.php' method='post'> …
と
<form method='post' action='foo.php'> …
などで >>429
何に対するマージンなのかを考えるとたいてい左と上になるな マージンの相殺はほんと意味わからん仕様よな
どういう理論やねん 先輩ワイ、div内のpaddingと中にあるタグのmarginの使い分けを聞かれ沈黙
その後、咄嗟に「これは宗教だから好きにしてok」と返答したわ そいえば昔（10年くらい前）
paddingはなるべく使うな
なるべくmarginでどうにかしろ
ってルールの仕事があったわ
理由聞いとけばよかった でもpaddingあるほうが、見出しの背景色には便利じゃ無い？ みなさんありがとうございます。
>>426
おっしゃるとおりbackground-attachment: fixedはあまりうまく動かないようですね。
とりあえず
display:block;
でしのぐことにしました。 >>438
あーそういう指導するサイトもあった
あれなんなんだろうな
box-sizing概念ない時代だからな 今現役の人に聞きたいのですがfloatって使いますか？ そりゃflexより使いやすいときあるからな
箱に並べるだけがfloatじゃ無いし ありがとうございます。
今勉強中でfloatは現場ではもう使わないと聞いたので不安になって質問させてもらいました。 たまにfloatも使うというルールにするより
使わないというルールにしているのは良いと思うよ
そんなに気にしないで良い
今の子は良いな、float知らなくても食べていけるんだから(食べられるとは言ってない) floatの本来の使い方の回り込みは
float使わにゃならんし
レイアウト目的で使うのか？という質問なら
ほぼないんじゃない？
flexとgridで大体なんとかなるじゃろ
俺らが20年間ずっと欲しいと思ってきた機能の集大成だし 20年片手間にやってきたけど、grid知らねぇ・・・ >>448
20年やってたならあれだ
昔懐かしいテーブルレイアウトみたいな感じよ > 俺らが20年間ずっと欲しいと思ってきた機能の集大成だし
そういう声が多いからflexが作られたのだ >>450
なにぃ、1pxのspacer.gifはもういらねぇってのかい？ >>452
うむ
今はtdのheightで空間を空けるのがナウい float の用途は新聞とか本でみかける、テキストに写真や図表を入れるレイアウトが本分だよな
今どきそんなレイアウトをWebで使うことはほぼないけど PCビューではそのやり方はまだまだ使うけど、
もしかして俺が知らないだけ？
それをレスポンシブでwidth:100%にして文の上か下に画像が来るようにしているわ 599px以下はレスポンシブでスマホ用、それ以外はwidth:960px用のPC用という扱いだけど、
これだとタブレットの縦が、一部の幅になってしまう。
width=deviceなんとかの影響だと思うけど、このタブレットの時はwidth=960pxみたいなのってmetaタグにできる？
wordpressのheader用phpだけど、ifとかいる？javascriptとかでするの？ >>448
そのレベルの古参ならgridはめちゃフィットするはず
当時のテーブルレイアウトであれこれやって
バッドノウハウとして腐れてた経験が
今になって活きる この世界は定期的に勉強してないとどんどん変わるから浦島太郎よｗ
10年後のWEB界隈はどうなってるのか想像もつかない 最近はスマホの普及によるレスポンシブ対応で進化早いように思えたけどここから先はそんなに変わらないんじゃないかな
レイアウトで言えばもう印刷物並みのデザインができるようになったからね
動画を組み込める分だけ印刷物を超えたかもしれない
今はもうCWVとかそういう改善に目を向けられているように思う 10年後からのレス
と、10年前の私もそう思ってました >>462
@containerは割と前からあるんだけど
これだけでは、今求められているレスポンシブは賄えないので
@mediaと併用することになる
んで併用すると結構複雑になる
変動するものが2つあることになるんで
なのでレスポンシブよりも
pcのカードレイアウトで1行の数を変えるリキッド
みたいな局所的な使い方にしかならない気がする
と、だいぶ前に調査しとけって言われた時に書いた 結局あってもコーダーとって便利じゃないと使われない これ見るとedgeでもposition stickyがtableのtr要素、thead要素に使えるように見えるんだけど上手くいかない
https://caniuse.com/css-sticky
chrome、safari、firefoxでは大丈夫だった
edgeでも出来てる方いますか？ edgeをchromiumにアップデートしてないんじゃね 試してみたけど、確かに動作しないね
まぁ、trとtheadの下のthとかtdで指定しちゃえば特に困らんけども ありがとうございます
theadで対応できると複数行でもposition stickyを使いやすくなるので心待ちにしているんですが92まで待ってみます 浮気者！ひどい！Chromeが一番だって言ってたじゃない >>470
まじかよ
クロミウムエンジン信用して最近edgeの検証してなかったわ おおー
chromium派生だめじゃねEdge・Vivaldi・Opera全部引っ付かない
Chromium９２とFirefox89はok ブラウザーの拡大率に関係無く、文字を常に同じ大きさで表示出来ますか？
例えば25%の縮小表示でも400%の拡大表示でも、
液晶ディスプレイの画面に高さ30ピクセルで文字を表示するなどです。 >>481
document.widthとか色んなハックが生まれては対策されて使えなくなっていく
ユーザーの意図したブラウザコントロールを無視するというのは発想としてはウインドウストームとかブラウザクラッシャーに近いものだからだ >>481
｢￣ ｀ヽ､ ＿_＿_＿_
Ｌ -‐ '´ ￣ ｀ヽ- ､ 〉
／ ヽ＼ /
／/ / / ヽヽ ヽ〈
ヽ､レ! { ﾑ-t ﾊ li ､ i i }ﾄ､
ﾊＮ | lヽ八l ヽｊﾊVヽ､ｉ j/ l !
/ﾊ. ｌ ヽｋ=＝ , r= ､ﾉﾙｌ lＬ」
ヽN､ﾊ ｌ ┌‐┐ ﾞl ﾉl l
ヽﾄjヽ､ ヽ_ノ ノ//ﾚ′
r７７７７７７７７７tﾉ｀ ｰ r ´ﾌ/′
ｊ´ﾆゝ ｌ|ヽ _/｀＼
〈 ‐ 知ってるが ｌﾄ、 / 〃ゝ、
〈､ﾈ.. .ｌＦ Ｖ=＝"／ ｲl.
ト |お前の態度が とニヽ二／ ｌ
ヽ.|l 〈ｰ- ! ｀ヽ. ｌ
|l気に入らない ｌﾄﾆ､_ﾉ ヾ、!
|l_＿_＿_＿_＿__ｌ| ＼ ソ よく、大きめのモーダルを表示させる際に「背景固定をして、モーダルの中を直接スクロールさせる」というのを見掛けるのですが、
背景を固定にしつつ、モーダルの中ではなく、Box自体を上下にスクロールさせるやり方とかってありませんか？
普通にやろうとするとやはり背景まで動いてしまいます・・・ 背景(モーダル以外)をfixed(固定)にして
モーダルをrelative等で前面表示にするといいんじゃないかな？
iOS対応時の調整で手間取った覚えがあるけどごめん、そこは覚えてない >>487
コードまで書くのは面倒なんでググって欲しいんだけど
1. まず今のscrollTopを測っておいて
2. bodyをposition: fixedにして固定しちゃって
3. 1で測った値ぶん上にズラす
ってするのがわりとスタンダード >>488
>>489
ありがとう。この場合、モーダルは当然fixedやabsoluteにしちゃうと固定されちゃうよね？
モーダルの方はrelativeとかになんのかなぁ？ >>491
jsのアラートみたいに同一html内で表示するウインドウもどき
cssによるデザインの適用ができるのでデザインを凝れる
>>490
yes >>490
その辺は
どうとでもできるライブラリ使おうよ
自分の使い方では
jQありならMagnific-popupで満足してる
なしだと手作りしたやつ使いまわしてる >>492
ありがと、昨日alert使ったとこだわ
それでもクライアントは喜んでたけど、赤文字できないの？とは言ってたから
モーダルならできるよね floatは用途次第ではまだ使えるというカキコがあったのですが、現役の皆様にとってflexboxとgridってどういう印象ですか？
floatは古い！まだまだ使えるけどこれからはflexboxだ！gridだ！という声を聞いたことがあって震え上がってます…。 flexの方が各要素の収縮等を調整したりレスポンシブ対応での再配置等での自由度が大きい
gridは変則的な配置もできるので同じく自由度があがるイメージ
flexはプロパティ一覧を見つつできるぐらいにはなっとくといいよ
gridはジェネレーター使えば簡単
覚えて損はない >>497
古いとか新しいとかいう価値基準で見てない
古くからやってるおっちゃん達は
それが本来の使い方ではないことを理解した上で
tableを使ったり、floatを使ったりしてきたわけよ
そうするしかなかったから
それがあるから
ボックスを縦横に並べるために作られたflexと
テーブルレイアウトを昇華させたgridは
ボックスを並べるというシーンで普通に使うべきものだよね
という感じ 仕事でやってる場合
あらゆるブラウザ対応を迫られるわけよ
そこでIEではgridは使えません
ちょっと前までだとflexも使えません
だからfloatを使う以外の選択がなかった
ただそれだけ JSはいいよな。最新の文法で書いてもBabel一発で古い仕様のコードに変換してくれるんだから。
なんでCSSにはそういうツール出てこないの。 gridってIEで使えなかったのか
通りででウチで使う人いないわけだ… >>503
バベルもそこまで
何でもかんでも面倒見てくれるわけではないんだが
それはさておき
JSで書いてるのは式と文なんで翻訳しやすい
一方CSSはただパラメータと値を書いてるだけなんで
それにどんな意味があんのか、あんまりよくわかんないんだよ >>499
ありがとうございます！flexもgridも勉強していきます
>>500
それやります！w
>>501
従来のレイアウトはプロパティ本来の用途から外れた裏技だったんですね…
>>502
IEがWeb製作のおじゃま虫みたいですね…昔はIE一強の時代があったみたいですが… flexはある程度使えるけどgridは全く分からんわ >>506
何か勘違いをしている
IEが邪魔なのは出た時から今日まで変わらんぞ >>508
そうだったんですか！？
あいつはダメな子やったんですね…。 >>507
CSSで書くテーブルレイアウトみたいなもん
超簡単
grid-layout:
'box1 box2 box3' 10px
'box1 box4 box4' 20px/
100px 200px 300px;
みたいに書くだけ
上の例だとbox1がrowspan=2
box4がcolspan=2になってる感じ >>509
90年台からのNetscapeとIEのシェア争いで
双方独自拡張満載となったブラウザは
HTML/CSSを正しくレンダリングできず
我々は正しくないHTML/CSSを書かざるを得なかった
00年台になり札束暴力でIEに軍配が上がった後
Netscapeの残党が最後っ屁で
現在のように正しくHTMLとCSSをレンダリングする
Geckoエンジンを作り上げた
正しいHTML/CSSを書ける我々の歓喜は
ウェブ標準ムーブメントとなり
現在のHTMLコーディングスタイルの礎となった
とはいえ、依然としてIEは存在しているので
IEのために特別な配慮をするという苦行を
我々は20年に渡り行っているのである >>511
たしかNetscapeはMozillaの前身でしたよね
彼の最後っ屁がMozillaも作ってWeb標準を作ったってことなんですね～
知りませんでした！そういうネットの歴史すごく楽しいです
そうなるとIEが異端ですね…
IEくんのために特別なコード書くのめんどくさい… >>510
grid-layoutって何？
grid-templateじゃなくて？ >>513
本当にごめんなさい
寝っ転がってスマホで書いてたら普通に間違えた >>510
jsfiddleで書いてくれー
いまいち雰囲気がつかめん こんなの見つけました～学習にどうぞ
flexboxを学べるゲーム「Flexbox Froggy」
https://flexboxfroggy.com/#ja
Gridを学べるゲーム「Grid Garden」
https://cssgridgarden.com/#ja >>520
ありがてぇ
.container { width: 600px; ← わかる
grid-template: "box1 box2 box3" 100px "box1 box4 box4" 200px / 100px 200px 300px;
∧∧
（ ･ω･）・・・なんやこれ
＿| ⊃／(＿＿_
／ └-(＿＿＿_／
￣￣￣￣￣￣￣
＜⌒／ヽ-、_＿_
／＜_/＿＿＿＿／ >>522
内容的には>>521の中身と同じだから、眺めてれば何となく分かるはず rowspanは今でもtableで表作る時に使うでしょ
今は別の方法が主流なん？ colspanは昨日使ったけど、rowspanはここ数年使ってないなー そんなん
単に縦にセルが繋がる表を書く機会の有無だけじゃないか 縦に繋げたいときは面倒だからdiv使っちゃってるなあ
レスポンシブでレイアウト変えるのもしやすいし みんなdisplay:table;で表組みしたりする？ >>529
SPの時に組み替えなきゃならん時はする
擬似テーブル化するmixinも作ってあるし
それでハマらない時はgrid使ってる 20年以上前にすでにHTML内に書く形であったからなぁ
源流を辿ればインドの山奥か、やはり チッ
自分で調べらあ
今はリファレンスはmdnのサイト見てる >>534
もう数年前からHTMLやCSSは
W3Cのものではなくなってるよ >>540
WHATWG
要するにAppleとGoogleとMozilla ネスケの元に戻ったのならNTRというより元サヤか？ >>542
違う
HTMLはティム・バーナーズ・リーが作ったもので
その後、彼が組織したW3Cがメンテしてた
Netscapeは
NCSAでMosaic作ったアンドリーセンに
シリコングラフィス創業メンバーのクラークが
ウェブブラウザで天下取ろうぜ！って持ちかけて作った会社 1989年に誕生したHTMLをW3Cは
1999年のHTML4までバージョンアップさせた
さらにXMLを開発し、これこそウェブの未来だと
2000年からXHTMLに移行し、HTMLは
しかしブラウザベンダーが望む未来は
文書フォーマットではなく、ウェブアプリケーションプラットフォームだった
そこでGoogle、Apple、MozillaはW3Cに対し開発協力を申し出るが、拒否されたため
WHATWGを組織して自分たちでHTMLを作ることにした
2007年ごろ、WHATWGで作られた最初のHTMLは
Web Application 1.0と命名されるが、WHATWG内部ではHTML5と呼称されていた
2008年からW3CはWHATWGと共同歩調をとることを受け入れ
XHTMLを凍結、時期バージョンはHTML5と決めた
が、非営利組織であるW3Cの開発速度はとても遅く
WHATWGには耐えられるものではなかった
2010年Apple、Google、Mozillaは先行してブラウザにWeb Application 1.0を実装
2011年にはHTML Living Standardとして公開した
W3CがHTML5を勧告するのはこの3年後なのだが
2010年頃にHTML5というワードがバズってたのはこのため
2014年にW3Cから勧告されたHTML5は不出来で
またHTMLに対する考え方の違いにWHATWGは不満を募らせていく
2016年にW3Cから勧告されたHTML5.1に対し
WHATWGは不満を爆発させ、口汚く罵り、W3Cに三行半を叩きつけ、完全に決別することになる
2017年にW3CはHTML5.2を勧告して抵抗するも
両者の溝は埋まることはなかった
2019年、ついにW3CはHTMLの策定を終了し
今後はWHATWGに委ねることを宣言
移行、HTML5.3を勧告することがあっても
HTML LSのコピー（フォークではない）になると決まった
いまここ ごめん脱字
誤：2000年からXHTMLに移行し、HTMLは
正：2000年からXHTMLに移行し、HTMLは凍結 >>544
＞WHATWGは不満を爆発させ、口汚く罵り、W3Cに三行半を叩きつけ、完全に決別することになる
なんかここだけすげーな
何が気に入らなかったんだろう >>548
ブラウザベンダーとしてのGoogle、Apple、Mozillaはプラットフォーマー
魅力的なアプリを俺らがたくさん作って、それを使う人が増えることで利益になる
だから高機能なHTML5を実装したブラウザをリリースすることがメインで
その仕様の策定は後回しで良い、とは言わんまでも、随時行っていければ良いわけ
一方W3Cは
私たちが仕様を勧告します、ベンダーはそれに従いなさい、という団体で
非営利なので時間に追われることがない
策定することが第一なので、HTML5策定するのに6年かかったくらい遅いのよ
そんで2年かかった5.1も全然機能が少なくて
「W3CのHTML5.1は欠陥フォーク。開発者はHTML LSのみを見よ」
と公言するに至った >>552
HTML Conformance Checkers ? WHATWG
https://whatwg.org/validator/
The W3C Markup Validation Service
https://validator.w3.org/ >>549
なるほど、公務員のトロ臭さと、民間の行動力か まぁどうせおれらはIEというクソブラウザの奴隷なので
5だろうとLSだろうと関係ないんだ ieはそろそろ切ってるとこも多くね
それよりも、webpを背景にできるかどうか@supportsで区切ろうと思ったら
ios12がクソな挙動で困り中
こいつ読めないクセに通しちゃう うちも代理店仕事が主だけど
昨年後半からIE切ってよし増えてきた
自分が今担当してる案件では
鉄道会社と運送会社に
完全にIEが起動しなくなるまで待ってくれと言われてるだけかも Web系に転職したくて勉強してたんだけどHTML5が廃止されるってことは今後どうすればいいんですか？
このままHTML5で勉強続けてていいんです？ HTML Living StandardがHTML5に代わる新標準ってことだけど
W3Cとか古い本で勉強してるのでなければ、そのまま続けても
大して問題は無い >>562
今までW3CのHTML5.2の仕様書
https://www.w3.org/TR/html52/
を隅々まで読み込んで勉強していたのであれば
ちょいちょい違うところあるので
HTML LSの仕様書
https://momdo.github.io/html/
を読み直す必要があるけど
違うでしょ？
HTMLやCSSを、機能機能ごとに単体で
いろんなサイトや本で調べて試す
みたいなやり方してたでしょ？
であれば、それはほぼHTML LSに準拠してるから
なんの問題もないよ >>556
W3CがWHATWGを受け入れて
これからWeb Application 1.0をベースにHTML5を策定していきますよ、となったキックオフが
W3C「これは大変な作業になるだろう」
WHA「頑張ろうぜ」
W3C「10年はかかりそうだ」
WHA「ははは、ナイスジョーク！」
W3C「ん？」
WHA「ん？」
だからな 現行のブラウザでちゃんと表示されれば何だっていいんだよ iPhoneのEdgeとかいうゴミがモダンブラウザの仲間入りしたから仲良くしてやってくれ >>570
iOSのブラウザは
どれも中身WebKitだからなんも変わらん、はず >>566
WHATWGダッサｗ
結局13年かかっとるやんけｗ 太郎「ジョン、web業界でどの言語をマスターすればメシが食える？php, node.js, vue.js, perl？」
ジョン「日本語」 かなり初心者的な質問ですが、cssの頭にhtml{～}、*{～}って記述すると思うのですが、htmlと＊の違いって何ですか？
どちらも、全てのタグに影響を与えるのでしょうか？
例えば、margin: 0px autoと記述する時htmlの方に記述するのか？、それとも*の方に記述するのか？
どちらが正しいのでしょうか？
宜しくお願いします。 >>575
プロパティは親要素から子孫要素へ継承されるものと、継承されないものがあるので
htmlの場合は全てのタグに影響を与えるわけじゃないけど、*だと全てのタグが対象なので
*で指定したプロパティはhtmlを含む全てのタグに影響がある
継承 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/inheritance
marginは非継承プロパティなので、全てのタグに値を指定したい場合、htmlと*のどちらかと
言われれば*ということになる
また、非継承プロパティであっても、特定の子要素で親要素の値を取得したい場合は
子要素のプロパティの値にinheritを指定すれば、親要素の値を取得することが可能
inherit - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/inherit 久々に見たら非営利団体と営利団体の話してわくわくしてる
そういうの大好き 恐らくほんとに初歩的すぎる質問で申し訳ないんだけど
フォントサイズと比例してテキストが下にズレちゃうんだけどなんでこうなっちゃうんだべ
見出しが下にずれまくって
1冊ですべて身につくHTML＆CSSって本の
204ページから進まなくなっちゃった…… どういう状態なのか分からんから説明しようがないぞ
具体例をどうぞ
https://jsfiddle.net/
しかしmanaって人はどうなんだろtwitterで少し名前知れてるっぽいけど tableタグはデフォルトだと線が引かれないので、
<table border="1">
上記のようにしたらVSCodeでborderの部分が赤く表示されてしまったのですが
これって警告か何かでしょうか？
この書き方はするべきではないですかね？ >>582
その本持ってないから例が分からないけど
見本とフォントの種類は同じ？ >>585
tableタグのborder属性は、一応各種ブラウザで動作はするが古いので
最近では非推奨属性になってる
代替としてCSSのborderプロパティの使用が推奨されてる
<table>: 表要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table >>582
line-heightについては理解している？ うおおお、みんなレスありがとうこんなに優しいんだね
そして>>588見てためしにline-height 0px書いてみたら正常に動いた……
理解はしてない……
付属のコードコピペしてるのにこんなの書いてなかったんだが？？？ >>589
font-sizeは文字の大きさ
line-heightは行の高さ
大雑把に言うと
ブラウザの文字をドラッグして選択した時に
後ろに色がつくでしょ
その高さが行の高さ >>587
分かりました
リンク先まで書いていただきありがとうございます >>589
もしline-height:0;が無くてもサンプルデータが正常に動作するなら
その方法は根本的な問題解決になってないんじゃね？ 初心者です
ulで囲むと中身のリストが字下げ？というか、そこだけ右にずれてしまうのですが正常な動きですか？cssで中黒を消してもそのままです
左に寄ってて欲しい時はどうしたらいいでしょうか
それから、リストにする理由がいまいちわかりません
pでよくね？って気持ちです >>596
デフォルトCSSでマージンとパディングが
ulとliにそれぞれついてるから
それを自分のCSSで消してください
ブラウザの開発ツールを使うと
マージンやパディング、ボーダーなどがどのように設定されているかわかるので
これ以降、必ず使うようにしてください あああああ、なんか最初に書いてあったリセットCSSってやつかな……やってなかったです……
ありがとうございます！ 戻るボタンを作りたいと思うのですが、
1. <input type="button" onClick="history.back()" value="戻る">
2. <button type="button" onclick="history.back()">戻る</button>
この2つの書き方では何か違いがあるのでしょうか？ inputには閉じタグがない
自由にスタイリングするならbuttonタグで作ろう 初心者ですまんが
閉じタグのないinputはスタイルシートが効かないとか？ >>603
効かないと言うことはないはず
inputは空要素で閉じタグは不要なので、あっても無視されるんじゃないかな >>603
効かないことはないんどけど、たとえば
▶︎Back
みたいにアイコンつけたいときとか
inputは:beforeが使えないじゃん？
そんな意味でbutton好きな層は
一定数いると思う >>604
inputは空要素なのではなく
img、hr、audio、videoなんかと同じく
置換要素
開始タグと終了タグに囲まれた内容が表示されるのではなく
何かと置き換わるんですな >>603
ボタン内テキストの一部の色だけ変えたいとか装飾にこだわりたい時はbuttonを使ってる
inputで表現できる時は1行でかけてシンプルなのでinputを使ってる プロゲートでレスポンシブデザインのとこやってるんだけど
これVScodeとかで書くようになったらどうやってスマホ画面のビュー見ればいいんだぜ？ >>608
どうやってるのかわからんけど
多くの人はブラウザの開発ツールで
スマホサイズにして見てると思うよ
iOSとiPhoneだったら
実機の中身をSafariの開発ツールで見る
なんてこともあるかもしれない >>606
空要素は子孫ノードを持たないことを意味するから間違いではないかなと
そして調べてみて驚いたんだが「置換要素になることもある」だそうな
https://developer.mozilla.org/ja/docs/Web/CSS/Replaced_element 遅くなってしまいましたが
皆さん回答ありがとうございました 色々サイトを見ていてdisplay:tableがあって「ﾌｧｯ、なんやこれ」と思って
縦方向にdivがあったんやが、flexの縦方向とどう違うの？ ついでにdisplay:blockも縦方向に並ぶからtable, blockの使い分けがわからんです 結果だけ見たらパッと見は同じだけど、flexは縦方向が詰まったら
特に指定が無ければ、自動的に改行しちゃうってのはある 目的に合った意味を持つタグやプロパティを使うか
目的に合った挙動をするタグやプロパティを使うか
基本的には、なるべく前者の考え方で選択するってのが正しい HTML/CSSの次に勉強するのは何がいいですか？ ハンバーガーで少しでもアニメ要素をつけるならcssだけでは無理？
ul {display:block} に transitionはダメなのね。 アニメの程度にもよるけど、ハンバーガーをタップして横とか上からヌルッとメニューが
出てくる程度の事なら、HTMLとCSSだけで出来るよ
transitionは一応、全ての要素に適用可能なので、当然ulでも動作する
transition - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/transition ぬるって出てくるということは
マイナスの場所にあってpositionとtransitionを使うような感じ？ そんな感じ
ハンバーガーをlabelで括って、隠しcheckboxのON/OFFで
スタイルを切り替え あかん、labelの見えないcheckboxって苦手な奴や・・・ メディアクエリが一部だけ適応されないんだけどどんな原因が考えられますか？
*で指定しても適応されるとことされないところがある cssセレクタ 優先順位
でぐぐって出てくるあたりとか コード書くときに pre と code で囲うようにしたいのですが、
そこに至るまでの親要素のインデントまで再現されてしまうようです。
この場合コードだけ左端までインデント削るのって正しい処理なのでしょうか？ >>628
そもそもインデントしなければならないなんてルールはないですしお寿司 >>633
edとimportentsとの戦いが始まっているのですが >>625
ありがとう、今全力で理解しようと思っていて
マイナス％まではわかるんだけど、「＋」や「～」のセレクタの接続詞で大きなものを扱うのが
すごく苦手意識が出る・・・
div class="container"に文字などをたくさん入れても縦スクロールしないのは仕様？ >>639
+と~は、まぁMDNとか読んで、何となくイメージ出来れば大した話じゃないから頑張って
containerが縦スクロールしないのはbodyタグにoverflow: hidden;が指定されていて
はみ出した分は非表示になるから
なので、そこをoverflow-x: hidden;と書き換えて、x方向のはみ出しだけ非表示にすれば
y方向のはみ出した部分は表示されるようになって、縦スクロール出来るようになる
但し、そうすると.containerの背景画像の下側が切れるので、.container内にある
height: 100vh;をmin-height: 100vh;に書き換えておくと、切れない >>629
そうだったんですね。
見やすさとしてインデントが必要なので、ちょっと不格好ですが pre のところだけ
インデント無しにします。 PCの時はpタグの中のbrは機能させて、
レスポンシブの時はbrは無視するようなことってできる？
レスポンシブ時に改行を多用されると、ガタガタするのよね メディアクエリでbrにdisplay: none;を指定 >>643
まじか、改行にもdisplay:none効くのか・・・たまげたなぁ
今、手が離せないから後でやってみる、ありがとう >>643
今やってみた、すげぇ。
あんた何者なんだよ・・・ >>643
いやいや、そんなことあるわけねぇだろ・・・と思ったら革命じゃねぇか。
もしかしてW3C関係者？ >>648
次はW3Cがずっと前から形骸なことを
>>544読んで学んでください 今やっている教材
position: absolute;
top: 50%;
left: 50%;
で親要素の真ん中に持ってきてるんだけど
その下にいる
transform: translate(-50%, -30%);
ってのはなんなんだ
translateの意味もググったし、挙動的にどうやらこれのおかげで画面幅縮めたときでも真ん中に来てくれるってのはわかったんだけど
理解力なさすぎてどういう理屈でそうなるのかわからん… へぇ、横レスだけど参考になったわ
親と自分に適用されるものが違うのね >>652
わー、ごめん
左右中央揃えは親要素のtext-align: center;でやってた……
でもわざわざありがとう大変勉強になる
>>651は
.txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -30%);
}
って具合に子供要素の中に全部あるんや transformでテキストを拡大するとchromeでは綺麗に見えますがFirefoxなどは滲んでしまいます。
chromeと同じようにテキストを綺麗に拡大させる方法ってないですか？
物理的なサイズを変えたくないためtransform以外(font-size等)の操作は避けたく… >>654
いや親要素はrelative以外いらん
子要素にabsolute topとleft 50% translate (-50%,-50%)だよ
その教材ほんとに30%って書いてあるの？なんかおかしいと思うよ まあ最近はめんどくさいから上下中央寄せはflexでやりがち gridの中の1つの要素をdisplay:flexにしたら
そのflex内の複数の要素が横幅が均等に縮小されないんです(デフォルトのnowrapのままなのに)。
どうやればその複数の要素が均等に縮小されますでしょうか？ >>658
ありがとうございます
粗方試しましたが改善しませんでした transform概念がない前ってどうやって中央寄せしてたん？ >>662
TRBLメソッドとか ネガティブマージンとか >>660
滲むって、どの程度なの？
どれだけ拡大してるの？ >>663
脳みそがウニってる時は上下paddingで挟んで
しれっと提出
とか table td {border: 1px solid #000}
に特定の列の左右ボーダーを消すって難しいな・・
神エクセルみたいなセルでレイアウトするのやめてあげて tdにnth-childかnth-of-typeで範囲指定して
border-leftとborder-rightをnoneにすればいいんでない？ >>666
nthを使うか
素直に全てのtrとth、tdにクラスつけるのが楽 >>664
70pxほどから、画面全体を覆い隠すくらいまで拡大します。倍率250倍程ですw 上げると荒れるなら元のフォントサイズを上げておいて縮小して納めておけばいいやろ どうしてbodyにfont-weightsしても全部の文字に反映されないんだぜ？ >>672
font-weightじゃないからじゃね？ 運用上の都合(テキストが変わる、レスポンシブで改行位置調整する等)と調整の楽さを選んでFirefoxは妥協することにしました
>>673
一応試してみたところtext要素で綺麗に表示されることが確認できました。ありがとうございました。
別の拡大する機会に使ってみようと思います。 >>669
colgroupじゃ子孫要素でもないtdに指定されたborderは消せないからなぁ >>667-668
ありがとう、nth-childにborder-right, leftをnoneにしたわ
でも!importantつけないとだめなのね
table td {border: 1px solid #000}
table td:nth-child(1) {border-right: none}
だと上が優先されるものなの？計算式がわからんかった それだと疑似クラスnth-childの分だけ、下の方が優先度が高くなるから
本来なら!importantは要らないはず そうなんだよなぁ、でもimpotantつけないと
消えなかったのが不思議なんだわな
開発ツールで見ると
疑似クラスが無い方が上に来てるのよね border-collapseは collapse、separate のどちら？
collapseだと分かりづらいけど
隣接しているnth-child(2)のleftのボーダー拾ってるって事でもないよね？ collapseね。
で、いまわかったスマン。
こいつがいたわｗ
table tbody tr:nth-child(2n+1) td{background-color: #f5f5f5;}
table tbody td:nth-child(1)
table tbody td
手前(tr)に疑似属性がいるから優先されちゃうのは仕方無いよね
交互の背景するのはあったほうがいいと思うし tdのセレクタにもtr挟めばええやん
あとそういう親セレクタきっちり書いていくやり方するならとっととsass使うべき もはやHTNLと同じ構造じゃないと不安にすらなる
いらんとわかっていても
tbodyまで書いちゃう んな面倒なことしないで
動かない時はセレクタ全部書く
これで解決しない場合は優先順位がなんかある
いんぽーたんと！
でええねん >>686-687
ワレ、なんやねん
クチから手ぇ突っ込んで肋骨カランコロン言わせたろか WordPressの勉強中の者です
トップページのヘッダー画像はスライドショーで色々と変えられるのですが
スライドショーで変わる画像上のキャッチコピーのテキストをランダムで表示させたいです
画像にキャッチコピーのテキストを載せた画像を作成すれば簡単ですが
文字だけをスライドショーのように変わるようにするにはどうすれば良いでしょうか？
PHPなのかJavaScriptなのかサンプルのようなものがあれば教えてください 画像が入ってるタグにbeforeかafterつけてそこにcontentsにテキスト入れてpositionをabsoluteつけて位置調整すればいいんじゃね >>691-695
有難うございます
いただいたヒントを調べると色々でてきました
CSSって動的なことも指定できるんですね・・ Word Press のスレで聞いてください！
漏れらは、スライドショー単独なら分かるけど、
それが、Word Pressに当てはめて使えるかどうか、分からないから よくあるheaderの左上にロゴ、右に2つぐらい端に寄ってるレイアウト
floatのleft, rightを使えばできるけど、
flexならどうやるの？
flexは左上詰めで流し込みながら間は気にしない、というやり方はやってきたけど、
左右に分かれるって全然わからん・・・ >>699
サンクス
space-betweenだと
● □□
な感じだと
<div>●</div><div>□□</div>
なグループにしないとダメよね？ ●にmargin-right:auto;か一つ目の□にmargin-left:auto;でいけそう Google Fontを必要な文字だけ使う方法で
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&;display=swap&text=Hellow World” rel="stylesheet">
上記のように「Hellow World」と入力した文字だけ使う場合に
以下のように被ってる文字だけ無くしたいのですが
Hellow World
↓
Helow Wrd
ないか良い方法ありませんか 「Hello World」以外にはGoogle Fontが適用されないようにしたいって話？ >>704さん
そうです
「text=」で同じ文字を設定しても良いのかもしれないですが、できる限りスッキリさせたくて。 >>703
uniqが使える言語で
その部分を吐き出せばいいんでね？ 横だけどGoogleFontsって特定の単語だけに適用ってできるんだね
要所要所にclass名付けて適用させてたわ できるよ
text= の後に使う文字だけ羅列していく >>703
被りは削っておｋって記事見つけたよ
実際に試してみたけど大丈夫そうだった >>706
そういう能力がさっぱりなのです
>>710
ありがとうございます
修正が来た際はいちいち削るの止めます >>711
むしろtext=で指定した文字だけの書体セットをサーバ側が用意して
それをダウンロードするシステムなんだから
文字が被ってても何も変わらないんじゃない？
何もしなくていいんじゃないかと もっと簡単なやり方はないものかな
読み込み時の速度にどれぐらい変化があるのか悩ましいけど一応下記でできたよ
phpの変数へテキストを格納
preg_split等で1文字ずつに細切れにした配列へ格納
array_uniqueで重複した配列を削除
implodeで配列を一行テキストに変換
軽量化気になってGoogleFonts関連の表示確認試してみたけど地味にめんどいね
PCに該当フォントが入ってたら登録漏れているのに気づきにくい
どうやって管理してるんだろ？ Google Font適用させたい文字列だけspanで括って
そこだけfont-family指定するんじゃダメなの？ >>709
いやそれは
使いたい文字だけのフォントセットをダウンロードする方法でしょう
要所要所にclassつけて適用させなくてもいいってこととは関係ないじゃん もちろんclassでfont-familyは変えないと
日本語webフォントを複数利用してた時はやってた
見出しだけフォント変えたい時とか
日本語フォント複数だとどれくらい重たくなるのか知らんけど >>713
文字被りしてた方がマシな手間ですね
速度計る方法わからんからなんとも言えないですが… >>720
被ると何か問題あるの？
まさかtext=abccと書いたら
4文字分になると思ってないか？ text=Hellow Worldでもtext=Helow Wrdでも全く同じスタイルシート帰ってくるんだから高々数バイトのための無駄な努力だね というか、本来はtext=以降は単語じゃなく文字の羅列でいいし
単語間のスペースすら要らないんだけどな
でも体感できるぐらい軽量化するなら、せめてMB単位じゃないと
ただの自己満だわな >>723
いやいや
その羅列に変換しようと
謎の頑張りを見せた質問が>>703
んで、そんなことする必要がないよ
って話をしていたところ text=を使用してた時はuniqからsortでキレイに並べてたな、80文字くらい
単なる自己満足で意味はないw >>722
わざと間違えてるのかよくわからんボケだな >>725
sortまでしちゃうところに自己満足が感じられていいな Bootstrapのフォームで
[ ]人
という入力項目を作りたいと思います。
<input type="text" class="form-control">
<label>人</label>
として、どうすれば横並びにできるのでしょうか？ 昔先輩に「テスト用にランダムなユニークID作ってくれ」と言われて
manko, chinko, unkoとかたくさん組み合わせて作ったら
「頼んだことに対して間違ってはないけど、やり直してくれる？」と言われたわ CWVで高得点出そうとすると色々試したくなるのは分かる
これで得点上がるようならクライアントにアピールできるしな
textが省略なしのHello Worldだったとしてもwebフォント側ではダブり文字を削除する処理はするだろうし単なる文字数減以上の効果はあるだろう
まあ体感できるかと言われると微妙だが得点が変わらないかどうかはやってみないと分からん >>732
話題になってはいるけど
影響度は大きくはないみたいね
でっていうになりそうで怖い >>728
何もしなけりゃ横並びだろう
両者ともインラインだし >>728
というか、それじゃlabelが効かないから
inputをlabelの中に入れよう >>735
意味がわかりました。ありがとうございます。 Edgeでローカルフォルダのリンクを開く時に
Edge内でなくIE11みたいにWindowsのエクスプローラー画面で開くにはどうすれば良いですか？ >>738
Edgeで「設定＞既定のブラウザー＞『IEモードでサイトの再読み込みを許可』をON→再起動」
ローカルファイルをEdgeで開いて「メニュー＞その他のツール＞IEモードで再度読み込む」 >>732
是非試してくださいな！
結果待ってますわ 上からsection並べていって、ページによっては
margin-bottom: 30pxを付けるときがたまにあるんだけど、
1. わざわざ空のsection class="bottomSpacer" なるものを設けるか、
2. よくあるcssに mb30{margin-bottom: 30px}を使うか
3. インラインで書く
迷うわ、mb30とかの羅列されたものを見ると使わないスタイル羅列するのもなぁと思ったけど、
複数クラスにも慣れてきた今、それもありなのかなと >>741
羅列しなきゃ良いじゃん
コスパの問題もあるんだけど
必要な要素に必要なスタイルを書くのが基本だよ
羅列するのはその基本から外れて
CSSが膨れることより、逐一スタイルを書く手間を省く方を取った結果のひとつでしかない モジュールの基本設定からスタイル微調整したい時の話をしてるんでしょ？ という事は2って事で
偶にあるならmb30ってクラス作ってそれを使う方が自然だと思うのだけど 数字決め打ちにしちゃうとレスポンシブのときカオスになるしmb～みたいな汎用クラスはあんまり使いたくないな >>747
ど素人のためのmarginとpaddingだよな >>747
この手のルール覚えてないといけないのが面倒なんだよ margin-inline、margin-blockに移管せえよ 理系だけってほど幅は狭く無い気がするが
デザイナーや3Dモデラーは縁があるだろうし >>754
意地悪しないでよw
x,yだと何がいかんの？
overflow-xとかevent.offsetXもゾッとしちゃうのん？ それだけでなく
translate等もXYZで縁があるだろ xやyの字形が苦手、とか
w
x
y
て書くとやらしいから、とか、、 あー、数学が全く出来なかったんだろう
x, y は数学を思い出すので恐怖心を覚えるとみた UDPストリーム表示に付いて教えてください。
カメラ映像をVLCプレイヤーのストリーミング（udp://@192.168.12.123:1234）にて表示できています。
小学生が持参するiPadでも見させたいので、HTLMにて記載していますが表示しません。
<html>
<head>
<title>HTML5 Live Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="udp://@192.168.12.123:1234">
</video>
</body>
</html>
videoはUDPストリームに未対応でしょうか？
他に方法が有れば教えて下さい。 >>764
ブラウザではUDPはサポートされてない、はず
なのでQuicTransportを経由する必要がある
https://sbfl.net/blog/2020/07/31/web-transport-introduction/
けどそれをしたところで
たぶんブラウザの設定も必要になっちゃうので
キッズのiPadでどうにかなるとは思えんな ストリーミングだと色々面倒だよなぁ
自分ならお手軽にYouTubeの限定公開しちゃうわ 英単語-x
英単語-y はわかる
mx, my, px, pyは略し方が短くしすぎて、別の単語になってるし、ということを言いたかったんじゃないかなと ブートストラップにメールエクスチェンジャ、わたし、ピクセル、Pythonが含まれている・・・ >>764
iOSのブラウザはHLSしか対応してないはずだからVLCだけでお手軽配信というわけにはいかないかと https://jsfiddle.net/rL8dh53w/
横並びのために親要素にflex、日付・サブテキストを下付きにするために子要素にもflexを指定して上のようなレイアウトを組んだのですが、この状態でテキスト部分を上揃えにするにはどうしたらよいでしょうか？
意図せず左右の要素間でテキストが中央揃えになってしまって困っています。 パソコンで見ると横に広がってたり左右のマージンが取って無かったりと
レスポンシブ未対応のサイトが増えてるんですが、Web制作時に要件に入ってないものなのですか？
コンテンツによってはスマホやタブレットよりパソコンでの閲覧が多いサイトも有ると思うのですが、（特に企業）
レイアウトがガタガタだと商売に支障をきたしそうなものですが いや現在の閲覧率はスマホ9に大してデスクトップが1の割合だ >>776
そうです
やっぱdiv1個追加するしかなさそうですよね
ありがとうございます 不思議な書式だなぁと思ったらscssか
いずれ自分もcssなんて使いにくいとか言ってるんだろうか・・ 俺もタブレット基準でパソコン捨ててるな
昔ながらのPC閲覧の感覚でウィンドウの下に固定サイズ広告出すような無料サイト、早くなくならんなか タブレットってタブレット用に見れるよりPC用そのまま見れる方が需要あるような気がする
個人用のPCは持ってないけどPC用見たいとかそんな需要なんかね
大手でもPC用をタブレットで見せてるよな みんな普段、メディアクエリでレスポンシブ化する時って
PCベースで作ってメディアクエリでモバイル対応させてる？
それともモバイルベースで作ってPC対応させてる？ どっちもだめ
開発ツールで自由に幅変更できるでしょ
中途半端から極端な幅まで定期的にランダムに変化させながら開発する
おかしくなったときに手遅れになる前に気づける そういう話でしょ
実際いろんなWeb閲覧デバイスのファクターはくっきり別れてるわけじゃないんだから
具体的なもので試すのは本当に最後だけにして開発中や最初は
あえて「何物でもない」環境を再現して抽象的に進めるのがコツだよ PC作ってからモバイルファーストにしてPCのレイアウトに収束するようにしてる >>781
デザインがどっちの発想で作られてるかに準じる そもそもモバイルにはノートPCなども含まれる。
モバイルファーストとはレイアウトの話というよりは、
通信やバッテリーへの気配りをするということを勘違いしてはいけない。 >>786
モバイルファーストって本来は読み込み順とか優先順位じゃなくて
デザイン段階からの設計思想の話だったんだけどなー 今でもそう思われてるでしょ
"デザイン"と表面的なレイアウトの区別が分からない人以外は >>788
通信量とかの配慮はPCモバイル問わずにCWV対策してれば自然とクリアしてるでしょ モバイルファーストで作るとPC用にしたときに間延びすること多くて
PC用作ってからモバイルファースト意識しながらモバイル用作ってる >>784
ごめん。そういう話じゃなかった。
開発手順はともかく、結果的に出来たモノは、どちらがメインになってて、どちらをメディアクエリ使って
調整してるのかな？って。
もちろんデザインとかCSSの書き方とかケースバイケースで、メディアクエリ使わないってこともあるだろうし
メディアクエリでの調整が最小限になるように書くとかってこともあるだろうけど、メディアクエリを使う場合とか
使わざるを得ない場合とかに、PCとモバイル、どちらがメディアクエリで調整される対象にしてることが
多いのか？という単純な興味で質問しました。
といっても、ここで多寡を判断できるものでもないですが、色々と参考になりました。
答えてくださった皆さん、ありがとうございました。 >>778
SASS なら、ネストで書ける
ul {
display: flex;
> li { border: 1px solid #000; }
}
出力
ul {
display: flex;
}
ul > li {
border: 1px solid #000;
} >>797
必ずメディアクエリ両方同時に書いて
共通な部分だけ外に出す方式
極論すれば
同じものを変形させてる意識がない >>778
使い出したらすぐに
SASSなしで生CSS書けない軟弱な体になるよ( ；∀；) dart sassのuseやforwardの使い方がいまいちぴんと来ない
node sassのimportが使い勝手良すぎると思うんだがなんで廃止になるんだろうっ >>801
ネームスペースとスコープの概念がもたらされるので
数あるパーシャルファイル毎に
あれ？この変数名使ったっけ？
と考えなくて良くなるんだよ
ほんで@forwardは多段インポートしたとき用 >>802
レスありがとう
以前ネットで検索して読んだりしたけど良く理解できないんだなあ
使って理解していくしかないですね >>793
量もそうだけどどちらかといえば不安定さを
SW使って吸収してるかってことを言いたかった imgに入れる画像の解像度は全て72や92に統一しておいた方が良いのでしょうか？
ブラウザはpixelサイズで認識するとのことで解像度は関係ないみたいですが
とはいっても一応は揃えておくものですか？ 72に揃えないと無意味にサイズがでかいゴミ画像ができあがるぞ ん？解像度が違ってもピクセルで取り扱われるのでは？ retinaとかの高解像度ディスプレイで問題無く表示されるんなら
いいんじゃない？ レティーナは画像に埋め込まれたdpi参照しない定期 実際92と72の画像つくって表示させてみりゃわかるだろ 解像度関係ないものだと思ってたわ
92dpiと72dpiの同一px数の画像を作って見比べるって事？
レティーナ持ってないので確認できそうにないな ブラウザが画像解像度を解釈できないのにRetinaなら高解像度で表示されるわけないだろ 印刷ではなくweb媒体のみでも解像度が影響するって言ってる人は
単位がmmなどのpx以外に設定している想定って事でおｋ？
>>806とか >>820
俺が言ったのはファイルサイズだっつってんだろアホなのか 画像サイズがなぜかpxででかくなるんならそれこそスマホ用とかに使えることになるだろ
死ねカス >>805
というか画像はtinyPNGとかでいいから最適化しよう
解像度72dpi以外は破棄されて72になるから webpとやらはどうなの？
ファイルサイズは小さいと言えど
googleから誉められたい専用の形式？ でかい画像使うときはwebpにし始めたよ
次世代フォーマット戦争が終わったので一種類ならやってみるかなって感じ
googleのスピードインサイトは小さい画像だとwebpにしても大して圧縮されないのを無視してとにかく次世代フォーマットにしろとか言ってくるが >>824
ieとios14未満が死に絶えるの待ってる なるほど、pdfが息絶えるのを待ってるmicrosoftのxpsみたいなものか webpはweb向けにいい感じ
容量小さいしノイズ少ないし透明化できる estee lauder anrcadeのサイトすげーなこれ・・・
canvas使てこんな自由にできるんか 全部動画にしてドラッグで再生位置変えたら簡単だなと思った
実装者は あれこれやれば作れそうって考えつくだけで凄いわ
自分はどういう事をやったら実装できるのか分からないから凄いとしか思えなかった
自分が出来る範囲なんて子供レベルなんだと ちゃんと要件細かく落とし込まれてたら
どういう事をやったら実装できるのかは分かるでしょ
実現したいことからこの完成図を想像できる人は貴重だが <table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="./test.png">
<div>てすとてすとてすとてすとてすとてすと</div>
</td>
</tr>
</table>
このようなテーブルがあって
divで囲まれているてすと・・・てすとの幅がtest.pngの幅より大きい場合は
tdの幅を広げないで折り返して表示させるにはどうやればいいんですか？
任意の画像が入るので画像の幅は固定値設定は無理です tdの幅は常に画像と同じ幅になるようにってことです >>839
td {
width: min-content;
} >>841
それでやったけど
て
す
と
のように縦書きになってしまいました。 >>843
間違えてdivにwidth: min-content;つけちゃって今度はtdにつけたら
横画書きになったけどテキストが画像の幅を超えてしまって折り返ししませんでした。
画像は幅100pxです。 ブラウザによってmin-contentはテーブル等では動かなかったりするから
>>841にdisplay: block; か inline-block; を追加するといいかも というか、imgに対してdivが説明文ってことなら、table使わないか
tdの中をfigureタグとfigcaptionタグ使った方がいいかも
<figure>
<img src="test.png">
<figcaption>てすとてすとてすとてすとてすとてすと</figcaption>
</figure>
figure {
width: min-content;
} min-contentが使えないブラウザ向けに、 ↑のHTMLソースに対してfigureをdisplay:table;width:100px;にすれば同じ表現になるんじゃないかね
100pxはミニマムの数値に変更すればおk 自己解決しました
tdのwidthを0pxにしたら画像の幅までtdの幅が自動で伸びて
テキストも折り返し表示されるようになりました そこまでカッチリ決めたかったらCanvas使お
HTMLは柔軟な表示を許すから価値がある >>849
edge,chrome,IEでためしたけどテキストはみ出なかったよ
半角英数字の長い文字列だとはみ出ちゃうけど >>850
canvasだと個々の画像やテキストにリンクを貼ったりフェードインとか
するのが手間かかるから避けたい >>854
IE：はみ出ない
firefox：はみ出ない
chrome：はみ出ない
edge：はみ出る
safari（iPhone）：はみ出る edgeで画像がはみ出てなかった理由が分かった
隣にtdを３つ作ってそれぞれに画像とテキストを入れてたので
最初のテキストがはみ出ないようになっていたけど
td３つ削除したらはみ出ていた >>857
なるほど
質問者ではないけど、そうなるとtdをwidth:0とmin-content以外の方法って何だろ？
IE対応考えなきゃ、CSSだけでいくらでもやりようはあるんだけど >>847の方法でEdgeでも問題なかったけどtableタグ使った時と何が違うのかわからん 画像幅に合わせて、親要素をwidth: 100px固定にはしたくない
って条件だからな >>860
見た目が同じでも、もしimgと下のdivに画像と説明文の関係があるなら
figureとfigcaption使う方が、より適切ってだけだよ
何ならテーブルセル1つだけで表組してないんだから、table使う意味なんて
があるのか？っていう話でもあるよね
見た目が同じでいいなら、table使わないでdivだけでもいいわけだし >>862
いや、タグの役割的な意味でなく、
CSSでdisplay:tableにしたやり方では崩れないのにtableタグで崩れる違いはなんだろうって意味です >>861
そのためのdisplay:tableでしょ？
100pxはあくまでミニマム値で中の要素がそれより大きければ自動的に広がるよ >>864
そういうことか
失礼しました
試してみたけどedgeはdisplay:tableにしてwidth:0だとはみ出るけど、width:100pxじゃなく
width:1pxでもはみ出ないね
結局、edgeの場合はwidth:0だとセルとして存在しないって認識されるから、はみ出て
width:1pxでもセルとして存在するなら、子要素のwidthに合わせて伸張するってことなのかな？
しかも、display:tableにしておかないと伸張しないっていう
というか、tableだから伸張するってことなんだろうけど
ということは、全ブラウザ対応の場合はwidth:0じゃなくwidht:1px以上の幅を指定するってのが
正解なのかも？
https://jsfiddle.net/au43v86n/ >>853
当たり判定があるパスは
別の裏Canvasにも描画するようにしておく
パスごとに色を変えておけば
ある特定のポイントがどのパスを指しているかが簡単に取れる
アニメーションは色々方法があるけど
例えばWebAnimationAPIが使える
これはView層がDOMのときは直接適応して使えるし、
DOMと分離してタイムライン管理と値の計算だけをやってもらうこともできるので
View層がCanvasでも使える
もちろんそのへんフレームワークとかを作ってもいいけど
自力で書いてもこのくらい１日で作れるよ >>862
figureとfigcaptionはIEだとはみ出たと思った よくあるページの一番上にあるコーポレートカラーの横一文字バーってどのタグを使うのがベスト？
headerタグのnavより上の部分だけど、
sectionなのか、divでheight指定してbackground-colorとかデザインのためだけに何を使えば良いの？ >>870
なんでも良いんじゃない？
自分はheaderを使うことがほとんどだけど >>870
凝ったグラデとかじゃなきゃborder-topじゃね
それか::before >>870
htmlタグでもbodyタグでもいいんでない >>871-874
ありがとう、いろいろ試してみます 横一文字バーってどんなのか教えてほしいです気になって仕方ない 横一文字を「よこ いちもじ」って読んでしまって暫く頭を傾げたけど
「よこいちもんじ」って読むと想像しやすい
fixedにした追尾ナビ等の上に付けたボーダーの事じゃね？ livedoor blogの一番上みたいなやつじゃないの？
こんな感じの
ttp://blog.livedoor.jp/mikaiketsujiken/ 870です、そういうのです。
文字は入っていない一番上にあるものです 1年程離れてたんだが最近の流行りが分からんくなったので何でもいいから教えてくれ
ちょいちょい耳にした程度で把握してるのここまで
環境 vscode scss
ベンダープレフィックスつけるのやめた IE対応やめた
display: grid使うの結構見かける
一昔前はボタンマウスオンすると透明度が上がる効果が多かったが、最近は左から右に背景色が動くアニメーション多いなど
この程度しか把握しとらんの プレフィクスつけるのはやめたらいかんで
まだ必要なプロパティはある うちはもう書かんな。PostCSSとAutoprefixerで十分じゃね？ autoprefixerでプレフィクスつけてるじゃん
まさかscss内にプレフィクス書いてたのか node sass非推奨になってdart sass推奨@import使えなくなってかわりに@useや@forwordに >>866
canvasって幅は固定値しか使えないので％指定使えないしstyleで幅指定すると
拡大されたりするので使えん >>888
描画のタイミングでキャンバスがどのくらい拡大されてるかを求めてばいいだけ
描画するオブジェクトの位置や幅が絶対的な物なら拡大分掛ければいいだけだし、
％指定も取得したキャンバスの幅に対して求めればいいだけだから
全然手間かからずそれは実現できるよ >>885
PostCSSでググったらこれが書いてあって心理を読まれてたｗ
・次のCSS？
・またSassみたいなやつ作ったのか
・もうSassで終わりにしようぜ（覚えるの辛い） 誰か今っぽいサイト教えてくれんかの？
結構LP系は昔のコテコテのまんまのが多いな
キャンペーン系は結構目新しいデザインや技術使うが、期間おいて後から見ると酷く劣化してるのが多い。
自社更新にでも切り替えるのだろうか。
上場したての新興企業やスタートアップ企業のWEBサイトは結構参考になる事多いが急いで作った感も感じる >>890
scssの変換もやろうと思えばできるだろうけど、SASSの代わりというより
併用する使い方の方が多いんじゃないかな。 今っぽいサイトっつっても、デザインに関しては1年やそこらで
そんなに大きく変わらん気も
技術的に新しいものやトレンドなんかは、とりあえずこのスレでも
紹介されてる某サイトでも購読しとけばいいよ 親戚が亡くなってこの葬儀場のサイト見ておいて
って見たら1ページものだったわ
スマホで100ページ分の縦ぐらいあって
リンクは全てページ内
こういうのが流行っているのか手抜きなのか雑多というかカオスというか >>891
キャンペーン系は初期しか金出ないから
運用フェイズになると
代理店も制作会社も適当になる、みたいな >>894
PCメインでスマホ意識してない古いサイトを、とりあえず無理矢理
レスポンシブ化だけして、一応スマホでも見られるようにしてみました
みたいな感じだったりして 1ページいくらの制作会社に持ち込んだんじゃねえの
その結果1ページ内に盛り込んだかランサーズあたりの素人に依頼したか １ページいくらで引き受けますよ！って言ってそんな仕事持ち込まれたら地獄やん >>883
Ruby on Rails 6 では、Webpacker, Sprockets を使う。
SCSS もCSS へ変換できるし、Autoprefixer も使える
VSCode なら、拡張機能のLive Sass Compiler とか
Autoprefixer も、webpack, gulp, npm scripts などで使えるのでは？ https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Using_images
var img = new Image(); // 新たな img 要素を作成
img.src = 'myImage.png'; // ソースのパスを設定
jsでこんな感じで事前に画像を読ませてsetTimeoutで既存のimgのsrcを書き換えているサイトがあるんですが
(ネットワークモニタで事前に読んでいるのを確認)
greasemonkey上で新たな画像を読んだ時点でそのパスを取得する方法ってありますか？
読み込ませる部分はfunctionとなっていてimgのオブジェクトにはスコープ的に見えないと思います。 ありがとうございます。
ネットワークログにはあったのでDOM以外のこの辺からとる方法があったらいいなと思い質問しました。
諦めます。 width:800、overflow:hiddenのdivの中に画像があって
left:-200で画像の座標を左にずらすとする
このとき画像の隠れた部分をこのdivの中の右側に表示するというのは
cssでできたらどうやればいいんですか？ divの幅が分かってるなら、leftにdivの幅分の値を入れれば？ >>901
ありがちょ
Live Sass Compiler つこてるわ やってみたけどなんかズレてるかな
同じ画像並べて親要素にoverflow: hiddenでtransformでずらす
divの幅と画像の幅が同じなら自然になるかね
https://jsfiddle.net/vyLx45t8/1/ なんだ、そういう話か
>>912
それにimgのwidthを.boxの幅の300pxにすればよさげ >>913
質問者じゃないから間違っているかも
こういう質問かなと思って >>914
きっとそういう話なんじゃない？
見た目が同じでいいならbackgroundに高さ合わせで画像表示させて
positionを左にズラしてX方向にリピートさせてもいいかも
https://jsfiddle.net/cuqf7tm6/ remって使えそうでいざって時にダメだな
パーツを切り出して他のサイトに使いまわしたいときなどに一気に死ぬ 質問誤解されているみたいだけど
３色の１枚の画像を例にすると左側の隠れた部分を右側に出したいっていうのはこういうことです
なのでoverflow:hiddenは必要です
同じ画像を２枚用意して表示するしかないのかな？ こういう感じです
絵を見る前にエスパーするとCSSでは無理
強引にbackgroundだけでにすればやってやれない事はないけど 「marquee html」でググると検索結果の
約 35,700,000 件 （0.44 秒）
の部分がカタカタ動いててワロタｗ
Google粋だな >>921
右端に画像を置くためのボックスを.image
それをラップするボックスを.wrapとする
<div class="wrap">
<div class="image">
<img>
んで基準幅をたとえば1000px
画像を100px四方
外に50pxはみ出てるとすると
.wrap{
position: relative;
width: 100%;
}
.image{
position: absolute;
right: 0;
top: 0;
width: calc(50px + (100% - 1000px) / 2);
height: 100px;
overfrow: hidden;
}
img{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
}
みたいな感じ
右端でやるときはimgをabsoluteにする必要はないんだけど、左端でやるときは右に寄せないと上手くいかないので必要になる 画像加工するか
真ん中に一要素、beforeとafterで両隣にimg。
それをz-indexで後ろでどうだろう あ、真ん中の要素が前か
まぁ要するに重ねてみればどうかね だったら同じimg二つ置いて左右に振り分けりゃいいだけだろ
https://jsfiddle.net/xzhb7054/ >>943
No No No
怒ってないよミキコ
わたし全然怒ってなぁ～いよ
ミキコ smile again? なんかカッコイイ感じで使えそうなアニメーションない？ >>954
画像にマウスオンした時の効果で
めっちゃ使いやすいの頼みます >>956
そそ
さっき丁度自分もそのサイト見てたわｗ
ありがと IE意識しなくなって良くなったから何でもし放題になって
今まで除外してたプロパティも覚えなおさなあかんから余計大変になった感もあるなｗ なんか最近結局こういうの見てると
https://evering.jp/
昔のflash全盛みたいになってきたと思わん？
こういうのが発展、競い合っていって、最後は映画のプロモーションみたいな映像クリエーターの仕事みたいなサイトになっていったよな？
んでAppleの流れをぶっ壊してシンプルイズベストみたいな感じでflash廃れて簡素なサイトが主流になったばっかだったじゃん。
この流れ繰り返しそうだな。
クリエイターへの要求がエスカレートしてくからまあそれでいいんだが たしかにもうflashサイトだわな、ウザ度がmaxだわ。
逆にデジタルネイティブ世代には新鮮でスゲーみたいな感じになるんだろうか そういうのもだけどiPhone12のページも腹立つ
スクロールしても下行かないでアニメーションするやつ
https://www.apple.com/jp/iphone-12/ mix-blend-modeについておしえてちょ
https://codepen.io/dddi/pen/oNWqNEe
hoge2の重なってる部分の文字色をhoge1同様に白色にしたいんだが、どうしたらいっすか？ >>963
おお、いいねぇ！！
あんがと！！まさにこういう情報を交換したかったわ
Sarahとか好きだわ そこまでいくと
ソースみてもどうやってつくるのかさっぱりわからんわ…
jsとcanvasとか使ってるのはわかるんだけど 最終的に行きつくのは、TVのCMとか映画のプロモみたいなクオリティで
結局そうなるとガチレベルの映像制作のスキルが無いと太刀打ちできないんだわな
水の液体が手の形に変化して指にリングがハマるとかこんなの映像制作もできなきゃ無理ぽ そんでそのうち効果音とか音楽流し始めるから
シンセサイザーで音作ったり簡単な曲作れってなるぞｗ（JASRACめんどくさいからオリジナルになる） >>970
すごすぎワロタｗ ご多分に漏れずボタンクリック時の効果音もある
もうflash後期レベルやん 歴史は繰り返すなー
また誰か止めてくれないともう俺の立場なくなるわｗ よくわかんねえよ化粧品のサイトなのにミニゲームいくつか用意されてるしさなにこれ フラッシュ時代もここまで凝ったのは
エンジニアによろしくコースだけど
今こんなのコーダーがやらんといけないの？ >>968
うち親会社がCM屋なので
映像をインタラクティブにする相談結構くるわ
俺らが本能的にこれは無理だとか
これは大変そうとか考えて
最初から検討もしないようなアイディアが
遠慮無く来るからなかなか楽しい flash全盛時代と違って今はyoutubeとかで動画見ること増えたしリッチな表現をwebでやるより動画でいいじゃんとは思うけどな
リッチな表現ってユーザー側に学習コストあるじゃん
よほど大手で有名商品扱ってるようなところじゃないと見るのも面倒くさがられそう
時間単位あたりの得られる情報量が減るのはデメリットよね 5Gが主流になって重くなくなったら価値観どうなるん？ >>978
恐らくこのレベル作れるなら普通のサイト作ってもかなりイケてる感じになるだろうな
ブランディング用の営業用サイトとしても使えるし、予算も高いだろうから作れるに越したことないわ 動きがあるとおっとは思うけど冷静に見るとそれおしゃれな動画埋め込みと画像でよくない？ってこともあるしなあ
でも新鮮さがあるうちは話題性があっていいかもしれない
動きのあるサイトばかりになると話題性が薄れてコストに対してリターンが厳しくなりそう エゴだよそれは！
広告屋の発想だな、ユーザーのことを考えないんだ！ <div style="width:90%;height:300px;border:Solid 1px #0000ff">
<div style="width:100%;height:100%;boder:Solid 20px #ff0000">
</div>
</div>
外枠から内枠の線がはみ出てしまいますが
内枠の幅に合わせて外枠の幅が伸びるようにするにはどうすればいいですか？
外枠はtableにした方がいいんですかね？ boderになっとるぞ
box-sizingの話け？ 幅500pxのテーブルでセル１を200pxセル２を300pxにする場合
tableにstyle="width:500px"を書かなくてもいいですか？
<table>
<tr>
<td style="width:200px">aaa</td>
<td style="width:300px">bbb</td>
</tr>
</table> >>986
ぉぅ、980踏んだら立てるのか。
ということで立てたぞ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
https://mevius.5ch.net/test/read.cgi/hp/1627551978/ >>987
子のdivにbox-sizing: border-box; >>991
書かなくてもいいけど、それだけじゃtableの実際の幅は500pxにはならない tableなんて全部cssで制御しないとレスポンシブ無理だろ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 112日 16時間 39分 25秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
