HTML/CSS のどんな質問にも優しく答えるｽﾚ 44
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 43
https://mevius.5ch.net/test/read.cgi/hp/1583911920/
■関連スレ
Webサイト制作初心者用質問スレ part251
http://mevius.5ch.net/test/read.cgi/hp/1564414228/l50
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html form中の内容をget、postで送るときに一部のデータだけ送ることができないかということで悩んでいます
form中にinput[type="text"]な要素A、Bの2つがあり
getボタンを押したときはAのみ
postボタンを押したときはA、B両方を送信できないかと考えています
Bの方はそこそこ長い文が入る可能性がありgetにBが含まれるとURLが汚くなってしまうのが嫌でこのようなことができないかと考えました
自分で調べてみたところJavaScriptを使う手法は見つかったのですが非JSな環境でも動くようにしたいと考えています
よろしくお願いします それはいくらなんでもスレ違いなので
余所でやってください。 getとpostでそれぞれformつくりゃええがな >>5
すいません
HTML or CSSに関係したスレかと思って質問してしまったのですが
HTML and CSSのスレだったようでスレチ失礼しました
別のスレに行きます
>>6>>8
スレチにも関わらずありがとうございます
試してみます 家に帰ってママのおっぱいでも吸ってな坊や
HAHAHA！！ wordpressに<header>タグというのがあるみたいなんですが、これはワードプレス特有のものでしょうか？タグというのは自分で定義出来るんですか？ ハッ！狂ったベイビーはママのおっぱいでもしゃぶりながらお家で寝んねしてな！ >>19
それ必要なんですか？
divでいいんじゃないでしょうか？
SEO的にメリットがあるとか？ >>20
お前がそう思うんならそうなんだろう
お前ん中ではな！ （くわっ >>20
とかいって<html>タグとか<body>タグは使っちゃうんだろ？
なんでかな〜？ 構造化できない人はぜーーーーんぶdivで良いんだよ^^ >>20
別に使わなくても動くし、使いたいやつは使うだけ。
それがHTMLファイブ。 憶測だけどheaderタグで書いとけばコード見た時にどこでヘッダー書いてあるか一目瞭然だからだろう
ちなみにfooterもあるよな 知った風にマウンティング取ったり小難しいサイト貼ったりしてても
section、article、asideあたりの使い分け方を明確に説明できるやつなんてこのスレにはいないんだよなぁ 全ては視覚障者の為だけに構造化やるんだぞ
それ以外は特に何も影響ないんだからな
わかったかこのやろう 英語圏のやつらですら
article、asideの使い分けできてないので >>28
ここの連中は説明出来ないんじゃなくて説明する必要がない
そんなもんそれこそ少し調べりゃ腐るほど出てくるしurl貼りゃ良いだけ
わざわざここに自力で書き込むだけ時間と労力の無駄 非js環境なんていくらでもあるだろ
CMSの投稿部分みたいな独自システムとか楽天とかamazonとか HTMLで正しくマクアップするのはいってみりゃ
車も走ってないような田舎の島において
真昼間に信号が赤だから誰もいないけどルール守って渡らずまつ感じだな
渡りたれば渡ればいいし、渡っても別に何か起こるわけでもない >>37
あるに決まってんだろ
こちとらペチパーだぞ そういやpuppeteerか出来てから
あんまり使わなくなったなあcurl
やっぱヘッドレスブラウザが便利だわ curlとは用途が違うだろ
api叩いてみるのにpuppeteerやらplaywright使ってたら笑う なんでー
つかAPI叩くのにはsequelとかのGUIツール使っちゃうなあ
パペッティア？読み方わかんないけど
ヘッドレスブラウザは確かに便利やな
シェルのワンライナーでいきなりは使えないから
多少面倒はあるけど 間違えた
sequelはdbのフロントエンドだった
postmanだな、API叩きに使うのは > シェルのワンライナーでいきなりは使えないから
> 多少面倒はあるけど
やっぱそう思う？
シェルから簡単にブラウザレンダリング後のhtml取れたら便利かなと思って簡単なラッパーコマンドをnodeで作ったことあるんだよね…
需要あるのか…？
たいしたもんじゃないけど開発再開しようかな。 >>45
自分も同じようなの作ってつかってるw
みんな考えることは同じだなあ >>4とは別人だが>>11試してみたら動かなかったな 漏れは、VSCode の拡張機能・Rest Client を使う
マウス操作だから、テストしやすい rubyガイジと同じ拡張機能使ってるなんて癪だわ… 画像の下に2カラムで文字を表示させることは可能でしょうか? 画像の左下にタイトル 右下に説明を入れたいのですが >>51
<p><span>タイトル</span><span>説明</span></p>
こういう書き方もあるけど？ >>52
できました！ありがとうございます
spanで できるんですね >>53
後はクラス要素入れて微調整したりしてくれよ ちょっとtableで聞きたいんだけどtbodyで囲んだtrを横並びに置くって出来るの？
行１
行2
だったときに
行１行2
ってすること >>59
こういうこと？
https://jsfiddle.net/fn8tmb0z/
trをinline-blockにしてもいいけど
どちらかといえばflexだよね >>60
ついでなんだけど、trの中にもう一つthとtdでやった方がいいんじゃないかって思ったんだけど
このflexでやるメリットはあるの？ ttps://my-best.com/7996
このサイトのランキングでテーブルのところで使ってるんだけど 表としてのセマンティクスに拘らず
帳票のようなある意味レイアウト目的の表になるなら
正しさは求めてもしかたない
望んだ形になることだけを目指して
HTMLとCSSを存分にごにょこにょするしかない >>62
そもそもthとtdじゃタグの意味が違うし、単に横並びにするためだけにthを使うべきじゃない
https://developer.mozilla.org/ja/docs/Web/HTML/Element/th
>>64のサイトでは、ちゃんとthをヘッダー（見出し）として使ってる
thを使わずスマホ対応も考えるなら、flexの方が少ないコードでフレキシブルにできて何かと便利
https://jsfiddle.net/0tmqd369/
th使ってフレキシブルにするなら、こんな感じ
https://jsfiddle.net/4o586dp2/
いずれも画面幅が変われば縦並びなる >>66
そのサイトはwordpressとbootstrapで出来てて、3カラム部分はfloat使ってるみたいだけど
どうやって真似て作って、どの辺が上手く行かないの？ >>68
worldpressで真似て作ってるのですが横に均等に羅列ができません
1カラム33%ずつで3等分されてるようですが… >>67
いやそういう事じゃなく、trにthとtdを二つ作れば横並びになるし最後のtrだけ一つ作れば２・２・１綺麗にテーブル出来るじゃないのって事 >>70
いやだから、そもそもがthを使わない前提での質問だったし、横並びのためだけにthを使わず
ちゃんと見出しとしてのthが必要であれば、横並びにflexは使わなくてもいいよって話だよ。
あなたの作りたいものは見出しとしてのthは必要なの？
最初の条件で答えたflexを、勝手に前提条件を変えて要らないだろって言われても困るわｗ >>73
luxeritasで作ってみたのですがフッターが左中央右と指定されていて
中央に要素を配置するとカラムの横幅をwidthで値を指定しても左右に空間ができてしまいます
やはりPHPを弄るしか方法は無いんですかね？ 一度参考サイトのフッターをコピペしてwidthを指定すると出来るんですがどういう構造なんでしょうか… >>72
いやだから・・・提示したサイトの方で使ってるからthを、それなのにtrの中にthとtd入れてflexを使ってるのは何故なのかって聞いてるんだけどさ >>76
だったら最初からまとめてそう言いなさいよ。
この流れじゃ後付けが多すぎて、そうは読めないっての。
で、何故flex使ってるかは、開発者ツール使ってflex外せば分かるが
flex使って、セルの横幅決めたりして綺麗に幅一杯に埋まるようにしてたり
多分コードを減らしたりもしてる。
あとtbodyのflexはtrを横並びにしてるけど、trをflexにするのは
thとtdを横並びにするのと関係はない。 >>74
模写元がどれだけカスタマイズしてるか分からないけど
同じテーマ使ってるっぽいから、どうにかなるんじゃない？
でも、さすがにそれだけの情報だけじゃ、よく分からんから
状況が再現できるコードでも貼ってくれりゃいいんだけど >>73>>79
floatタグで横いっぱいに要素を並べることができましたありがとうございます
floatタグでレス73のアイデアと77のアイデアを結合できないでしょうか? 今はflex使うんだろうなぁ
IE対応するのであれば面倒そうだけどと >>80
>>77は、3つのdivにまとめて指定してるdisplay: inline-block;でブロックを横並びにしてるので
そのinline-blockを消して、そこへ新たにfloat: left;を追加すればいいんじゃない？ >>83
自分では解決できなかったのでhttps://shu-sait.com/footer-menu-yokonarabi/
こちらのサイトの方を参考に作り替えてみます
上記のサイトのフッターを配置してみると左右ぴったりに配置することができました
何が間違っていたのかわからなかったのですが… もう一点質問があるのですがhttps://jsfiddle.net/vintagedopeme0522/brqpL3zm/1/
こちらの縦並びのメニューをワードごとに大きさを変えて2列3列に並べる場合 inline-blockを使えばよいのでしょうか? >>84
書かれた通りにやれば出来るんだが、解決できないってのは
何を言われてるのか分からないってこと？
というか、その参考サイトはfloatじゃなくてflex使ってるんだが
いったい何をどうやってるのかサッパリだな…。 >>85
ちょっと何言ってるか分からない
横並びの1行じゃなくて2列とか3列にしたいの？
あとワードごとに大きさを変えるって、各ブロックの横幅を変えたいってこと？ >>86
cssを調整した際にworldpressで固定されてる左側のコンテンツのレイアウトが崩れてしまうなどがありまして…
おそらくhtmlのクラス名がかぶっていると思うのですが >>87
ボックスを横に2列3列とならべて できればボックスの大きさをワードの長さごとに変えたいのですが
以前も挑戦したのですが ul li class を使う方法しかなくできませんでした
bootstrapであれば可能なようですが扱いきれず困ってます
ul li を使わずにワードを2列 3列に並べる方法はありますでしょうか? >>90
>>89
アンカー忘れてたわ。こういうこと？ >>89
更に謎は深まるばかりなんだが、こういうのを作りたいってこと？
ttps://www.webdlab.com/labs/dropdownmenu-3/sample3/ >>92
こういうことです！ 最後の位置のみ揃えることはできますでしょうか？ 各行の最後のブロックを左揃えにしたいのか、右揃えにしたいのか
各行の他のブロックの位置は変えていいのか、変えちゃダメなのか
それとも各行の全体を右寄せにしたいのか >>97
ありがとうございます aにクラス名をつけることは可能でしょうか? 別の要素に影響してしまい困りました… >>90>>92
class名変更で実装できましたありがとうございます >>97
すみません divに固有のクラス名をつけてcssを適用することはできますでしょうか? https://jsfiddle.net/ubmc2dt9/1/
クラス名を変更して無事実装できましたありがとう互います
font-size: 14px;
width: calc((100% - 60px) / 7); このcssの仕組みがわからないのですが教えてください 横にきっちり並べたい要素が7個
横幅100％を7で割ったものが一つの要素の幅になる。ただ、今回は要素間に10pxの左マージンを入れた。
最初の要素以外に左マージン10pxつけると左マージンは全60pxになる。
故に100％の幅から60px引いて7分割
最初の要素以外に左マージン10pxつければ
7つの要素の幅＋左マージン60px＝
100％ > できればボックスの大きさをワードの長さごとに変えたい
これはもう要らないのかな？ >>104
102のコードを改変しても可能でしょうか？ 浦島太郎です。
<head>の中に <style> というのをおいてログイン入力画面とか、
名前登録みたいなのを作っているのですが、やっぱりｃｓｓというのは
必ず使うべきものなんですか？
ちなみに <style> は100行程度です。 https://deshinon.com/2019/03/06/background-oshare-kopipe/
上記のようなサイトでCODE PEN等で紹介されているコードを
自身のサイトに反映させたいと考えていますが上手くいきません。
cssとjsについては丸コピペして「xxx.css」「xxx.js」として保存、
htmlについては、BODY内に
<link rel="stylesheet" type="text/css" href="xxx.css">
と記述してcssを呼び出しています。
結果としてテキストや表組みはちゃんと反映されますが、
背景画像などの動きをつける部分が反映されません。
特定のサンプルで起きるわけではなく、複数のサンプルを試しても
上手くいかないので、こちらの実装の仕方が間違っていると考えられます。
html css jsで成り立っているサンプルを実装する手法で
上記の手順で間違っている箇所があったら教えてくださればありがたいです。 >>110
見てないけど
画像のパスも変えないといかんのじゃね？ >>111
ありがとうございます。
例えば
https://codepen.io/CapMousse/pen/EJaHk/
このサンプルコードですと、相対パスですべて書かれており、
html css jsを全て同階層に置けば動作すると考えています。
ですが実際にコードをコピペしてxxxx.html xxxx.css xxxx.jsの
３ファイルに貼っても動作しません。
根本的に考え方が間違っているのでしょうか・・・ どうせhtmlファイルダブルクリックで開いてんだろ >>112
同一階層に置いただけじゃ動かんぞ
htmlファイルにcssを反映させるためには基本的にheadタグ内に
link rel="stylesheet" href="xxx.css"
みたいな感じで書く
JavaScriptは基本的に
script src="xxx.js"></scriptこれを
/body直前に追加する >>111
>>113-114
解決しました。
jsファイルを呼び出すためのscriptタグを置く位置が間違っていました（headタグ内に置いていた）。
色々ありがとうございました。 https://tympanus.net/Development/HoverEffectIdeas/
すみません上記のサイトのLayla Zoe Oscar Bubba のいずれかを実装したいのですが構造が難しく自作できませんでした
cssで作成可能でしょうか? すみません以前こちらで質問したものですがhttps://jsfiddle.net/2ubgdv1r/ コードを1段追加しようとした際
うまく反映できませんなぜでしょうか? >>119
classの一文字目に数字は使えないよ >>120
h1 class 21〜24の部分のみ追加したのですが…
CSSのクラス名が適応されません…
何処が間違ってるのでしょうか？ 画像内の下部に帯を透過させてその上に文字を設置したいのですがこの場合画像→帯を下に設置してpositionで下部に設置するのでしょうか? >>123
それがいいんでね？
positionをrelativeにしたfigure要素の中にimg要素置いて
positionをabsoluteにしたfigcaption要素の中に文字書いて
下にくっつければ 数ページ程度のサイトを構築する場合、CSSファイルの記述順はどのようにするといいでしょうか
以下のAの記述はサイトの上からの表示順に合わせてCSSを上から記述し、
Bは全ページ共通のCSSを上にまとめてその下に特定のページでのみ使うCSSを記述しています
このどちらか、あるいは別の記述順か、どのような記述順がいいのでしょうか
A
<*----- ヘッダー ----- *>
<* ヒーロー *>
<*----- メイン ----- *>
<* 商品ページ *>
<* お知らせ *>
<* お問い合わせ *>
<*----- フッター ----- *>
B
<*----- ヘッダー ----- *>
<*----- メイン ----- *>
<*----- フッター ----- *>
<* ヒーロー *>
<* 商品ページ *>
<* お知らせ *>
<* お問い合わせ *> >>126
投げやりなわけではなく
適当でいいよ、好きな順で
CSSは結構な行数になるから
順に書いたところで、一覧できるわけじゃない
だから後から記述箇所を見つけるときは
どうせセレクタ等で検索することになるので
生CSSではなく、SASSなどを使うなら
ファイル分けてあった方がやりやすいね
で、ファイル名は一覧できるから順に並んだ方がいい
ので、ファイル名に番号振ったりして整頓するといい この板は企業サイトのソースを貼って「これどうなってんの？」と質問するのはアリですか？
模写コーディングをしていてpng画像をSVGフィルタとしてアニメーションさせて動かすというソースが再現できず途方に暮れています ソース直貼りじゃなくて、自分で動かそうとしてる部分のソースをここに貼って
https://jsfiddle.net/
あとは模写元の企業サイトのURLを貼る >>128です
該当部分を抜き出したコードがこちらになります
https://jsfiddle.net/v6fhn3qc/
再現したいのはこちらのサイトの背景の上に波紋が広がるようなアニメーションエフェクトです。
https://chiran-omoiire.com/
こちらのpng画像が<feImage>タグ内に指定されており、エフェクトのもとになっているとは思うのですが虹色の静止画が立体的なアニメーションになる仕組みが分からず、またコピペしても再現できません。
https://imgur.com/a/6xANL9Y
result="ripple"をググっても引っかからないですし、試しにresult="blur"にしてみても変化なしです。
javascriptは関係ないですよね。。。 こういうのってaftereffectsとかで作ったのを
書き出してたりしないのかな？ https://triple-underscore.github.io/SVG11/filters.html#feDisplacementMapElement
https://triple-underscore.github.io/SVG11/filters.html#FilterPrimitiveInAttribute
調べてみたけど変形は feDisplacementMapElement要素。
in2="ripple" で result="ripple" の要素を参照して、
画像の色を変形情報として波紋っぽく変換してるんだと思う。
あと、filter要素はフィルタの定義をしてるだけなので、
cssでフィルタを適用しないといけない。
filter要素のid使って
filter: url(#filter-ripple-1)
で適用されるはず。 >>131
おっしゃる通り、ロゴ部分のアニメーションはAffterEffectなどで作ったものを書き出していると思われます
>>132
これは便利ですね。.jsファイルの方を書き換えることができればオープニングアニメーションとして波紋を出すということも再現できそうです。
ありがとうございます。
再現しようと思えばjQuery経由で再現できそうですが、立体的なSVGフィルタの仕組みは未解決ですのでわかる方がいましたら是非ご教示願いたいです。 >133
リロってませんでした
詳しいご解説ありがとうございます！
虹色を立体データに変換して再現しているわけですね。
元ソースのCSSの方も一度確かめて今からやってみます。 コンソールに表示される
https://www.pixijs.com/
を使っているとかではないの？ >>125
すみません作っていただいてありがとうございます参考にします
帯の透明度を上げて背景をもう少しはっきりさせたいのですがopacityでいいのでしょうか? androidのchomeで見ると<p>画像.pngテキストテキスト</p>これが
画像png
テキストテキスト
と1段ずれて表示されるのですがPCではきちんと表示されています >>137
background-color: rgba( 0, 0, 0, .5);
これの.5（0.5の0を省略）を変更して調整してみ
色は並んでる0三つの値を変更
色選択ツール - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool すみませんhttps://jsfiddle.net/nm12pbeL/に、https://martto.net/luxeritas-theme/customize/7774/のPattern5 先頭にFontAwesomeアイコンを表示
2つの横並び画像の上ににそれぞれ見出しのデザインを作りたいのですがどうすればよいでしょうか? >>139>>140
ありがとうございます 調節してみます >>143
ありがとうございます。 <h>タグが増えすぎてしまってCSSが効かなくなってしまった場合 他の<>タグで代用できるものはありますでしょうか？ >>143
一つ一つの画像幅を広げることがどうしてもできません教えていただけませんか? >>144
タグには意味があるから、見出しは基本的にh1〜6のタグ。
他の見出しと区別する場合はclassで個別に指定。
>>145
一つ一つの画像幅って、それぞれ画像ごとに違う幅を指定したいって話なのか
単に全ての画像を同じ大きさの幅に広げたいだけなのか。
>>146
ちょっと何言ってるか分からなかったが、こういうこと？
https://jsfiddle.net/rdakune2/
あと、質問は1つにまとめて。 >>147
それぞれの画像幅を調節したいのですがどうすれば良いでしょうか？ >>147
作っていただいてありがとうございます 質問一つにまとめるよう気を付けます。すみません、class名指定忘れてました。cssを個別に使うときはclass指定したほうが良いですかね… >>150
説明不足で済みません。https://jsfiddle.net/7se1dxvy/ こちらのボックスを等間隔で幅を広げようと調整しようと試みたのですが、widthを広げた際ボックスが覆いかぶさってしまい同じ大きさで横に並べることができませんでした。お力をお貸しくださいお願いします。 >>151
やりたいことは別件なの？
質問は1つずつ。解決したら解決したって言ってよ。
解決したら次の質問な。
で、自分で試みたっていう上手く行かなかったコードを貼ろうよ。
何が悪いのか、何を勘違いしてるのか分からないと解説のしようがないし
誰かが正解だけ書いて、それをコピペしたところで、勘違いしたままじゃ
全く身にならないよ。 >>152
すみません今後気をつけます。先ほどの質問なのですがhttps://jsfiddle.net/7se1dxvy/
このように.aligncenter {width: 120px;}で画像のwidthを広げようとしたのですが画像がかぶさってしまいます rightやleftでボックスとボックスに隙間を作ろうとしたのですがposition: absolute;が原因で調節することができません。
自分でも調べてみたのですがどうしても解決できません。アドバイスお願いします。 section {
display: flex;
flex-wrap: wrap;
width: 220px;
} 今まで勉強してみた中で要素を二つ並べた際は二つの要素を足したwidth横幅を指定してその中に1要素の幅をそれぞれ指定するという認識でした。
今回も同様にsection(二つを合わせたwidth横幅を指定して）それぞれの横幅を変更しようとしたのですがどうしてもうまくいきません…
posisionについて勉強不足だとおもうのですが… >>153-154
自分がいじった内容を保存したかったら、画面左上のsaveを押して。
保存するとURL変わるから、そのURL貼っておくれ。
で、figureのmax-widthとmin-widthをどちらも100pxで固定しちゃってるから
そりゃimgのwidthを拡大縮小しても、親要素のfigureが固定されてたら
伸縮しようがないから、とりあえずmax-widthを大きくしてみ。
その辺はpositionあんま関係ないと思われ。 >>155
すみませんsave わすれてました。 https://jsfiddle.net/vgh1obfp/3/ 画像幅を広げた状態で要素を横並びしたいのですが、要素が下に回り込んでしまいます。原因がわかりません、アドバイスお願いします。 >>156
やっと何言ってるか分かった
sectionの子要素のdivを横並びにする場合は主にこんな感じだと思うけど、やりたいことに合ってる？
1. sectionのwidth:220px;を削除（画面幅を小さくすると縦並びに）
2. sectionのflex-wrapをnowrapにしてwidth:220px;を削除（画面幅を小さくしても横並びのまま）
3. sectionのwidthを420px以上にする（420px＝（200px+divの左右のマージン5px）×2） ちなみに2のflex-wrap: nowrap;は初期値だから
sectionのflex-wrapとwidthの両方を削除してもおｋ >>158
ありがとうございます。やっと問題が解決しました。flex-wrapだと縦並びでnowrapだと横並びになるのはなぜでしょうか?
仕組みが理解できません… 要素を並べる際はflex はじめにflexに目をつけるべきでした…
flexやfloatやdisplay:inline-block それぞれの利点や使い方などを未だにあやふやにしてる状態なのが駄目なんですかね…
flexは最新で1番スマートにCSSを簡潔に実装できるという認識はあるのですが。 >>159
flex-wrapはwrap（折り返し）、nowrap（折り返さない）だから
sectionにflex-wrap:wrap;で、尚且つwidth: 220pxを設定してるのに
imgのwidthが200pxもあると2つ横並びじゃsection内に収まらないから
自動的に折り返されて縦並びになる
だから、widthを削除（初期値autoに）するか、強制的にnowrapで
折り返させないようにするか、sectionのwidthを、imgのwidthとmarginの
合計以上の値にすればいい >>160
ケースバイケースで使い分ければ良いとは思うんだけど
フレキシブルなサイトを作ろうと思ったらflexが便利だからなぁ。
今いじってるのはフレキシブル対応できてるとは言い難いけどｗ <body>
<div class="hako" id="hako"></div>
<div class="aaa" id="aaa"></div>
<scr ipt>
$(function(){
$("#hako").click(function(){
$("#aaaa").fadeOut();
});
</scr pt>
</body>
これで箱消えないんですがなぜ何ですか・・・ <body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<scr pt>
これフェードアウトしませんもう意味が分かりません…
$("p").click(function () {
$("p").fadeOut("slow");
});
</scri pt> 早いうちにエラーメッセージ読むくせつけといたほうがいいよ。
今回のだったら $ is not defined みたいなメッセージ出てたはず。 ここはHTML/CSS質問スレなので、jQueryとかは他所で質問した方が早い >>161>>162
なるほどautoで設定するというのは思いつきませんでした。 wrap（折り返し）、nowrap（折り返さない）覚えておきます。
画像の場合wrap nowrapなのでしょうか? 文字も同様でしょうか? >>169
便宜上、imgって書いてるけど、sectionのflex-wrapは直下の子要素divに対してのものなので
別にimgに限った話じゃないよ。
文字っていうのが、flexが設定された親要素の子要素のp要素って意味ならflex-wrapは適用される。
というか、親要素のflexコンテナー直下にある子要素のflexアイテムに適用される。
https://jsfiddle.net/ethjp8rk/
要素内の文字列の折り返し方法って意味なら、white-space等で指定。
あと、勘違いしてるかもだけど、プロパティごとに設定できる値は違うから、wrapとnowrapが
どんなプロパティにも使えるわけじゃないので、念のため。
とりあえずflexについてはこの辺りを参考に。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
ttps://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet >>170
詳しくおしえていただきありがとうございます。white-spaceについて調べてみます。
プロパティごとに設定できる値は違うということは使えない場合別のclassで代用するという認識でよいのでしょうか?
どちらも拝見させてもらいブックマークしました。ありがとうございます。 >>171
プロパティをセレクタか何かと勘違いしてる気が…。
余計なこと言って混乱させて悪いが、先ずはCSSの基本的な用語を憶えよう。
CSS の基本 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics
今、話してるwrapとかnowrapはプロパティ値で、flex-wrapがプロパティ。
flex-wrapで利用できるプロパティ値はwrap、nowrap、wrap-reverseの3つ。
詳しくは以下で
flex-wrap - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap wordpressで動いているPCサイトは、すべてのタグにclassが書かれていたら
cssファイルを触るだけでスマホ用サイトにすることは可能なのでしょうか？ >>172
アドバイスありがとうございます。紹介してくださったサイトを見て勉強してみます。 すみませんデロッパツールでボタンを押し込んだ色を確認したいのですが どうすれば押し込んだ時の色がわかるのでしょうか? >>176
とりあえず、これでも読んでみて
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
ttps://saruwakakun.com/html-css/basic/chrome-dev-tool
【デベロッパーツール】hover状態やactive状態のままcssを調整する方法！
ttps://clrmemory.com/blog/web/developer-tool-hover/ >>176
Elementsタブで対象の要素を右クリック、
そのメニューからForce stateを選び、
サブメニューから:activeを選ぶ。
解除するときは↑をまたやる。 >>173
Wordpress で、Bootstrap は使えないの？ >>179
テーマをbootstrapで作ることは可能。 >>177 >>178
教えてくださったサイトを見て解決できました。ありがとうございます。 div.blogtitle > a:link,a:visited{color:white;text-decoration:none;}
div.blogtitle > a:hover{text-decoration:underline;}
サイトタイトルを囲んでいるdiv.blogtitleの中にあるリンクだけ、色を白くしたいです
しかしサイト全体に適用されてしまいます
なぜでしょうか？ >>182
カンマで区切ったら
また最初から親子セレクタ書かにゃいかんの >>184
カンマの後で改行してみれば気づかないか？
カンマの後ろのセレクタは全てのa要素になっている 複数のアンカーを指定するにはどう書けばいいのでしょうか？ そうではなくて、複数指定する術はないのかという質問です サイドバーのナビゲーションに対してh3を使うのはおかしいと思うんですが、div意外で適当なものはあるでしょうか
ウィジェット全体はnavでいいとして、「カテゴリ一覧」といったナビゲーションのタイトル部分です >>189
万人にわかるように質問してよー
複数ってなんのことよー >>192
本文部分で見出しはh4くらいまで使うと思うので そういうやり方もあるんですね
逆に混乱しそうだから、無難にdivにしておきます、、、 見出しだったらdivなんか使わずにh1に適当なclass名つけて
個別にスタイル指定すりゃいいのに
この程度で混乱するとか大丈夫か 個人的にはむしろdivにする方が混乱する
（ネスト的な意味で） >>190
アウトラインを表示するツールを使ってみたほうが良いよ
ようはアウトラインが綺麗にできてるかどうかだから 記事部分とサイドバーを黄金比にしたいです
サイトの横幅は960pxがいいと聞いたので、これを黄金比に分割したいです。
flex-basisで62%と38%にしましたが、これは黄金比になっているでしょうか？
960*0.618=593.28
593.28/960=0.618 >>201
とりあえず、これでも嫁
ttps://liskul.com/cr_goldenratio-3739 >>200
どの部分だよｗ
フッターメニューの作り方のサイトのフッターのようにって
ややこしすぎるわｗｗ >>204
すみません、フッターのみにbootsstrapを適応することは出来るのでしょうか？
bootsstrapを今回を機に勉強してみようと思っております 俺もbootstrapについて聞きたいけど
12分割するということはわかるけど、もともとどういうレイアウトのためのものなの？
レスポンシブをするためのbootstrapなのか、
pcで2カラム・3カラムを表現するための12カラムなのか。 https://shu-sait.com/footer-menu-yokonarabi/のフッターのように作り替えたいです。
boostrapの真ん中のカラムだけ別の要素に作り替えて実装することは可能でしょうか？ YouTube で「たにぐちまこと bootstrap」で検索すれば？ >>205
出来なくはないが
あまりお勧めはできない
bootstrapは身も心もbootstrapに捧げないと
あんまり幸せになれない
あと
bootstrapが想定しているようなデザインシステムではないサイトでも
あまり活躍はしない んで
カラム並べ程度のことだけだったら
bootstrapにとられる手間の方が圧倒的に多いと思う >>205
適応することはできない。
適用、の間違いだろう。 inline-blockで高さ指定してないのに
高さが揃うわけが無かろう というか、メディアクエリでflex使ってるならinline-blockじゃなくflex使った方がいいだろ
各flexアイテムに高さ指定しなくても、flexアイテム内要素に合うよう伸縮するんだから 8の倍数でサイトを作ると楽と聞きましたが、テンプレとなる倍数はどんな数値がいいでしょうか？これだときりが悪いような気がするです、、、。
サイト幅は960です
--px8:8px;
--px16:16px;
--px32:32px;
--px64:64px;
--px128:128px;
--px256:256px;
--px512:512px;
--px1024:1024px;
--px2048:2048px;
--px960:960px; textarea内の文字列の左右寄せは
text-align:○○でてきるのですが、
上下はどう記載すればよろしいのでしょうか？ >>219
text-bottomで下いかないんです >>218
フォントの種類、フォントサイズ、
最大文字数、ラッパーの幅、高さなど考慮して>>221のようにやるしか今のところはないと思う。
一行だけなら別だけども >>214>>219
教えてくださったサイトのおかげで解決できました、ありがとうございます。 フォントは16px以上にしとくが無難
iphoneでform入力するときイラっとしなくていい https://oshiete.goo.ne.jp/qa/9768913.html この質問を参考に画像の上にオーバーレイ広告を設置したいのですが、
WordPressで設置予定のため以前自作したjsがつかえません。 cssとhtmlのみで画像の上に広告を配置することはできますでしょうか? jsなしで離れたWordPressの固定要素に要素をかぶせることはできるのでしょうか? すみません<img src>~</img><p class="overlay">オーバーレイテキスト</p>で実装できたのですが、右上に×を表示させて非表示にするためにはjsが必要なのでしょうか? チェックボックス隠しといて表示のONOFF切り替えりゃイケんじゃね >>232
すみません実装できました バーがおかしくなってたようです ConoHa WINGでブログを始めようとする素人ですが、かんたんセットアップというので進めていたら
WordPressパスワードが入らず＜文字や数字を変えてもダメ＞途方に暮れています。どなたか詳しい方お教えください。 よろしくお願いします。
左から、番号、テキスト、数値×4列、計6列の表を作ることになり、
番号はth、数値のセルが多いのでtdを text-align : rightにしました。
問題は2列目のテキストで、これを中央揃え&太字にしようと指定しても
太字にはなりましたが右揃えのままでした。どうやればいいのでしょうか？
あと、2列目もthにするのは有りなのでしょうか？ Web系への転職を考えてCSS設計を学び始めたのですが、
学ぶとしたらFLOCSSか、それとも最近出てきたPRECSSのどちらがいいでしょうか >>242
スタイルはセレクタで要素を特定して適用するじゃろ？
そんでセレクタは要素名だけではなく
classやidなども使えるのだよ >>246
ピュアCSSというと、これといった設計手法などを使わないCSSの記述のことでしょうか
それでしたらある程度学習を済ませており、就活の際のアピールにでもなればと思いまして、
さらにCSSの設計手法を学ぼうと思っています
また、ポートフォリオサイトなどを作っている際も、自分ルールなCSS設計をするよりも
何かしらのCSS設計手法を学んだほうが制作効率がいいのかなとも思っています
なにかアドバイスがありましたらお願いいたします >>243
ありがとうございます。不勉強なもので :nth-child() 今日初めて知りました。
1列目も中央揃えにするには :nth-child(-n+2)でいいですかね。
>>245
CSSに↓を書いて
td.center{
text-align : center;
}
2列目の各セルを<td class="center">としても何も起こらなかったので質問させてもらいました。 >>248
:first-childでいいんじゃね？ >>247
マルチブラウザ対応の難点を押さえてれば
あんま細かいこと気にしなくていい予感 >>249
どうもです
擬似クラス1から勉強しますわ >>247
FLOCSSもPRECSSも、しょせんは自分ルールなCSS設計のうちの一つにしか過ぎないんだよ
こんなとこでうだうだやってないで、全部試して好きなの使えよ
転職できたらできたで、職場にルールがあればそれを使わないといかんのだし https://jsfiddle.net/vintagedopeme0522/8Lw7avjk/1/
作成予定のサイトはメジャーリーガーのことをまとめるサイトなのですが、ここのアダルトサイトで見つけたRSSリーダー縦スクロールを作成したいです。
RSSについて調べてみてプラグインも入れたのですが、デザインがいまいちでした。自サイトのRSSを縦スクロールで実装するアドバイスをください。お願いします。 >>244
BEM（MindBEMding）とかだろ >>253-255
自分で色々考えて作ってみて、ここまでやってみたけど、どうしても上手く行かない
って状態になってから質問して下さい。
質問が雑過ぎて答えようが無い上に、思いついた端から質問を連投されても困ります。 >>257
PHPで文字を出力することは出来るのですがCSSと合わせて縦スクロールを追加する事が出来ません…
明日コードを載せてみます… 連投してすみません spanとdivの違いってなんですか？
cssでブロック要素の切り替えは出来るし、使い分ける意味があまり、、、
cssが読まれなかった場合でも表示が崩れないように心がけるべきでしょうか 逆に聞きたいけどspanをcssでブロック要素にする意味は？
元々ブロック要素のdivを最初から使えばいいじゃない
その理由が適切だと説明できるなら好きなようにすればいいんじゃない？
あとさんざんこのスレでも出てるけどアクセシビリティを無視するのならいくらでも好きなように書けばいいよ 基本的にspanは文章内とかにインラインでしか使わないわな
汎用コンテナーとしてのdivがあるにも関わらず、spanをわざわざブロック要素にして使うとか
むしろ恥ずかしくて出来ない JavascriptでRSSを取得してCSSで外側を装飾する場合
HTMLでコンテンツを作ってそれをjsで動的にしてCSSで装飾するという認識でいいのでしょうか？
コードを調べた際、PHPとCSSで完結してるものがあり、そこにCSSで手を入れるというのは素人には難しいのかなと思いました。 javascriptだろうがphpだろうが、HTMLとして出力されたものに対して
CSSでデザインをいじる事に、難易度の違いは無い めちゃくちゃ初歩的な質問かもしれませんが、Webサイトの模写をする際の重要な点としてpxは正確に合わせると初学者用の動画で説明されてたのですがpxを合わせるには地道に調整して合わせていくしかないのでしょうか？
もしそうだとしたら経験者の方は文字や幅の大きさを見て大体これは何pxだなというふうに判断しているのでしょうか？ 開発者ツールとかで模写元のソースを確認しちゃ駄目なの？ >>267
答えは極力見ずに模写をして、終わった後に答え合わせをしましょうとのことでした
それで実際に模写コーディングをしてみよう思ったもののpxの指定で詰まってしまいました
動画とかだと当たり前のようにここは何pxにしましょうと教えてくれますが実際に自分でコーディングするとなると値の見極めがすごく難しいなと思ってしまいました 答えは見ずに、ってことは開発者ツール以外のプラグイン等も使うなってことだろうから
目視で比較するしかないかもね。模写元とウィンドウを2つ並べるとかして。
でもまぁ、模写元が全てpx単位で作られてるならともかく、他の単位が混在してたりすると
完全一致は無理だから、多少の誤差は許容される「正確に合わせる」だと思うけどね。
ただ、多少の誤差がレイアウト全体に大きく影響する場合もあるから、ある程度の正確さは
求められるだろうけど。 どっちかというと
既存サイトのキャプチャー画像からコーディングしてみる方が
訓練になりそうじゃね セレクタで 内容が◯◯の場合 というのはありあますか？
ミス防止のためユーザスタイルシートで特定の単語だけ強調したいのですが、他人の作ったシステムなのでクラスなどを与えることが出来なくて困ってます
ご存じの方いらっしゃいましたらご教示お願い致します >>272
有難うございます
別の方法を模索します 疑似クラス使えば、ある程度は条件分岐みたいなことは出来るけど
内容で条件分けは無理だね 親要素のボックスに以下のflexを設定しています
display:flex;justify-content:space-between;flex-wrap:wrap;
しかし、子要素がなぜか縦にストレッチしてしまいます
サイドバーの高さに合わせてストレッチされるようです
space-betweenを使いつつ、縦ストレッチを解除することは出来るでしょうか
ちなみにjustify-content:flex-start;を指定しても、ストレッチされることに変化はなかったです >>272
あれ？
条件分岐は無理とありますが、
p[class*="foo"]
p要素のclass属性値がfooの場合、などは
可能なので「contentの値が◯◯の場合」は条件分岐というようなものではないような
そのセレクタの有無はわからないですが
まあなさそうですが >>276
後半何言ってるか分からんが、とにかくclass指定できない>>271みたいなケースで
条件分岐は無理って話 >>278
ありがとう
align-contentでできましたです display:flex;で並べた子要素なんですが、子要素同士の縦のマージンはどうやって指定すればいいでしょうか？子要素にmargin-bottomでもいいんですが、何かやりようがありますか？
https://i.imgur.com/PFSHLRx.jpg align-contentでspace-betweenやspace-aroundにする以外は
margin-bottomでいいんじゃない？ aligin contentは親要素の縦幅を設定していないと使えないですよね
横は幅固定なのでいいんですが、縦の場合は幅可変ですよね https://i.imgur.com/TcUlFsL.jpg
こんな感じにmargin-bottomを指定しましたが、最下部まで広げてしまうのが余計なのですが、どうしたらいいでしょうか？
align-content:space-between;だと、余白の広さがコンテナの縦幅によって変化します
常に１０ｐｘ程度にしたいです >>284
上マージンにして
nthで最初の行だけゼロにするのはどうよ 全体の幅が固定ならいいけど、flexだと横幅が変わると列数が変わるから
最初の行だけって指定は難しくね？ すみませんフッターをレスポンシブにしたいのですが幅を狭めてスマホで見るとフッターメニューが見切れて消えてしまいます。縦並びで実装したいのですがアドバイスお願いします。 子要素の幅は固定です
親要素も固定です
ですから、１行に入る子の数は決まっています ちなみに行の数はきまっていないです
列の数は決まっています
しかし、レスポンシブにするなら後々問題は出るでしょうね nth-last-child(-n+5)
でいけました >>294
お前、思いついた端から質問連投するなって言われてただろ
ここはLINEじゃねぇんだよ
質問は1レスにまとめろや flexboxで最後の列のみを取得する場合はリストを追加しないとだめなんでしょうか
<li><div>item</div><div>item</div></li>
<li><div>item</div><div>item</div></li> レスポンシブ対応なら、Bootstrap を使えば？ >>300
取得というか、cssの対象にしたいんです
listにしたらまあ出来ましたが、これでいいんでしょうか？ windows10で絶対パスが読み込めないのですが、なぜでしょうか
C:\Users\name\Desktop\img\file.JPG
htmlファイル配下において以下のようにして読み込むことは可能でしたから、バックスラッシュの問題ではないようです。
img\file.JPG windows10関係無いだろ
それだけキーワードが分かってるなら「html ローカル 絶対パス」とかで
検索してから質問しろ >>302
classとか疑似クラス使わずにliタグ使う意味は？ >>305
擬似クラスというのはnth-last-childのことでしょうか？
最後の列を取得する場合、flexboxの場合はそれぞれがインライン要素ですから、最後の列だけ取得するというのは難しいかなと思います
しかし、リストはブロックですから、最後の列だけ取得するのは容易でした
インライン要素の場合nth-last-child(3)とすることで最後から３つまでを取得することが出来ますが、列に入る要素の数が変わると使えませんよね また訳の分からんことを…。
li使ったら出来たってのも意味不明だし。 そうですね、たしかに意味不明でした
flexboxの場合は先頭から順番に数えればいいだけですね
要素が１列に４つ、行が４行目までだった場合は13個目を指定するだけですね >>306
flexコンテナの子要素のflexアイテムはインライン要素では無いし、>>299のliで囲ってるdivもブロック要素だが
インライン要素だとかブロック要素だとか言うなら、ブロック要素であるdivを使わず、リスト項目では無いものに
liタグを使う意味が無いし、ulやolを使わずli単独で使うものではない
あと、nth-last-child(3)は最後から3番目を指定するだけで3つまでを指定するものじゃないから
> 列に入る要素の数が変わると使えませんよね
viewport幅によって最終行のflexアイテムの数が変わる場合の指定方法の話をしてるんだろうが
そんなもんnth-last-child（あるいはnth-last-of-type）とメディアクエリ使えば、どうとでもなる もう本人が納得してるなら、それでいいんじゃない？
なんか相手にするだけ時間の無駄になりそうｗ 画像の下に説明文があり説明文にマウスが乗った際 opacityをかけるほうほうはありますでしょうか？ すみませんhttps://jsfiddle.net/tsc38m1r/ このコンテンツについて質問なのですが何故URLをつけた説明のみした線が表示されるのでしょうか？
画像にマウスが乗った際も説明文にマウスオーバー変化をつけたいのですが text-descripcion がききません
解決策を教えてもらえないでしょうか？ >>311
もう自分で答え書いちゃってるよそれ
マウスが乗ったとき（hover）
画像のopacityを0にすればいい
CSSで >>314
説明文のした線を消して画像またはテキストにマウスが乗った際にtext-descripcion underlineでした線と文字色変更をしたいのですが。
上記のものだとマウスが乗る前にした線がでてしまい画像マウスオーバーしてもした線と文字色変更ができません。
アドバイスください、お願いします。 >>316
俺もそうだと思うわ
>>315
文字列をリンクにするとブラウザが頼んでもねーのに勝手に下線を付けるんだわ。他にもブラウザは勝手に余計なことばかりする。
特にサファリとかいう糞の塊 a要素の中にp要素入れてるからだろ
a要素に入れていいのはテa要素以外のインライン要素とテキストだけ
<a><p></p></a>じゃなくて<p><a></a><p>にしろ >>318
一つ問題が解決しました。ありがとうございます。画像にマウスが乗った際、文字のリンクの色を変更できないでしょうか？ できるが、それ以前に無駄なp要素とか不要なもの多過ぎ
解決した部分を織り込んで、汚いソースを整理してこい
話はそれからだ した線の色だけはマウスオーバーで変更できるのですが文字色だけ画像をマウスオーバーしても文字色が変化しません… wordpressでいらない要素を削除したんですが強制的についてきて…どうすればよいのでしょうか。 これだけ「した線」を連呼するのって何かポリシーでもあるのかな >>321
wordpressのどこで編集してるのか知らんが、wpautopで検索して自動整形を無効化してこい
その上でjfiddleにコピペしたまんまじゃなくて、不要なものを削除して整理してから書き込めよ >>325
ヒント
兄要素:hover <結合子> 弟要素 ヒント以前に検索とかしてみたのかね？
「css hover 別の要素」でググれば、すぐ分かるだろ >>328
ドットが足りないし
プラスが全角だし
プラスの後ろに半角スペースが無い >>317
リンクの下線は
いわゆるデフォルトスタイルじゃない？
Safariに限らず nth-child(n+5)だと5番目以降の子要素を指定出来ますが、どうしてこの式で5番目以降という意味になるんでしょうか？
nとはなんですか？ 5番目以降じゃない。
nに0から数字足したら括弧内はいくつになる？
それが答えだ。 >>334
構文の関数表記とセレクターの例に解説あるから、とりあえず読んでこい
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
これに限らず、基本的には developer.mozilla.org にあるはずなので「これなんだっけ」ってなったらまずキーワードに site:developer.mozilla.org つけてググるかな
和訳が変だったり、そもそも和訳されてないこともあるが >>334
:nth-child() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
> n はすべての正の整数で、0から始まります。
とりあえずHTMLとかCSSで分からないことは、例えば「css nth-child mdn」で検索して
MDNの解説を読んでみよう >>336
>>337
nにはインクリメントが入るんですね https://i.imgur.com/jqLVohu.jpg
https://ideone.com/z4VvTH
ｆlexで並べたボックスから中身がはみ出てしまいます
対策はないでしょうか？
調べて子要素にmin-width:0;を指定しましたが、変化はなかったです >>340
それは英文法の問題なんだ
あいつらの言語は、スペースで区切られないと
改行しないんだ
どうしても折りたい場合は
強制改行（br要素）を使うか
white-space、word-brake、word-wrapを使うんだ ｐｈｐって言語ってどうなの？斜陽なの？
HTMLを理解したら入門にどんな言語が後々役たちそうですか？ >>343
phpはWordPressある限りしばらくは大丈夫だと思う https://codepen.io/sadsfff/pen/mdPyXJz
マウスホバー時に左上のボタンが消えるようにしたいのですがどうすればよいでしょうか? >>344
>>345
ありがとう、CSSフイン域分かる程度なんだけど市lt借りやってから
JavaScript言ったほうがいいかしら？ >>347
CSS雰囲気分かる程度なんですけどしっかりやってから
JavaScriptやったほうがいいかしら まずはタイポ無く日本語を入力することから始めたほうがいいんじゃね？ width1000px height1000pxのボックスを作り、その中に画像を入れています
画像は100px 100pxです
これを余白を埋めるようにしたいのですが、なんのCSSを使うのでしょうか？
調べてみたのですが、object-fit:fill;ではだめなようです すみません先ほど質問したものなのですがhttps://codepen.io/sadsfff/pen/mdPyXJz マウスオーバーで画像を拡大しながらホバー色を変化させようとしたのですが。
https://weconet.co.jp/css_image_zoom/ このサイトを参考にして作っているとホバー色変更とホバー拡大がお互いぶつかり合ってしまい。両方を生かすことができません、1行目の<figure class="effect-oscar">
と2行目の<div class="category">を入れ替えると画像の拡大はできるのですが、ホバー色の変化を再現できません。拡大しながら、マウスオーバーでホバー色の変更をするためにはどこを訂正すればよいでしょうか? https://codepen.io/sadsfff/pen/mdPyXJz 解決できました。
figureにclass設定しても効かないのでしょうか? >>350です
これは画像ではないですが、こんな感じで文字のボックスがはみ出ます
これも残り領域にフィットさせたかったのですが、何を指定すればよいでしょうか
object-fitではないようです
https://i.imgur.com/xNH6Nog.jpg
https://ideone.com/yEtg3w >>350
img { width: 100%; } >>353
.outerのheightは500px固定にしなきゃいけないの？ >>353
ウホッ！ウホッウホッ！
(ソースがないウホ！だからゴリラの第ゴリラ感で答えるウホ！)
ウホッホ！ウッホ！ウホウホ！
(画像はbackground-imageを使うウホッ！)
ウホッウホッ！ウッホ！
(backgroundについてはググれウホッ)
ウホッウホッ！ウホッ！
(ウホッウホッ！ウホッ！) どうもここんとこ自分で解決しようとしない愚か者ばかりが目立つ 何度もすみませんhttps://jsfiddle.net/c2r10shv/拡大まではできたのですがoverflow hiddenではみ出さないようにできません。3時間やっても無理です、アドバイスください。お願いします。 >>360-361
figure:hoverでfigureごと拡大してるからだろ
figure:hoverでimgだけ拡大させろ >>363>>364
すみません技術不足でして自分なりに初めから作り変えました。https://jsfiddle.net/vintagedopeme0522/2sowqL0b/65/
どうしても<span>aaa</span>にマウスを載せても画像がズームされません。おそらく画像と<span>aaa</span>が一体化してないせいだと思ってます。
画像からだと<span>aaa</span>のマウスオーバーは機能するのに逆はなぜ機能しないのでしょうか? マウスオーバーなど要素をいくつも一つのコンテンツに組み込むのが大変苦手です。 >>365
<span>aaa</span>には何も効いてないだろ？
.quaternary2のbackground-colorがhoverで変わっただけ
そういうのは孫要素のimgとか子要素のspanじゃなく親要素に
マウスhoverで子とか孫要素をtransformさせりゃいいんだよ
これも>>327の応用 >>355
そうですね
たとえばflexboxで同じ幅で並べたいことなどありますよね
ブログの記事一覧などで
http://hacks.beck1240.com/
こんな感じです >>356
background imageを使うのはなぜでしょうか >>368
それじゃ.boxも.textareaもガチガチに固定されてるのに、残りの領域ってのはどこにあるのよ？
.textareaからはみ出させないってだけなら、フォントサイズを小さくするか
overflowではみ出した分は隠すか、スクロール表示させるしかないんじゃね？ 残りの領域というのはboxの高さ-boxの高さ＝３００ｐｘです
この領域を埋めるCSSがあったと思うんですが、思い出せません 問題：
X - X == 300 となる X を求めよ。(15点) 全てのテキストがはみ出さず、ぎっちり埋め込めるプロパティなんかあったら
俺も知りたいｗ >>367
どれだけ調べてもわかりません。すみませんヒントをください。 >>373
問題はテキストではなくてボックスがはみ出ることです
ボックスがはみ出なければテキストは切り取られますから
>>372
数値指定ではなく、残りの領域に自動的にフィットさせてくれるプロパティがあったと思うのですが、、、 https://jsfiddle.net/vintagedopeme0522/2sowqL0b/103/ コードを整理してみたのですが
figure.snip:hover figcaption,
figure.snip.hover figcaption {
background-color:#000;
} でサンプルだとこの要素に-webkit-transform: translateY(0);
transform: translateY(0); 自分の場合色を変更したいのでback groundを入れたのですが、色は変わらず…
なぜだかわかりません… figure.snip:hover img + figure.snip h2 {background-color: brown;} と追記してみたのですができません、
figure.snip:画像をホバーした際にfigure.snip h2の色を変える どこが間違ってるのでしょうか figure.snip:hover h2 {background-color: brown;} ようやくできましたありがとうございます。 グリッドレイアウトでサイトデザインをしています。
似たようなレイアウトで画像だけ異なるものを並べていきます。
その際に１つの要素を使って、背景画像だけ違うものを並べていく方法はないでしょうか？
自分が試したのは
１）<img src="">でそれぞれの画像を配置していく
→画像の大きさがそれぞれ異なるのでレイアウトがぐちゃぐちゃになってしまう
２）背景画像として設定する
→レイアウトは整うが、背景画像ごとにcssで要素を設定していくため、
画像の種類が多くなるとbox12、box13...と要素の種類がどんどん増えてしまう
そのため、要素box1(背景画像はimg1)、要素box1(背景画像はimg2)みたいに
html側で要素の背景だけを変えて対応させる方法など、スマートなやり方は
ないかと悩んでいます。
皆様はこういう場合どういう手法を使っていますでしょうか？ 親要素を順に書いていって：hover<結合子> 実装させたい要素を書くって事ですかね
実装させたい要素には親要素は書かず、共通したhtmlは省いて最小にした要素を入れる >>382
なんか独自解釈で変な理解のしかたしてる気がしないでも無いが
もうしょうがねぇから
https://jsfiddle.net/vq4mjc03/
元ソースが整理されて無くて分かりづらかったから、HTML部分はほぼそのままで
動きは多少変えたけど、CSSは1から書き換えた
これなら何が悪かったのか理解できるか？ >>382
ありがとうございます。実現したいのはこういうレイアウトです。
↓box1 ↓box2
┏━━━┳━━━┓
┃画像1 ┃文章 ┃
┣━━━╋━━━┫
┃画像2 ┃文章 ┃
┣━━━╋━━━┫
┃画像3 ┃文章 ┃
┣━━━╋━━━┫
┃画像4 ┃文章 ┃
┣━━━╋━━━┫
： ：
これをbox1とbox2の要素だけ使って構成したいということです。
img widthとheightを使って画像のサイズを全部同じにして
画像は<img src="">で設置して、文字をかぶせたい場合は
position:absolute とか使うのがいいんですかね… >>376
いや、だから.textareaに
overflow:hidden;とかoverflow:scroll;とかoverflow:auto;
じゃダメなの？
あとoverflowとセットでこれも
height: 300px;
box-sizing: border-box; >>386
なんだか気持ち悪くて、、、
見た目はそれでいいんですけどね >>387
ありがとうございます。疑似要素ということはbefore after等だと思いますが、
これらを用いても結局はcss側で画像1,2,3,4...と設定してあげないといけないわけですよね。
html側でやるとしたらimgタグでサイズ調整してcssのグリッドレイアウトを乱さないように
調節してあげるしかない感じでしょうか。
imgタグで画像のサイズ指定してしまうと、スマホなどでグリッドレイアウトが変わったとたん
に
レイアウトが破綻してしまうんですよね… >>389
ありがとうございます、そんな感じです。
ただこの場合、画像を（はみ出した部分は切れてもいいので）
要素のサイズ目いっぱいに表示しようとした場合に枠から飛び出して表示されて
しまいますよね。
背景画像に指定すれば要素からはみ出た部分は表示されないので、
そちらの方が有効かなと思った次第です。
わかりにくくすみません。 >>391
だったらobject-fitをcoverにすりゃいいだけじゃね？ >>392
それだ！
これで解決できそうですありがとうございます。
まだまだ自分の知らない便利なタグがあるんですね。 >>393
細かいとこだけどobject-fitはCSSのプロパティね
タグはHTMLの方なので、言い方はちゃんと区別した方がいいかも >>383
実装したかったものはマウスオーバーで拡大と同時にキャプションの色を変更なので… こんなぐちゃぐちゃした質問に答えてやるおまえら
優しいな >>395
つうか>>378の
これとか
figure.snip:hover figcaption,
figure.snip.hover figcaption
これの
figure.snip:hover img,
figure.snip.hover img
.hover（どっとhover）って何だよ
:hover（コロンhover）なら、その行は不要だろ 最近の異常な質問者、LINEの感覚で聞いてるよな・・
質問者としての態度が、ちょっと怖いわ >>399
それな
注意されても殆ど改めないし、あまりにも酷いのでスルーしてもいいんだが
答えそのものじゃなく、もうなるべくヒントしか与えないようにしてる すみません先ほどのコードを消してしまいました https://codepen.io/sadsfff/pen/LYNEoNO
キャプションの文字までマウスオーバー時に動くのですが固定できますでしょうか? >>398
根本は画像の上にキャプションを置いてマウスホバー時にキャプションの色と画像を拡大するってことでしたが、どうしてもここで教わったコードを改変することができず簡単なサイトのものを自分で一から訂正して先ほど作りました。 初心者なので結合子と調べてもわかりません
サイトを駆け回って5時間くらいでようやく理解できましたし
できれば答えと解説付きで教えてもらえませんか？お願いします 相手する奴もスレ荒しということを意識して自重してくれ >>403
質問だらけでどこの何の答えが欲しいのか分からん し尿垂れ流しのような異常な質問を続けていることを、本人が気付いていない様子 >>404
多少左にずれてるように見えるのですが目の錯覚でしょうか… object要素を使って音声ファイルを再生させる時、メディアプレーヤの
操作パネルみたいなのが出ますが、あれとボックスの間の黒バックを
消す（例えばバックを黒でなくbodyの背景色と一緒にするとか、ボックスを
環境によらずパネルのサイズと一致させるみたいな）方法ってあるでしょうか。
素人のサイトなんで黒バックが見えてもどうという事はないんですが、簡単に
消せるものなら消しておきたいです。 >>410
objectじゃなきゃダメ？
音声ファイルならaudioタグ使った方が、その悩みを解決できるんじゃない？ >>411
ありがとうございます。
その線も考えたんですが、使ってるhtml/cssテンプレートが
xhtml 1.0 transitionalだし、そこにhtml5の要素を混ぜるのは
どうかという気がしたので。
特に問題も出ないし、素人のサイト程度ならそれでも許される
のであればそうしようと思います。 >>412
気にし過ぎな気もするけど
doctype変えちゃえばいいじゃん
びみょーーにボックスの解釈変わるとこあるけど
差して問題にもならんじゃろ >>413
ありがとうございます。
試したところ見た目も変わりなく、lintにかけてみてもhtml5仕様からの
逸脱は素人でも修正できる程度のようでした。>>411のアドバイス通り
audio要素を使ってプレーヤーの見た目も良くなりました。
これを機会にhtml5の勉強にも手を付けようと思います。
ありがとうございました。 >>403
答え教わっても成長できないよ
ヒントをもとに自分で理解して成長するんだよ 失礼します。
雨が降る表現ってHTMLで作れますか？
つまり、そういうコードがあるのかなって話ですが >>417
HTMLのみじゃ無理
CSSのみで雨が降るアニメーションサンプル集 | ONE NOTES
ttps://1-notes.com/css-rain-animation/ 今は大抵のことはcssで出来るよなぁ
パワプロみたいなバッティングゲームをcssとhtmlのみで作ってるのを見たことがあるが驚いたわ こないだCSSオンリーのマインスイーパ見かけた。
ほんとにJS一切なしだった。 cssで要素名をつけない場合とつける場合、の使い分けってなんでしょうか？
div.classname{}
.classname{} list-style:none;はformに指定してもいいのでしょうか？
form要素にもlistと同じcssを適用したい場合、このように書いていますが、、、
共通する部分があるということですが
form.search-form , ul{
list-style:none;margin:0;padding:var(--px16);
border:1px solid red;
} >>428
精細度が変わる
div.classname{ color: blue; }
.classname{ color: red; }
ってすると
divようその時だけ青くなるっしょ .alert {color:red;font-weight:bold;}
てすれば
赤く強調したいとこならどこでも使える（spanでもpでも） flexboxの解除について
https://teratail.com/questions/174792
こちらのページの最初の画像にあるように、最下部だけ回り込まないようにしたいです。最下部にページ送りを設定したいからです
つまりfloatのclearみたいなものはないでしょうか？ >>433
ページ送りのdivを作ってwidthを100%指定するとか
flexを設定した要素の外にページ送りを作るとか 要素セレクタって後付でここをこうしたいけどHTMLいじるのめんどくせってときにくらいしか使わないよね？
あと一括でimgにmax-width:100%付けたりaにtext-decoration:none付けたりするくらいで >>434
うーん、別にしたほうがいいみたいですね >>435
場合による
今の何でもかんでもクラスつければいいじゃんシステムでない場合はそこそこ使う 基本的にflexboxは同じ役割をするグループをするものをキレイに並べるためのものだから
違う機能のパーツは含めないほうがいいかも すみませんコロナの影響で大学の観光学部目指すのやめてpython学んでaiかweb系に行こうと思ってhtml勉強してるのですがshift2でやっても半角の真っ直ぐなダブルコーテーション打てないですかま機種のせいですか？ progateで練習してますがちゃんとしたダブルコーテーション直接打てないので登録していちいち変換してます。 >>439
ダブルクォーテーションな
お前アホっぼいから無理だわ もしかして、スマホかタブレットでやってんのかな、、 >>439
まず、全角と半角の区別を覚えよう
半角入力するときは、必ず半角モードにしてから入力
決して全角入力からの変換はしないように、癖をつけよう
で次に、コーデング用の書体をインストールしよう
Rictyがおすすめ
モニタで間違えずに読めることを重視した書体で、とても見やすい
書体幅も意図的に半角を全角の半分にしてあるので間違えにくい
最後に、コーデングに適したエディタを使おう
今はVSCodeが人気、他にもAtomやSublimeなど
機能は色々あるけど、入力補完、マルチカーソル、editorconfigを使えるものがおすすめ
エディタを変えたら、上記の書体に変更するのを忘れずに ここHTML/CSSの質問スレなんだが
文字入力の質問とか馬鹿すぎて心配になるわ
大学で教わってきなさいな そういうことか！
日本語キーボード使ってないから
すっかり忘れてた >>445
どんな質問にもやさしく応えるのがこのスレの主旨なのだ
それに慣れた奴ほど意外に知らない基本事項って結構あるもんだぜ >>449
違う
「HTML/CSSのどんな質問」が理解できない？ pタグの中にdivはokだったでしょうか？
wordpressのブロックエディタでは、１ブロックにpタグが自動的についてきます(´・ω・`)、、、
タグを独自にしたいのなら、ブロックをカスタマイズする必要がありそうです >>451
p要素の中にブロックが置かれると
そこでpは終わる >>452
ブロック同士でもやはり駄目なんですよね。
自分でブロックをカスタムするしかないようです。 ちょっと聞きたいんだけど、HTMLのidって使いまわし禁止だよね？ >>440 >>444 ありがとうございました 英字キーボードでやってみます 英字キーボードと言ってるが大丈夫か・・・？
日本語配列でもUS配列でもどちらでもいいけど文字入力の状態が日本語入力のままではだめというのは分かってるのだろうか >>454
1つのページ内でid名は1つだけ、な。 >>456
スマホからタブレットの
バーチャルキーボードのことではなかろうか >>457
やっぱそうだよね、なんでページ内に同じid名付けてるのか・・・HTMLの素人が作ったのかな・・・ クッソ長いソースコードで、複数人の手が加わってそうなったの見たことある。 怪しげなサイトから落とした圧縮ファイルの中にあったHTMLファイルをなんとなくバイナリエディタで開いたら
末尾の「</html> 0x0D 0x0A」の後に「PK 0x03 0x04 …」で始まるzipファイルらしきバイナリがくっついてたんだけどこれなんぞ？
HTMLコードの中からこのzipファイルを読み込んで何かできるHTML仕様があるの？ その怪しげな部分だけ切り出してzipファイルとして保存してから解凍したら、
普通のテキストファイルとインターネットショートカットファイルが出てきた。 怪しげなバイナリとHTMLの仕様になんの関連があるの？
WHATWGの仕様でも読んできたら？ ここはHTMLの仕様の話しかしてない場所だからな
スレタイをみるな https://ideone.com/AGlPbv
htmlタグでこのような中央寄せのボックスを作りたいです
しかし、inner2を作らずにinnerにpaddingやmarginを設定して余白を設定すると、1000px以上にひろがってしまいます。
そこでinnner2が必要なわけですが、outerとinnerのみでできないでしょうか？ >>467
https://jsfiddle.net/1uvc58gw/
CSSのbox-sizingについての知識が足りてないだけじゃね？ ↑いえ、これだと1000px以上に広がってしまいます。
autoで中央寄せにしているボックスは、1000px以上にはしたくないのです。 いえ、ブルーのセクションを広げたくないのです。
ここを1000px固定にしたいです。 >>473
いや、だからブルーのinnerは1000px固定になってるやん >>473
青いとこはwidth+padding+border=1000pxで固定
黄色いとこはinnerのmarginの左右がautoでinnerをouter内で左右中央寄せ
見た目上もinner2を入れた状態と同じ挙動だよ
https://jsfiddle.net/68x7c0hs/ >>475
これ、値がデカいから分かりにくいんだと思うけど
1000pxを300pxぐらいで確認してみれば？
ちゃんと300px固定になるから https://jsfiddle.net/vintagedopeme0522/1cebxu82/ 小さなキャプションを右上左上に追加したいのですが、<figcaption></figcaption>
にクラス名をつけられません この場合<span>タグなどで囲んで<span class>でクラス指定するのが正解ですか? >>479
教えていただきありがとうございます <figcaption class=クラス名></figcaption>でcss指定できますでしょうか? figureとfigcaptionに限らず、大抵の場合、タグ自体に意味があるわけだが
代用しなくていいものを別のもので代用して、見た目が意図通りになってれば何でもいい
というのであれば、好きなようにすればいい
<figure>: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure
<figcaption>: 図キャプション要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/figcaption
captionの意味・使い方・読み方 | Weblio英和辞書
https://ejje.weblio.jp/content/caption >>462
何かを仕込もうとしてるのかも
そのファイルの拡張子が、.html で、
ダブルクリックすると、ブラウザが起動して、
その時に、そのバイナリが動くのかも >>474
border-boxはpaddingもwidth煮含めるんですね
あどうでｓもる >>482
参考になりました。サイトまで教えてくださりありがとうございます。 wordpressでcssを切り替えたいのですが、トップページとカテゴリ一覧ページで切り替えることが出来ます。
is_category()関数を使用することで判定出来ます。
しかし、これはcssの別ファイルを用意するしかないでしょうか？
cssファイルの一部のみをis_category用に適用されると言ったことは出来ないでしょうか？ 中身がある場合はスタイル適用、ない場合はスタイルを適用しない という設定は可能でしょうか？ 普通にbodyにID付けときゃええやん思たけど
これってCSS設計的には古いの？ 自分はhtml 要素の方によくやるな
クラスつけるの https://codepen.io/sadsfff/pen/LYNEoNO すみません一番下のキャプションの末尾を…にしたいのですが、text-overflow: ellipsis; /* 末尾に「…」を付加する */
「-webkit-line-clamp: 何行まで表示するか」2行で省略したい場合は、「-webkit-line-clamp: 2」 どちらの方法でもダメでした、原因がわかりません。 >>498
読んでみたのですがどうしても分かりません… >>500
text-overflow: ellipsis; について読みました…
まだまだ素人に毛が生えたようなものなので、どこが間違っているのか分かりません…
教えてくださいお願いします。 >>502
特に難しい説明はないはずだから
1. たぶんどこかで誤字してるか
2. 記号の類が過不足してるか
3. セレクタが間違ってるか
のどれかだよ
1と2はコード眺めてても見つからないからvalidatorにかけよう
linterのあるエディタを使うこともお勧めする
3はとりあえず
背景色とか罫線とかのスタイルを追加してみて、それが適用されるなら問題ない
されないなら間違ってる こっちが想像してるページと同じかどうか怪しいが
本当に隅々まで読んで分からないなら
もう諦めた方がいいレベルの話だな wordpressでコードを折りたたみたいのですが、アドオンを使わずに折りたたむ事はできるでしょうか？ ↑上に関連してですが、wordpressなどでコードを表示するアドオンがありますが、ここにスクロールを設定するのが普通なんでしょうか？ タブレットの縦長、横長、スマホの横はpcの縮小版、スマホの縦はレスポンシブで表示させたい場合、
ブレイクポイントはどのあたりに設定すれば良いでしょうか？ その辺は現在色々出てる各フレームワークを見れば大体わかるんじゃないかな？ ちゃんとCSSフレームワークって言ってあげないと無駄にAngularとかのコード完全解析しそうな予感 >>510-511
cssフレームワークは使わず、
自分でcssを書こうと思っています。
>>512
ありがとうございます。
そのあたりで試行錯誤したいと思います。 >>513
フレームワーク使わなくてもいいから平均値とかわからないなら
一度それらが使ってる数値を見て参考にしとけばってこと role属性ってつけると、ブラウザが解釈して何かUIなどが変わったりするの？
検索エンジンのための意味付けのようなもの？ >>515
WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
> WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API（スクリーンリーダーはここから情報を取得する）によって提供される情報を除いて
> それらはウェブページに何の影響も与えないという点です。
> WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。 >>516
レスどうも、WAI-ARIA見てみました(全然わからん)
divやspanなど、そのものの意味が無いものに対して付加するのが始まりって感じ？
<header role="banner">とか
<nav role="navigation">とかソース見るとあるけど、「ある」と「無い」でどこに違いが出るの？
cssの要素選択ができるということはclassみたいな扱いができるってことかな。
header.bannerみたいな。
たくさんできた仕様で現在ではあまり使われていないものなのかな。 >>517
WAI-ARIAは「Web Accessibility Initiative - Accessible Rich Internet Applications」の略
Webアクセシビリティとかで調べてみるといい
あとは、こういうのとか
WAI-ARIAを活用したフロントエンド実装 - role属性、aria属性の基礎知識 | CodeGrid
ttps://app.codegrid.net/entry/wai-aria-1
CSSの要素選択は、その例だとセレクタはheader[role="banner"] アクセシビリティを外観にまつわる機能として判断してるようじゃ理解できないだろうな
むしろ目が見えない人などのために存在してるんだから アクセシビリティといえば
日系企業ランキングを思い出す…
あの惨劇はもう10年以上前だったろうか >>509
Bootstrap のブレイクポイントの変数定義では、
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default; >>524
すみません画像と文字を一つのボックスに横並べして画像のふちを白でぼかしたいんですが
その場合グラデーションを使えばよいのでしようか？ 手っ取り早いのが縁を白でぼかした画像を作成すること 画像にfilter: blur(5px);を加えると境界線ができグラデーションの意味がなくなってしまいます
グラデーションと画像ぼかしを境界線が見えない形で実装できないのでしょうか… 上に透明なdiv重ねてそのdivにbackdropfilter blurかけりゃいいじゃん すみません、htmlとjava初心者です。
こちらの質問の
https://teratail.com/questions/286638#reply-406826
背景の赤い枠を下まで伸ばすにはどうしたらいいか教えてください まったく関係ないいんだけど
529を見て知りたかったことあったので
https://cruw.co.jp/
このページみたいに
画像が出てから色が出てシュッとなるやつって
jQだと思うんだけど説明してるサイトとかってありますか？
これのネーミングなんて言えばいいのかわからなくて
ググってもイメージ通りものにたどり着かなくて ↑
画像が先に出てからじゃないや
色がでて画像がでてくる >>534
.item {
display: inline-block;
width: 30%;
height: 100vh;
margin: 10px;
font-size: 20px;
background: rgba(255, 0, 0, 0.4);
}
としてみたのですが変化なしですね・・ intersectionobserberで擬似要素と画像をコントロールしとんちゃうか >>528
審査員のひとりに
富士通のアクセシビリティに一家言ある人がいて
数年後に控えたJIS X 8341-3を
勝手に前倒しで審査項目に導入したので
ほとんどのサイトのランクが
前年と比べて100、200以上変動した
上がったところはいいけど
下がったところは代理店も制作会社もそれなりに
上からお叱りやペナを受けることになって非難轟々
その年を最後に日経企業サイトランキングは消滅した
という昔話です この世界じゃよくあることだ
すぐ収まるのもこの世界らしい Web系に転職したく勉強をしています
モバイル用にハンバーガーメニューを設置したいのですが、
HTMLにPC用とモバイル用で別のnavを2つ設置してメディアクエリで
それらの表示を切り替えるのはありでしょうか
それとも重複的な記述はHTML的にはよろしくないのでしょうか HTMLとしてはわりとどうでもいいというか
そこまで気にするもんでもないと思うが
運用する上で同じものが二つあるのは厄介だな
片方忘れられたりするリスクがある >>545
あなたはこの世に生まれた状態ですでにhtml5を話すことができていたのですか？ >>549
それは素晴らしい
これからもhtml5の布教に努めなさい
ブッダより idやclass名にアンダースコアやハイフンって
一般的には使っていいのでしょうか？
アンダースコアって使わないほうが良いですか？ >>552
ええで
ただ人によってアンダーバー派閥とハイフン派閥に分かれるので
人に渡す時は気をつけな アンダースコア、クラス名で使いすぎると
一定数以上は無効になったりしたんだけど
今は大丈夫なん？
それ経験してからは、自分で命名規則決められるとこではラクダ型にするうにしてる
ハイフンはダブルクリックでコピーしにくいし すみませんHTML/CSSの勉強を始めてまだ一か月弱の初心者なのですが
最近練習でメニューバーを作るのですがリストの箇条書き「・」の部分を
CSS display:blockで適用すると「・」が消えて
さらに list-style-type:none;で消すと 「・」消えるんですが
display:blockとlist-style-type;none;
どちらが一般的なのでしょうか
よろしくお願いいたします。 display:;はリストのマーカー消すためのプロパティじゃないからマーカー消す目的なら後者 >>559
素早い回答ありがとうございます。
メモしたので覚えておきます。 なぜdisplay:blockで消えるのかという疑問を抱かないからお前はその程度なんだよ 疑問はすでにあったけど、消える原理が分からんから放置してた >>557
BEMとかいうクソ妖怪人間のせいでアンダースコア
ダブルアンダースコアとかいう宗教が増殖してて嘆かわしいよな なんでブロックになると消えるのかいまだに理由はよく知らない たしか、liを検証ツールで見るとinline-blockでもblockでもinlineでもなかったような気がする。inline-blockもしくはinlineでも消えるっけ？
明日試してみよう。おやすみ >>566
消えてはいないんだ
見えていないだけなんだ
心の目（開発ツール）を駆使してよーく見るんだ >>552
__, --、つまり、2つ連続で使う時だけは、BEM, MindBEMding のルールに従うこと！
BEMは、Block, Element, Modifier
B__E, B__M
E--M >>569
それ7年ぐらい前にファイル名でやってる人いたな・・
意識高い系で会社散々かき回して、鬱になってやめたけど、アンダースコア2つ並んだのは見たことが無かったから
色々大変だったわ。 アスペルガーやね。
自分のルールを押し通そうとして、上手くいかなかったら発狂するタイプ
職人気質だけど社会的協調はできないのがアスペの特徴 http://www.hook-net.jp/smee/haremkingdom/fd/
すみませんボックスの中に画像を入れて画像をボックスの枠から少しはみ出させたいのですが。その際にボーダー戦を残すことができません。
opasityでは線が薄くなってしまいます、解決策はありますか？
https://codepen.io/sadsfff/pen/abNBrrM 参考サイトのどの部分のことを言っているのか分からないぞ
STORYのところ？ レスポンシブについての質問です
サーバーにアップロードしてスマートフォンで確認したらきちんと対応出来ていますが
Chromeの横幅を小さくしてもタブレットの方は効きますがスマートフォンサイズは効いてくれません
Chromeの横幅を小さくしたらきちんとスマートフォンの表示を出来るようにしたいので、考えられる原因を教えてほしいです。
使用しているviewportとメディアクエリの設定です
<meta name="viewport" content="width=device-width,initial-scale=1">
@media screen and (max-width: 1024px) { ｝
@media screen and (max-width: 480px) { ｝ headerタグは必ず入れないといけないのでしょうか？ >>575
デロッパツールで見ても分かりません ボックスシャドウで画像と同じ色をボーダー線に重ねてある可能性もあったのですが。
重なり合った時のみボーダーを付けることなど可能なのでしょうか 一つ考えたのですが、画像を透過(opacity)でボーダーを目立たせようとすると今度は画像が薄くなってしまう。
そこで画像の透明度はなるべく抑えてボーダーにシャドウを付けてみるというのが正解だと思いました。あってますでしょうか？ >>582
確かに！画像の背景をよく見ると半透明加工のようなものが見えますね 可能だからって何でもかんでもCSSでやるのは
時間の無駄ってことがよく分かるな まあ何ができて何ができないとかこれやったら他にどういう影響が出るかそれもまた勉強ってことよｗ
ノウハウはこうして蓄積されていくわけで pcのfirefoxとiphoneのsafariしか確認していないけど、
safariだけmarginかpaddingで意図通りにならない時ってある？
今は直ったんだけど、marginかな・・ https://www.peko-step.com/tool/alphachannel.html こちらのサイトを使って背景を透過させてみるとボーダー境界線は
残り文字をはっきり残すこともできました。ところが重ねた部分のボーダーが消えています。
参考サイトの文字をhttps://www.peko-step.com/tool/alphachannel.htmlにドロップしてみると、背景を不透明に加工しているものと別に画像の文字も透過されておりました。
画像文字の透明度を変更せずに文字の中のみ透過させる方法を模索してます。 >>586
％がよろしくないのかなーと思ったことはある
特に右側 凄い初歩的な質問かもしれませんが
<divclass="form-group">の
form-group て別にこれにしないといけない理由てあるんですか？
これ自体に効果はないですよね？ >>591
そうなんですね
一応フォーム作成しますよって意味でただClassに何組みたいなもんで儀礼みたいなものと解釈していいんですよね？
この値なんだろうと思って2時間以上調べてたんですけど出てこないんで困ってました。 .form-groupがCSSで定義されていれば効果はあるし、定義されていなければ効果はない
bootstrapやbootstrapとの互換を謳うフレームワークでは定義されていることもあるから、class="form-group"を宣言しないとデザインが崩れたり、変わったりする可能性は普通にある >>593
ありがとうございます。
もっと調べてみたらありました。
どうやら、ラベルやフォーム部分をグルーピングし、余白などの見た目を整えてくれる。と書いてありました。 <!--[if lt IE 9]>
もうこの時代、そろそろこの仕組みっていらないよね？ >>596
ぉぅ、悩んでみるわ。
でもIE9なんてアクセス無いしなぁ h1って1ページ1個というのはhtml5の時代でも同じですか？
ロゴにh1を使ったら、sectionやarticle配下にはh2から使うべきでしょうか？
それともsectionやarticleごとにh1, h2と使うべきでしょうか？ >>598
これとか読んでみるといいかも
HTMLのセクションとアウトラインを理解する
ttps://dekiru.net/article/12895/ >>599
読んで見ました。
ざっくりした部品ごとにh1から降りていっても良い、という感じですね。
どっちでも良いとなると迷いますね
引き継いだ内容(前任は蒸発)
よくある左上のロゴがH1になっていて、そのbackground-imageで画像を指定、テキストは-9999px移動をしているのですが、
imgタグを使うのと何が違うのでしょう？
imgタグにはロゴの意味付けがないからh1を使ってロゴに意味付けをしたということかと推測しますが、
これは現代風のやり方なのでしょうか？ よくあるような画像の横にテキスト複数行のレイアウトを
flexで行う場合について質問です。
--------------------
｜画像｜ テキストテキストテキスト
｜ ｜ テキスト
--------------------
今まで画像エリアとテキストエリアの横幅をそれぞれ%で指定していたのですが、
画像エリアの横幅のみを指定しても崩れない方法ありますか？
<div class="flex">
<p class="left"><img src="hoge.png"></p>
<p class="right">あああああああ</p>
</div>
<div class="flex">
<p class="left"><img src="hoge.png"></p>
<p class="right">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
テキストエリアも横幅指定しないとテキスト量によって画像エリアが狭くなったりしてしまいます。 >>600
よくやるけど
あんまり深く考えてないよ
どうとでも振る舞えるので少し楽かな、くらい >>601
テキストの方は
calc(100%-画像幅px)
じゃダメかね？ >>601
.left { flex:none }でどう？ Font Awesomeのアイコンを要素の途中に入れることは可能でしょうか? https://cree.fun/2917/
上記サイトの最近のコラムのように作りたいのですが、矢印をFont Awesomeで代用するつもりです。
子テーマを自作してheader.phpにもキットコードは書いてます。
通常<i class="fas fa-arrow-right"></i>で呼び出せるはずですが<div>flexの中に挿入できますでしょうか? >>601
.flex{display:flex;flex-flow:row nowrap;}
.left{flex:0 0 30%;}
.right{flex:0 0 auto;} https://codepen.io/sadsfff/pen/abNBrrM
すみませんコードはこれであっているはずなのに</a>たぐがいらないとwordpressから言われます、消したらレイアウトが崩れてしまうのですが、どこがダメなのでしょうか? http://www.fmovie.cfbx.jp/ 親テーマのphpファイルにhtmlを直接書いたのですが、ロードしたときにp要素がむき出しになってしまいます。
原因はわかりますでしょうか? とりあえずスレ違いだから
WordPressスレで聞いた方が早い気はする データベースのGUIクライアント管理ソフトの、閲覧機能だけを提供するようなwebサイトを
作るのに適したサービス、ツール、フレームワーク等はないでしょうか？
目的としては自前で管理しているデータベースを外部ユーザーに公開したいのですが
その際簡易的な全文検索だけでなく各項目の条件を厳密に組み合わせて検索したり
結果を表形式で提示したりしたいです
最悪フルスクラッチでやる覚悟はありますが
既存のサービスやフレームワークで良いものがあれば紹介して頂けると助かります
私の技術レベルはnode.jsとpostgresqlを使用した簡易的なサイト作成を自力でしたことがある程度です
若干スレの範疇からはオーバーする内容だとは思いますがここまで広範な質問内容だと
ガッチリはまる質問スレが見つからなかったのでweb制作関連で一番基本的なこちらのスレで質問させて頂きました 一般的なECショッピングサイトが、「データベースを外部ユーザーに公開している」状態だから、検索・閲覧・購入機能が実現できているよね？
どう表示させるか、とか、どう検索できるか、はサイトによるだろうけど、基本的なところは共通してるし要件を満たしているのでは？
そういうサイトはどういう技術が使われているか調べれば同じように参考に出来るのでは？ >>615
phpMyAdminから
書き込み機能を削ればいいんでない？ >>615
Drupalでいいんじゃね
使えるならだけど そんなもんフロントでjs用のdbクライアントライブラリ使ってあとはui実装するだけじゃんアホくさ。 皆さんご意見ありがとうございます
ひとまず>>620さん、>>621さんが具体的な名前を出して下さってるので
それから調べてみようと思います ハンバーガーメニューを調べていると
どこもcssで横棒をbefore, afterで三本並べているのですが、
画像やfont awesomeとかは使わなずにCSSだけで実現するほうが良いの？ >>625
好みの問題じゃね？
俺はほぼ使わんな、fontawesome
棒３つ並べてクルクル回すくらいなら
やることに流行り廃りも少ないから
以前書いたのモジュール化して貼るだけで済むしね >>625
どっちがいいと一概に言えるものでもないと思うけど、
cssさえ読み込んでいれば表示される、というメリットはあるのではなかろうか >>625
まあブラウザの影響を考慮すると画像でやるよりCSSでやった方がやりやすいのもあろうな
最近はアニメーションも凝ったの多くなったし >>615
Ruby on Rails が、すべてのフレームワークの基本。
全文検索は、Elasticsearch とかだろ
「rails 全文検索」で検索！ >>610
意味が分からないけど、
「javascript innerhtml textcontent 違い」で検索！
PHP のスレで聞いた方がよい >>630
ありがとうございます。ギャラリーページをphpで自作してみます。 リストを入れ子にして以下のようにしたいんだけど、２．のあとに改行が入ってしまいます。
inline-blockを使うと、改行は入らないけど、２．がｚｚｚｚｚの行になってしまいます。
上手い手はありませんか。
１．ａａａａａａａａａａ
２． ・ｘｘｘｘｘ
・ｙｙｙｙｙｙ
・ｚｚｚｚｚ
３．ｂｂｂｂｂｂｂ
４．ｃｃｃｃ >>633
まさにそのページにあるような結果がほしくて、そのように書きました。
が、それをhtmlファイルにしてブラウザで見ると、「２．」の次の行に「・ｘｘｘｘｘ」が来ます。
IEでもchromeでも。 >>634
IEは確かにそうなるけど、ウチのchrome、edge、firefoxはならないね >>625
俺は棒を3つ作るのがアホくさく感じたからFontawesomeやらSVGやらで対応してる｡
確かにCSSさえ読めれば表示できるというメリットもあるけど､そんなレガシーブラウザの対応はしたくない｡ >>635
Win7のIE11および、Chromeではなります。
バージョン: 85.0.4183.83（Official Build） （64 ビット）
>>636
> vertical-align: top;
ありがとう。いけました。
text-topでもいけました。デフォルトはbaselineなんでしょうね。 一般的にhtmlのIDは大文字から初めて、classは小文字から始めるの？
なにかクセづけたほう良いことある？ JavaScriptでiframeElement.contentDocument.replace(url)した後に、iframeElement.contentDocumentがnullになってしまうんだけど、なんで？
仕方ないからiframeElement.outerHTMLに<iframe ...>を割り当ててからreplaceしてるんだけど気持ち悪いんで
追記
replace取っ払っちゃった
ついでに宣伝 (無保証、そもそもテスト版)
https://strnote.com 質問です｡
いつもCSSフレームワーク使って書いてますが
力をつけるために､次はフレームワーク無しでサイトを作ってみようと思います｡
特に仕事で企業サイト等を作っている方に聞きたいのですが､作る際にCSSフレームワークは何か使ってますか？ 細かい話だけど、
AbcDef
abc-def
Abc-Def
abc_def
Abc_Def
色々どれが正解かわからないし、世界も無いと思うけど、
宗教や派閥みたいに色々あって悩む・・・ レスポンシブのスマホ時に表示されるdivで
<div id="hoge" class="fuga">
divにidとclassが記載されている場合
div.fuga{display: block} だと表示されないけど
div#hoge{display: block}
div#hoge.fuga{display: block}なら表示されるのは仕様？ >>643
HTMLのidやクラス名は基本小文字
キャメルケースとか使うのはプログラミングの話で、HTMLでは基本使わない
Twitterとかfacebookとか見ればわかるけど、もうクラス名も自動生成する時代で、意味なんてない
大量のdivタグと自動生成された無意味な文字の羅列が使われる時代だから、細かく気にするだけ時間の無駄
コンテンツの充実に頭と時間を使うほうがいい >>640
htmlとCSSで一番普及してるのはkebab-caseだよ
idもclassも大文字は基本的に使わない ケバブ？
肉巻いて焼くあれがモチーフになってるルール？ 参考。
+ JavaScript の質問用スレッド vol.142 +
https://mevius.5ch.net/test/read.cgi/hp/1568622157/939
939 Name_Not_Found sage 2019/12/25(水) 19:25:10.04 ID:???
My big dickみたいに複数の単語から成る名前を識別子にするとき、どうスペースを詰めるかという方法論であり、言語によって強制されてたりどうでもよかったりする。
ちなみにJavaScriptはどうでもいい族。
また言語では強制していないが、コーディングスタイルやはたまた開発チーム内のローカルルールで決められていることもままある。
だからあなたがクリスマスに独りで開発していて、コーディングスタイルなんて気にしない人であれば、全部小文字でもまったく問題ない。
ちなみに…
MY_BIG_DICK 定数用途
my_big_dick 変数用途 スネークケース
MyBigDick jsクラス名など アッパーキャメルケース
myBigDick 変数用途 キャメルケース
my-big-dick CSSクラス名など ケバブケース BEMなんか名前でどこに適応しているCSSなのか位置関係がわかりやすいし良いと思うが
そんなに評判よくないの？ BEM記法も全てのケースで有用というわけではない
特定のエコシステムの中で活躍するもの
なのでその界隈では浸透するけど
そうじゃないところでは全く喋られない
的な話ではなかろか
エスペラント語だって
世界のどこかでは活躍してる（のか？） >>652
に書いてある通り
VSCode の拡張機能・change-case でも見れば？
https://github.com/wmaurer/vscode-change-case
>>642
Ruby on Rails でも、Bootstrap を使うのが多い
YouTube に、たにぐちまことの動画がある >>659
リンク先を見て、その質問の意味が分かると思いますか？ https://codepen.io/rohanrit/pen/QPPbzx
ギャラリー画像にスライダーをつけるコンテンツを作りたいのですが、画像クリック後に自動スライダーを設置する場合
どのような要素が必要なのでしょうか? 正対した相手に向かって跳び上がり、自らの両足で相手頭部を挟み込んで、そのままバク宙のような形で回転しつつ、そうして巻き込んだ相手の脳天をマットに叩きつける キュウリとか大根に使っている時に指まで切っちゃったわ。 この身体の青は正義の心、赤は悪の心
そう、俺の名は
↓ https://codepen.io/mmgolden/pen/YrGddm
ギャラリークリック後にcssのみで自動スライドつけることは不可能でしょうか? PCサイトをレスポンシブしようとしているのですが、
レスポンシブ用cssを追加して
@media screen and (max-width: 559px) {
*{
max-width: 100%;
margin: 0;
padding: 0;
}
}
をしてもsectionのpaddingが反応しないのはなぜでしょうか？
この状態で
section{
padding: 0;
}
を足しても変化はないのですが、
cssのパスを厳密に書くとpaddingが0になりますが、そこまで厳格で無くてもcssは効くと思っていたので不思議です >>682
セレクタの優先順位・・・聞いたことがあります。
10点、100点とかそういうのですね。
一度調べてみます。
横着してとりあえず
*{
}
で上書きしてから、個別に調整していこうと考えていました。 >>680
コードは見てないけど
こないだ使ったswiperっていの良かったよ そんなに使い込んでないけど
カルッセル以外の動きもいくつか実装されてたし >>681
画面幅が560位上というオチではなく？ レスポンシブのためにviewport宣言書かないとスマホで見た時にCSSでレスポンシブ設定にしてもならないの？ デスクトップファーストかモバイルファーストかによって変わる ついでなんだけどHTMLメール作るのってHTMLブラウザで読み込んでそれをコピーしてメール本文に張り付けるだけで出来ちゃうの？ htmlメールがなかったら
かなりのフィッシング詐欺やウイルス被害が防げたのに、
OutlookかOutlook Expressかもしれないけど、どこが一番最初にやり出したんだろうね。 >>689
簡単にやるならそれでOK
ガチでやるなら各種メーラーで確認を jsfiddleなどで任意のサイズの画像を使った例をあげて質問をしたいのですが、
どのように画像を容易すれば良い？
具体的には
<div>
<h1>アイキャッチ</h1>
</div>
でh1のbackgroundに900x244pxのアイキャッチ画像があって
margin: 0;
width: 900px;
height: 244px;
background-image: url('URL');
background-repeat: no-repeat;
text-indent: -99999px;
それをレスポンシブに変えたときに
width: 100%;
max-width: 100%;
height: auto;
background-size: contain;
にすると横幅が可変しても画像の横が170pxぐらいに固定されて右側と下側に余白ができてしまいます。
background-size: coverにすると
横幅に連動しますが、h1の高さが48pxに固定されて下が隠れてしまいます。
imgタグのような縦横比連動にしたいのですが、どのようにすれば良いでしょうか？ >>692
ここでも結構使われてるけど
https://picsum.photos/
ってのがある
とりあえず、W900xH244の場合
https://picsum.photos/900/244
を画像のURLとして貼り付ける >>693
ありがとうございます、こういうサービスがあれば良いなと思っていました >>692
https://jsfiddle.net/809n4g21/
padding-topおよびpadding-bottomを%で指定すると、親要素の横幅に対しての値になる
これを利用すれば、一定のアスペクト比を保つボックスを確保できる >>695
できました！感激です！
afterの疑似要素にされている理由がわからなくて
h1要素に混ぜても動いたのですが、何かafterにするメリットはあるのでしょうか？
あとline-height: 0 があると無いとで余白が大きく違うのですが、
これはh1内の文字が無い「高さ0」の状態で計算されたpadding-bottom(top)が余白として足される仕組みですか？ 前スレでも似たような話があったな
https://jsfiddle.net/6obtvLkj/
背景画像の比率を保ったまま、レスポンシブ対応する
ttps://taneppa.net/responsive_background_image/ 例えばHTMLとCSSだけでハンバーガーメニュー作るとかよく使うCSSアニメーションだったりなんて物は
仕事にしている人はあらかじめ保存してコピペ手直しで実装できるようにしているんですか？ そうだよ。
ほとんどは、そこらへんのサイトでコピペで使えるなんとか集と同じノリ やっぱりそうですか
仕事で同じものいちから書くなんて手間ですしね
ただ知識の裏付けがないと融通利かなくなるって感じですかね 面倒なやつは時間かければ自分で書けるけど
仕事で使うには効率考えてもあるし
なにより仕事でコード書くとかかったるい面倒だからコピペって感じかなぁ
自分のサイトならいくらでも面倒なコード書くけどね HTMLとCSSのソースは著作権ないんだっけ
プログラムになると特許とかあるから面倒だとかなんだとか どこかのお嬢ちゃんが会社ごっこしているサイトは
ソースでまるパクリがバレたけど、
法的な根拠はどうなんだろうね
楽譜の4小節までokとかあるけど、そんな範疇かもよ HTMLならOKとかJSだからだめとかそういうものじゃない
誰が作っても同じようなものになるものについては著作権は無い プログラムとかパクってもコンパイルするやつならわかんねーし
逆コンパイルしたら違法だし コンパイルされててもパクリ証明はできるし、パクリ検証のためのリバースエンジニアリングは違法でないよ >>692
>>698
Bootstrap で出来ないの？
>>703
>楽譜の4小節までokとかあるけど、
そんな決まりはない。都市伝説
最近、米国人が、何音かまでのすべての組み合わせを、web で公表した。
公表することで、音の組み合わせを、誰かに独占されることを防ぐ
これによって、誰かに訴えられても、それ以降に作られたものは、大丈夫になった レイアウトに著作権がなく、アイコンとか画像や小説なんかには著作権が発生するんだっけか >>707
Bootstrapないと何もできないの？ 「このレイアウトは私の思想を表現したものだ！！」と言い張ったら
どこまで話聞いてもらえるんだろうか progateのHTMLの道場コースやってるんだけど、明らかに合ってると思うのに間違ってるって言われるんだけどバグ？
赤い線で囲ってるところを直してくださいって書いてあるもののマス目を表示して確認しても完璧に合ってるようにしか見えない
赤い線で囲ってある部分以外にも全体を何度見直してみても間違いが分からない
何で間違ってる部分の答えを教えてくれないんだろう… >>711
自己解決しました
どうやら背景色の指定が間違ってたみたい
Color Pickで背景色調べたのが間違いだった
rgbaの値は調べられないらしくてrgbの値を入れてたのが原因でした フルスクラッチで正しいHTMLで書いてるやつおるん？ 初心に戻るのはいつでも良いことよ。
俺も今日1年ぶりに有料会員に戻ったけど・・・退会してもカード番号保存されているのかよ、怖いなぁ。 初心に戻るのはいいけどHTMLとCSSに関してはprogateって特別良いところとかなくね？
むしろ今どきナビをfloatで横並びにしてて微妙に思える >>716
こっそりflexboxコースが爆誕してる >>716
新規で作るならflexboxだけど
古いサイトのメンテなら必ずfloatにぶち当たる
知識として知っておかないといけないやつよ
まぁほぼほぼ100％、IEのせいだけど
あれが駆逐されない cssとかだいぶん慣れてきた感じなんだけど、
jQueryとかjavascriptを使わないならタグにidは使わず、
セレクタもクラスだけで記述した方が良い？
jQueryやjavascriptにて識別するようになって初めて
IDを使うようにしたら良い？
2020年のトレンドがどうかわからないけど、
昔から現場で今もやってる人がいれば教えてくだしあ >>719
結局のところ、働く場所、仕事の内容によって命名規則などのルールは違うから好きにすりゃいいと思う。 >>719
cssのセレクタでタグとクラスしか使わないという硬い意思を持つなら
なにより、getElementByIdなど使わないという硬い意志が必要 要素のstyle属性、important による指定を除くと、idセレクタを含むCSSはidセレクタを含むCSSでしか上書きできない
ということを踏まえると、
仕事で書くCSSではid使わない方向になりましたね >>722
クラスで代替できるからイラネなのか
じゃJavaScript使うまでは不要になるんだな >>723
ほとんどの要素にクラスついてるとJSでもクラス名で取得で済むから
id要らないことのほうが多いよ
ページ内リンク用以外では、YouTubeのAPIとか特定のJS用だけしか使わない >>719
良いか悪いかは自分で決めたらいいけど
URI目的以外では
IDなくても特に困ることはないと思うよ あ、いや
for属性とか使うためにもIDは必要だったわ
すまんこ 全部の要素にID付けとくといいよ。
別段困らんし。
付けるときに困るけど。 719です、色々ご意見ありがとうございました。
使うようになって初めて、その部分にidつけようかなと思います。 そういやこの数年ほとんどid使わなくなったわ
優先順位も結局、細かくクラス名つけりゃいいじゃんで
話終わっちゃうしな >>601です
>>603
ありがとう。でもrightにはメンテ性落ちるから画像幅すら指定したくない
>>604
ありがと。でもrightに背景色付けるとrightエリアの幅がバラバラにみえちまうね。惜しい
>>606
ボックスをテキストが突き抜けるんだけど。
https://jsfiddle.net/401srjkp/ displayがblockは左右いっぱいの箱からで
inline-blockは左右いっぱいではなく横に並べられる箱という認識で良い？
他に違いってどんなのがある？ × 左右いっぱいの箱からで
○ 左右いっぱいの箱で >>732
.rightのflex: 0 0 auto;をflex: 1 1 auto;に そういやflex: 1 1 auto;はflex: auto;と同義だったな レスポンシブ化をするときに
width:100%
を使うと思っていて、
max-width: 100%もあるようですが、
width: 100%でもはみ出て(横スクロールが出て)しまう時はどのような状況でしょうか？
どう使い分ければ良いでしょうか？ 同じくレスポンシブするときに横の幅や余白は%で指定すれば良いのですが、
縦の余白（margin、padding）がスマホとPCでいちいち指定しなくても同じようにできないでしょうか？
vwだとスマホはいいのですが、PCが画面幅バラバラに対応できないとおもうのですが。 >>740
そもそも今の時代、％なんて使われないぞ
CSS2とかbootstrap全盛時代の古いやり方
今はメディアクエリ＋固定幅か、どうしても動的に変化させたい時はflexboxを使う vw は絶対に、文字・画像が読めないまま
絶対に大きさが変わらないから、何も出来ないまま >>741
例えばどこのサイト？
可変に対応していない方が古く感じるんだが。
その方法だと、決め打ちって事？
スマホ端末やブラウザで横幅が違うんだから最適化できなくない？ うん今、有名どころチェックしたがやはりどこも%で指定だわ。（flexももちろん使って）
>>741の参考サイトが楽しみだわ 738ですが、
vwというのがあるのは勉強になりました。
width:100%とmax-widthの違いって何でしょうか？
どちらもデバイスの横まで一杯になるので何に違いがあるかよくわからないです。 >>746
スクロールバーだったかな
なんか違ってた max-widthはデカさの最低保証
min-widthは小ささの最低保証 >>719
jQueryはクラスを使うのが一番相性がいい
jQueryはCSSのセレクタを使ってスタイルではなくコードを適用するもの
つまりCSSの使い方とjQueryの使い方は似ているものとなる >>752
idはどういう時に使ってるの？
javascript(jQuery除く)を使わないといけない時？ >>753
URIとして必要な時か
for属性のターゲットとして必要な時じゃなかろか >>755
Uniform Resource Identifyer
ネット上のリソースのありかを示す書式のこと ありかじゃないか
リソースを一意に識別するための書式 uriとurlの違いを分かりやすくガンダムで例えて クソ面白くない
うまいこと言った気になってるバカを想像すると激寒
早く死ね 質問です
文字を入れるinline-block要素のheightが固定、min-widthが設定されているというとき
まずheightの限界にまでぶち当たってからwidthが広がっていく、というふうにはできないでしょうか？
例 min-width: 1em; max-width:10em; height:3em;のとき
┏━┓
┃ド┃
┃ッ┃
┃グ┃
┗━┛
となってほしいのに
┏━━━┓
┃ドッグ┃
┗━━━┛
とまず横に広がってしまう >>762の質問の補足ですが
例えば「あいうえおかきくけこさし」という文字列があったとすると
┏━━━━━━━━━━┓
┃あいうえおかきくけこ┃
┃さし ┃
┗━━━━━━━━━━┛
とmax-width:10em;を先に満たしてしまおうとするのではなく
┏━━━━┓
┃あいうえ┃
┃おかきく┃
┃けこさし┃
┗━━━━┛
とheight:3em;の範囲内で最小のwidthに収まるサイズになってほしいです >>764
すみません、>>762は途中で送信してしまいましたが>>763のほうが肝です そりゃあ
横書きしてんだから
許す限り横に広がるだろ まずは
お前にとって都合の良い改行箇所がどこかを
ブラウザに伝えにゃならんのよ >>767
ありがとうございます。
とても参考になります。
でも偉そうにイメージだけで高説してないで
具体的なコードで示してもらえませんでしょうか >>753
> idはどういう時に使ってるの？
いまはIDは使わない。もともとIDはJavaScriptから参照するときに
速いという特性があった。しかしそれはもう20年以上前の話、1990年代の話
今では体感できる違いが全くなくなった >>768
偉そうだった？ごめん
優しく書いたつもりだったんだが
開業したいところに<br>って書きなよ
繰り返しになっちゃうけど
ブラウザはお前の書いた通りにしか動かないよ
お前の意図までは汲んでくれない > 開業したいところに<br>って書きなよ
ないわーｗ あの要件でこんなことやるやつは素人だろｗ
素人は答えんな >>770
いえいえ こちらこそごめんなさい
ところでテキストにbrって・・デバイス変わったら
それに合わせて改行位置も変わるように対応する意図とずれてませんでしょうか
私の意図汲んで欲しいのはブラウザではなく回答者様なんです......(;;) >>771
他にやりようもなくね？
お、あいうえお、で改行するんやな？まかせろ！
なんて実装系、なんかある？ う、うーん…なんか変な人が住み着いてるようなので去りますね ウエメセの質問者だな
jsで文字数を取得して3で割って文字数ごとに<br>を挿入するぐらいしかやりようなくね？ brっつーか、要素の幅と高さを動的に変えれば済む話だけどな
どちらにしてもHTML/CSSの話ではない
スレチ 右隣に置いた要素の幅を最大化したら制約を満たす範囲でうまいこと潰れてくれるとかあってもいいのにな。 可変のさせ方の質問に対し
固定幅想定のbr回答はおかしい >>781
他にやりようもなくね？
質問の想定していることは
ブラウザのレンダリングにはないものだもの
まるで手で静的に書けといっているようにも見えるが
わりと的確に答えていると思うな
わかってないくせに
それに突っかかる質問者もどうかしてるかと >>769
id="hogehoge"って
昔、同一ページ内のジャンプ内に使っていたけど、
<h2 id="hogehoge">
<a href="#hogehoge">
HTML2, HTML3とかいつからかあったか知らないけど、
本来のidってどういう使い方で生まれたっけ？
いつのまにかjavascriptの変数格納用に使われ出したよね >>783
変数格納に使ったことはないけど
DOMの概念には既にあったよIDは
要素を一意に特定する識別子として
最初に触れたのが96年でそれ以前はわかんないや 既存のサイトに、緊急のお知らせみたいにz-index:10とかで
position: abusoluteで表示させたいとき、
その枠はdiv, span, 他に何か適切なタグってある？ >>787
上手いこと言った気になってんじゃねえぞ！ BMI計算サイトみたいなのを作りたい
知識０からなんの勉強すればいい？
htmlとJavascriptってのでいいんですｋ？ >>795
ありがとう
>>796
他にも計算したいことがあるのよね
将来的には数値を入力してもらって別の表から値を持ってきたりしたい 外側から見て、中身を想像して作ってみるのも
結構勉強になるしね あるから作らなくていいんじゃない
作りたいから作るんだ >>796あたりをお手本に勉強してみて
つまづいたらまたきますわー
excelだけの人卒業するやで〜 cssの書式を1行に整形できるサイトってある？
複数行で整形するのはwebサイトや、エディタのプラグインであるけど
サクっと1行にしたい時があって・・・。
エディタの正規表現でもできそうだけど
大量のセレクタがあったら上手くできる自信無いわ。 1行ってのはセレクタごとね。
1行にするほうが見やすい時があるし。 chromeでソースファイル開いてやるとこになかったっけ >>802
scssでスタイル指定をcompactにすればいいんじゃね cssを含んだ更新しても反映されないのはスーパーリロードで良いけど、
cssの最低保持期間ってどれくらいなんだろう floartを使った左のdivにメニュー、右のdivにコンテンツのサイトで
レスポンシブにしたとき、floatをnoneにすると
メニューが上に来てしまうと思いますが、
htmlが変えずにcssだけでコンテンツを上にすることはできるのでしょうか？ >>809
無理。だからhtmlの段階からそれを想定して順番に書くあとは
rightとleftで調整 SassMeister
https://www.sassmeister.com/
このサイトで、Sass メニューの、CSS Output を、compact, compressed にしても、1行にならない。
なぜ？
h1{
font-size: 20px;
color: blue;
}
p{font-size:20px;
color:red;} >>812
えー
上下の入れ替えなんてgridで出来んじゃん
IE11でも問題なく flexのorderでも出来るな
入れ替え出来ないとか、いつの時代の話をしているのか >>816
>>817
君、わかってない。
floatはレイアウトの為に使うものおして質問してるのに
gridやflexを前提で回答ってズレてるよ。
まあfloatの時代を知らないんだろうから仕方あるまい。 つまりgridやflexを使うレイアウトなのであれば
最初からfloat自体を使わないんだよ。
たぶん意味不明だろうけど、これは最近始めた人には絶対理解できないと思うわ floatでレスポンシブを実現しているサイトで、floatをnoneにした時の話って書いてあるだろうに
文章読めないにも程があるな 今年の7月からHTML/CSSの勉強を始めた者としては
おまえらが呪文を唱えてる様に見えるぜ floatを使った2カラムレイアウトで、スマホ表示時はメディアクエリでfloat: none;にして
divを縦並びにしたけど、その順番を上下逆にしたいって話じゃなくて？
だとすればメディアクエリでgridかflex使えば出来るやん。 メディアクエリでgridかflex使うのがいいと思うけど、
あえてどっちも使わないでやるとしたらposition:absolute使えばできるのかな？
コンテンツの量が増減したら崩れるけど 809です
「htmlが変えずにcssだけでコンテンツを上にすることはできるのでしょうか？」
というのが聞きたいことだったので、
flex, glidを使うことで対応できるということで道が開けました。
flexはちょっとだけ使ったことがあります。
古いサイトの対応にはまだまだ追われそうです。 >>825
もう最高です、思わず失禁しました。
ゆっくりコードを確認したいと思います。
ありがとうございます。 >>825
jsfiddleってスニペット機能ってある？手打ちでhtml打ってる？ >>815
なんでかはここではなく、そのサイトの中の人にきいたらよかろ
おれはこっちで試したら1行にできたけど
https://sass.js.org/ >>827
テンプレ拾ってきて不要なもん削除して単純化させてもいいんだけど
逆に面倒なので、適当に手打ち
スニペットっていうか初期画面でboilerplateってのは出てくるけど
とりあえず「jsfiddle 2 column layout」とかでググって誰かが作ったのを
探すしかないかも >>822
gridかflex使えるならPCの段階でとっくに使ってるはずで
float使ってわざわざレイアウトやらなきゃいかん状況なのかと思ってたら
俺が間違ってたみたいごめんな
エスパーむずいわ まぁ、html変えずにってcssだけでって条件なら、元のソースを極力いじらずに
既存サイトをどうにか改造したいって話だろうからな
変に深読みしすぎ 10年もののサイトのリニューアルで
HTMLの一部が
今後も使い続けるCMSのプログラム内に
ハードコーディングされちゃってて変えられない
みたいなことやったばかりな俺にタイムリーな話題だ
grid様々だったわ HTMLいじれないCSSの上書きのみでなんとかしろ
っていう案件は結構あるからなぁ
そんなことするより今時なサイトに改修した方がいいですよ
っていうけどお金かかるんでしょ？で聞く耳持たない >>825
gridよりflexのほうが理解しやすいなぁ
orderで優先順位決めるだけだし。
gridってもっと複雑な用途に使うのかな >>834
この程度だったらflexの方が簡単だし楽だね
gridはアイテム同士を結合したり出来るから、もっと複雑なレイアウトが可能だけど
コードが長くなりがちで、ぱっと見で分かりにくいってのはある
でも作るだけならジェネレーターとか使えば楽だよ BEM記法なんだけどElementとModifierは「--」(ハイフン二つ)でつなぐのか「_」(アンダーバー一つ)でつなぐのかどっちだろう。
BEMのサイト？見るとアンダーバー一つになってるけど↓
https://en.bem.info/methodology/quick-start/
qiitaにはハイフン二つと書いてるのもある↓
https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1
取り決めが変わったのかな BEM(MindBEMding)についてややこしくない説明をしてみた
https://qiita.com/masaki632d/items/0e6eb00e9d8611c4d8b7
MindBEMding では、__, -- のどちらも2つを使うことで、
元々の単語内に、1つを使えるようにしている >>837
>>836の一つ目のサイトのModifierのFeaturesに↓が書いてある
＞The modifier name is separated from the block or element name by a single underscore (_).
ElementとModifierをハイフン二つで繋いで作ったのあるからアンダーバー一つに変わるとそれに合わせて完成したのを変更するの面倒だけど
アンダーバーかハイフンかどっちだったか迷うことが自分はあるから、アンダーバーにまとまると迷わなくなって助かる 画面作りの初心者なんで思う事だろうけど
divとかのwidth/height指定に対して、実際の幅がpaddingやらボーダー幅を加算した値になるってのが納得できない
なんでだ？ お前がbox-sizing: border-box;してないから。 >>834
flexは基本的に「並び」のコントロール
だからその順序は縦でも横でも、HTMLに書かれた通りになる
gridは「配置」
昔のテーブルレイアウトをCSSで再現した感じ
要素をどこに配置するのかをCSSで決めるので
HTMLに並び順を支配されない
という違い
複雑であるかどうかは別として
レスポンシブで役立つケースが多いな、自分は
スマホ幅だとどうしても
PCと同じレイアウトで大きさを変えるだけでは
無理な場面があるので box-sizingっていつぐらいから使われだしたの？ 俺も昔はmarginが打ち消し合ってとか面倒臭いことになってたけど、
border-boxとかあったら良かったなぁ >>843
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing
これ見ると、chrome10とかsafari5.1とかでベンダープレフィクスなしで
使えるようになってるから、2011年ごろかな CSSなどない時代、テーブルで
レイアウトしてた人にはgridの方が馴染みやすいかも テーブルレイアウトからヒント得て作ったCSSだろうなと思ってる MDNのWeb ComponentsのUsing custom elementsでサンプルとして出てるpopup-info-box
index.htmlに手を加えて</form>の直後に<popup-info-box>をいれると、formの中に記述してある元々のコンポーネントが動作しなくなる
直後ではなく間に<br>とか入れると動く
これがchrome, firefox, edgeの全てで同じように動かなくなる
だから仕様なんだと思うけど、どういう仕様のために動かないの？ >>849
2つめのpopup-infoの<span class="info">がopacity:0で上の要素に被ってる
そのせいで:hoverが効いてないっぽい
１つめのpopup-info上でinspect elementすると、
２つめのpopup-infoの<span class="info">に行っちゃう >>850
なるほど！opacityを01切り替えて表示させる作りだから実際には消えてないんだ
スッキリ
ありがとうございました ローカルのhtmlで
import xxxx from "./xxxx.js";
するとCORSでブロックされてしまうんですが、回避する方法って
と書いてから検索タグが思い付きました
回避する方法って無いのですね
ダメじゃんモジュール化 理解度が足りないのを他のせいにするのは人としてどうかと思う >>853
理解度といわれるならば方法があるのですね
どうかお教えください import自体をやめて大人しくscriptタグ書くなり、ローカルにサーバー環境作るなり、ブラウザの設定を変えるなり、手段は色々あるのにここで文句たれてるから馬鹿にされるんだよｗ 素人にダウンロードさせて使わせるって可能性を頭から除外していて草
そもそもimport使うのにscriptも知らん奴とか、並のオツムじゃそういう発想は出てこないね https://www.irasutoya.com/
こういうイラストの発表すHP作りたいんですけど
このサイトってHTMLだけですよね？
作るにあたって最初から作る自信がないので
雛形でいいもの有りませんか？
HTMLは多少理解できる程度です。 >>857
このサイトはbloggerだと思う
<meta content='blogger' name='generator'/>
こういう既存のサービス使うほうが、初心者には良いと思うよ
特に検索に対応とか言い出すとサーバーサイド言語が要るし、言うほど簡単ではない 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 >>858
ド素人なんですが、Bloggerという無料サイトで作ってるわけですね？
ライブドアブログを持ってるんですけど
それと同じように無料で作れてサイトのアカウントも作れるっていうことでしょうか？
そこにある雛形を作って制作シたのだろうということであってますか？ キーワード教えてもらったら
おうむ返しで聞く前に
ぐぐれかす rubyｶﾞｲｼﾞの発作レスのタイミング笑うわｗｗｗ >>861
よくある間違いだけど
いきなり完成を目指さないで今手元にあるもので
出来ることからやってった方がいいんじゃない？
bloggerだよって教えてもらったら
とりあえずbloggerのサイト行ってどんなものか試してみてさ
それに何でもかんでも人に聞いてやってたら
出来上がるものは誰かが既に作ったものになって
そんなの自分がやる意味全くないしね >>862>>864
ご忠告ありがとうございます。
勉強してからまた出直してまいります この質問するの正直恥ずかしいんですけど
最近HTML/CSSのレイアウトで、CSSプロパティのpositionを習得して
馬鹿の一つ覚えみたいに見出しから文章の配置をpositionで指定して
後から追加したコンテンツを配置すると見事にレイアウト崩れが起きてしまって
何でもかんでも positionで指定するんじゃないなと身体で覚えました。
文章配置/画像配置/コンテンツの配置は適材適所のプロパティで配置したほうが無難なのでしょうか？
position以外のプロパティも覚えなきゃとは思うのですが
自由に配置したい floatやってもなんかこの位置で配置じゃない！と歯がゆいので
positionを習得したら、ステップアップするために、何を学べばいいのでしょうか
拙い文章で申し訳ありませんが、ご指導のほどよろしくお願いします。 体系的に学ぶのが手っ取り早いからHTMLとCSSの参考書買おう よっぽどフリーダムなデザインで作りたいのだろうか、、 ホームページのグローバルナビで、要素と要素の間に入れ込むときに、下の要素と被せたいときはどうしたらよい？
今はグローバルナビのスペースが白く隙間になってる状態
よろしくお願いします 何言ってんのかサッパリ分からんから、とりあえず↓にソース貼って
https://jsfiddle.net/ >>870
そこの要素を指定しているそれの親にさっき出てた例のアレを指定するか、
下の要素に上にいくようにmargin-top:-100pxとかして被せたらいいんじゃないかって思うかも。
でもさっきグオーバルナビのスペースは俺が黒く塗っておいたわ >>866
ケースバイケースでその時々でベターなcssをチョイスして
ジョインしてアサインした時のマインドセットでメンティーされてトゥゲザーしようか >>866
レイアウトに使って良いのはflexとmarginとpaddingだけ、って縛りを付けてレイアウトしてみたら？
だいぶマシになると思うよ
とりあえず、positionはpositionでなければ対処出来ない場合以外は、基本的には使わないって覚えておけばいい 使ったことないけど、
GUIのホームページ作成ソフト(書いてて何か恥ずかしい)で
イラストレーターのように自由に配置できる仕組みって
もしかしたらbodyをrelativeにして、全部absoluteなんだろうか >>875
そうだよ
後先考えなければなんでもできる
素人もできる fireworksでスライス設定して書き出すとtableで出力されてたな 2000年頃とか20年くらい前だとテーブルでサイトをレイアウトとか普通にやってるのいたな flex について、wrap指定して折り返された要素が、折り返されていない要素と同じ大きさになるようするためにいい方法お聞きしてもいいでしょうか
■が横並びにするdiv要素で、幅については最低幅、最大幅の範囲で可変です
理想は
■■■■
■
となり、全ての■が同じ幅になってほしい
ですが、普通にやろうとすると折り返された■は当然最大幅まで伸びてしまいます。
■■■■
■←折り返されたこいつは伸びてしまう
折り返されていない■と、折り返された■を同じ幅にそろえるよい方法などありますでしょうか？
それとも、jsでゴリっとやるしかなさそうですかね >>879
いたというか、それが当たり前だったよ
IE6もNN4もCSSをまともに解釈とレンダリング出来なかったから
今みたいにCSSでレイアウトするようになったのは
JIS X 8341-3が発表されたたのと
MTのデフォルトテンプレートがCSSレイアウトされてたのが大きい
それでもしばらくは
企業サイトとかは見た目重視でテーブルレイアウトを続けたけど
その後、SEOの概念が生まれて
CSSレイアウトがテーブルレイアウトを圧倒するようになって
テーブルは終わったどころか、害悪扱いにまで成り下がった
このスレでも、表ですらtable要素を嫌う人が一定数いた >>880
JS使うくらいならgrid使えば？
メディアクエリと組み合わせればどうとでもなると思う >>880
flex: 1 1 auto;
max-width:
min-width:
とかじゃだめ？ >>880
状況が再現できないんだけど、可変な幅って%指定だったりするの？ レスありがとうございます、 gridはまだ試したことなかったので確認してみます。
floatは盲点でした、そちらも試してみます。
>>886
こんな感じです。画面の大きさ次第で再現可能かと思います。
https://jsfiddle.net/y1Lxwujd/ >>887
末尾にダミーでflexアイテムをいくつか入れて、ダミーをvisibility: hidden;にして
メディアクエリを使って色んなパターンに対応させるって手がある
ただし、これだとコンテナ下部にダミー分の余白が出来たりするから
その辺をどうするかって問題もあるので、まぁ参考までに メディアクエリは無くてもイケるか
https://jsfiddle.net/78aqbfxr/
枠線が無けりゃ余白も気にならないんだけど
ちょっと惜しいね >>887
>>889を改造して余白を消してみた
https://jsfiddle.net/eL6vhutk/
ただ、この例では上手く行ってるけど、flexアイテムの文字数を揃えないと
横幅が揃わないので、汎用性は低いかもね そんなSEO的にもセマンティクス的にも問題ありそうなことするくらいなら、
素直にJSで実装する方が良い気もするけどな
実装に10分も掛からないだろうし まぁ、でもHTML/CSSスレだし
だから誰もJS書かないしｗ 質問者ですが、様々なレスありがとうございました。
それぞれ試したところ、grid layoutとメディアクエリでそれっぽくできました
https://jsfiddle.net/wobn687y/
問題なければひとまずこれで行こうと思います。
ありがとうございます。 普段はゴシックで
h1とかで、ここぞという時に極太明朝(無理なら普通の明朝)を使いたいのですが、
クラスに mincho を作って
.class{font-family: ****}
<span class="mincho">強調したい文字</span>
としたいのですが、
いろいろなデバイスに対応させるためにwebフォントを使わないのであれば、
明朝体を持っていないandroidは抜きとして、どんなfont-familyを羅列すれば良いのでしょうか？
win10、iphoneは持っています。 >>897
これでいいだろ
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; >>898
ぉぉぅ、ありがとう。
何やらiphoneだとh1-h6タグで使ったらboldになるみたいね。
android用のwebフォントって重いというのは、あれどういう仕組み？
アウトラインフォントの全データダウンロードなんて考えにくいけど、そういう方法なのか、
例えばgoogleフォントならcssで読み込んだコードで使う分だけ、1文字単位でフォントデータをgetリクエストするの？ >>899
>何やらiphoneだとh1-h6タグで使ったらboldになるみたいね。
それは単にデフォルトスタイルだろう
hnのデフォは太字だ
>>899
あんま関係な基本的にウェブフォントは1フォント丸っと落としてる
Googleフォントもバラけてはくるけど、最終的にワンセット落ちてるはず
モリサワのウェブフォントは
使ってる文字だけのサブセットだったはず >>901
ぅゎぁ、ちょっと見たけどややこしそう・・・
>>900
そっか、まるっと落としているのか。どれくらいのデータ量と思ったら15MBぐらいorz
これは大きいな、日本語フォントだから仕方無いけど。
仕組みとして、headタグのwebフォント用cssを読んだ時点でフォント落としているの？
android用の明朝フォントデータ量で、windowsやiOSに影響出したくないし
phpでandroidを認識したらcss読ませるタグを書くってのは良い案？ >>902
cssファイルではないよ。フォントファイルな。
フォントファイルの読み込み方法は二通りって
1つはcssファイルから読み込む方法
もう一つはheadタグにフォントファイル読み込み記述を書く
cssファイルにはphpは使えないので後者だな。
UA判別でいいと思うよ >>902
何が面倒かと言えば、例えば全てのIPAフォントをSVGフォントに変換するのは容易いが、使われている文字以外の大量のSVGフォント定義を除去しないとサイズが悪夢
今なら何か除去を自動化するツールとかあるんじゃないかなぁ >>904
そんな面倒なものをなんで私にわざわざ勧めるんですか？
初心者だからってバカにしないで！ テキスト入力して、フォントファイルアップロードしたら、
使う分だけのファイルが生成されたサブセットがダウンロードできるサイトがあれば良いのにね サブセットフォントメーカーは？
更新のたびに生成するの面倒だけど cssのfont-size, borderとかpadding、line-heightなどで、
開発ツールで10px, 110%, 1.2emとか気ままに決めている自分が、
これで良いのか悩んでいるのですが、
スマホ縦持ちも視野に入ると、marginをpxより％なのかなとか
モヤモヤしてしまいます。
誰か「そういう時はこういうルールにすれば色々悩まなくて良いよ」とかあれば教えてください。 >>906
モリサワのウェブフォントはそれに近い
その書体が指定されてる要素で使われてる文字だけの
フォントのサブセットが落ちてくる
たとえば↑だったら
あ、う、え、お、か、き、こ、さ、し、す…
など使ってない文字は入ってない >>905
webフォントを使わない、という条件からすると厳密にはアウトではあるけど
フォントファイルがテキストなので「強調したい文字」の限定された文字数において「自分で必要なフォントだけを取り込める柔軟性」という特性を持つSVGフォントは、選択肢として別にバカにしたものじゃない
主に一般には存在しない異体字フォントを提供するために使われるテクニックだけど頭から除外するのもどうかと思った 空気読める人ならわかるけど
>>905 は、なりすましなので注意ね WEB components の質問
https://pastebin.pl/view/b2947a05
で、id="NG" のタグがうまく(id="OK"のように)レンダリングできないのは仕様？
仕様なら、どこを見れば載ってる？ >>916
あ、HTML,CSSのスレか
+ JavaScript の質問用スレッド vol.141 +
https://mevius.5ch.net/test/read.cgi/hp/1559474974/
のほうに質問しなおします cssで
section.hoge {}
section.hoge ul.fuga { margin: 0}
みたいな値が入っていない行だとvscodeが「Do not use empty rulesets」とメッセージを出すんだけど、
こういうようなツリー構造の確認用に書いておくのはNG？
ファイルサイズが増えること以外はデメリット無い？
パース的な処理に少なくとも負荷がかかるからやめれってことかな・・
4000行中、200行ぐらいは空値になってる。 >>919
ツリー構造の確認なんてできないのでは？ >>919
でないよ？scssでもcssでも
設定かも 919です。
vscodeもプラグイン入れてデフォルトなので、ちょっとわからないのですが、
たくさんのcss行があって
値が無い {}の行がたくさんあることは、パース的にレンダリングの負荷になっているかが気になっています。
実際のcssではcssパス的に6〜10層以上までなることがあるので。
{}の行を設けることによって、今からその下のパスのセレクタを書くための目印にしています。 >>922
さして困ることもないとは思うけど
そういう目的なら、生のCSSを書かないで
SASS使ったらいいじゃない >>923
sass採用したら
今の1セレクタ1行で4000行もあるから、何万行にもなっちゃうｗ
小さい規模のサイトでは良いかも知れないけどね。 >>922
それに慣れてしまうといずれ負荷になる scssなら気を付けたほうがいい。
気持ちはわかるがそもそもの構造として全部階層を書く書い方自体をやめたほうがいい。
クラスの概念、使い方に反する。
そもそも昔からやってる人は空セレクターは絶対放置しなかった。
何故ならIE6でバグになるから。 tableタグで
算数 国語
田中
鈴木
とある場合、
theadは算数と国語を包むの？
算数と国語、田中と鈴木のどちらもthを使うの？
でもその場合、田中と鈴木の右に二重線を引きたいときかぶるよね・・・
tableタグって無くても良いタグが多いので逆にややこしい・・ >>924
scssの行数なんて別に増えても良くね？
それよりも>>919,922の問題を
手放しで解決できるメリットの方が大きいんじゃないかな
手書き生CSSでそれだけ書いてるなら
確率的に潜在しているであろうCSS的表記揺れなども
一律に正規化できるし
あと、言うても数万行くらいなら
よほど非力なハードでなければコンパイルはそれほど困らんよ
前に、1つのファイルに吐かれたCSS3.5万行くらいを
拡張子scssに変えて編集して再コンパイル
という変なことやったけど、わりとスムーズだった >>926
極端なことを言えば
縦横の表は想定外なんだよ
ほんで実際には
算数国語はthead tr th
田中鈴木はtbody tr th:nth-child(1)
と区別すればいいんじゃないかな 質問
画面幅512pxのページをスマホで開いたときに
スマホの幅いっぱいに拡大して表示されるにはviewportをどうすればいいですか？
<meta name="viewport" content="width=512, initial-scale=1"> 君のその端末で
<meta name="viewport" content="width=device-width,initial-scale=1.0">
だとどうなる？ 明朝体にするために
.mincho {font-style: 日本語フォントずらずら・・・}
とcssに書いているとして、
1：htmlタグで明朝体にしたいところに class="mincho"を入れるか、
2：セレクタのプロパティに「font-style: 日本語フォントずらずら・・・」
この2択になるの？
font styleがとても長いから、各セレクタに記述するのも雑多な感じになるし訂正時も多いと面倒だし(置換があるけど)
htmlタグにminchoと入れぐらいなら、css側で記述したいし、第3の方法ってある？ >>931
クラス名なんだから好きにしろ、としか
serifとか >>931
SCSSが使えるなら、フォント指定をmixinにして必要なところにinclude
フォント指定の修正はmixinの修正だけで済む >>931
他のスタイルは平気でズラズラ書くのに
フォントだけ嫌がるなんて差別です！ そもそもデザインにおいて明朝とゴシックがそんなに混在するってのはクソ素人丸出し。
bodyタグに明朝+セリフ書体指定してベースを明朝にするか見出しだけ明朝ならまだわかるけどな。 小説や書籍は本文が明朝で定番だが
webは本文に明朝は読みにくい。解像度が低いから。 >>937
それももう過去の話になりつつあるような気もする
サイトにもよるけどB2Cだと特に
ドットバイドット以上で見てる人が優勢になってきているように感じる
解析結果見てる限りでは 見出し：明朝
本文：ゴシック
なんて普通にあるって事を言いたかったから張った画像。
ポスターだけなんて思い込みだよ >>939
まあ確かにそうだが
そもそも日本語の小説とか圧倒的に縦書き。
左から右に流れる文字組は海外からの輸入文化だから
サンセリフの方が相性が良い >>942
それにしては
海外系はセリフ多くね？
ブラウザのデフォルトCSSもセリフだし そりゃ帝政ローマ時代から使われてたTRAJANとか16世紀に活版印刷で使われだしたGaramondとか
欧文だってセリフ体のほうがはるかに歴史が長いもの
20世紀入ってからのHelveticaやFuturaやDINよりなじみは深いだろう マンガのフキダシはここ30年以上ずっと漢字がゴシックでかなが明朝らしい。
なんでかは知らん。 ほんとだ今そばにある雑誌見たらそうなってる
意識しないと分からないもんだな >>944
このスレを甘く見てたわ
ここでもそれくらいの書体くらいは知っている人いるんだな >>945
今は慣例
まず、昔の漫画の活版印刷だと
明朝体漢字の細い横線が掠れてしまうことがあって
ゴシック体を使うことになった
とはいえ平仮名もゴシック体にしてしまうと
喋り言葉を装って物語を文字で説明するという
漫画の吹き出しという独特のタイポグラフィでは
説明臭さが出過ぎる、喋り特有の機微がほしい
と、当時は判断されて
結果、混ざった書体を使うことになったんよ
それがスタンダードになって読者にも定着した んでも漫画向けにコミックフォントなんてのも
デジタル漫画制作ツールの中に入ってるので
それをそのまま使ってる人が多い 90年代に個人・同人作家が
ワープロやPCで自分でセリフ文字を書き
それを写植するようになり始めた時期には
ゴシック体のみのものが多く見られた
これは明ゴ混ざった書体や
イラレやクォークのような書体を混ぜられるソフトが
同人、個人層にはまだ流通していなかったため
これに違和感を持つ者は描き手、読み手両者にあって
プロもアマチュアも、この時初めてセリフ文字の
タイポグラフィの重要性に気づいた
と言っても過言ではない
その後、ネットが普及し、PCも印刷技術も進化して
PC作画が当たり前になり、様々な書体を
自由に使えるようになった昨今では
明ゴ混ざった昔ながらのアンチGだけでなく
あえて明朝のみ、ゴシックのみを使うなどの演出が
セリフ文字に施されるようになったのである js/css初心者です。
HTMLのテーブルにリアルタイムに行(tr)を追加するページを作っています。
(1秒間に最大数十行追加、一定行以上は削除する)
新しく追加した行が一定時間だけハイライトされるように、trに対してanimationスタイルを適用して赤から無色にbackground-colorが変化するようにしています。
ただ、セル(td)には列単位で一部個別のbackground-colorが適用されており、優先順位の関係で上記のtrに対するアニメーションが反映されません。
反映されない理由は理解しています。
アニメーションでなはく永続的なものであれば、スクリプトでtd側をtransparentにしたりクラスを除去したり等で回避できるかと思いますが、trのアニメーション終了後はセルのbackground-colorで表示させたいです。
個々のtdに対してanimationさせたり、setTimerやイベントでクラスを操作しないと無理でしょうか？ >>924
> 今の1セレクタ1行で4000行もあるから、何万行にもなっちゃうｗ
CSSつかうとそうなるよね。行数が増えてメンテナンスが不可能になっちゃう
そういうときにSCSSを使うんだよ
半分以下になるはずだよ 適当にpx, %, emとか使ってしまうんだけど、
フォントはremだけでええんか？ >>955
確かに、この数千行の左側なんて同じ文字列の繰り返しで600KBもファイルあるしなぁ。
apacheでdeflateしてるから実際は数十KBだろうけど。 そういう意味ならsass使っても変わらんな最後にcss吐くんだから >>954
td には属さない、tr だけの範囲を作れば？
tdの外側で、trの内側の範囲
その部分だけは、trのアニメが使えるのでは？ >>958
だよな。>>955は何とんちんかんな事言ってんだって思った >>959
赤から無色の変化分部はtrの背景色でするのではなく、
before疑似要素で背景専用のオーバーレイ要素を作りそれを一番上になるようにレイヤーを重ねる
ざっくりでこんな感じで
tr{
position:relative;
}
tr:before{
content:'';
posirion:absolute;
top:0;
left:0
z-index:3;
background-color: rgba(100,100,255,1.0);
} ありがとうございます。
>>959
tdの外にspanで囲むということでしょうか？
それでもspanのbackground-colorが優先されtrのアニメーションは適用されませんでした。
また1セル(td)=1データという形の表にしたいのでtdは使いたいです。
>>961
GASを使っているためか、trのposition=relativeが効かない問題が出ており::beforeが変なところに出てしまっていますが、
それはまた別問題として、このtr::beforeでオーバーレイさせるという方法で、tr 1行の背景色が反映される仕組みがよくわかりません。
contentが空の状態だとこの疑似要素のbackground-colorは表示されませんでした。
例えばcontentのところに何らかの文字を入れると、その文字分だけ背景色が表示されます。
trの行頭から行末までぴったり色を重ねるというのはこの方法でできるのでしょうか？？
以下のような単純なHTMLで試しています。
tr.test_row {
position: relative;
}
tr.test_row::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 3;
background-color: rgba(100,100,255,1.0);
}
<table border="1">
<tr class="test_row"><td>あ</td><td>い</td><td>う</td></tr>
</table>
まだ知識が浅く、的外れな質問をしてしまっていたらすみません。 tableでマウスオーバーでtrのカラーを変えるのはできるけど、
縦ってどうすれば実現できるの？ >>963
tr.test_row::beforeにwidthやheightを指定する必要があるよ >>963
ほい。GASは関係ないかと。
tr.test_row {
display:block;
position: relative;
background-color: #f5f5f5;
}
tr.test_row::before {
content: '';
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index: 3;
background-color: rgba(100,100,255,0.8);
} >>965,967
ありがとうございます！
できました。
ただ、「重ねる」ってことで薄々気づいていましたが、文字の上からになっていまうのはしょうがないんですよね？
アニメーションをある程度透過した色からスタートさせることで違和感は減りましたが、文字には影響させないっていうのはやはり無理ですよね。
いろいろ難しいですね… そら本来JSでやるべきアニメーションを、CSSだけでやろうとか言ってたら、そうなるわな
CSS3で機能が増えたせいで、本来の棲み分けが分からなくなっている人が多い気がする 6年ぐらい前に
box-sizingをcontent-boxで書かれた、divで入れ子しまくりなサイトを
いずれレスポンシブも考慮してborder-boxで書き換えたいんだけど、
開発ツールで*{box-sizing:border-box}にすると、
グシャっと変わってびびるけど基本的に幅が小さくなるのよね？
どのプロパティあたりからレイアウトを整えていけば良いの？
box-orderしかしらないから、ちょっとpaddingつけたりして崩れるの怖すぎ content-boxのままじゃいかんの？
borderとpaddingを勘定の内に入れればいいだけよ >>968
例えばこれを追記すればtdと文字が一番上に来る
tr.test_row td {
position: relative;
z-index: 4;
}
純粋に文字だけ一番上にしたいならHTML側に文字をspanで括るなどしてこうすればいい
tr.test_row td span {
position: relative;
z-index: 4;
} >>968
ちなみにjs側がどう書いてるのか気になる
気が向いたらソース書いてくれ >>973
jsの部分はテーブルに行を追加してクラスを割り当てているだけなので、あまり本質ではないと思って載せていませんでした。
細かくは省略はしていますが、↓こんな感じです。>>954で質問した際に動かしていたパターンです。
新しいデータを取得する度に addRow が呼び出されるイメージです。
-- js
function addRow(data) {
var elemTable = document.getElementById("test_table");
var newRow = elemTable.insertRow(0);
newRow.classList.add('test_row');
newRow.innerHTML = "<td nowrap>" + data[0] + '</td><td nowrap class="' + data[1] + '">' + data[1] + '</td>";
}
-- css
td.class1 {
background-color: lightgreen;
}
td.class2 {
background-color: lightpink;
}
@keyframes red-fade {
0% {background: red;}
100% {background: none;}
}
tr.test_row {
animation: red-fade 1s linear 1;
} 当初の質問のとおりtdのbackground-colorが優先され、trのアニメーションのbackgound-colorがそのtdだけには反映されない、というものです。
data[1]には上記の例では"class1"とか"class2"とかが入り、値に応じたクラス=色が割り当たるイメージです。
(イメージとして、ログ出力でのcritical/error/warningで色を変えるイメージ)
実現したいことは、tdにbackground-colorが割り当たっていても、trのアニメーション中はtrの色で表示し、アニメーション終了後は本来のtdの色で表示してほしい、というものです。
具体的な要素のtdよりtrを優先する、というオプションなどあれば理想なのですが、そう簡単ではないということがわかりました。 >>978
まさにそのイメージです。ありがとうございます。
spanで文字だけ上のレイヤーに浮かせるということですね。
こういうテクニックを駆使しないとダメなんですね。勉強になります。 >>978
ついでに教えてください。
trにdisplay:block指定があると、trが複数行の時に、各列(td)をwidthで明示的に指定しないと各行の文字数によって行単位で列幅がズレるのですが、そういうものですか？
あと行と行の間にも隙間(？)ができて線が太く見えてしまいます。
(tdの下辺と、次の行のtdの上辺が重ならなくなり2pxの線に見える)
table{
border-color: #0FF;
border: solid 1px;
border-collapse: collapse;
border-spacing: 0;
}
table th,table td{
padding: 1px 4px;
text-align: center;
border: solid 1px;
} display: block
display: table
これってどういう違いがあるの？
margin: 0 autoも使えるし、機能的な差があるの？ >>981
普通のブロックは広がる
テーブルは縮む >>980
そういうものだな
解決方法わからんわｗ おじさん疲れたので誰か頼むわ
隙間や線の件はこうすりゃいいよ
table{
border-collapse: collapse;
border-spacing: 0;
}
table th,table td{
padding: 1px 4px;
text-align: center;
border: solid 1px #0FF;
} 誰か教えてくれ
tr:beforeの親要素てtrじゃないのけ？
overflo:hiddenが効かないわ
td:beforeにしてもtrに書いているoverflo:hiddenが効かないわ
糞テーブルとoverflo:hiddenの相性くそ悪いfuck 「ついでに教えてください」は社会に出てからは使うの気を付けた方がいいよ >>984
table-rowだけでなく
table-cellもダメなんじゃね？
table-layoutをfixedにしないと
たぶん内部的に計算できないんじゃなかろか？ display: tableの場合、table-layout: autoだと
中身を全部見てから各行やセルの大きさを
いい感じに決めるから
overflowしようにも本来の大きさがないので
計算出来ないんだよ
糞だの相性だの言う前に
内部でどんな計算しているかを考えると
わりと答えに行きつきやすいと思うよ overflow - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
> overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、
> white-space を nowrap に設定することが必要です。 >>982
なるほど！
たしかに言われて見ればホントだ >>990
>>988でも書いたけど
tableは子要素が決めんの
blockは親要素が決めんの、幅 ランディングページてあるじゃないですか
広告がこう、下にベローンとつづく
あれってHTML で作れるモンなんですか >>994
HTMLとcssでベースは作るけど、結局広告デザイン作る為にillustrator、photoshopとデザインスキルが必要。
あとjsも。 >>994
毎日泣きながら
LP作って糊口を凌いでる人もいるんですよ( ；∀；) つい最近にツイッターに
副業でLPで簡単に稼げるみたいに煽ってるヤツのせいで
未経験者が大漁に釣れてるくさいな
Lpなめんなよまじで HTMLの初心者です、よろしくお願いします。
現在、formでプルダウンメニューで市町村を選ぶとiframeにその市町村のページが表示されるものを作ろうと思っています。
しかし、actionで送信先を指定する必要ありですがiframeへ送信するために何を書けばいいのか？
actionにはCGIやURLを書く必要あるのは分かったのですが、今回の場合は具体的に何と書けばよいのか･･･
また、その他にもミスがあるのか分かりません。
<form action="▲▲▲" method="post" target="inline">
<label for="">市区町村</label><br>
<select name="url">
<option value="" selected="">
選択して下さい
</option>
<option value="https://town-hikaku.site/%e5%8d%83%e4%bb%a3%e7%94%b0%e5%8c%ba/";>
千代田区
</option>
<option value="https://town-hikaku.site/%e6%a8%aa%e6%b5%9c%e5%b8%82/";>
横浜市
</option>
<option value="https://town-hikaku.site/%e5%b7%9d%e5%8f%a3%e5%b8%82/";>
川口市
</option>
</select>
<p><input type="submit" value="送信する"></p>
</form>
<iframe name="inline" width="350" height="1000"></iframe> >>998
1. formへのsubmitはホストにPOST送信しに行くが、この場合の目的ではサーバープログラムは必要ないのでは？ということで撤去
2. ボタンのclickかselectのchange(だったかな？)イベントでJavaScriptの関数を呼ぶ
3. iframeの切り替えは、なんかタイミングの関係で動かないことがあったんで、エレメントのouterHTMLを書き換えて強制的に切り替えるようにしてる >>999
ありがとうございます。
この場合、actionに何かを指定するだけではダメってことなんですね･･･ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 88日 5時間 21分 53秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
