HTML/CSS のどんな質問にも優しく答えるｽﾚ 45
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 44
https://mevius.5ch.net/test/read.cgi/hp/1593842738/
■関連スレ
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 質問する前に解決したんで書いとく
WEB Components でカスタム要素に highlight.js が効かなかった
個別の ShadowDOM に default.min.css とか CSS を食わせてやったら効いた インラインフレームが真っ白な表示しかでない時って何が問題？ >>5
コードが間違ってる
例えばsrcで指定したURLが404とか
Ctrl+Shift+Iで開発ツール呼び出してConsoleとか見る >>6
全く同じhtmlを２つ書いて、送信→インラインフレームに表示ってやると片方は正常に表示・もう一方は真っ白
何か区別が必要なのかな 普通は起こりえないことが起きる場合、質問者は回答者にエスパー強要する前に
先ず出せる限りの情報を出すように >>6
白い方のコンソールでエラーあった
SCRIPT1028: SCRIPT1028: Expected identifier, string or number 送信先をIDで指定
受信側に同じIDが2つあって
先に読み込む方にしか表示されてないとか たいてい正常で、たまにバグるのは、非同期処理が多い
A・B が非同期の場合に、AB の順なら正常で、BA の順ならエラーとか。
順番を指定していないから、たまにバグる
確実に、ABの順になるように、正しくプログラミングすべき！ シングルスレッドだし、Promise使っていたら順序は狂わんよな >>13,>>14
ちょいとお門違いというかズレ始めてる。
たいてい正常で、たまにバグるなんて質問者は言ってないよ 皆さんにエスパーを強いて申し訳なかったです…
>>12
解決しました！ ありがとうございます！ IE11でヘッダー固定のスクロールdivテーブルの実現方法あります…？
stickyfill.jsのIE11でも使える方法～みたいなの参考にしてもうんともすんとも言わないのよね
Edgeなら効くんだけどIE11は…
もう八方ふさがりです……… jQuery使えば？
作れる人にとっては簡単だが
探せばあると思う IE 11 で、下のサイトのようにやってみたが、正常に動いた！
【追従型】スクロールすると上部に固定される
https://mayubou.net/scroll-position-sticky/
https://github.com/wilddeer/stickyfill
このgithub から、Old fashioned のstickyfill.min.js をダウンロードする
Windows 10 で、C:\Windows\System32\curl.exe が入っている場合、
コマンドプロンプトの好きなフォルダ内で、curl.exe でダウンロードする
curl.exe -OL https://raw.githubusercontent.com/wilddeer/stickyfill/master/dist/stickyfill.min.js HTML / CSS
コードうちこみっていうけど
プログラミングとは別物だよね？
人によって認識はちがうもんかな HTML, CSS をやる人は、コーダー
プログラマーとは違う でもプログラムコード書いていく事をコーディングって言うよ プログラミング＝設計、考えること
コーディング＝その結果をコードにすること、作業
コーディングの中にはプログラミングは含まれない
プログラミングの中にコーディングは含まれるが
それはプログラミングの一部でしかない
ちなみにコンピュータが高価で会社に数台しかなく申請を行って
交代で使っていた時代ではプログラマとは別にコーディング担当者がいた
コーダーはプログラマが設計して紙に書いていたソースコードを
短時間で素早く入力することが得意な人。考えることはしない。 そもそもHTML/CSSはプログラミング言語ではない
コーディングは全てプログラミングだと思うのは、
スマホは全部iPhoneだと思うようなもの >>29
そう思ってたんだが、最近よくあるボタンのボーダーにグラデーションかけるヤツで詰まった。
グラデもcssでやるからもうわけわかんない 一昔前に流行ったトラビアンのようなゲームマップ500x500みたいなのを作りたいのだが
手軽に作れるライブラリみたいなのってないかな 初めまして。
本業はバックエンド開発ですけどフロントの方を今独学でやっています。
スマホ用のwebアプリにフッターをつけたんですけど、下にスクロールすると、フッターより下の白い部分が表示されてしまいます。
スクロール禁止の処理をjavascriptで書くしかないのでしょうか？
また、ログイン画面で文字を入力する際に、画面がズームになってしまいます。
ネットで調べたところ16px以下であるとこの現象が起こると書いてあったのですが、16pxにしても同様の現象が発生しました。
どうすればよろしいでしょうか？
よろしくお願いします。 >>33
iOS？
とりあえずここにソース書いてくれないと現象の確認ができないって>>34先生がおっしゃっております。
https://jsfiddle.net/ 16px以下なら、16pxでも同じでしょ
18pxにしてみれば？ Htmlの親要素を子要素より上に重ねるにはどうしたらいいでしょうか？
やりたいこととしては
1.正方形の領域をdivで作る
2.その中にテキストを入れる
3.最初にwebページが開かれたときに、1の領域に沿った色付きの正方形をアニメーションで表示し、2のテキストを上に持ってくるというものです。
スマホから書いてるのでちゃんとしたソースはかけないですが、自分は以下のようにしてみましたが、子要素であるbが上に重なってしまいます。
opacityを使わない方法を教えてもらえると助かります。
Html
<div class=a>
<p>ボタン名<p>
<div class=b></div>
</div>
Css
.a{
Height:200px;
Width:200px;
Position:relative;
}
.b{
Height:200px;
Width:200px;
Position:absolute;
top:0;
left:0;
animation-name=****
} >>39
Z indexは、子要素同士の比較の仕様みたいで。。
どうしても中に入ってる子要素が自分のやったテストだと上に来てしまいました ＨＴＭＬを「写経」して勉強するのをおすすめしてる人がけっこういますけど
その「写経」ってノートに手書きでしたほうがいいのか、パソコンでキーボード使ったほういいのか
どっちが身に付きやすいんですか？ コードの写経ってただ写すんじゃなくて「試しにここを変えたらどうなるか」とか試行しながらやるもんだと思うんだけど
ノートに手書きじゃ試せなくね？ｗ vscで
＜h1＞入会申込み＜/h1＞
でブラウザに太字で表示できません。
なぜか、htmlで保存できずにcode-workspaceでしか保存できません。 最初に、a.html のような拡張子で、ファイル名を付けておいてから、
そのファイル上で入力すれば、補完してくれる >>46
今時の子にしては稀に見るぶきっちょさんだな
からのファイル作ってから開きなされ カラムってフレームタグとは違うんですか？
QooQっていうテンプレ見ると
/* 2カラム設定 */
#main-inner{
display: flex;
}
#main-content{
margin-right: 30px;
width: calc(100% - 346px);
flex-shrink: 0;
}
#sub-content{
margin-top: 30px;
width: 316px;
flex-shrink: 0;
}
ってなってます。
CSSでやるのが主流なんですか？（素人質問） >>53
そうだよ。
もうフレームセットとかは、ITバブルの頃で終わったんだよ。
例えるならば、今の時代にダブルのスーツ着ているようなイメージで
そもそもスーツ自体が終わて来ているのに
スマホ全盛時代にフレームとか何言ってんだこの化石はってレベルだから気を付けて ちょい前に企業サイトなどで
昔流行ったフレームセットみたいなレイアウトがまた流行り出したけど
これはもうフレームじゃないからな。
https://www.au.com/
大手のソース見て研究すべし。 >>54
訳あって復活した途端バレたｗ
でですが、
左のカラムを押すと、右に画像を表示させるという設定
どのへんを勉強したらいいのか教えて下さい。
勉強してきますので そもそもスマホ全盛時代だっつてんのに左右でカラム切るとかスマホの事ガン無視かよ
スマホファーストだよ。アクセスみてみろ
一見昔のサイトと変化内容に感じるかもしれんがウインドウを狭くするとトランスフォームしてスマホサイトに変化するように作れよいいな >>55.57.58.59 ありです
いらすとやのHPみたいなの作りたくて
https://www.irasutoya.com/
聞きたかったのは
普通に左カラムから選択したら右カラムに指示画像を表示することです。
フレームタグなら普通にできたのに時代が変わっていのにさっき気づき
どうなってるんだ？ と思いまして、
HTMLだけで出来たのがCSSなどJavaScriptなんかもわからないと
できなくなってるのかなー？と思ったわけです。
しかしいらすとやさんのサイトって
トップページどこ押しても左右のカラム全部の画面が切り替わってますよね？
BloggerでQooQをDLして左カラムへ変更まではできたんですが >>60
あ？「できたんですが」じゃねーよ
おまそれ文章が途中で終わっちゃってる感じでなんか不安になっちゃっただろ！
お前そんないつもいつも中途半端でいいのか！
フレームの概念は今すぐ捨てろ！時代はもう変わったんだよ！
そんな事もできなずに情けないと思わないのか！男だろ！悔しくないのか！？ >>60
つーかおま、「ありです」 ・・・じゃねーよ！！
何だお前、アリなの？お前的にアリなのですか？！！
フレームはSEO的に無理だから消滅したんだよ。そう、氷河期の恐竜みたいに絶滅したんだからもう忘れろや。
全ページにサイドバーを埋め込むんだよ。ああ、そうだ。jsでもphpでもSSIでもなんでもいいんだよ。
なんだそのQooQとかいう謎のメガネはなんだそれなんだそれ フレームなんていつの時代？？
まさかマーキーとか使ってないよな？ >>61
ありがとうございます。
あのー、とても恥ずかしいのでフレームタグの話はしないでください。
ところでですが
＞全ページにサイドバーを埋め込む
を理解するためになにを勉強してくればいいですか？
ちなみに
いらすとやのHTMLです
https://jsfiddle.net/mqa40son/
QooQとはBloggerの人気テンプレです
https://qooq-sample.blogspot.com/
この右カラムを左に変えることは成功しました。
こっからです。わけがわからないのは 例えばヘッダーのナビゲーションをクリックしてページ変遷するのをjavascriptでヘッダー以外を読み込ませるとかかな
具体的なレイアウトとクリックする部分とページ変遷せず画像だけ表示させたい部分が分かると答えやすいのでは？ ここはどんな質問にも熱血漢が厳しく答えるスレだから >>65.66さんありがとうございます。
https://www.irasutoya.com/
このイラストやさんを参考にしてですが
例えば左カラム下の方に「詳細カテゴリー」から
「リクエスト」を押すと右カラムにリクエストカテゴリーの絵が並びます。
それをクリックすると大きな画像が個別に表示されるという一連の行動をしたいのです
この際、実は左側のカラムも変わっていて
TOPページの左カラムはホームの画面のみで
ほかをクリックするともう一つの左カラムのナビゲーションデザインに変わってるんです。
もう一つ謎なのは新しいイラストというのが右カラムの下に表示されるのですが
このような場所に更新していくという流れなんですよね、
これってかなり上級者ですよね、、
けどこれは避けて通れないようなと思ってる次第なんです、 いらすとやはwordpressをカスタマイズしてる感じかな？
イラストサイトのテーマは結構あるみたいだから
それ使った方がよくね 今は、スマホファースト。
レスポンシブ対応には皆、Bootstrap を使っている
Ruby on Rails でも使う >>58
これプロゲートで似たような動作教えてるな >>67
各パーツ（ヘッダ、フッタ、各カラム）を別に作ってフレームセット的なhtmlの中でssiで呼び出したり
cms(コンテンツマネージメントシステム)使ってそういうことやったり
テンプレートエンジンやフレームワークでそういうことやったり
という感じ >>67
トップページ・リクエスト・各画像のページと、この3ページは別々のページ。
ページ遷移してるから、普通に、別のページを作るだけ
ページ遷移しない、SPA かと思ったじゃないか
普通の勉強をすれば良いだけ。
初心者が、あちこちのサイトを見ても、同じ事をできないのだから意味がない >>74
Google Blogger か
「google blogger vs wordpress」って所か >>67
いいか？押す前のURLと押した後のURLを見てみろ
変化してるだろ？見た目が同じようだけど全く別のページなんだよ。
マンションに例えるなら、エレベーターのドア空いても見た目がどの階でも同じだろ？
おまえはいつもそうやって見た目に騙されるんだ？だからそうやってしょうもない女にいつも利用されるんだぞ！ >>69 70 71 72 73 74 75 76 77
皆さんありがとうございます。
>>72>>73 78
こういうサイトは（昨今のカラム文化）では
TOPページを作って、左、右カラムのどこのリンクを押しても
新しいページの移動は、左右両方のカラムごと（全体）を新しいページで表示する
という理解でよろしいでしょうか？
（framesetの場合はリンク右ページだけ変化してましたが、）
Bloggerを使ってますが
左のカラムだけは変わらないんです。いらすとやさんは2つ用意されていて
トップページだけが違う。これは工夫がいるわけですよね
>>74
Frameworks
Python ←これは無理ｗ テンプレートは無数にあるから、調べるしかない
Ruby on Rails では、header, footer は、同じものを使うことが多い 昔ホームページいじくってて最近コロナで景気悪いからまたHP勉強して稼げるようになりたいって人多いな firefoxでよく画像がチラつくんだけど仕様なの？ >>81
いうても、今のWeb開発って、フロントエンドもSEOも難易度が段違いだけどな
世間の人々に出来るとはとても思えん ノンプログラマーでHTMLとCSSが何となくわかる程度の人間がWeb系に潜り込むの無理かな？ >>86
制作会社に潜り込むって意味？
それなら人柄とか経験で可能と思うけど、いきなり独立とかなら同業としてやめて欲しいわ 簡易的にコンテンツを増設するときって
一旦、htmlのファイルにインラインスタイルシートで<style>内にさくっと書いてるんだが、
scss使う前はそれをそのまま切り取って外部cssに転記するだけで良かったが
scssはこの辺があかんな。phpファイル内でscss記法使えないのなんとかならんのか。
使えないならscssに組み込むときにもっと簡単にできんかのー ↑
間違えた
× インラインスタイルシート
〇 内部スタイルシート >>89
そういうやり方もあるんか
自分はもはや2～3ディレクティブ程度でも
生CSS書くのが面倒な軟弱な体になってしまった…
php-sassとか使ったら少しは捗るんじゃね？ スマホのようなタッチ操作なデバイスでスクロールした時に
誤って範囲選択したりしないようにするには、
CSSのuser-select: noneみたいなのしか無いですか？ >>89
普通はphpの隣にでもscssファイル置いて編集＆保存するだけで
自動でコンパイル＆統合されてブラウザのリロードまで行われるのであって
切り取って転記なんてやってるのお前だけやで >>94
んな事当然やっとるわ
例えばすぐにでもアップしたい注意事項で二日間しか設置しないものまでわざわざscssに書くのか？ >>95
やってるなら悪かったけど、わざわざってなんぞ？
新規ファイル作成して書いて終わりだろ？
何がそんなに難しいの？ >>95
気持ちがわからんでもないが
すまん
それが普通だと思う >>85
SEOの難易度って、詐欺師としての難易度ってこと？
何やっても上がるなんて証明できないし確証もないのに
これやれば順位上がるんです！とか言ってるんでしょｗ >>99
まあ結果論としての蓄積はあるから
これをすれば上がります、ではなく
これをしたら上がりました、だな
あとは面倒な話だけど
サイトの担当者も所詮雇われなので
上がったという実績があるのに、なんでやらんのか？
という、金出してるところからの圧には
屈しない理由がないよね >>99
グーグル検索のSEOがコロコロ変わるからっしょ
よく聞くけどSEO対策できますって言って何年前に発言してたかそれで年が経ってたらもう古いからな
でも本人はまだ効果ありますよって言うから詐欺師的な事になるんだろう、それで儲けてるやつもいそうだがな 小学校のお受験塾みたいだな。
的が当たって当たり前。
的が外れれば「傾向が変わった」で逃げる。 そもそもグーグルが何をしてるか教えてない
ブラックボックスのSEOを商材にしてる時点で詐欺師だろ SEOなんて検索として引っかかりやすいように
意図的に該当の単語を使って文章を書きましょう
というのと露出を増やしましょうぐらいしかやることはないよ
露出をするというのは「人が来る所」に自分のサイトへのリンクを張りましょうという意味
アクセス解析のデータを使って人がアクセスしているかロボットがアクセスしているかを見抜いて
人がアクセスするサイトからのリンクは評価されるが
そうでないリンク集みたいなところからのリンクは価値が無くなってると思う
HTMLはタグやダブルクォートの対応が壊れてるとかいうクリティカルなもの以外
どう書いてもSEO的にはほとんど効果なし 1：section h1 (backgroundのアイキャッチ画像)
2：section h1 strong(タイトル, text-indent: -9999px)
3：section div.contents div.hero h2 (キャッチコピー)
4：section div.contents div.hero h3 (キャッチコピーの説明)
5：section div.contents section.description h1 (スペック説明)
headタグには「3」「4」を書いたdescriptionがありますが、
それは無視され、googleの検索結果ではタイトルは「2」、説明分は「5」が出ているのですが、
説明分を「3」「4」が出てくるにはどうすれば良いでしょうか？
掘り下げても見えているh1が説明分として使われるので予想外でした。 そっちの方が適切な内容だと思われたんじゃねｗ
基本的にタイトルは<title>の内容だよ。<title>がなければヘッダが使われるだろうね。
そして説明文は、それなりの長さを持ったメタタグのdescripionか本文の文章
たぶん説明文は文章じゃないとダメだよ。そりゃそうだよね。だって説明（descripion）は
文章なんだから、箇条書き的なタイトルをくっつけただけでは説明にはならない。
ヘッダなのに説明文と言えるほど文章的な内容ならでるんだろうね。だから5.がでてるｗ
だから重要なのはタグではなくて内容なわけ。
タイトルとしてふさわしいものをタイトルとして表示して
説明としてふさわしいものを説明として表示してる
当たり前でしょ？
そうそう。Googleの検索で表示されたからって、そこが重要と判断されたとは限らないことに注意なｗ
ページ全体を評価したあとに、ページの中から表示すべきところを選んで表示してるだけだから あとページごとにタイトルや説明文が決まるんじゃなくて
検索キーワード毎に決まるよ
だから検索キーワードに対してページ全体じゃなくて
ページの部分的なセクションのみに大きく反応したなら
そのセクションのヘッダがタイトルとして使われて、
冒頭あたりの文章が説明文として使われることもあるだろうね >>106-107
レスどうもです。
確かに<title>が使われています。
ご指摘の通り、h2, h3は結構短いです。
h2「新製品発売！」, h3「いよいよ満を持して発売」みたいな短い感じです。
5：section div.contents section.description h1 (スペック説明)
こっちには結構な文章数なので、これが検索時の説明分として採用されています。
今、この「5」のsection.description h1 をsection.description h4に変えてどう変わるか見てみたいと思います。
サーチコンソールから再度クロールさせますが、
何ヶ月経っても変わらないか、旨くh2, h3, h4の順番で採ってくれるか、一度やってみたいと思います。 SEO屋さんがやること残して作り
客から製作費いただく
↓
客がSEO屋さんに捕まる
↓
SEO屋さんがあれしろこれしろって言う
↓
作業日いただく
↓
2度おいしい 今はSEO屋さんは手を加えないの？指示するだけなの？ タグの記号の付いて
・span
・class
この２つって、どういう英語の略ですか？ >>111
中学校から英語勉強してきたほうがいいぞ
・長いスパンで考えろ
・同じクラスの田中君 >>110
自分ではやらない方が多いんでないかい？
数えたわけではないけど
ウェブフォント使って制作、金もらう
SEO屋さんがウェブフォント止めろって言う
ウェブフォントやめる作業、金もらう
デザイン会社がフォント整えろって言う
ウェブフォント入れ直す作業、金もらう
とかよくあるよね
その経験値があるところはやらんけど >>108
> h2「新製品発売！」, h3「いよいよ満を持して発売」みたいな短い感じです。
h2はギリ、見出しと言えるかもしれんが
h3は全然見出しじゃないじゃん
こうやって本来の使い方と違う使い方をするから
タグの重要度はどんどん小さくなっていっった
今はh1～h6の数字は無視されて全て同じ見出しとして扱われてるだろう
そして見出しの中から適切な文章が選ばれるようになってる
タグをいくら変えても何も変わらんだろうさ >>113
あ～、これは省略系じゃなくて、単語そのまんまなんですね。
ありがとうございました～ >>116
あぁぁぁ、タグの使い方から間違えているのか・・・
てっきり大きくしたい文字＝h1, h2, h3の順番で使うようになってた
h1をtext-indent: -999pxとかしてるけど。
iPhoneのサイト見てるけど、
iPhone12 <- h1
早い話、速いです。 <- h2
5Gの速さ。スマートフォンで最速のA14 Bionicチップ・・・。<p>
え、説明分ってpタグなんだ、本来の使い方だと思うけど、h3かと思ってた。
これで検索結果では、理想通りh1, h2, p の順番になってる、
その下の大きな文字は、h4使ってる・・・sectionごとに分けたh1, h2じゃないんだね >>119
HTMLのことを考えるなら
見た目は一度忘れたまえ
ある文書を見て
「上の方に書いてある大きくて太い字は見出し」
と理解できるのは人間だからなんだ
一部のAIを除いて、機械にそれはわからん
そんな機械に、ここは文書における
どんな意味を持つものかを伝える仕組みがHTMLなんだ >>120
誰につたえるんですか？
伝えるとどうなるんですか？ 119です。
>>120
なるほど、文書構造とcssで分けるという基本を失念していたようです
googleに拾ってもらうという意味で見た目を気にしすぎていました。 あんなもん好みよ
過去20年で自分で育てたやつ使うもん >>126
正解はないけど、時代ごとの流行はあると覚えておけばいい
あくまで正解があるわけではない wordpressができる程度のhtml/cssって
どのくらいのレベルを指すのか
どなたか分かりやすく例えてくださいませんか？ >>129
出来合いのテンプレに文字を差し替えるだけとかではなくて
オリジナルでサイトのデザイン・テンプレを作るという意味なら
とりあえず①②は最低限必須。
①WP無しで0からサイト構築（静的）できる
②スマホ/PCで切り替えるレスポンシブ対応できる
③動的ページ・テンプレートの概念を理解した構造ができる
データあるなしやあらゆるケースを想定したｃｓｓ/htmlを組める
wpの独自タグやループなどを理解したhtml/cssができる
④管理画面、投稿画面側のcssを理解して投稿画面をカスタマイズできる >>130
①②は大体できるわHTML作るのはPHPみたいにサーバー使わないから
レスポンシブも大体できるな、問題はスマホごとのwindowサイズでどう調整していくのかそれが大変だわ
③④できれば仕事になるだろうしプラグインで金稼ぎも出来るほどの技術ありそうだし >>130
出来合いのテンプレに文字を差し替えるだけのレベルへ行くには
どの程度まで勉強したらいいですか？ >>131
>問題はスマホごとのwindowサイズでどう調整していくのかそれが大変だわ
その辺がなーんも問題なくなったら
「大体できる」だと思って大丈夫だよ
HTML/CSSができますって言って
面接が受けられるレベルだと考えていいと思う >>132
出来合いのテンプレの文字を差し替えるだけでいいなら、
その辺のブロガー、アフィリエイター以下の一般素人知識でできるだろ。
投稿ならブロックエデイターでやればcss/htmlの知識も無くてもままできる。
マイクロソフトのwordみたいな感じ。 今の時代、h1タグはページに1つのほうが良い？
sectionごとにh1～h3使うほうが良い？
もし前者なら、sectionごとの見出しはどのタグを使えば良いの？ >>133
大体の人はHTMLとCSSの使い方サイトから調べればできるからな、けどデザイン意識の構成はな
ほんと昔のhtml直書きでシンプルでい地味なサイト構成しかできないな >>135
SEOの観点からは何の違いもない
h1～h6は全て見出し（の候補）として扱われ
同等の重要度 >>136,138
body
h1,h2
├section
│└ h2
└section
└ h2
こんな感じで良いの？認識間違えていたら教えて欲しい・・ >>139
タグだけで判断できるわけないだろ
これとか使って「自分がやりたい通り」「自分にとっての理想通り」になってるか調べろ
重要なのはタグがどうとかじゃなくて、アウトラインをどうしたいかなんだから
https://nelog.jp/headingsmap >>139
そんな感じだがbody直下にhタグが来ることはない。
body
header-サイトネームのh1(下層はpタグ)
main-article-ｈ2（下層は最初の見出しはh1）
aside
footer >>141
それでアウトラインはどうなってるか確かめてみた？ 自分がどうしたいか？の問題なのに
あってるかどうか聞くのは意味不明 >>142
WordPressのデフォルトテンプレがこんな感じだぞ。
アウトライン問題ないし、いつもSEOでも問題ないよ。
https://gsnedders.html5.org/outliner/
<body>
<header><h1>サイトタイトル（下層はpタグ）</h1></header>
<main>
<article>
<h2>ここにはタイトル不要</h2>
<section><h2>コンテンツタイトル1（下層はh1）</2></section>
<section><h2>コンテンツタイトル2</2></section>
<section><h2>コンテンツタイトル3</2></section>
</article>
</main>
<aside><h2>サイド</h2></aside>
<footer></footer>
</body> ほとんどの下層ページは共通パーツなどで構成されてる事がほとんどだから
正直、構造なんて細かく考えてもSEOという意味ではあまり意味がない。
じゃあ誰の為に構造しっかりするかって話だが、
就職なら就職先の担当
仕事なら発注先の制作会社やクライアント担当、携わる仕事仲間
要するに名目。 >>146
それはひとそれぞれでしょう
CMSだと汎用性落ちるからそうしないし
実際しなくても狙ったワードで一位キープしてる
その上で具体的に何が問題なの？ 結局プログラミングのオブジェクト指向やcssのbootstrap的手法みたいに
パーツとして切り出しやすい形にしたいからそうしてるだけ。
弊害あるならやめるけど、どんな弊害あるか言えないでしょう？ >>148
セクションに見出しがないと
いろいろ困るんじゃないか？ WPの最新、twentytwentyの構造はこうなってるな
まあ今まで通り。
<body>
<main>
<article>
<header>(投稿部分のheader)
<div class="entry-header-inner section-inner medium">
<h1 class="entry-title">タイトル</h1>
</div>
</header>
<div class="entry-content">
<p>本文</p>
</div>
</article><!-- .post -->
</main>
</body> テーブルレイアウトでも１位は取れるから問題ないっていうのと同じレベルの議論だな
不毛 >>152
別にタグ通りの使い方してるからな単純な見やすい構成だから普通に良いな 爆速で有名な阿部寛のサイトなんてテーブルどころか<frame>使ってたぜ。<iframe>じゃないぞ。 Ruby on Rails でも、めちゃめちゃ速い！
表示速度が“異常な”Webサイト「dev.to」とか
https://dev.to/
元乃木坂46 の川後陽菜のWebサイト、SKIYAKI とか
https://kawagopro.com/ >>131
Ruby on Rails では皆、Bootstrap
CSS も詳しくは知らないけど、コピペで作る >>157
それらのサイトはRailsだから早いんじゃなくて内部cssだったりコンテンツが少ないから早いのでは？ >>153
デフォのテンプレなんて実際は使わないけど
毎年時代に合った最新のテンプレを披露してくれるのにチェックしない方が怠慢。
国内ではなく、海外とトレンドを踏まえスタンダードになるんだから
たくさんの人が携わって出来上がっているので国内のイツリニューアルしたかもわからんサイトよりよっぽど有用 >>161
へーへー
WordPressのテンプレが影響するようなサイト制作
ほとんどすることがないから
なんか新鮮だわ～ へー、一度10年分ぐらいテーマ変えて構造がどうなっているか見てみよう、
流行りすたりがあるのね しかしこの業界で仕事しててそういったもの変遷の流れの早さに気がつかないものかね？ｗ
まあやってる方は日々見慣れてるから意外に気にならないものなのもかもしれないな html5の登場で、色々なタグにおいて使うも使わないのも自由みたいなのが増えたから
検索に気にいられれば、何が正解か推奨かわからんようになったわ
融通の利かない奴とHTML構造の話になると宗教戦争みたいになる。 > 融通の利かない奴とHTML構造の話になると宗教戦争みたいになる
そういうのはあるあるだなｗ
まあベストではないかもしれないけどベターな選択ってのは把握しておきたいものだ >>165
そもそもGoogleのアプリが未だにdivお化けだものね。 >>164
そもそも
WPのデフォなんて触る機会が皆無だからなあ… 個人的にはTwenty Sixteenの時が印象的だったわ
黒ベースに緑のボタンで全幅レスポンシブになって、レスポンシブのcssは1ファイルに全てまとめるなど影響受けた。 ttps://internet.watch.impress.co.jp/docs/yajiuma/1283657.html
まじかよ・・・ >>171
この頃のテーマは中々良かったよな
最近のテーマは本当に実用性がない >>174
んなこたない
ただ、どこまでを
モバイルサイトとみなしてくれるのかは気になるところ
字の小さすぎるものは
PCサイト扱いになるのかもなあ 俺のHDMLとBREWの知識と経験が火を吹くぜ！火傷すんなよ？ﾜﾗ 流行廃りがあると思うけど、
たくさんの画像を1つに集めた画像を
backgroud-positionを使って表示するのってもう今は主流じゃ無いの？
1つずつbackgroundを使って1枚ずつ画像を用意する方が普通？
あの1枚まとめのずらし表示は何のメリットがあったんだろう。
positionずらしのプロパティ名は増えるだけだし・・ >>179
スプライト画像？
ファイルの読み込み回数を減らすためだよ
容量小さいファイルでも、回数増えるとブラウザ表示が遅くなるから スプライトアトラスだろ
ゲームでは、キャラクター・マップ画像など、アトラス化する >>179
あれはHTTP1の頃
HTTP2になって、並列処理で画像を取得出来るようになったから、価値が大幅に下がった
昔は逐次処理で取得してたから、一つ終わらないと次が取得出来ず、時間が掛かった スプライトアトラスって言うのか。
ググったら懐かしいファミコン時代みたいなの出てきたけど、
今、すでにあるならわざわざ分離するまでも無い？
彩度を落とした画像を上、オリジナルを下にした2列画像をhoverでposition-yをbottomにして使ってるけど、
今ならhoverで彩度変えたりできるの？ >>183
なるほど、そういうことか。
ということは、100個ぐらいのスプライトアトラスなら効果あるけど、2個くっついたものならあまり効果も限定的ということか。 >>184
できるお
img {
filter: saturate(0%);
}
img:hover{
filter: saturate(100%);
}
<img src="https://news.mynavi.jp/article/20200807-1203876/images/001.jpg";> >>186
まじかよ・・・
フォトショいらんやん。
ちなみにこれはcss3？css2？
スプライトにするとhover時に読み込みで画像でないことは避けられるけど、filterがあればスプライトもしなくて良いし時代なんやね >>187
たぶんcss3だお
彩度とかかなり前からあったけどGoogleChromeにしか対応してないやつ多かったしあまりメジャーではないよ。
（ＩＥ・Ff対応してないｃｓｓは無視される時代だったので透明度だけはよく使われた）
ちなみにこんな程度じゃphotoshopの機能の10%にもならないお
部分的に明るくしたり合成したりHDRしたりできるようになってほしいお > スプライトアトラスって言うのか。
> ググったら懐かしいファミコン時代みたいなの出てきたけど
スプライトといえば普通90年代以前のゲーム機の機能を差すからな Chromeだと画像やCSSのキャッシュが効きまくって困っています。
ローカルで消しても自分だけの世界なので意味ないです。
キャッシュを効かなくするHTMLの宣言文やCSSの設定って無いもんですか？ >>191
サーバの設定
レスポンスヘッダに
キャッシュすんな的なことを書く 今日作った画像やCSSは、htmlにパス書くとき、
img/gazou.jpg?cb=20201020
css/main.css?cb=20201020
みたいにしておく。
明日画像を更新したら、
img/gazou.jpg?cb=20201021
に変える。 横からゴメン
iPhoneでの確認、修整繰り返した時のSafariのキャッシュ削除が面倒なんだけど、皆さんどうしてますか？
設定から行ってます？ >>195
どうしょうもない時はそうだな
普段はウェブ制作用のiPhoneだから気軽にやるけど
自分のでやる時は
デスクトップも道連れになるのが面倒くさい >>195
わかる。かなりしぶとい。
プライベートモードとかしたりできることすべてやってもダメなときダメ。
結局クエリ文字 クエリ文字列か
a_001.jpg
みたいに、バージョン番号を入れないのか >>199
ファイル名の方を変えるのは
それなりの開発環境整えなきゃならんし
バージョン管理も面倒になるんだよねー
サーバからブラウザに
ファイルのキャッシュのクリアを明確に要請する仕様ってないのかなー ごっそりレイアウト変えるときのcss変更はクレームになるから
きちんと向き合いたいんだが、
500KBぐらいあるcssなので、TTLを600秒(1時間)にするぐらいにするなら
2020-10-21 18:00の時なら
hogehoge.css?2020102118
wordpressの自作テーマならheaderにこんな感じで出力すれば良いのかな。
vpsとか借りていれば分単位でも良いんだけど、
データセンターに入れている自前物理サーバ(ESXi)だからあまりディスクアクセスさせたくないのよね あまりアクセスさせたくない
でも常に最新を表示させたい
矛盾してね？ うん、深夜に作業するから
確認する担当が朝見るときだけcssが適用された状態で見てくれたらそれで良いんだわ。
スーパーリロードしろと毎回言うの面倒だし。 普通のwebサーバならキャッシュ期間指定の設定あるでしょ >>204
全部てめえの都合だけじゃねえかｗ
目的が手段になってる 結局モバイルフレンドリーでなければ、
翌春スマホ用のインデックスから消えるの？
viewportの無い縮小表示だとスマホ用インデックスから消えるの？ brタグの直後のテキストノードの先頭の空白（一つ）が消えるのだけど、これってHTMLの仕様？
それとも何かCSSが当てられてる？
２つ以上の半角スベースが一つになるのは知ってる。
今回は最初から一つだが、表示されない。 position: abusoluteで
top: 1.5em
だと、反映されなくて rem, pxなら反映するのよね。
昔はできていたような気がするんだけど、実際のところemは使えないの？ position: abusoluteでブロックレベル要素のwidthが自動じゃ効かなくなるのなんとかならんかのー >>216
その辺は
どうやってボックスの大きさが計算されてるのか調べると
納得はできるかもしれん ポートフォリオを作りたいんだけど、デザインはどうすればいいんだろう
例えばいいなと思うサイトの一部のデザインをパクっても大丈夫？ >>218
そんな事を自分で考えられないならデザイン苦手しょ？
下手に他人パクってそういう仕事ばかりきたらどうすんの？
デザイナーなめんなよ
本来見せたいところが伝わる構成にしなされ
コーディングを見せたいならどう工夫されているかをコンテンツとして掲載してもいいし
ソース表示した際にコメントで明文化してもいい
コーダー希望なら採用担当は必ずソース見てオリジナル分部をどこか判定して判断するぞ うん十人のPF見てきたが、嘘とかコピーは話せばすぐバレる。
ホームページこれ1から作りました
ってそれWordPressのテンプレですがテンプレのどこから作れます？
phpの構成ファイル全て1から作れますか？functions.phpも1から書いたんですか？
違いますよね？みたいな >>218「このサイト全部ぼくが作ったんです」
面接官「ソースにはwp-contentの文字列があるのですが」
>>218「私、実はWordPressの創始者です」
面接官「マット・マレンウェッグさんですか？」
>>218「そう呼ばれた時期もありました」
面接官「本日はありがとうございました」 >>220
別にデザイナーなめてるなんて言ってなくね？ そもそも、どこからがパクりなのかって問題もあるし
多かれ少なかれ、みんな何かしらパクってるからな
それをパクりと呼ぶか否かっていうだけで >>220
いや218はデザイナーとは書いてなくないかhtml/cssでポートフォリオを作りたいけど、その素材となるデザインは専門じゃないからどうしようって話だと思った >>223、>>225
たとえば君のPFに佐藤可士和の尖ったデザインを
そのまま自分が作ったのデザインのように埋め込んであったら
これからクリエイターになる人間ならデザイナーをなめんなって思うし、
人の仕事や権利ををなめんなって思う。
私が作りましたって言い張るならそのレベルのデザインの仕事を要求するわ 何がわかんねーんだ
パクっても大丈夫？→ ダメ。 これからクリエイターになる人間がショッパナから仕事なめんな
デザインどうしたらいい？ →デザイン苦手ならデザインで勝負するな。本来見せたいところが伝わる構成にしろ（それこそがデザイン）
俺に絡んできているやつは見た目がカッコイイとかきれいがデザインだと思ってるから意味が通じないんだろうな。 上の会話のどこでクリエイターになろうとしてるって出てきたん？ ポートフォリオ作りたいって事はクリエイターって事じゃないのか？ 自分でデザイン考えられないのにPF作りたいって
どう考えても転職や就活用のPFだろ？
制作になりたいんだろ？
それ以外にどんな用途があるのよ html/cssでポートフォリオ作るのも同じだ
自分のPFなのに、自分の表現する名刺なのに
ショッパナから人の制作物パクろうとか仕事なめんなって事よ 過去作品掲示するだけなら、ポートフォリオ生成サービスで十分だろ
むしろ素人が下手に自作して「頑張って作りました！」なんて主張されたら、言葉失うわ フロント部分作るやつがみんなデザイナー出身かデザイナー志望だと思ってるな、さては >>236
ならPFなんて作るなよ 何のために作るんだ？いらないだろ？
他人のデザインをそこに掲載して一体何を見て欲しいわけ？ パクリが当たり前て感覚、おまえ中国人らと何も変わらんからな
わかってて言ってんの？ 最初デザイナーと言ってたのがクリエイターに変わってて草 英語圏のプログラマならGitHubでどれだけ発信してるアカウントか
どんなプロダクトを作ったかで転職が決まるのに、
デザイナーじゃないのにPFでビジュアル見せたいとか
でも他人のデザイン掲載に抵抗ないとかばっかじゃねーの >>240
>>220もう一度良く読めよ
デザイナーなめんなよってのは、デザイナーの仕事をなめんなよって意味だよ
PFに他人のデザインパクって掲載とかそれで食っているやつへの冒涜なんだわ
最初からこいつはデザイン苦手ってすぐわかったからデザイナーではないし
じゃあ何の職種ってのも・・疲れるなお前も これで単に背景色とフォント色の組み合わせを真似たい程度の話だったら、腹抱えて笑うけどな
>>219が全てだわ >>243
んなわけない。
そんなのをパクるのに人にいちいち聞くかっての。 つーかソースやプログラムを見て欲しいならGitHub使えっての。
PFはビジュアル見てもらうものだろ >>244
カラーデザインしてる人への冒涜だって叱られちゃうよ！ 今どきはgithubもPFとして提出するけど
なにいってんのこいつ >>242
別にデザイナー志望じゃない、デザイン作りましたって言うわけじゃない、単にコーディングのためなのにデザイナーへの冒頭？
しかも金にするわけでもないポートフォリオだろ？
お前話が通じないって言われない？ >>244
そもそも一部をパクると言ってるから
>>243のニュアンスのが正しいと思うが web業界であればフロントもバックもポートフォリオ見せろって言われるよ
デザインだけやって実装やったことないひとかな？ そもそも仕事で納品したソースコードなんてgithubで公開出来るはずもない
デザイナとは違うのだよデザイナとは >>250
> ポートフォリオ見せろって言われるよ
見たことないな。検索してきてみて ポートフォリオでググっても
転職サイトが、作りましょうと言ってるだけなんだよなｗ 別にポートフォリオな形式的なものじゃなくてもこういうスキルありますよな
証明ができればそれでいいんだよ。実戦で使えるかどうかが問題だから >>256
だから検索してきてみてった言ったよね
そう言うのわかってたから >>257
それな。作れと言われて作るものじゃない。
今まで自分が作ったものがあるだろと
結局、なにもないからポートフォリオを作らなきゃいかんわけだよね >>259
え？むしろ過去実績が多いからポートフォリオページわざわざ用意するんでしょ？
なにもないなら何をポートフォリオに載せるの？ 話ぶったぎって悪いけど、
cssのクラス名って数字だけじゃだめなの？
年に1回のコンテンツだからclass="2020"とかつけていたら全然反映されない・・・ >>263
今まで何年もやってきたけど、
そんな基本的なお約束ごと知らんかった・・・
<h1 class="2020">とか適当に作って反映されなくて焦ってきて、
開発ツールでも全然違うh1指していたりしてパニックになりそうな感じだったわ、ありがとさん。 話蒸し返して悪いけど、gifhub使ったことないんだけど
就活でコード見せるならポートフォリオにzipで固めて置いとくんじゃダメなの？ 人事も担当するけど、担当が困らなければ何でもok。
一番迷惑な就活生は「面倒なことさせる、臭わせる人間」
自分がどう思われているか気にするキョロ厨は、秒で次の候補に移る。 >>265
PHPとかなしの静的ページなら、githubにコード上げればgithub pagesで公開できるだろ
画像がきれいに書き出せてるかとか、アニメーションのタイミングとか
コード見るだけで判断付くわけないから、Webサーバーで動かしてないと見る価値ゼロだよ
あとGithub使ってるなら、何も教えなくてもPR出したりローカル更新したり程度は出来るという
保証もできるだろ つーか自分が運営してるサイトとか
ブログのURLとかでいいだろ >>266
自分も採用担当してた
数十件の応募に目を通すから面倒なのは確かに嫌
ただ、面接は新卒は実力あるなしにかかわらず
緊張してたり一生懸命明後日の方向の話してたりで
そういうのも含めてみんなかわいいもんだなって感じで温かく話しを聞いてあげてるよ。 面接官多そうなんでスレチ承知で聞くけど、
未経験で新卒でもない人間がWeb制作会社に転職するとしたら
どんなポートフォリオサイト作っていったらいいとかどんな履歴書書いたらいいとかある？
職種はとりあえずはコーダーで、ぼちぼちWordPressとかJSも勉強していきたい感じ 新卒なら育てるけど、
新卒でなければ相応の経験があることが優先、無ければ候補にもならない。
web屋は経験積んだら、ほなサイナラと独立しやすい業態だし。 WPもJSも分からないコーダーって、そもそも需要あるものなの？ >>270
まあどの業界でもそうだが上の人も書いている通り、中途は基本、即戦力が目的だわな。
んで、もし中途未経験者をあえて取るなら、過去の異業界での経験、実績、人物を見るかな。
例えば、
マネジメント職やってたなら、何人の部署を任されていたか、業績はどうだったか、
問題点をどのように見つけて改善したか、部下の育て方の経験など。
前職が営業職なら成績はどうだったか、どの順位まで上り詰めたか、何を学んできたか
どれだけ経営者に接してきたか、購買心理や行動心理とかどのくらい勉強してきたかなど。
最大の武器はこれ
その業界についてめちゃ詳しいか。問題点や課題を知っていて強みになるか
最後はこれ
一緒に働きたい奴か 新卒
・コストが安い
・素直（1から染められる）
・年齢の上下関係で歪みが生じない
↑これに勝るメリットがないとあえて中途の未経験者を採用する理由がない >>272
楽天やアマゾンばっかりやってる会社とかあるよ
そういとこはWPの知識は無くて大丈夫。
ただjsはできないといかん >>256
だよね、出せって言われる
>>254
見たことないってどういう意味？転職先の企業が口頭で言ってくるけど wpってwordpress？
ただのブログアプリがそんなに大事なわけないし何の略？ >>268
業種・業態によるんじゃね？
自分は商業広告系だけど
正直、個人サイト見せられても
ふざけてるとしか思えない 今の平成生まれってスマホから呼び出すソフトウェアは「アプリ」って言うからなぁ
webサイトをホーム画面に登録してもアプリって呼ぶのには驚き。
アプリと思い込むんだよな。 平成生まれだけどそんなことないw
そういう偏見の固まりなとこが昭和脳ってかんじ >>281
すまん、俺も平成生まれなんだ・・・
おまえのようなおっさん平成生まれの話をしていないんだ。
もちろん全員とは言わない、スマホで育ってきた奴はその傾向にある。
VSで作ったwin用exeもアプリと呼ぶ奴がいる。 特定の文字が変換される人？脳に腫瘍できてない？大丈夫？ >>277
WP自体を使えることより、PHPとMySQLを使えることが大事なんだよ
PHPとMySQLの両方が分かる人は、ほぼほぼ例外なくWPくらい使えるから、
WPが使えない＝PHPプログラミングは期待しないでね、って言ってるのと同じ
少しPHPが分かるだけでも、ちょっとした改修くらいは出来るし、
その有無で人材の価値がだいぶ変わるって話 今の平成生まれは～と言ってるのに焦って自分も平成とか言い出しててうける WPはせめて独自関数は接頭語つけて、わかりやすくして欲しかったな。 フレームワークやテンプレートエンジン使ってるサイトを扱うのに慣れてる
ってだけでも
アサインされる仕事増えるしね タグに対してクラスを2つ使う時ってどういう時に便利な事例があるのでしょうか？
1つではダメなのでしょうか？
<h1 class="hoge fuga">とあると、
cssのパスは h1.hoge.fugaとなるのですが、h1.fuga.hogeだと何かデメリットあるのでしょうか？
あと
cssの記述では、
section div.main h1.hoge.fuga { color:red; }
みたいな書き方をするのでしょうか？(AND条件の時に使うもの？)
複数のクラスってあまり経験がないもので難しく感じます。 >>290
SCSS（SASS）を使えば1つでできるしその方が良い bootstrapがタグに対してクラスを2つ以上使う方法を活用している例であり
bootstrapがタグに対してクラスを2つ以上使うとゴチャゴチャして使いづらくなるという例である
scssはそれを解決する >>292
>bootstrapがタグに対してクラスを2つ以上使うとゴチャゴチャして使いづらくなるという例
わかるｗ
5個とか6個とかあるともうstyle属性と変わら無くね？とか思う >>290
自分、全然分かってない勢なんで、その疑問の意図が掴めないでいる
複数のクラスって、スタイルを合成させるのに使うんじゃないの？
例えばベースとなるスタイルに対して表示をnoneするスタイルを付けたり消したりする場合、JSからクラスを追加したり削除したりして使ってるから メンタリストのdaigoって時間守れないらしいし、協調性ほぼないらしいけど月収9億だって
何か極めて「この人はこれが得意なんだ」って広めれられれば定型の方から仕事くれるようになるのかな
みんなで仕事するのは無理だってdaigoが言ってた index.htmlはa.cssとb.cssを適切に読み込んでおり、
a.cssには以下の定義：
.show {
display: block;
}
b.cssには以下の定義：
.hide {
display: none;
}
がそれぞれ記述されている。
さて、あるボタンを押したとき、初期状態が
<div class="hide">foobar</div>
で不可視である要素に対し、クラスを付け替え
<div class="show">foobar</div>
とし、可視状態にする処理をJavaScriptで実装しようとしたところ、間違えて
<div class="hide show">foobar</div>
とする処理を実装してしてしまった。
この間違った処理が動いたあとの
<div class="hide show">foobar</div>
は現在可視か不可視か？
現在の小さな会社入るとき出された問題。（細部は異なる）
答え聞いてちょっとムカついた。 >>297
a.cssがb.cssより後に読み込まれているなら可視 >>290
よくやるけどなあ
ボックスをツラツラ並べていって
ひとつずつ、ちょっと違う装飾するときとか
区別しにゃならんでしょ
そんなとき
<article class="hoge h1">...</article>
<article class="hoge h2">...</article>
<article class="hoge h3">...</article>
：
とか
基本同じだけど、ちょい違うやーつとかも
どのくらい違ったら別のクラスにするかは
沢山やって、塩梅を見つけるしかないと思うけどね >>297
a.cssがb.cssより前に読み込まれているなら不可視 >>297
なぜ答えを聞いてムカついたの？
試験の後で答えを教えてくれたの？ >>290
便利っていうか、最近はユーティリティファーストとかもある
例えばTailwindとかが有名
https://tailwindcss.com/ >>301
「可視か不可視か」という質問してるくせに、単純に「可視」あるいは「不可視」と答えただけではいずれにしろ間違いとされてたところ。
悪問じゃん。 >>302
HTML4の時代にクラス名を「text-red」とか「fs10(font-size)」とかつけて
先輩に「装飾する名前をクラス名にすんじゃねーよ」とか怒られたけど、
まさしくこれって同じ事よね？ >>305
その辺は4時代にもう解決してたかも
結局それって、英語読める前提だから
ブラウザにとっては
text-redでも
text-char-zaku
でも変わらん >>302
クラス名に「：」使えるのか・・・
mdってなんだろう。 >>305
当時としては間違えてるけど、今はコンポーネント開発が主流になって、
インラインスタイルが増えたことが背景にある
コンポーネント毎に固有のスタイルが多すぎて、クラスで汎用化するのが現実的ではなくなってきたって話 Font Awesomeも似たような感じだよね
タグにクラス名が3つも4つもなると違和感あるけど、cssでやれることが増えてきたのもあるから、
装飾の合成になるんだろうな。 でもtext-redのような感じにした場合で
PCは赤でSPでは青にしたい場合とかあるからやはりあまりお利口じゃないよ スマホ用
.text-red{color:blue;}
あああああってなるやん >310
それだと表示が遅いんだよ。
だからjQueryのアコーディオンだのはほとんどがdisplay:none;とかcssで先に消すロジックになってる >>314
あんまり意味なくね？
もしそれが
umbhalo-okubomvu
って書いてあったら、何も言わないでしょ？
そんなもんだよ
クラス名の文字列なんて
あってもなくても、対して意味ないって 他人が編集する場合クラス名はわかりやすいに越したことはないのでは？ >>312
コンポーネントを横断してスタイルを設定するためシャドウDOM内でcssファイルを読ませてる
つまりコンポーネントだろうが結局はクラスで指定してる
これに代わる良い方法あるの？ 以下の画像のようなレイアウトをfloatを使わずに行う場合、cssはどのように書けば良いでしょうか。
https://i.imgur.com/PqOZDu0.png
初歩的な質問で申し訳ないですが、教えていただきたいです。 :rootにカラーパターン書いといてメディアクエリで使い分けたら…めんどくさいか >>321
できません、か
できます、か
どっちかはっきりしてくれ なんで回り込みを実現したい時に、回り込み用のタグを使いたくないとか言うんだろうな
理解できない >>317
うーん、、言いたいことはわかるんだが
もしそれが
.文字を赤にする{
color:blue;
}
って書いてあったらやはり気なったり間違いを誘発せんか？
意味を知ってしまっている単語という時点で
意味を知らない単語とは異なると思うんだわ でもIDaZ2WzR5Tはクラス名以外の意見は全部共感するし
ID出している事にも好感持てるな >>312
インラインスタイルが増えてる？？
css-in-jsのひとつ、emotionの動作確認してみなよ。
コンポーネント固有クラス名生成してスタイルタグ差し込むんだよ。
インラインじゃ同じコンポーネント２つ、３つ、１０、１００と生成する場合CSS共有できなくてリソースどんどんムダにリソース浪費するでしょ？ >>321,325
ありがとうございます。floatでやります。
>>324
「使いたくない」などと一言も書いていないです。 >>319,328
なんでtext-redみたいなのが今更使われるようになったかって背景を説明してるんだけど、理解してる？
コンポーネント固有のスタイルの話をしてるのに、共有のスタイルの話をしたり、
大量に生成した時にパフォーマンスがーって、最適化しろよってだけの話だし
とても頭が痛いよ そもそも誤解してる人多そうだから書いとくけど、
ユーティリティファーストって開発時にラピットタイピングする為の手法で、
本番環境になる前に普通に外部に纏めたりするからな
https://tailwindcss.com/docs/functions-and-directives#apply
誰も公式ドキュメントとか読んでなさそうだから、貼っとくわ >>332
広まって欲しいか欲しくないかで言うと広まって欲しくないなそれ まぁ、後で落とし込むとしても
そんなラピッドなんとかで急いでサイト作らなくても
ゆっくりやろうや、という感じだな。 よく見たら誤字酷いな
正しくはラピッドプロトタイピングな
頭痛い中書いたから、多少のミスは勘弁してな
ただのユーティリティなんだから、使いたい人だけ使えばええわ >>337
こんなの知らんかったサンクス
もっと他にも最新情報を発信してってくれ htmlについて
RSS配信をしていないサイトでRSSフィードを独自に作る方法
というのを試しているのですが、全然わかりません
当該記事→ttps://www.y-shinno.com/rss-feed43/#toc5
↓下のページの新着情報を得るためにはStep2のGlobal Search Patternにはどのように記載すればよろしいのでしょうか？
ttps://www.bdsearch.jp/amazon.php?category=foreign_movie CodePenのURLは貼れるかな？
https://codepen.io/rapp/pen/OJXmPJd
テーブルの行またはセルに重ねる形でハイライト(background-colorを付けたボックスを重ねる)を付けたいのですが、
「<td><div></div>TEXT</td>」のように<td>の内側の先頭に<div>を入れ、divに色を付ければセルに対してはハイライトされるようになりました。
(tdのpositionはrelative、divのpositionはabsolute)
ただ、同じようなことを<tr>に対してやると、行ではなく、ページ全体にハイライトが反映されてしまいます。
前スレで紹介があったように、<div>ではなく、tr::before(content='')に対して適用すると、行だけのハイライトが反映されます。
「<tr><div></div><td>....</td></tr>」の<div>に適用した場合、tr=行ではなくページ全体に反映されてしまうのはなぜでしょうか？？
また、このような書き方(divを使う)で意図する結果を得る方法はありますか？ >>340
tr直下にdivは入れられない
なのでtableとbuttonの間に<div id="div1"></div>がはじき出されてるから
ページ全体にハイライトが反映されてる >>339
新着情報って、どこにあるの？
どの要素を指しているのか、分からない
ブラウザで、そのページを開いて、F12 開発者ツールを起動して、
取得したい要素の上で、右クリックメニューから、その要素を取得すれば？ >>340
こういう質問よく見るけど、バックグラウンドカラー変えるだけじゃ駄目なの？ https://stories.freepik.com/people/cuate
このサイトのIイラスト色を変更できるんだけどどういう仕組ですか？
背景も3種類あるのがすごEんだけど >>341
！！
trタグにはtd/thしか置けないんですね。
だからtrのbeforeで重ねる必要があるのかぁ
なぜ全体に反映されるかも教えていただきありがとうございました。
>>343
この方法だと、tdの背景より優先させたり、一時的なアニメーションと併用したり、文字より上にしたり、複数重ねられるとかいろいろと応用が利くんです 古いページの更新を依頼されたのですが、
懐かしいxhtmlでdivだらけなのですが、
divの中にfigureとかhtml5のタグを使っても良いのでしょうか？
headの上には xhtml1-strict.dtd が記載されています。 そういや結局strictで組んだ事一度もなく時代が変わったｗ
当時時間かけて一生懸命厳密に組んでた人どんな気持ち？ >>350
一時期はStrict原理主義者だったなあ
2000年代初期の頃
あんまり時間かけた気はせんけど Strict DTDにvalidであることは
それほど難しいことではないんよ
なんなら全部divでもいいんだから
原理主義者過激派が目指すものはもっと先にある 当時のstrictより、今のampで組む方がよほど面倒臭い気がするなぁ 勉強する内容の量は
ＨＴＭＬを１０とすると
ＣＳＳって、どのくらいなんですか？ 個人的には40だな
HTMLなんて使うタグ毎回限られてるし 一度覚えてもすぐ古くなるし、
ツールや手法も常に新しくなってくしな HTMLは話のわかるやつ。
CSSは話にならないクソッタレ。 そうかあ？w
いうてもパラメータの値書くだけじゃん？ >>352
がっつり原理主義もイケるコーダーは
行政の案件受けたときにアサインされてたなー
ページ単価は高めだけど絶対間違えない人だった dtdにstrictやtraditionalがあるとブラウザの動作で変化があるの？
曖昧な表示なら、その要素が表示されないとか。 行政がストリクトにやった結果がIE専用行政サービスサイト群でっかｗ とあるページのcssってどうなっているんだろうと思って、HTMLのソースをクリックすると
@charset "utf-8";
@import "base.css";
@import "layout.css";
これしか書いて無くて「ﾌｧｯ？」となったんだが、
headに複数行書くのも良いと思うけど、上のインポートする書き方ってどんなメリットがある？ ソースファイル管理でしょ。
でも
>>364 みたいにcssファイルに@importで書くのはラウンドトリップが縦積みされてパフォーマンスが落ちるので避けるべき。
https://www.stevesouders.com/blog/2009/04/09/dont-use-import/
SASSやStylusとビルドツール導入してビルド時@importするべき。 ら・・・ラウンドトリップ・・・だと？
横文字はわからん、漢字で頼む。 >>366
ウェブページ見に行くとき、
なんとか.com/index.htmlとか打ち込むでしょ？
index.htmlは省略可能かもしれないけど、とにかくhtmlを指定して読みに行くわけ。
ブラウザが、「このhtml下さい！」って要求だしてから、DNSのあれこれでサーバー見つけて、サーバーがブラウザに要求されたhtmlを届けるまで。このブラウザ・サーバー間の「行って来い」のことをラウンドトリップ、「行って来い」にかかる時間をラウンドトリップタイムって言うの。
で、その受け取ったhtml内にlinkタグによるcss読み込みやscriptタグsrcに指定されてるjsやimgタグsrcに指定されてる画像があったら、そこからまたそれぞれサーバーに「下さい！」って要求投げるわけ。
仮にhtmlに書かれてるこれらcssやjsや画像を全部同時に要求投げれたとしても、最低「２行って来い」分かかるわけで、ようやく「２行って来い」分かけて入手したcssの中に、「残念だったな、中身はここじゃなく、ほにゃらら.net/piropiro.cssにすべて書かれている！」と書かれていたら？
まーたその、ほにゃらら.netに「piropiro.css下さい！」って要求投げなきゃ行けないよね。
はい、これで「１行って来い」分増えて、合計「３行って来い」かかることになっちゃったね。
せっかく「２行って来い」かけて取ってきたcssの中身がモヌケの空で他所に丸投げ指示だったせいで。
@importがやっているのはそういうこと。
蛇足だが今は「２行って来い目」で要求してるcss/js/画像など（リソースと言う）は、サーバープッシュという技術で短縮可能。ただしサーバー側の対応が必要。
いずれにせよcss @importがラウンドトリップを増やすのは間違いない。 >ブラウザ・サーバー間の「行って来い」のことをラウンドトリップという
これだけで良いと思うけどおつかれ。
http2ならこのあたりも一緒に追随して1セッションで取ってこれるのだろうか。 まじかよ、ちょっとコンビニでhttp3買ってきて、VPSのApacheにインストールしてみる！ 自分なら自演なんてしないけどな
自演する理由なに？ >>371
ごめんなさい
勉強してきました
もうTCPに頼るのをやめた、のね？
Googleのエンジニアはすげーなー
それをIETFに認めさせてしまうところまで含めて HTTP 2 では、同時に4つのファイルをダウンロードする。
F12 開発者ツールのネットワークタブを見ればよい
>>364
YouTube で、たにぐちまことのBootstrap 動画でも見れば？
漏れは、CSS をほとんど知らないけど、Bootstrap でレスポンシブ対応する 大丈夫だ、声を上げなければ巻き込まれることも無いだろう・・・ たにぐちまことはこんなところで宣伝・売名して儲かるの？ HTML初心者です。
rubyタグで上下にルビを振るのってどうすればできますか？ >>382
そもそもrtを二つ書くことって出来るのかな？
出来るなら
positionでどうとでも出来ると思う
上だけだけど
デフォのままでは位置合わせがどうにもうまくいかなくて
自分で調整したことある 2つ書けるよ
rtcタグでまとめたルビを2つ書けばいい
2つ目が1つ目の上に来るから、その上に来た2つ目をposition: absolute;で
下側に持ってくればいけるかも >>384-386
回答ありがとうございます。
アドバイスに従っていろいろと試していくうちに少し無理やりですが、以下のようなコードで表示してみたらChromeとFirefox両方でいけました
HTML:
<ruby>日本国憲法<rtc>にっぽんこくけんぽう</rtc><rtc>にほんこくけんぽう</rtc></ruby>
CSS:
ruby {
display: inline-table
}
ruby > rtc {
display: table-header-group;
font-size: 50%;
} こっちのほうがいいですね
HTML:
<ruby>
<span>日本<rtc>にほん</rtc><rtc>にっぽん</rtc></span>
<span>国憲法<rtc>こくけんぽう</rtc></span>
</ruby>
CSS:
ruby {
display: inline-table
}
ruby > span {
display: inherit;
}
ruby rtc {
display: table-header-group;
font-size: 50%;
} divのfigureにfloatとかclearとかあれこれ上手くいかなかったけど、
flex使ったらなんだこりゃ、一発で期待通りになったわ。
flex恐ろしい子・・・ >>362
margin;0 autoかなんかが効くの効かないのとかあったような >>390
むかしはflex無かったんだぞ
最近始めたやつはめぐまれてていいな 昔はflexこそなかったけど、そもそも開発自体が単純だったけどな
難しい点はブラウザごとの挙動の違いくらいしかなかった >>393
そうかなあ
あんまり変わらん気もするが そこでjQuery
CSSは、使わない！
スタイリングも、すべてjQueryで行う！
jQueryがブラウザの違いを、すべて吸収してくれる！ 質問なんだけど、全部色を赤にしたい時ってこういう書き方もありなん？
div { color: red;}
<div>
文字1
<p>文字2</p>
<p>文字3</p>
</div> >>397
何の問題もないけど、あえていうなら、クラス名かIDは付けた方がいい
別の何かと合わせた時に、予期しないところのdivに影響が出るかもしれんから bootstrapサラっといじくってみたけどこれ面白いですね
web製作仕事にしている人はほぼ使わないですか？ >>400
ジャンルによると思う
うちはほとんど使わん
ブートストラップ臭くなるから そうかなぁ
中学二年くらいの女子の履いたブーツいい香りだけど Ruby on Rails では、Bootstrap, React が多い
皆、バックエンドの開発者だから、フロントを知らないから、
レスポンシブ対応に、Bootstrap が必須 >>406
そう。その傾向は確かに本当の話。
あっちの業界はなんか流行みたいのを発信してるやつが居るのか
みな揃ってデザインにXD使い始めたし誰だ教えてんのは このスレにおいてはRuby on RailsとBootstrapは
もはやNGワード設定しておいていいかもしれん <tr>をdisplay:blockにした場合に、<td>の横幅が上下で揃わなくなるのは回避できないの？
もちろん、すべての<td>にwidthを指定すればいいんだけどautoに任せたい場合に各行でバラバラになってしまう…
なんか<tr>ってくせ者だよね…
セルではなく行でいろいろ扱いたいってことも多いんだけど制限が多い気が。 テーブルタグに変わる新しい表のコーディングできないかな？ display: tableとかdisplay: table-cellとかそのために用意されたのに誰も使ってない(;´Д⊂) 最近display: inline-block, flexは理解できるようになったけど、
display: tableって何に使って良いかわからないわ・・ tableって今の時代使うもんなんですか？
ずっとdivです >>414
tableタグのth使えば、そこだけ固定されて中身であるtbodyがスクロールとかできるからdivより便利よ
って婆ちゃんが言ってた。 表組みの用途ならいつの時代とか関係無くtable
かつてのテーブルレイアウトでページをレイアウトするのが問題なのであってtable自体が問題なのではない
テーブルレイアウトはセルの中にリストやテーブルが含まれたりして構造が無駄に複雑になったりする
そういうカオスな構造だとスクリーンリーダーなどは正常に読み上げを行わなくなる
セマンティクス的にもおかしいのでSE的にも悪い評価をされるはずなので行うべきではない >>417
使うべきではないのは分かったけど、
見出しと中身のある表はどう作れば良いのさ？ >>418
colspanやrowspanじゃあきまへんのん >>418
言うまでもないが見出しは見出しを意味するタグを使えばいい
tableの場合はthがそれに当たる
「中身」というのがどのようなモノを指しているのか分からないがthに対応したデータをtdに入力すれば良い ウェブに限った話ではありませんが
帳票は表ですか？
テーブルレイアウトですか？ テーブルレイアウトがどういうものか少し調べてみると良い
例えばよくある形のヘッダー・フッターと2カラムや3カラムの1ページのレイアウトをtableタグで無理矢理やるのとかがテーブルレイアウト
今はそういうレイアウトはtableタグで行わずにcssで行う https://jsfiddle.net/jgsquk59/
pの中にあるstrongにmargin-topを増やしても見た目の位置が変わらず、
開発ツールではmargin-topは確かに上に伸びているのは確認できるのですが、
margin-topの数だけ下に降ろすのはできないのでしょうか？ marginって要素と要素の間空けるけど、
飛び出すというのはどういうこと？
margin-top:100pxとかにすると、押し下げられそうなのだが、変わらないのはなぜなんだろうか。 >>426
<strong>デフォではdisplay: inlineだろ
display: block足してみな
>>427 は何言ってるのか分からん… >>429
うぉぉぉ、できた！
そうか、strongはspanと同じinlineか、marginは効かないのね。
pのなかのstrongを見出しに使っている古いサイトだからdisplay:blockにしても問題ないな これはここではないかもしれないけど、
よくあるfixedで画面上に戻る矢印とかを設置した時
スマホだと下にスクロールすると、アドレスバーが消えますよね？
これのせいで縦画面サイズが伸びてfixedが狂うのかタッチ位置がズレるんですが、解決方法ってありますでしょうか？
body内に縦100%のラッパー作って画面自体をスクロールさせない(画面サイズが変わらない)ようにするしか対策はないのですかね…
わりとこれ放置してる大手サイトが多いもので、調べてもそれらしい解決方法がわかりませんでした
よろしくお願い致します。 環境書き忘れました、泥Chromeです
再現方法としては、アドレスバーが出てる状態で、下へ思いっきりスクロールしてる最中に該当の要素をタッチしたりするとよく起こります。
確実ではないですけど、何度かやってるとなります。上下にゴシゴシスクロールさせたりしても起こりました。
うちにある他の泥端末でも試しましたが、いろいろなサイトで再現できたので、こういうものかな…
たまたま見てたSHARPのサイトでもなりました。 下へ思いっきりスクロールしてる最中にタッチ・・・
眼科で扱うような問題じゃなくて？ 画面下部に簡易メニューを設置というのをやってます。
その簡易メニューの親要素に fixed をかけて、leftとbottomなどで位置指定してます。
その中にリンクなどを置いてて、先ほどの操作をすると見た目は正常なのですが、タッチ出来る部分が上の方にズレます。
ちょっとだけスクロールすると正常な位置に戻るんですが…
bottomだとダメなのかなぁ…
scrollやresizeイベントで、topから下部の設置位置をjsで出して設定してやると、この現象は起きない気がするのですが
うまく下部に張り付かないというか、アドレスバーの表示、非表示の時に固定されず美しくない動きをするのでやめました
難しいです… >>430
昔俺もやったわ、inline要素ってよっぽどのことじゃないと使う必要ないなって思ったわ 眼科で扱うような微妙なズレではなくて、みるからにズレます。
というか、正常な要素をタッチしても反応しなくなります。全くなにもない空間をタッチすると反応する感じですね。 AndroidのedgeとFirefox Focusでシャープのサイトいじくってみたけど同様の症状は出ないな >>436
viewportの設定がおかしいんじゃね？ ありがとう御座います
firefoxでやってみましたら、まったく症状は出ませんでした
これはもしかしたらChromeのみの症状かもしれませんね…
うーん、解決にはなってませんけど、しばらく放置でいいかなぁ…
ちなみにviewportは、
width=device-width,initial-scale=1
でやってます。 inline-blockにtext-align:center効くのか、知らんかった・・・
margin: 0 auto効かないなと思って悶々としてた 改行される要素→text-align:center
改行されない要素→margin: 0 auto
って覚えて置きゃいいだろ html側でrowspanを使ってることをCSS側で指定することって可能ですか？
つまり、例えばrowspanを使ってるセルに対してCSSで背景色をオレンジにしたりとか html側でrowspanを使ってる要素にclass="using_rowspan"を付加させるんじゃなくて、CSS側でrowspanを使ってるかどうかを直で判断したいんですが 箇条書きリストliの中にテーブルを置いた時、テーブルの上部に行合わせが行くのを止めて、行ラインを中央にしたいんだが。
つまり、
(1)■■■■
■■■■
■■■■
じゃなく
■■■■
(1)■■■■
■■■■
みたいな感じ >>449
マーカーをbeforeで手作りして
flexで横並びにして
align-items: centerでどうよ >>447
角括弧なんてあるのか・・・
他にもあるの？
nthや、::after,before,hoverなら知ってる ん？連結格子ってjsのおｒと同じ？
そんなの使えたっけ？ バカか？
何で記号がJSと関係あるんだ？
じゃあ隣接兄弟結合子+はJSと同じで足し算すんのか？ ：と：：って違うのか、
どちらでも同じとかどこかのサイトで見たことあるな それ木になって前調べたけど擬似クラスと擬似要素で変えてるんじゃないかなと
答えは分からなかったからそう理解しておいた ：
：：
どっちでも動くからCSS2, CSS3の違いだと思ってたけど違うのかな・・ 今は疑似クラスが:
疑似要素か::
昔は区別なく:だったので今でも:でいける コロンを使う書き方として認識してるけど、
あまり擬似要素、擬似クラスと考えたこと無かったな 擬似じゃいくら美人でもいまいち燃えない
やっぱ本番じゃないとな デリヘルって本番できないんでしょ？
ソープ行くわバカバカしい >>466
建前はそうだが実際は交渉次第で結構できる
ブサイクとかデブはお断りパターン多いけどな >>449
tableにdisplay: inline-block;とvertical-align: middle; vertical-align: middle
ってどういうデザインの時に使うの？ ブロック要素にlinear-gradientを使って、比率棒グラフのような使い方してるけど、比率が変化したときのトランジション効果をつけようとするにはグラデーションを諦めるしかないのかな？
リアルタイムで変化するトランジションで滑らかに表示したいんだけど… 緑単色の長い棒を下に敷いて、透明色ー赤色のグラデーションの短い棒を上に被せてこれを伸縮、じゃダメなんだっけか？ input type=fileでファイル添付欄を作った場合に、参照ボタンだけでなく、ファイル名が表示される欄をクリックした場合も、ファイル選択のダイアログが出てきますが、
これを参照ボタンを押した場合のみファイル選択が出るようにすることはできるでしょうか？ ファイルAPIとUIはナーバスなのよ
下手に自由度与えると
色々悪さ出来ちゃうから >>473
「参照･･･」とか適当な名前でlable付けてCSSでボタンみたいに整形して
inputの方をdisplay: noneで消すとか 参照ファイル名を表示したい場合は、こういう方法もある
<input type="file">をカスタマイズ - Qiita
https://qiita.com/d0ne1s/items/dd0ffa707ffe051969d7 >>472
ごめん、説明不足でした。
「グラデーション」とtransitionを併用したいというより、linear-gradientとtransitionを併用したいという意味です。
linear-gradientでの利用イメージ
(これはRunの度に比率が変わる)
https://jsfiddle.net/ct9qvz6L/2
ブロック要素1つで塗り分けできるのと、透明度も併用できる(重ならない)からlinear-gradientを使いたいなと… >>479
できる気がするけどな
帰ったらためしてみようかな >>479
backgroundの設定ではtransition-duration値が無視される仕様らしい。
なのでパッとしか変わらない。
調べたところみんな疑似要素重ねたりして擬似的に実現してる。
知らなかった… 某所で見かけた表現なんですが、画像と本文が横並びになっている形式を「メディア」、
画像と本文が縦並びになっている形式を「カード」と呼ぶのは一般的なことなんでしょうか 「カード」はある程度市民権得てると思うけどメディアは…？？ >>483
一般的ではないでしょ。通じるとは思えない
メディアって言われたら記憶媒体か広告媒体の話かと思うし、
カードはまあ、bootstrapでも使われるから連想出来なくはないけど、「デザイン色々あるけど、どれのこと？」って思う
https://getbootstrap.jp/docs/4.5/components/card/ 旅行商品の検索結果のような
割と内容物の多いやつの羅列を
カセットって呼ぶのはマイナー？ カセット？ファミコンか、ウォークマンか？
昭和キーワード過ぎて、マイナー感がすごいな >>482
ありがとう。やっぱり厳しそうだね。
何かをしようとすると何かはできなかったり、できてもトリッキーなやり方だったり、CSSは難しい… >>488
この20年で
お前ら世代の英語力は飛躍的に伸びる
と、期待されてたけど、全然ダメだったな… >>489
transitionは最初から
変化させられるプロパティと値は決められてるのよ
悩む前にまず仕様を読むのオススメ！ >>491
まあこのザマだからね…
【英語】京都高島屋の広告「Save The World from Kyoto JAPAN.」に日本国外から驚きの声が殺到。「京都は世界の敵だったのか…?」★4
https://asahi.5ch.net/test/read.cgi/newsplus/1604924015/ >>493
スレチだからニュー速か嫌儲あたりでやってくれない？ ここで聞く質問かどうか分かりませんが、皆さん、自分のWEBサイトでIE11をサポート期限の2025年10月までサポートしますか？ もう、とうにIEは切ってる
自前でなくとも二年前の案件の要件では切られてた(官公庁関係の社内システム) もしかすると、IE大好き人がアクセスしないサイトの案件だからかも webページをbackground-image含めて丸ごと保存する方法ないでしょうか？
転職用に制作ページ保存したいのですが、キャンペーンページなど一定期間で
消えてしまうページもあるので保存しておきたいです。
会社からデータ持ち出しはNGです。
よろしくお願いします。 >>500
FirefoxのSingleFileってアドオンはまるごと保存できて便利 >>500
それを聞かなきゃわからん人を雇うのだろうか mht形式で保存すりゃいいだけだろ
10年以上前からあるぞ >>501
ありがとうございます。
今までsabe page weってのを使ってたのですが、細かく設定できなかったので助かりました。
background-imageどころか、遅延読みの画像まで保存できてて凄くよさそうです。 cssで要素内部の要素にすべて影響を与えるものと宣言した要素だけとの違いって何でわかるの？ >>505
これわかったわ、ターゲットクラス *これすればターゲット内のすべてに適用されるのか >>507
いや
全称セレクタは
まさしく全てなんで
カスケード、インヘリットしているわけじゃない フォーム作成とかでlabelやinputにクラスでwidth設定できるのなんで？ https://i.imgur.com/MFfRM9O.jpg
この画像は適当なキュレーションサイトのスクショなんですが、
この女性の画像はどうコーディングするのがいいのでしょうか
imgタグは<p>タグで囲うのかそれとも<figure>タグで囲うのか
そしてaltタグの値は入力すべきなのか…ってな感じです
ちなみにこのサイトの女性の画像はどうやらフリー素材っぽいです wordpressで動作している既存のサイトに対して、
firefoxの開発ツールで、ざっと追加のコンテンツをイメージするために
sectionとかタグを追加などしているのですが、
最後にcssパスやプロパティも含めて出力とかできるの？
静的サイトならatomやvscodeでプレビュー見ながら、
HTMLとcssを作っていけばいいんだけど、
開発ツールで仮想的にコンテンツを追加していくのが理にかなったやり方？ <div style="position:absolute; top:250px; left:290px">
<img src="ボタン.jpg"alt="ボタン">
</div>
をもう一つの画像の上に表示させたいです
どうすればいいですか？ >>516
動的サイトでも
HTMLやCSS書くやり方はそう変わらんよ
そのためのdocker 開発ツールでhtmlやcss足しても不慮の事故で
F5やbackspace押してしまったら泣きそうになるので、ページ複製してやります >>515
<p><img src="woman.png" alt="美白効果女性イメージ" /></p> >>516
大規模な改修ならテスト環境（クローン環境）を構築する。
中規模な改修ならテストファイルを作成する。
小規模な改修ならF12だが出力つーか、画面のソースをコピペだ >>517
そのdivと同列でimgタグ書く。
それたの親としてdivで括ってposition:relativeにする >>520
横レスですまんが、
時折同じ悩みに陥る時があるけど、
pタグの下に入るの変じゃない？
この女ただのイメージ画像だし、文節じゃないよね？ >>520
1.figureではなくpでくくった意味はなんでしょうか
figureではダメなのでしょうか
2.altの値を入力した意味はなんでしょうか
私はこの女性の画像の場合は画像に意味がないと考えることもできるのではないかと思いました
例えば、その女性の画像を盲人がスクリーンリーダーを使って「美白効果女性イメージ」と
読み上げさせたところで得られる実利的な情報は何もないでしょう
スクリーンリーダー対策のためだけにaltを入力するわけではないのでしょうが、
そうするとこの画像の場合は何の意味があってaltを入力するのかわかりません
この画像をどのように判断してどのような考えでaltの値を入力されたのでしょうか altの有無はGoogleにチェックされるぞ。
説明の意味がない場合でも値なしでalt属性は置けと指示が出てる。 >>528
その問題はなかなかに難しい
セマンティクス的にはその画像が何であるかを書くべきなんだが
スクリーンリーダーやSEO的には、他の文字要素と合わせてわかりやすい方がいい >>528
気持ちはわかるけど、
アスペルガー持ちじゃなければ、
あまり詰めて考えると、しんどいからそこそこに解釈したほうがよい。 HTMLとCSS覚えたら在宅ワークで仕事少しはあります？ 今からは厳しいかなぁ
時給100円ぐらいでも良ければ止めないけど・・・ >>534
統合失調症の陰性症状で一日半分寝ているんです
今は完全療養中です
少しでも仕事の練習が出来ればと思い、かつ少しでもお金が稼げればと思い、
開発言語で「無料で導入できる」「比較的簡単」「ランサーズで案件数が多い」という条件で探し、
PHPがいいんじゃないかと思うに至りました
そして、KindleのPHPのテキストを購入したのですが、HTML、CSSの知識がないと理解できないものでした
PHPに関する説明はよく分かるのに、コードの中のHTMLとCSSの部分の意味がさっぱり分からず、
分からないなりに200ページ弱読みながらコードを入力し、いくつか画面を作るのには成功したのですが、
やっぱりHTMLとCSSが分からないので、コードの意味がほとんど分かりません
お金を無駄にしてしまったかもしれませんね
私は調子が良くなってきたらB型作業所（雇用ではない。給付金は20日働いて3万くらい）
に通おうと思っていて、でも一日半分寝て昼に起きているので無理で、
家で出来る仕事はないものかと考えているのです
だから時給100円でも最初のうちは構わないです
B型作業所にはとうてい通えないので…… >>535
あぁ、どこかのスレで書いてた人か。
マルチポストやめような。
はい、この内容はもう終わり！ >>536
マルチポストはしてないですよ
2つ相談をしましたが、コピペではないです >>528
1：ダメではないが一般的ではない。figureの一般的な使い方、使われるコンテンツの括りを再度みてみなされ。
2：あなたはデザインへの理解が低いように感じる。
意味のないものなどない。デザインは全てに理由と意味がある。意味がないならなぜ画像を設置する？
画像の役割は何？
盲人がメインターゲットのサイトなの？画像からしか得られない実利的情報なんてあってたまるか。
そんな糞サイト作るな。
強いて盲人の意味を考えるなら盲人でもどんなページなのかを想像させる為のaltだ。
もしブラウザで画像リンクが切れていたら、そこには何の画像があったのかがわかるようにするための目的でaltを入れたら間違わない。 横レスだが、img使うか、h2でbackground使うか迷うな・・・
どっちが良い？ 物つくりするなら多様化した1000人をターゲットにするな
本当に来てほしい、たった一人をイメージしろ
盲人の市場規模は一般人のそれの何％か考えろよ
年齢性別生活収入ネットする時間寝る時間買い物する曜日具体的にイメージ出来ていない証拠だ >>540
どっちでも良いが、backgroundは本来は背景の用途だぞ。
それとレスポンシブとか考えろよ、アスペクト比保って可変しやすいのはimgだろ 既存のサイトをどうコーディングするかって質問に対して
サイトのデザインだのターゲットだのものづくりだの言ってもしょうがないだろうに…
熱意が空回りしててちょっと恥ずかしいぞ >>535
気の毒なのはわかるが
本職の人間からするとこの仕事を馬鹿にするなしか思わんわ >>542
そうだった、backgroundのレスポンシブ考えたらimgのほうが良いわね >>543
お前もわかってないからそう感じるんだよ。
表面だけマネてきてそれっぽくやってこれても結局、自分で思考してきてないから理由が答えられないわけよ
まあそれでもかまわないんだろうけど人に教える立場にはなっちゃダメ その場しのぎでこなしていても行き詰ったり疑問がずっと消えないわけ
そういう時は根本の考え方だったり抜本的な改革が必要なんだよ
これは制作にかぎらずスポーツも政治も営業も全て同じ
それを理解させないといけない。表面的なエサなんてやっても無駄 今なら質問できる！
カルーセルってレスポンシブの時代、imgタグとbackground-positionどちらを可変させるのが一般的？
後者しか知らないだけど、前者とかできるのかしら？ 1文字しかかぶってないけど、できるのかよ。
そもそもカルーセルが今風かどうかもわからんけど、あのスワイプで画像が動くのってどうやってるんだろう
思考停止でライブラリ使ったほうが楽なんかな・・ >>550
昔ながらのマウスドラッグと考え方は同じ
touchstartの座標と
touchmoveの座標の差分だけ
transformでボックスを動かしてやればいい
そんでtouchendで
閾値を超えてれば次のコマへ進める
超えてなければ動かしたぶん戻す
枠の大きさを測って動かす単位を決めれば
レスポンシブでもそんなに困らないよ
inresizeで測り直せばいいし
背景画像を動かすだけだと
絵しか使えないから、自分は滅多にやらないな >>550
むしろimgでないカルーセルの方が珍しいやん
表示したい画像をどうやって更新すんだ？まさかcssで更新すんのけ？ >>551-552
ありがてぇ
古い人間だから、background-positionをタイマーでずらすしか知らないんだわ。
レスポンシブから逃げられないから、この際imgタグで書き直すわ。 >>551
JSで書いてみようと思ったけどドラッグとスワイプ判定とか手間だなと思って
ライブラリ使いっぱなしですわ…
その内しっかり把握したいな 1カラムのサイトで
<header>
<main>
<footer>
を囲むラッパーって必要？
PCの時ラッパーにwidth: 960pxを指定して、header, main, footerを100%にするか、
ラッパーを使わずにそれぞれにwidthを指定するか、どっちが今風のやり方？
ラッパーが多いのもわかりにくいけど、足りないのも困るよね・・・ >>556
今か昔かの問題ではないと思う
同じ幅のブロックで囲む必要があるかないかの問題
なので
考えたかを変えたほうがいいかもしんない 特定のクラス(例えば"class_a")を持つ複数の要素を、チェックボックスのON/OFFでまとめて非表示/表示の切り替えをしたいのですが、
javascriptで、document.getElementsByClassName()で取得してループで1つ1つのエレメントにスタイルを適用するしかないでしょうか？
要素数が多いのでループで回す、というのが無駄な処理ではないかと気にしています。
ちなみに、チェックボックスとは親要素が異なるので、CSSの間接セレクターも使えませんでした。
単純な話しですと、下記CSSをチェックボックスでON/OFFしたい、と言うイメージです。
.class_a {
display: none;
} >>561
特定の個所のチェックボックスがONかOFFかを判定して.class_aに表示/非表示のクラスをｊｓで動的に追加すればいい。
jQueryのtoggleClassなんて便利だぞ。
cssはこんなのでいいだろ
.class_a.show{display:block;}
.class_a.hide{display:none;} ただ個人的にはdisplay:none/blockには
非表示/表示以外の意味まで付与される（インライン要素にしたくてもblock要素になってしまう）ので
その辺りはもうちょい工夫が必要なんだがそれまで書くと複雑になるので省略するわ >>562
バカかお前は
> 要素数が多いのでループで回す、というのが無駄な処理ではないかと気にしています。 スタイル弄るよりクラス名付ける方ばっか使ってるわ
スタイル弄るのはボックスの高さ動的に変更するみたいな
予めcss用意できない場合だけかも >>564
>>565
それって一般的な方法なの？ >>560
>同じ幅のブロックで囲む必要があるかないかの問題
まさにそうなんだけど、
2カラムなら必要だけど、2カラムサイトにはしないというのなら、今の時代なら必要？
考え方・・・実際の1カラムサイトを作ってくれと言われたことが無いから
その時気付くのだろうか。 >>567
例えばgoogleが検索結果のページでそのやり方を(一部)使ってる >>561
繰り返しが嫌なら>>565だな。
htmlに
<style id="hoge">
.class_a {
display: none;
}
</style>
を書いておいて、
js側では
document.querySelector('#hoge')
.sheet.rules[0].style.display = 'block'
とか
document.querySelector('#hoge')
.sheet.rules[0].style.display = 'none'
とかで切り替えれば繰り返しなし。 >>534
>>533じゃないがやっぱりそうなのか
今コロナで失業保険受給中で、コロナ収束したら貯金＋在宅ワークバイトしたかったんだが まともにスキルがあるやつで
良いお客さんと出会えればそこそこは食える。
俺は10サイトがちょくちょく依頼が来て月20前後かな。
システムの方で月20ぐらい。
1日の仕事時間は3時間までと決めている(心の疲れで集中できない)
年末は客の経費か予算を使いたいせいか
依頼と収入は増える傾向がある >>572
収入は少なくていいが一日3時間という働き方もできると分かったのが大きい、どうも
自分の場合はもっと勉強しないと全然駄目なレベルなので、仕事するにしてもコロナ収束後かな 1日数時間というのは既存サイトのコンテンツ追加や修正だと思う
既に完成されているサイトを10個管理させてもらってるだけで
新規参入組とは状況がまったく違うかと 客によっては規模によって作業無くても月額1万～数十万ぐらいもらえるのが美味しいよな >>565
>>570
ありがとうございます！
このやり方でできました。
documentからcssの特定セレクタを指定しようとするとid指定が無く探す手間がかかるかなと悩んでいましたが、なるほどstyleタグにidを指定すればピンポイントに特定できるんですね。
勉強になりました。 >>577
googleの実装コード覗くと
<div id="hoge">
<style>
～～～
</style>
</div>
みたいな感じでid/classなしのstyleタグをdivでラップしてるね。
多分divの中にstyleごと足したり引いたりしてるんだと思う。
まあ、いろいろなやり方があるということで… >>574
>>576
製作の請負の報酬だけで喰って行くにはちと辛いからな
そういうの囲えればよし。ただ支払いはちゃんとやってくれるとこで 参入障壁が低いと思われてるから副業も含めて大量に参入してきてるやんけｗ スクールが台頭してきた業種は、職を求めて人間が増えてくるからね その職を求めてる人が多いからスクールが台頭するんじゃね？ html内のlink タグで、rel="icon" href="icon-256.png" type="image/png"
と指定している状態で、ゲーム用にvsync同期するためにJSで window.requestAnimationFrame()
を呼び出してコールバック関数の中で画面を描画していますが、
ChromeでF12を押してNetworkタブで見ているとicon-256.pngファイルが
1秒に一回くらい読み続けられています。
window.requestAnimationFrame()の変わりにsetInterval()を使うと、
画面の更新は似た頻度で行われますが、この現象は収まります。
これは「favicon」だと思うのですが、faviconは、window.requestAnimationFrame()
を呼び出すとダウンロードし続けるような仕組みがあるのでしょうか？ >>584
現象論的には、音を出すために new Audio したオブジェト xxx を、xxx.play()
としている行をコメントアウトすると収まりました。
既知のバグで FIXED されたことになっているそうですが、2020/09/19 に
まだおきることが報告されているそうです:
https://stackoverflow.com/questions/64181608/why-does-chrome-request-favicon-on-audio-playback >>586
ゲームなので、Audioオブジェクトをボールが壁やラケットに当たるたびに
xxx.play()していて、そのタイミングで毎回icon画像がfetchされてしまう
ということです。 ネガティブマージンで重ならなくなったんですが
上と下のボックスを重ねるんですが、マイナスの数値を大きくしてもボックス同士がくっつくまではいくんですが重ならなくなった(今までは普通にできてたんですがちょっとだけ変更した）
くっつくだけで重ならないのってどういう理由が考えられますか？ 私が会社に入ったときに共通cssに mb20, mb30, pb20, pb30 みたいなクラス名で
それぞれにマージンやらパディングやら20px・30px付与されるcssが用意されていました。
代替わりのときにこっそり抹殺したのですが、新しく上司が入った際に、上記と同等のcssを
用意しておくと便利と言われて、復活してしまいました。
この手のスタイリング方法って一般的なのでしょうか？
ただただ使いづらい気がしてならないのですが…
レスポンシブだと特に… .box{
border: solid;
width: 30%;
margin: 10px;
}
.left{float: left;}
<div class="box">
<div class="box left">
</div>
<div class="box left">
</div>
</div>
floatに付いてなんだけど、これすると外のdiv越えて表示されるんだけどなんで？ >>590
確かに最近また使い始めた奴いるな。
個人的には同じくレスポンシブでは糞になるから反対だわ。 >>592
自分バリバリ使ってるわ・・・個人ホームページで
それでもちゃんとレスポンシブさせてる >>593
例えばpb50でPCではpaddingbotom:50pxにしたいけど
スマホでは30pxにしたかったり10%にしたい場合はどしてるの？ >>594
まずはレスポンシブのやり方学んだ方がいいんじゃね？それで大体言ってる事のしたい事が解るだろう >>594
Head内に「link rel="stylesheet" "media="（ここの数値で分岐）"」 この、ブレイクポイントをどうするかがなかなか難しい >>594
自分も気になります
対処法がpb50ってクラスのスタイルを上書きするとかだったらふざけるなと思ってしまうｗ >>599は>>590です
ID非表示なんだこのスレ >>599
596と597に書いた通りで、デバイスの幅によって振り分け、それぞれ外部CSSに希望の数字を記述
他にも方法あるが、この方法が一番ページの表示スピードが速いらしいので自分はそうしてる 例えばこんな感じで
<link rel="stylesheet" href="pc.css" media="(min-width:1000px)">
<link rel="stylesheet" href="tab.css" media="(max-width:999px) and (min-width: 550px)">
<link rel="stylesheet" href="mob.css" media="(max-width:549px)"> >>595
すまんが、ひょっとして君は初心者でレスポンシブ覚えたところ・・？
>>602などで書いてる初心者向けの内容なんて誰も聞いてないぞ？？
聞きたいのは
pb50 →paddingbottomが50であるというクラス名に対しSPでは
そのクラス名に矛盾してpb50{padding-bottom:30px}とかしちゃってないよな？って事なんだが それって結局クラス名固定でスタイル上書きしてるってことじゃん
特定のスタイルを意味するクラス名だけどブラウザ幅次第では異なるってどうなのって話を最初からしてるとんだと思うけど >>604
そう。それ。
回答してるやつはたぶん理解できてない初心者だと思う。
レスポンシブってこうやるんだぜって覚えたばかりだから俺らに教えたいんだよきっと >>601
この人だけレベル低くてちょっとイタイ... 何と言いますか…
煽りたいわけじゃなくて、pb20みたいなクラス名が糞かどうかを聞きたいのですよ。
スタイルを上書きするのを良しとするとしても、ブロック同士の余白と
ブロックとテキストの余白を同一クラス名で処理するの厳いですよね？
テキストだと改行具合で若干高さ変わるから微調整必要になるじゃないですか？
とすると、ブロックとテキストを判別するクラス名ないし、セレクタが必要になるわけで…
それなら最初からユニーク名でいいじゃないと思うんです。 え、上書きは普通じゃねYahooサイトだって色んなサイトは上書きしてるし
レスポンシブも元々はスタイル上書きでしょ、それをデバイスごとにスタイル書き換えてるだけっしょ 上書きがダメなんじゃなくて意味を示すクラス名の上書きがダメなんじゃねって話だろ pb20ってクラスにCSSで他のプロパティ書けないってことですよね
paddingやmarginだけこういうクラスを使うメリットが大してないと思うけど
それこそbootstrapみたいにHTMLにクラス羅列する事になるのかな >>611
文句があるならそのやり方を使わなければ良い >>612
出しゃばり腐れチンパンが、恥の上塗りで的外れなレスをして
荒れる方向に持ってく流れですかね？ >>607
方針の問題だ
その考え方ももちろんあり
ただ、ブロック間だろうが要素間だろうが
空きは空きで同じもの、とすれば
「クラスを指定すると空きを作る」という不変のものとして扱うことで
HTMLだけでレイアウトの空きを制御できる
と考えれば、多くの人が扱うcms的な環境では
有用なこともあるんだよ
正解は一つじゃないんだ そのチンパンにも満たない池沼がcss語るのウケるんだけどー 漏れは、バックエンド・エンジニアだから、CSS は知らない
レスポンスは、Bootstrap しか出来ない 横レスですまんが、
classに上記のような見た目(mb10とか)のクラス名を使って
プレビュー付のエディタでcssを使わずにドラフトで書いてから
cssパスも含めて書き出すようなことってできるの？
いまいちhtmlとcssを交互に書くのか、一旦HTMLを書いていって、
cssを足していくのか、未だに何が効率の良い書き方かわからんです。 >>618
クラス名に見た目にまつわる命名すると反対派だが、その疑問は正しい。
一般的にはHTMLで構造をざっくり書いてからcssで見た目を整えつつ調整してくのが理想。
なのでHTMLの段階でpaddingとかを書くのは非計画的な方法に感じる。
臨時的なコンテンツの設置とかでstyle属性使うのと同じ。 >>619
レスどうも
ってことは、頭や紙で最終的なレイアウトを意識した状態でhtmlを書いてから
名の通りスタイルシートを開発ツールやプレビュー付エディタを見ながら、見た目を作っていく。
自分はこのやり方が良いと思うけど合ってる？ 601-602です
ここは上級者しか答えてはいけないスレだったんですね
以後慎みます 上級どうこうは置いておいて、相手の質問の意図を汲み取れない人が回答する必要はないでしょ
考えなくてもわかるよね？ そもそもhtmlとcss程度で卑屈になる程度のやつが何で回答しようと思ったんだろｗ >>620
同時に少しずつ書いていく派が大多数だと信じてる てか根本的に上司がその方が便利だからって言ってるんだからそういうCSSの書き方でいいだろう
異論があるなら自分がもっといいCSS構成書くか自分が上司になってそれを廃止すればいいだけやろう >>621
>>595もあんたじゃないの？
流れ的にも勘違い的にもそう見えるんだが。 >>590に対する回答としては、
一般的かどうかは不明だが使っていたサイトは確かにある
までしか答えられんね。
その上司にレスポンシブの時はクラス名の意味は無視した数値を上書きですか？
って聞いてみたい。 >>628
だろうね
ID有り無し使い分けても同程度のアホなのは伝わってくるし >>629
それな、ここで意見言い合って正当、正当じゃないって言える問題じゃないわな
上司に聞いてみるしかねえな 一般的と正当だと意味合いが大分異なると思うよ
一般的なら使ってるか使ってないかで話せばいいけど
正当だともっと掘り下げないといけないっしょ
もしかしてこのスレって出しゃばり糞野郎でまみれてるのかな？ >>632
相当悔しかったんだなｗ
出しゃばり糞野郎はあなたやんけｗ ↓こんな感じでPC用とモバイル用に別々のクラス追加しとけばいいんじゃね
<div class="hoge pc-pd50 sp-pd30">
>>599でふざけるなって書いてるのはこういうことだろ？
でもこれ分かりやすくていいと思うけどね
もちろん他のやり方もあり得るけど >>634
たぶんそういう事だと思うが、それだと2デバイスしか対応出来ないのでは・・？
まあそれはいいんだけど、
pb20とかのクラスってtop bottom left right を10px刻みとかでズラーって書くんだぜ？
それを2倍書かれてるのなんか嫌だけどまあわかりやすいっちゃわかりやすいな レスポンシブの問題は法則が固定してるならscssで何かしら解決できそうな気もするな
例えば全てPC用クラスの値に50%を掛けるとか。 クラス名が増えるか、CSSが増えるかって話か？
確かにCSSは短くできるけど… <div class="hoge pc-pd50 sp-pd30">だとスマホではPC用CSSは読み込まない前提か？
個人的にはPCを可変で作ってそれを利用したSP用上書きCSSを書いてるから使えませんがな。 >>628
文字の書き方から同一性を確信できるよな
アドバイスを批判と受け止めるのは自己愛の強いアスペルガーの要素であり、部下なら後の爆弾要素になる もうヤバいやつなんだろう、上司の愚痴を言いに来たのか上司からのストレスを発散しに噛みつきに来たか文面からわからん >>633
悔しいと言うより、ただただアホなんだなと呆れただけだよ
もしかしてコーダー志望の無職さん？ >>624,627
あと、これは聞きたかったことなんだが、
cssは後回しで、HTMLで文書構造書いていくときに
クラス名はHTMLと同時に書いてる？
css書くときに、HTMLの各タグにクラス名足して、cssに足してる？
現場レベルだとどっち？
独学組にはわからんのです。 後からCSSなんてことはほぼ無いなあ
仮にそうなるとしたらクラスなんてほぼ書かない
基本的に同時に書くから
div.hoge.fuga
って書いて、emmet変換するか、pugで書いてる >>642,>>643
全部は無理だがオレオレテンプレートに従いidやクラスも先に書いてる
クラスは汎用クラスだからいつも同じようなの使うし。idはどこにページ内リンクされても大丈夫なようにしてる。
<section id="hoge" class="outer-box">
みたいな感じで。
まあ必ず後からも色々追加する羽目になるけど。 まぁ、ある程度作ったら
足していくところは2ファイル同時平行になるよね。 Bootstrap の変数定義ファイル・_variables.scss では、
例えば、入力ボタンのような、各コンポーネントのデフォルト値は設定されているけど、
margin, padding が10, 20 などの変数はない。
自由に上書きすれば良いだけ
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default; それほぼユニークなクラス名みたいなもんでしょ
論点ずれてるよ >>646
Bootstrapの話なんてしてないだろ Bootstrap使ってる人に聞きたいんだが、
デザイナーが作成したデザイン通りにきっちり1px単位でコーディングした事ってある・・？
Bootstrap使ってるって事はたぶんそういう工程踏んでいない気がするんだが。
もしそういう工程を踏むならBootstrapのほとんどの個所を上書き、打ち消しする事になるので工程が増えるはず。 >>650
ピクセルパーフェクト求められるのなんて
代理店系の広告仕事くらいなもんで
そういう層はあんまりBootstrap使わないから
なんつうか不毛な質問な気がするな >>651
ああ、じゃあ質問変えるわ
Bootstrap使ってる人に聞きたいんだが、
デザイナーが作成したデザイン通りにコーディングした事ってある・・？ 漏れはデザイナーじゃないから、CSS は分からない
バックエンド・エンジニアだから、Bootstrap しか出来ない 未だにbootstrapって使ったことないんだけど、
レスポンシブの時に威力を発揮するの？
長さをある程度で決めて
ピクセル指定しなくて良いぐらい？ YouTube に、たにぐちまことのBootstrap の動画がある >>653
回答ありがと。 納得した。
バックエンドはそういう人多いのかもな。
>>656
違うけど何が気に入らないの？
まさか>>651が正しいとでも思ってる・・？
少なくとも自分は広告仕事でも代理店仕事でもなくても使わないけど？ >>655
ありきたりな話だけど、Bootstrapを使う前提で
きちんと理解して作られたデザインで
リリース後の運用もそれを続けられるなら
それなりに便利だとは思う
ただ、スマホのブラウザがふわふわしてた
10年前ならアレだが、まともになって
gridも使い放題の現在では
レスポンシブが難しいことなんて何もないわけで
Bootstrap使ったから何かが本質的に格段に楽になる
なんてこともない気はする そんなBootstrapだって年々バーションは上がってるけどな
初期の頃と比べると格段に使いやすくなってる まあバックエンドの人の仕事効率は上がるだろうしいいんじゃね
選択肢としては ちらほら、他人を罵りたいやつがいるな
ここは親切に質問に答える場なのに 各種モバイル端末の仕様にあわせて3種類のサイズの画像を用意してcssで呼び出し分け…とかほんとに一般的なの？面倒すぎない？ Bootstrap前提でつくられたデザインならまだしも
そんなの関係ねえで作られたデザインをBootstrapに合わせるのなんて
普通に考えただけで面倒ってのわかるだろ
そんな手間かかる事やるくらいならフルスクラッチで書いた方が早い やり方なんて人それぞれ会社毎に違うんだから合ってる方法でやればいい コンテナの中の左側にサムネイル、その右側にタイトル（幅比率は20%:80%ぐらい）という構造の中で、
左側のボックスをfloat leftで、右側はfloat leftかrightどちらでもいいのですがとりあえず横並びにしたとして
タイトルの部分が長くなって改行数が増えると、タイトル側のボックスが「下側」に伸びていって、サムネイルのボックスが相対的に上に上がってしまうんです
そうじゃなくて、サムネイルのボックスはコンテナの左下に固定したまま、改行数が増えてもタイトルのボックスの上側を伸ばしていく方法ってないんですかね？
absolute等ではなく自然な原理に基づいたやり方はないですかね？ 初心者的な質問ですまんが、
divで囲んだpタグなどが無い文字
<div>hoge</div>
これってどんな時に使うの？ >>670
pが必須とは思わないけど、
divで囲んだテキストにはマークアップするタグがないから
何かしらのタグで意味付けする必要がある
という感じかな・・・ >>668
floatやめてコンテナにdisplay:flex;でサムネイルのボックスにalign-self: flex-end; fancybox使ってますがスタイルシートと干渉してるようでキャプション表示されません。
スタイルシートをカットしてプレビューするとレイアウトは崩れますがキャプション表示はされてfancyboxも正常に動きます
どうすればうまくいきますか？ 
>>676
てことはfancybox側のcssの何かに!importantとか
何かしらやればどうにかなりますか？ >>674
これおもしろいね
こういうの思いつくというか発想する人って頭いいなぁ 668
flexで普通にできました、ありがとうございます
比較的新しいやつ使わなきゃできないことなんですねこれ >>674
10番が解けない・・・
row-reverseしてどうすりゃいいんだ
>>678
何が主流ですか？ >>681
justify-content: flex-end; >>682
横からだけど俺も知りたい
今はmagnific popupを主に使ってるけど >>674
LV.24が何をどうすればいいのか全くわからん >>685
答え書くとつまらんからヒントだけ
flex-flow:
align-content:
justify-content: >>683
サンクス
flex-end＝右側じゃないのか・・・ >>686
いやクイズじゃないんだからこういうのは答え書いた方が話も理解も早いぞ
cssの正しい挙動を周知させるには上手い方法だと思う 24番
flex-direction:column-reverse;
align-items:center;
justify-content:center;
flex-wrap:wrap;
あとは左右が入れ替わってくれれば・・・orz ピアノのバイエルみたくビギナーが順にステップアップするのに
だんだん難しくしていくのは正しい方向であり教材としてもいいな >>689
flex-flowでflex-directionとflex-wrapを一緒にしたら？ >>686
ありがとう！その3行にプラス
flex-direction: column-reverse;
でクリアできたわ 質問です
Tableタグとcssでmax-weight、min-weightを指定しましたが反応してくれません
ご教授お願いします いやweightって重さだぞ
横幅はwidthで高さがheightだよ max-widthとmin-widthを指定しましたがブラウザサイズを変更しても変動しません てことはそろそろバージョン5も終わりが近いってことか？
バージョン6は来年出すんかな？ display:noneのを指定されたdivの配下にあるimgは
読み込まれて非表示なの？
読み込まれていないの？ >>695,701
そういうふうにできているんだ
display: table-cellでは
min/maxは計算できないんだと思う ウェブアプリ作ってますが、HTMLファイルやjsファイルってブラウザにキャッシュが残るらしいですが、
読み込みのたびにキャッシュを使わないようにするにはどうすればいいですか。古いデータを使わせたくないです。 >>706
サーバの設定で
ただキャッシュしないとそれはそれで
上も下もいろいろ問題は出るので
ご利用は計画的に >>707
.htaccessのCache-Controlですね。ありがとうございます。 cssやってると色んなやり方があって頭痛くなるわ～何が一番いいやり方なんだ～！ >>710
一つ言えることは、CSS2時代のやり方は忘れとけってことだ なんでflex出るまでこんな時間かかったんだ？そんなに横並びプログラムするの大変？ 全然？
なけりゃないでfloat使って余裕だし。
ザコが騒いでただけ。 >>709
うぉぉぉ、それが求めていたことだわ。
cssも慣れてきて、レスポンシブもできるようになったけど、
PCサイトをレスポンシブにすると、16:9の横幅画像がスマホだと縦横比維持すると小さいから
PC用の画像を非表示にして、スマホ用の画像をdisplay:blockするのは一般的な方法？
もっと良い方法ある？ css3つくらいリンクさせてる時って干渉し易くなりますか？
不具合が直せない >>714
わりとありがちな気はする
<img.pc>と<img.sp>作っちゃうのは
あとはhtml側で、ビュワーポートごとのsrc書くか 画像にsrcset並べとけばブラウザがその中から選んでくれるよ 幅100%のヘッダーがあって、その下にメインカラムと右カラムをfloatさせてるのですが
iOSのChromeでPC表示の時(というかiPadで見た時）だけ、ヘッダーがメインカラムの部分までで途切れていて、さらにサイト表示した時に全体が収まらずに、メインカラムの幅の分だけ表示されるんです
要するに、右カラムを見ようとしたら右にスクロールしないといけなくて、全体が映るようにピンチアウトで縮小することができない
他のブラウザで見た時は問題なくて、あとそのChromeで他のサイトは普通に表示されるので、自分のサイトに問題あるみたいなのですが何が原因か分かる人いますか？カラムの終わりには空ブロックでclearしてます >>719
おじいちゃんサポート切れたでしょ
安らかにお眠り >>714
HTMLの<picture>ピクチャータグを使う >>720
日本語でそんな風に書かれてわかるかよっｗ
ソース貼れは済むだろ >>722
figureは知ってるけど、始めて知った・・・
と思ったらHTML5.1なのか。
やっぱりそういう需要があるからタグが増えるのね
勉強になりました、ありがとう。 だいたいIEのせいで新しいタグやCSSが使えないんだよ
でもその苦労ももう終わりバイバイIE >>710
Bootstrap 一択
漏れは、CSS をあまり知らないけど、それだけでやってる >>726
Bootstrapの使い手に聞きたいんだけど、
bootstrapのjsを読ませれば
一つの要素に対してPCとスマホのクラスを書くと
@media書かずにレスポンシブに対応出来るということ？
自分はcssと@mediaをゴリゴリ書くしか知らないから
bootstrapがおすすめされる理由がよくわからんのよね、食わず嫌いもあるけど >>721
いうても国内のウェブ制作は
予算ベースで8割が代理店系広告で
まだIE切れないからなあ HTMLとCSSを勉強したいのですが、初めて買うテキストって何がお勧めですか？ >>730
最近参入してくる初心者は
ドットインストールとプロゲートはコンプリートしたので
もう稼げますか？（←無理だが）
って感じだから、とりあえず見てみたら？
お金払って学習しようという意気込みは保ちつつで >>731
そんなもん見りゃわかるだろとも思うが
Bootstrapが想定して用意してるものに関しては
レスポンシブ対応はしてあるよ
ボタン類もボックスもその他のUIも
だからその枠内でやりくり出来るならOK
て感じ >>727
bootstrap-4.4.1/scss/mixins/_breakpoints.scss の中で、
breakpoints が定義されているから、sm, lg などを使うだけ
xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px
YouTube のたにぐちまことの動画でも見れば？ cssも理解してないくせに何かというとBootstrap一択とか言ってくる基地って
Ruby on Railsの人と同じ人？ twitterにwebクリエイター名乗ってるアカウントがあって
その人がCSSでの処理を色々紹介してるんだけど
知らないプロパティばかりでビビる >>738
そこで知れて良かったじゃないか
知るは一時の恥 知らぬは一生の恥 illustratorでレイアウト指示出してくる客って、
HTMLの文書構造やcssを理解してくれないのは百歩譲るとして
イラレ感覚で簡単でしょと言ってくる奴が鬱陶しいんだが・・ >>738
逆に考えるんだ
あまり知られてないのを紹介すれば
>>738のようなリアクションを得られるのだと >>740
逆に「ウェブのことは難しくてわかりません」って平気で言う奴も
なに部外者ヅラしてんだと
わからないなら受けるな！と >>743
晒すみたいで気が引けるけどpulpxstyleってIDの人
ここの仕事にしてる人から見たらどうなのか分からないけど
素人の自分から見たらこんなやり方あるのかと感心するわ >>744
ありがとう
自分も素人だからこういうのはありがたいね Canvasつかってぬるぬる動きアニメってどうやって作ればいいの？ 何だ自演かよ
まともな良識ある人間なら便所の落書きにさらさねーもんなw >>744
中々良いじゃん。SNS時代になるとちょっとしたネタでもつぶやけるのが利点だな
自分はコリスとかフォローしとくとTLで色々情報細かい流れてくるから重宝してる >>746
canvas要素をHTMLに置いて
JSで中に絵を置いて
動きの計算をして移動させればOK 最近のPCサイトって何pxぐらいのコンテナサイズにしたら良い？
1カラムも2カラムサイトは同じ？ >>751
1200もあれば十分かな
デスクトップでサイト見る割合が年々減少だし >>752
え、じゃあどうやって指定するの？まさかどんなモニターでも%でやるつもりなの？ アナリティクス見てると、たまに
w4800,h2700とか
w2000,h2000て感じの解像度で見てる人がいるんだけど
こういうのってどんなデバイスなんだろう？
テレビかな？
ブラウザはmoziraコンパチとかnot setでos的にも手掛かりなし。
max-width を1200pxにしてるから
どんなふうに見えてるのか気になる、、 >>752
自分も答えがわからない謎かけおじさんだー Bootstrap のサイズなら、
>>735
に書いておいた
window.devicePixelRatio(1～3 ぐらい？)があるから、
w4800 でも、3 なら、CSS pixel は、
w4800 / 3 = 1,600 RGBで3ピクセル扱いとか
つまりは1600×900ピクセルか。
デスクトップでもノートPCでもある解像度だな。 とかいってなんだかんだめんどくせーからpx使ってる px使わないお爺ちゃんって普段何して生きているんだろう vwって、右端に出てくるスクロールバー含めたっけどうだっけ？
なんかその辺で「ちくしょーーー」って思った記憶が vw だけは、やめてくれ
画像が見にくくても、拡大縮小できないから。
文字もそうだっけ？
見えない人には、絶対に見えないまま VWって>>758みたいな横長のモニターにしたらえらいことならん？ remだとサイト間でコンテンツを共有したい場合とか
親の定義が違うから崩れるんだよな。 文字列については
その日の気分でem, rem, %, pt使ってるわ レスポンシブでサイト作る際はpxは使用禁止なのでしょうか？ mac windows andoroid iphone すべて画面のサイズが違うのでpxで指定していたらきりがありません。 デバイスごとに@media screen and (min-width: 500px) and (max-width: 800px) メディアクランプを使ってpx指定ではだめなんですかね？
デザインがどれも似通ったサイトになるので崩したくないです。
ipone6 375px ipod 320px ipone7 414px ipone11 414px ipad 768px ipod7 820px ipod air 834px 1pad pro1024px android 360px android 480px 600px 768px 800px
でしたのでこれに対応するcssをpx指定だとだめなのでしょうか？ なんでダメだと思うの？
どうしても各デバイスで厳密に表示を揃えたいなら、好きにすればいい いや勝手にすればいいだろｗ
そうやって個別に設定する気があるならすればいいけど、基本的にどんな端末にも自動で対応して表示させるほうが美しいからね >>775
そんなにどうにかしたいんだったら、これでも嫁
[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size
ttps://coliss.com/articles/build-websites/operation/css/responsive-fonts-auto-scaling.html
【CSS】結局レスポンシブでのフォントサイズはどう書くべき？
ttps://pecopla.net/web-column/fontsize-css Bootstrap のブレイクポイントは、
xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px
YouTube に、たにぐちまことの動画もある 776~779
返答ありがとうございます。各デバイスごとにcssを書いてみます。どうしても表示を崩したくなかったのでつい熱くなってしまいました。すみません。 >>774
リキッドにする必要がないのなら
スマホはvwが楽
どの端末でも同じ見た目になるし
PCはpxでいいけど ちょっとスレチかもしれないのですが…
東京でコーダーやらフロントエンドでバイトする場合、皆さんは媒体は何で探してますか？
正社員と同列で表示されるところが多くて思ってた以上に探しづらいです…
現職を辞めて、正社員で採用されるまでのしのぎとして事前に準備したいと思ってます。 >>783
なんでもできるフリーランスなら
案件単位での参加はあるだろうけど
そうでない上に短期は少ないと思うよ
採用にかかるお金に釣り合わないもん バイトでコーダーやフロントは雇わないだろ
インターンとか正社員までの試用期間中はバイトとかならわかるが
その業種をバイトで雇用なんてあってもブラック確定だろ >>783
経験豊富な人でどんな案件でもそつなくこなせて
どこのエコシステムにもすぐにフィット出来るなら
これから3月までの年度末の駆け込み案件対策で
短期間の仕事はまあまああると思う
けど失礼だけど
このスレで聞かなきゃならんくらいのコネのなさだと
ちょっと難しいかも
次の仕事まで少し手が開くんだけど？って
声かけられる宛が何件かあるくらいじゃないと >>784-786
ありがとうございます。
確かにおっしゃる通りですね…
簡単なLPのコーディングを投げられるのかな？と思ってましたが、
規則やら何やら守るとなると、ある程度講習も必要ですし
短期且つ期間不明な相手に時間割かないですよね…
簡単に調べてみたら週5で時給が1800円～とかあったので
次の職が見つかるまで食いつなげるかも…と思ってしまいました…
時給1000円位で倉庫内作業が現実的ですかね… >>787
リクナビとかパソナとかの派遣会社に登録して
条件伝えておけば紹介はくるかもしれんね >>789
経歴と実績があれば仕事来そうだけどな、なかったら依頼来ない確率の方が高いからなあ cssのmargin auto の広さを狭めることはできないでしょうか？ margin autoにすると左右の間隔が広すぎて困ってます。 >>791
CSSか日本語か
どちらかを勘違いしてると思う
相手がなーんにも知らない小学生だと思って説明してちょ >>791
width:100%;
max-width:60%;
てかけやボゲぇ いまなら言える！
widthとmax-widthを併記する理由がわからない・・・ >>802
スルーせずに教えてくれよ・・・(つ_・)
スクロールバーを含むとかそういうのだっけ？ >>789
そこらへんが請け負ったクソ素人がコーディングして
これじゃダメだで制作会社に流れてきて下請けのコーダーに回ってくる件 >>810
そしてその下請けも面倒くさくなって
またランサーズで拾ったやつに丸投げ… クラウドやランサーズは社会に迎合されない自由人（自称フリーランス）みたいなのが多いから、いきなり飛ばれたり逃げらりたりとか気を付けないとな >>812
そういうの相手に仕事する場合は前金はもらわないとね >>744
この人色々やり方とか見本をSNSで発信してくれるのはいいんだけど
どうも周りが毎度「素晴らしいです！」「これは神！」とか必要以上に神輿担いで
気が変わって変な方向へ行かなければいいんだけどねえ
個人的には今ぐらいの規模でつぶやく程度でありがたいんだけど
なんか商業でやらないかとか声かけられてるらしいから
そうなると止めるかもしれんし続きは有料でとかなりかねないから 子供の幼稚園同級生に
一二三(わるつ)っているんだが「ひふみ」じゃないのがショック・・・ デザイン上で比率は同じだけどサイズが違う同じ画像があり、1枚の画像をCSSでサイズ変えて使用したら見た目がぼやけてしまいました。
基本的にサイズが違えば別の画像として書き出すべきなんでしょうか。他によい方法があれば知りたいです。 >>827
2^n倍じゃないとそうなる
気に入らないなら変えるしかないわな PC用の横長の画像って、スマホ縦で見ると当然小さく見えるけど、
スマホ用の画像に差し替えるのがトレンド？
側面から見た車の画像とかだと、横長が前提だからやっぱりピンチしてみてもらうしかない？ メディアクエリでスマホ縦の時だけrotate(90deg)すればおｋ >>830
た、たしかにそれでも良いけど
車の側面画像だとフロントが上見たり、下になるということだよね？
それがokを出すかは顧客次第だけど斬新なアイデアだと思います。 >>829
ワイヤーのサイト設計段階からレスポンシブを想定して作るので、
そういう縦長、横長のバナーを最初から作らない。
スマホと共用できるバナーを最初から想定して作り設置する >>828
画像にテキストが入ってたりする時は別に用意しないとダメですね
ありがとうございます /*480px以下アンドロイド*/
@media screen and (max-width:
480px){
margin-top: -28% !important;
margin-bottom: 5% !important;
}
でキャプションの位置を画像と重ねた場合480px以下の時はキャプションの位置は固定されるのでしょうか？
端末が変わるとキャプションの位置もずれるのでしょうか？ その程度なんで試さないのか…
もしかしてDevToolsの使い方知らないのか…？ >>839
他の端末が無いから聞いているのですが？
>>840
じゃあどう書いたらあなたにとって気持ち良いのでしょうか？ >>838
これは控えめに言って気持ち悪いmarginだな >>841
他の端末が無いのか、その時は他の端末を用意するんだよ やっぱりDevToolsの使い方知らないだけじゃねーかｗｗｗ >>841
あのね、メディアクエリの動作確認程度はふつう実機使うまでもなくデベロッパーツールでモバイル表示エミュレートしてやるんだよ。
各種端末の画面プロファイルがプリセットで用意されてるし画面の向きも変えられるよ。 その程度どっちでもええぞ。
普段ChromeならChromeでおｋ >>848
わかりました。という事は端末の横幅を調べて調節しながら1つ1つ確認してみます。 >>848
例えばchromeにはiPhoneXまでしかなかったり最新ではないですし
そもそもPCで見て高解像度のデバイスと差異がないわけ無いと思うのですが
今はスマホの方が画面解像度が高いのは知っててあえて言ってるのでしょうか >>853
解像度はどこ情報？
デスクトップはほぼデフォで1920*1080だろ >>853
自分でカスタム端末のプリセット作れて、解像度とデバイスピクセル比も設定できるの知らんのか？
エミュレータ信用できないっていうなら、さっさと実機買ってこい バカは金かかって大変だよなｗ
デバイスピクセル、CSSピクセルの仕組み知ってればエミュレータとカスタムプリセットでどんな最新デバイスでもメディアクエリの確認くらいは余裕なのになｗ エミュでカラム落ちしてても実機だとセーフってこともあるのでね… まさか自腹か？ｗ
素晴らしいプロ意識ですね（）
俺は金稼ぐためにやってるので特別に端末代がでない限り購入なんてしてやりませんが
研究や慈善事業でやってらっしゃる志の高い皆さんはどうぞ全機種実機で購入して完璧なものを仕上げてくださいね～ｗ >>861
昔は買ってたなあ
会社に検証機たくさん置いてあった
今は買わなくも良くなったね
検証やってくれたり、リモートで実機貸してくれるのもあるから
一度、東芝ともう一社のスマホだけ
あるsvgを表示するとフリーズするということがあって
往生したことがある
HTMLやCSSのレンダリングだけなら脳内ブラウザで問題ないけど
グラフィックチップとかハード周りに起因するバグは
実機で見てみないとわからんね はたしてメディアクエリの確認程度で実機必要なのだろうか？
大は小を兼ねるというか本物はエミュを兼ねる理論でそりゃ実機でできりゃ越したことないんだけどさ。
金に糸目つけないよっぽどの良客抱えてるんだろうか？ https://codepen.io/sadsfff/pen/bGwBvPa
レスポンシブの際に5ページ目のみ非表示にしたいのですがどうすればよいでしょうか？
はみ出すのでdisplay none で消したのですがcssが効きませんでした。 >>869
単純に消すだけなら@media screen and (max-width:
480px){ の中に
.pager .pagination li.derate{display:none;
}
を追記すれば消えるが、それだと仕様的に明らかにおかしい。
スマホで5P目を開きたい時の導線が無くなってしまう。
本来ならDB+phpでページ数の箇所は動的に生成するべきだし、レスポンシブによる数字の表示範囲もphpで制御すべき内容だな でもphpいじる以前に何かこう、もうちょっとやり方あるだろ！って
ツッコミたくなるソースなんだよな･･･ 本来の仕様なら
ＰＣで
1頁目 1 2 3 4 5
2頁目 6 7 8 9 10
SPで
1頁目 1 2 3 4
2頁目 5 6 7 8
3頁目 9 10
とSPで5を消すなら2頁目に5を記載して以降も全てずらしていかなきゃいのに
アナログで手動で訂正していくつもりかｗ
cssは別にそんなもんでいいだろ >>864
やっぱまだそういうのあるんだ、、
ガラケー時代に半べそかきながら不具合をつぶしたタイアードハイな思い出が CSSで:hasがサポートされない理由ってマジで何 >>875
定義はあれど、どのブラウザも対応していない理由を聞いているのでは？ hasは確かに早く対応して欲しいな
つーかあとからあとからチビチビとしれっと追加すんなって思うんです 仕組みを考えると hasがなぜ実装されないかわかる こういう、知らないくせにさも知ってて言わない的な雰囲気を醸し出してチヤホヤされようと目論むキモチ悪い行動のことを何て言うんだっけ？ そんな難しいことでもなくね？
hasってことは
子要素の状態によってレンダリング変わるってことでしょ
要素の有無くらいならまだなんとかなりそうだけど
hoverとかcheckedとか絡まると
計算大変じゃん ちょっと考えれば誰でもわかることなのに
ちょっと考えるの面倒くさがって
ちょっと考えないで人をディスるのは良くないよ >>881
いつの時代のコンピューターの話をしてるんだ？ なんで実装できないCSSを草案としてだしてくるのかCSSつくってる偉い人たちは何を考えているの
それよかスクロールしたら実行されるとかもっと便利なもん実装しろ >>884
intersection observerではいかんの？ >>877-883
この話題、定期的に現れて
その後のリアクションも毎回同じなのは何故なんだw
前回はhasじゃなくて
子要素を指定する「>」の逆はないのか
って感じだったが すんません、htmlのselectのoptionのとこに出てくる
ちっさい山括弧が90度倒れてるやつの
実体参照の値かユニコードを教えていただけないでしょうか
どうかよろしくお願いいたします >>889
ブラウザ側で用意しているデザインだからテキストではないでしょソレ。
∨
∨
が強いて言うなら近いが レスありがとうございます
cssだけでアコーディオンになるやつ作ろうと思って
山括弧の倒れたやつならユーザーにとって直覚的にわかりやすいか？
と思ったのですが
+-も捨てがたくなってきたので
自力で考えようと思います >>892
＞
をトランスフォームで90度回すのはどうだろう PCファーストでwidth:600以下で切り替わるレスポンシブのページがあるのですが、
viewportを
600以下だとwidth=device-width
601以上だとwidth=900pxという指定はできるのでしょうか？ >>895
書き換える仕組みを自分で用意すれば出来る
実際、タブレットだけ固定値にするサイトとか結構ある 誰でも考えてそうな事は、ここで質問するよりも
先ずググって調べた方が速いんじゃなかろうか ↓こんな感じで li要素の中にさらにulを埋め込むのありですか？
"hige"がないなら確か問題なかったと思うのですが、ありの場合はどうなのかと。
<ul>
<li>hoge</li>
<li>huga</li>
<li>hige
<ul>
<li>hana-hige</li>
<li>kuchi-hige</li>
<li>ago-hige</li>
</ul>
</li>
</ul> >>902
問題ないよ。
liの中にはdivでも結構いける
ドラエもんのポケットみたいなものだって覚えておけばいい マークアップとCSSでスタイリングする都合考えるとhigeも何かで囲いたくない？ レスありがとうございます
>>903
似たようなマークアップしてる例がありました。
>>904
MDNのliの説明を見るとイケそうな気もしたんですが、
素人判断は不安なのでそう言ってもらえて安心です。
>>905
そこまではしなくて済むことを祈ってます。 https://htmlstream.com/preview/stream-ui-kit/index.html
このテンプレートを使用しているのですが、スマホなど画面が小さい時のメニューを開いた時に
・メニューの外をクリックして閉じれるように
・メニューをクリックして閉じるように
したいのですがどうすれよいでしょうか。 >>908
自分ならこんな感じでjQueryでやってしまうな
$(document).on('click touchend', function(event) {
if (!$(event.target).closest('.buttonTravel').length) {
$('.popTravel').fadeOut();
}
}); >>910
1ヶ月ぐらい待とうよ、子供じゃないんだからさぁ 状態遷移無視して単純にfadeOutしたら、バグる気がするけどな ふと思ったんだけど、relativeの基準点って左上だけ？ >>914
SNS社会の弊害は至る所に現れてるのさ
すぐ書き込める環境が当たり前になると冷却期間を置かないのが多い
頭良い悪い関係なしでそれはある >>914
おまえはヌキたい時にすぐにポロンと出さないタイプだな ノマドワーカーになりたいのですが
独学で身につけるものはHTMLとCSSがあれば十分でしょうか？
他にもプログラミング言語などが必要でしたら教えてほしいです
全くの入門者です HTMLとCSSで十分なわけないだろ
一般人ができない事や勉強が大変な事をしたからお金になるんだ
javascriptとphpくらいは勉強しなさい 例えば君が誰かにHTMLとCSSをやって欲しいってだけで20万円払うか？
それくらないなら自分でやるわってなるだろ 動画学習サイト見たから稼げますかとか前いたけど
そんなの見るだけなら中高校生でも見れるわって思うわけです
世の中舐めすぎです >>919-921
君は先ずスレタイ読めるようになろうな まずはHTMLとCSSJavscriptを習得してみようと思います
具体的に教えて頂きありがとうございます！ 技術はあるに越したことはないけど
稼げるかどうかとは関係ないわな まぁ日本だと義務教育で基礎英語習うけど
じゃぁ英語がスラスラわかるようにかとかといったらならないし
理解したり喋れたからといって通訳や翻訳の仕事ができるかつったらできないのと同じ まあでもほら
本当に突き抜けた技術があれば関わった人がその後放っておかないだろ
GitHubに作品公開してもいいしGoogleに持ち込んでもいいし background-sizeについて
まだプレフィックス付けないとダメでしょうか？
border-radiusはdreamweaverに『プレフィックス要らんから』みたいに表示されるから心置き無く外せましたが
background -sizeはそういうの出ないので、踏ん切りがつきません
みなさまどうしてらっしゃるかお教えいただけたら幸いです safariの古いのとかIEの古いの見てOKならもう付けない感じ http://jobanline.com
個人サイト作ったんですけど
文章は適当なのでレイアウトの評価お願いします もうプレフィックスはつけてないな
IEも10以下も駆逐されたし >>930,932
レスありがとうございます！
アクセスログとにらめっこしながらゆっくり考えることにします >>931
特に感想ない。
まあ個人サイトならそんなもんでいいんじゃね程度。
つーかデザインしないなら、無料ブログやWPテンプレで良い気が >>929
そういうのは
caniuse見た方が早いよ
あと
人間の手で書くのではなく
autoprefixerとbrowserslistに任せるのもアリだとおもう c3.jsでドーナツグラフを書いていて、dataを値順に並び替えたいのですが、
特定のcolumnsだけ値に関係なく一番最後にしたいです。
order: nullとして希望の順番に自分で並べる以外の方法で、
簡単にできる方法をご存知でしたら教えていただけないでしょうか。 >>936
一番最後で良いなら
用意されている連想配列にはその「特定のcolumns」は記述せずに
後からそこにデータを追加するカタチにすりゃええ
https://www.sejuku.net/blog/27965 >>937
ありがとうございます。
連想配列の最期に追加の趣旨はわかるんですがjavascriptがよくわからなくて
generateしたオブジェクト？に後から.loadとか.flowとかしてみましたが、
いずれも値順に並んでしまいうまくいきませんでした。
しかし良く見たら凡例は並び変わらないし、それだと都合が悪いので
やはり自分で予め並び替えてorder: nullで行こうと思います。 >>940
阿部寛のページを見た人「ページは淡泊やけど、顔が濃いな～ｗ」 >>931
h1タグがない。
リンクがリンクだとわからない >>931
レスポンシブで見ると、メニューや更新情報がぐだぐだに見える
こういうのは左揃えにする方が良い
あと、モバイル環境だと本文の周囲に余白がないのが気になる
正直、メニューの作り方といい、既存のテンプレートを参考にするほうが良いと思う >>945
そうでもないだろ、良いじゃん。
昔の自分より良くできているよ classの名称で日本語のローマ字読みで付けるのはダサい <h1 class="mincho">
ってつけてたわ。
class="serif"とかのほうが良いのか？ 言葉について中立的でない国で英語をわざわざ使うのはコストじゃないのか。UTF-8が普及してるから日本語識別子はだいたい問題ないし。 自分だけ分かればいいなら
自分ルールでやればいいと思う だれも読めないプログラムなんて最悪だ。メンテ不能。 >>948
問題ないよ
その言語を知っているか否かの問題なので
left、rightはダメだと言ってるのとかも同じ
なんの意味もない
区別できる文字列ならなんでもいい serifとsanserifが紛らわしいから
minch,gothでもいい気がする サイトのスタイルを追加するブラウザ拡張(chromeのstylus等)を使い、サイトのメディアクエリ(レスポンシブ機能)を丸ごと無効にすることほできますか？
ブラウザの幅が狭くなるとスマホ用表示になるのを抑止したいです。
同じメディアクエリですべてのスタイルをPC用の内容に上書きするスタイルを追加すればできるとは思いますが、スタイルの数が多いので現実的ではない気がしています。 上書きしたくないってことになるとstylusでは無理じゃないかな？
Tampermonkeyとか入れてスクリプト書くしかないかも 画像のまとめサイトを作りたいのですがサイズがバラバラな画像を上手く整列できません
こんな感じに並べたいのですが
■■■
■■■
floatを使うと縦長の画像の右に横長の画像が2枚収まってしまいます
■□▲
□◇
大量の画像を扱うので理想としては画像を編集画面にポンポンポンと投げただけで並べたいです
抽象的な質問で申し訳ないですが初心者なので管理が簡単なHTMLやCSSだと助かります >>956
まずはfloatを使うのを止めよう
時代はflexだから >>957
flex使ったら出来ました！
ありがとうございます！ https://www.usamimi.info/~geko/arch_etc/box.html
このページの「+HTML5」「物理/数学/情報関係」等の四角い枠はどんなタグを使えば作成出来ますか？
宜しくお願い致します 茶色になってるところはbackground-colorだよ >>959のサイトは何の研究者だろうか？凄いな。
10年前にHTML5やらcanvasなんて実験してるがIE6やらベンダーも協調性なくて大変だったろうな >>962
10年前はちょうど
「HTML5」というワードが一番バズってた時期
whatwgがw3cからHTMLを本気で奪いにかかって広めた
canvas、video、audioなんかも
その高機能なHTML5の一例として推されてた
スマホのブラウザすごいよって
2010年の後半にIE9が出た頃で
IE8全盛でIE6はサポート終了から4年経ってて
もうそろそろいいかなって感じだった >>963
ごめん。ほんまやな。
投稿の2011/06/26って既にスマホ使ってた頃だ。（同年に自分もcss3やHTML5触ってたわ）
そう考えると逆にこのデザインが逆にやべーなｗ web2.0の前の時代にすら見える。
https://www.usamimi.info/~geko/arch_fbox/001_mandel/index.html
てっきり見た目からtable全盛の時代のサイトかと思ってしまった。
でも難しい事研究してると思う。数学分からん。 タグへの質問しておいて
タグへの回答はスルーで
装飾についてのアドバイスにだけお礼を言う奴って素敵 すみません忘れてました
>>960
ありがとうございます、divタグについて色々と調べている最中です div自体は特別な意味なくてそのページではh2やらpをひとまとめにするのに使っている >>957-958
flexに流し込みつつ、上端揃えみたいなのあったっけ？ divの中に画像やifameを入れる場合divの幅が画像やiframeにフィットする
ようにするにはどうすればいいんですか？
画像と同じ幅を毎回pxで指定しなければならないんですか？ 女の足にストッキングがフィットするみたいなイメージ？ divにvw、%、pxなんかで横幅指定してimgの横幅100%じゃだめなの？ >>971
divというか
display: blockな奴は横に広がって縦に縮むの ulの中のliをheight:0でpadding-top:～～%とかで常に一定の比率で画像の枠を作りたいんですが、
PC表示ではliのwidthを100%にしてpadding-top:60%で普通に縦一列に表示して、
これをスマホ表示ではfloat:leftでliのwidthを50%で横2列にするとします
そうすると、なぜかスマホ表示では縦のほうが長くなって変な比率になってしまうのですが何故でしょうか？
padding-top:30%にしたらちょうどうまくいったようです
width:50%に変えても、そのwidthを基準にしてpaddingするから60%のままでいいんじゃないんですか？floatさせると何か変わるんでしょうか？ よく分からんけど、その場合のpadding-topは(画像の高さ/画像の横幅)*100じゃなかったっけ？
計算合ってる？ >>975
気づいてるかもしれんけど
基準値がliの幅じゃなく親要素だから
中にbeforeか、なにか別の要素置いて
高さ60%にしたらいいんでね
縦横比固定したい時によくやるやーつ あ、親要素が基準でしたか。勘違い申し訳ない
padding上下はその要素そのもののwidthを基準にすると勘違いしていた >>971
divの幅を0にすればどんな画面入れてもフィットするやろ >>979
素人ですまん、
border-sizingがcontentでもborderでもそうなるの？ submiボタンで送信するのでなければinputタグはformタグで囲まなくてもいいんですか？ ハロー！わたしサブ美！
formタグに囲まれて怒張した肉棒をかわるがわるinputされてるの♡ >>981
構わんよ
なんなら、submitするとしても
inputやselect要素にform属性つけたら
form要素の外にあっても大丈夫 ウェブデザイナーになりたくて”一冊で身につくHTMLとWebデザイン”
"スラスラ分かるｈTML＆CSSの基本"という本を買ったのですが
色々知ってるのが前提に解説されていてイマイチ理解できませんでした。
プログラミング一切やったことに人向けのHTMLの本でお勧めはないでしょうか？
Hello worldから始まるような本を探しています >>984
ここで何かしらオススメ書いてもステマだ何だと騒ぐ馬鹿が湧いて出てくるから
尼のレビュー読んで気になったのをピックアップして、実際に書店に行って
自分に合ってるかどうか確認した方がいいんじゃないかと
あとは本以外でも動画系学習サイトとか初心者向け解説サイトとか
「HTML 初心者 サイト」とかでググれば色々と出てくるし、本を買わなくても
十分事足りるので、先ずは本を買う前にネットで調べてみるといいかも >>986
自分で3冊買って失敗したので教えてほしかったのですが厳しいですか…
<body>
<h1>kujira cafe <h1>
<nav>
<nav>
<h2> <h2>
って文があったら一行一句何を意味してるのか全て解説してるような本をまず読みたいんですけど.. >>987
「html5 リファレンス」で検索して
で出てくる本をすぐ買うが良い >>984,987
足りないのは説明やウェブの知識ではなく
それ以前の問題かもなあ
あと反復練習
一回説明を受けてやっただけで理解できるようには
人の脳は出来てない
自転車が倒れないメカニズムやアルゴリズムを
初めて乗る人に説明しても
理解できないし乗れるようにはならん
でも乗れる人はその説明を納得しやすい、のと同じ
まず今知ってる、出来ることだけで書いて
何度も繰り返して、見様見真似して
なんとなくわかった気になってからの方がいいと思うよ
本とかに頼るのは ほんと、授業でやった
阿部寛のホームページ模写なんて
最初は難しかったもんなぁ。 プログラミングも何も分からないっていう初心者向けサイトとか、調べればいくらでも出てくるけど
それらを一通り読んで実践してみた上で、今持ってる本を読めば大抵は何とかなると思うんだが
それでもダメなら、もう向いてないから諦めた方がいいって事なのかもな めんどくさいんで自分のHPなんて90年代センスでいいや！とか開き直りしてるけど、いざとなったらどこぞのオサレなサイトをパク…参考にするつもり(959みたいに
独自のスクリプトなんて大して使ってない処がほとんどだろうし、ビジネスロジックは除去
本とかセミナーに行く必要性はないよな？ 書いといた。
三大バカが意味も分からず使いたがる用語 デプロイ
https://medaka.5ch.net/test/read.cgi/prog/1597086668/
248 仕様書無しさん sage 2020/12/25(金) 19:52:18.83
ビジネスロジック >>992
それなら最初からWordPress使っとけって話だけどな
本職のデザイナが作った無料テンプレートが腐るほどあるのに、
なんで初心者ほど自作したがるんや >>997
Go使いでGCPでサイトを建ててるF2 >>997
つまりケチってんのよサーバー代も
データ永続化もFirestoreで無料
利用者のユーザ管理はOAuth
comドメインの登録料だけ払ってる このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 85日 22時間 42分 38秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
