HTML/CSS のどんな質問にも優しく答えるｽﾚ 49
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
https://mevius.5ch.net/test/read.cgi/hp/1627551978/
■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html <input type="text" value="あああ あああ">
これをブラウザで表示してテキストボックスの「あああ あああ」の部分を
テキストエディタ（使ってるのはterapad）にコピペすると「あああ??あああ」と表示されてしまいます。
半角スペースは２つ並べても１つ分しか表示されないので を使いたいんだけど
他にコピペしても文字化けしないかつ半角スペースを２つ以上連続で表示できるようにするにはどうすればいいんですの？ 訂正ブラウザで表示されている部分は
「あああ あああ」です もう１回訂正
ブラウザで表示されているのは「あああ あああ」です そもそもinputのvalueは半角スペース連続してても圧縮表示されないでしょ？
＆nbspはU+00A0で通常のスペース文字ではない
firefoxやieならコピー時にU+0020に変えてくれるけどchromium系はそのまま
webやるのにユニコードに対応してないterapadは捨てましょう >>9
なんでブラウザのそんな細かな挙動知ってんの？怖っ TeraPad は、新しめの文字コードに対応していないので、やたらと? と表示される。
アプリ自体がかなり古いので、使わない方がよい
漏れは、VSCode・サクラエディタを使っている PC歴長いけど、秀丸ってシェアウエアなのもあって
未だに試したことすら無い 選択文字の質問です
1
<div><p>あいうえお</p></div>
2
<div>
<p>あいうえお</p>
</div>
という文書をtest.htmlとして保存してブラウザで開いた後
あいうえおをタブルタップないしはトリプルタップで選択しエディタにコピペをするとChrome系とFirefoxで挙動が異なります
SRIron(Chrome系) 3回タップが必要
1はあいうえおの後に2回改行が入る
2は改行は入らず
Firefox ダブルタップでもあいうえおは選択される
1は改行は入らず
2はダブルタップ時は改行は入らず トリプルタップ時はあいうえおの前に改行2個 後に改行1個
どういう法則で改行が入ったりしたりしなかったりするのか
本来どちらの挙動が望ましいものなのか
バグなのか
その辺を知りたいです。 ブラウザによって挙動は異なりますがバグではありません仕様です >>14
うちもその組み合わせだわー
テラパッドは有名だけど縁がなくてほとんど使ったことないし
秀丸は（解除法知ってるけど）出向先で使えないことが多い（大手はシェアウェアNG多い？）ので記憶から消えてった
機能覚えて損のないサクラに落ち着いた
ゴリゴリ書くときはvscode >>21
あなたは禿丸の作者から特別にハゲ認定されてますか？ ★という文字を抽出して、背景色を変更できますか？
セレクタはありません。
typoraというエディタを使っていて、テーマをカスタムしたいのですはい js使えばできるじゃね？
でも抽出じゃなく普通にclass名設定して適用するのがいいと思うよ >>25
class名は指定できないっぽいので、むずそうですね
どうもでした css3のanimationについて質問です
#test{
position:absolute;
}
<div id="test">test</test>
ページを読みこんで3秒後に一瞬でposition : absoluteがfixedに変わるようにするにはどうすれば良いのでしょうか？ >>14
vscodeは、HTML新規作成の際、utf-8が前提になってるのがちょっとな
文書自体をeuc-jpとかで新規作成するならterapadで作成してる いや、そいつはterapadを使い続けたいからeucjpでとか言ってるだけだろ VSCodeの文字コードなんて設定を変えりゃいいだけの話だし
terapadだって初期設定はsjisだったのに何言ってんだっていう 今時のHTMLはcharset指定しなければutf-8だよな、と思ったら HTML LS での新規仕様なだけなのか >>33 >>34
お前らが世間知らずなだけ
自分で作成できる小さいサイトしかやった事無さそう いや、だって05年あたりからこの方、euc-jpなんてキャラクタセットはどこぞの大学の95年あたりの古代から更新されてないページくらいでしか見た覚えが無いんだが(良くあったよな文字化けページ >>38
だから世間知らずだって言ってんだが。
たぶんECとかメルマガとかやったことないだろ？ >>40
いちいち腹立つやつだな
いきなりケンカ売ってきて何なのおまえ？
こんなとこでいきなり相手に不快な思いさせてなにがしたいん？ 専門分野だけどメルマガ、
週に1度20000通ぐらい送ったうち
5000通ぐらいはクリックして内容見てくれているのは嬉しいけどな >>43
表面しか知らない馬鹿がメルマガなんてもう古いとか言って勝手に撤退していくからいいよな
（そういう奴はどうせSNSでモノマネや半端な事してまた撤退が関の山） >>44
俺はこう言う理由があるからterapadもまだ使ってるって自分の事を書いたら
2000年代だの、こいつ呼ばわりされて不快な思いしたから全力で立ち向かうわ いやたち向かわんでいいよ
俺もメルマガやってるけどメーラー対応面倒よね >>46
会話が成立しない猿に使う元気があったらコード書いてるほうが有意義 自分のルーティンみたいもんもあるだろうし
ツールなんて好きなの使えばいいとは思うが
vscode使わず古いterapad使い続ける理由が
>>32で、文字コードごとに使い分けてるなら
煽りたくなる気持ちも分かる >>49
vscode使わずなんて書いてないんだけどな。
euc-jpでドキュメントのたくさん新規作成する時や小さいウインドウでサクっと作業するときにterapad使ってるってだけで。
vscodeは行番号の背景色やスクロールバーの色など細かい部分でカスタマイズは必要だったが概ね気に入ってるよ。
マルチカーソルと画面分割、ソース折りたたみ、SassのコンパイルやEmmetが便利だし。
正規表現やフォルダごと置換はAdobeのDWと比較すると画面が見にくいが全部揃ってて軽いのってこれくらいだしな。
さくらはDOMツリーが見やすいのは良いがメインにはならない。
秀丸は7年前くらいの当時はフリーのエディタで正規表現使えるのは希少だった
Sublime_textはvscode出てから使わなくなった。
これら色々使ったうえでterapad「も」使ってる。文句ある？ そういやSublime_textも文字コード変換に弱かった。
めんどくささ、見やすさいう意味で変換や置換関連で一番強かったのはDW。
これはソースの整理も強い。例えばpタグを削除（クラスIDあるなし、閉じタグ含め）や
マークダウンもボタン1つで除去できたな。
ソフト自体が重すぎて使わなくなったが。 煽られたくなければ煽り返してないで、詳細端折らず、そう書いとけばいいのに
最後にまた余計な一文で煽り返してるっていうね
技術以前に煽り耐性を身につけた方がいい >>51
> 文句ある？
言い方の口調が気に食わない
敬語で話せ Macなので文字コード変換はmi使ってる
色々試したけどこれが文字コード周りはこれが良かった macは文字コード改行コードもmiが便利やね
BOM削除とかもあったっけか サイトを作るときのフォントサイズについてなんですが、IE ,fire fox ,Chromeに対応する場合はemを使うべきでしょうか?
pxだとブラウザごと端末ごとに変える必要がありそうなので使いたくないんですが 静的htmlで作成する場合
/index.html
/css/style.css
/image/top.jpg
という構成で
background-imageを指定するとき
1：background-image: url(/image/top.jpg)か
2：background-image: url(..//image/top.jpg)
サーバ上ではどちらも見えるけど
1はローカルでは反映できない、2はローカルで反映できるということになるよね
現場の人はどっちで作るべきなの？ >>62
べきって話はないけど好きに使うといいよ
>>63
2は/が1個多い
1はローカル関係ないよ
サーバー上でも階層変えたらだめなのでおすすめしない
逆にいついかなる時もドメイン直下に置いてあるファイルにアクセスしたい時はそれでもいいと思うよ >>62
色々な考え方があったり、場面によって使い分けたりとかあるので
これを使うべき！みたいなもんは無い
「css font-size 単位」とかで検索してみるといい >>63
動的ばっかりやってるからそのまま静的も1が多い。
1は絶対パス。
最近のサイトは1つのコンテンツに対して読み込まれる側ではなく
読み込む側の位置が変わる事が多いからどこから読んでも同じパスになるように相対ではなく対パスにする事で
作業負担やミスが圧倒的に減るお 肉付けされまくったサイトのcss指定が
../../../../../style.css
とかたまにあって吐くわ
部署ごとにあるかもしれませんが、魑魅魍魎状態 cssでの指定はcssファイルからが起点になるのは仕方無いの？
相対なら一度 ../ で上がらないといけないけど
ルートディレクトリなら心配しなくて良いのか・・ スマホ向けで水平・垂直に切り替えた時の挙動の対応方法を教えてください。
常にディスプレイに対して高さ100%表示にしたいです。
この時引っかかるのが「ロケーションバーや下のステータスバー」です。
垂直状態から水平に向きを変えた時、
その要素分空間が空いてしまいます。
ならないブラウザもありますが、OS標準であるSafariではなってしまいます。
常にディスプレイサイズに対して高さ100%にする方法ってありますか？ PC用のグローバルメニューを作っているんだけど、
昔はul>li*5みたいな形で作っていたものを
navを使おうと思ったらどう使えばいいの
header
section.globalNav(幅指定無し)
section.container(幅1024px)
ul(flex)>li*5
みたいなのを考えたけどnavタグってどこに使えば・・・ >>70
とりあえずコレでも
これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック | コリス
ttps://coliss.com/articles/build-websites/operation/css/css-cover-the-entire-height-of-the-screen.html >>71
navはナビゲーションのセクションを表してるだけだから
section.globalNavをnavにするとか >>73
特に考えず、区切りはsection使ってたけど、
共通メニューは特別としてnav使う感じ？
navはコンテンツのsectionよりも上の存在、ヘッダーのナビゲーションと考えればいいのかな >>74
nav要素はsection要素と同じくセクショニングコンテンツ（コンテンツ区分要素）
section要素は他に適切なセクショニングコンテンツが無い場合に使う
とりあえずコレ読んでみるといいかも
HTML 要素リファレンス - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element#content_sectioning
<nav>: ナビゲーションセクション要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav
あとは「html セクショニングコンテンツ」とかで検索してみるといいよ >>75
サンクス、気持ちすっきりしたわ
navに入れ替えました サイトを作るときのフォントサイズについてなんですが、IE ,fire fox ,Chromeに対応する場合はemを使うべきでしょうか?
pxだとブラウザごと端末ごとに変える必要がありそうなので使いたくないんですが デフォルトのフォントサイズは通常 16px じゃないの？
14 もあるかも知れないけど
それを、1 em/rem にすれば？ >>79
cssで
body{font-size:12px}
ってすりゃいいだけ 他のタグはデフォなんてつかわないだろうに
liのへんなマークとか使うか？
なんでフォントサイズだけはデフォ使う前提なんだよ >>84
ulとかolにlist-style: none;指定してるリセットCSS使えば？ あぁ、そういう話か。デフォ云々は>>83で解決してると思ってたから、何言ってんだ？と思いつつ
適当に流し読みしてたら、自分が変なこと書いてたわ
めんごめんご youtubeトップ画面で1行に表示させる動画数を増やしたいと思い
:root * {--ytd-rich-grid-items-per-row: 6 !important;}
というcssをStylusで適用したのですが、右端に空欄ができていて、動画数も5個になっています
ちなみにCtrl＋ホイールで縮小させると80%くらいでやっと6個になりました
どうやったら空欄を埋めれますでしょうか おまいら情弱だな。
俺がいい事教えてやろう
Stylusなんて使わなくても
ブラウザの虫眼鏡マークで80%くらいに縮小すれば6個になる
騙されたと思ってやってみ？ >>89
その辺のYouTubeの仕様、元に戻ったかも
多分、以前の設定でイケる >>93
ほんとだ
今日開いてみたら元通りになってました
ありがとうございます
縮小すれば戻るとかクソ寒いレスしてくれた人もありがとうな livedoorブログなどでbootstrapは必要でしょうか？ フリーでサイトのモック？を作りたいのですが、inkscapeなどがいいのでしょうか？
ワイヤーだけではなく装飾も作っておいたほうがいいんですよね？ どういう答えを期待してるのかサッパリ分からんけど
無料で使えるソフトやサービスなんて限られてるんだから
色々試して好きなの使えばいいよ はい(´・ω・`)
サービス多すぎるからペイントでやったほうが良いインじゃないかなと ブログのデザインをする場合、ペイントソフトなどでモック？を作りますか？
gimpでやろうと思うんですが、どうやってますか？
uxは持ってません デザインを仕事にしてるプロならphotoshop一択
そでなく自分一人で完結するならgimpでもなんでもいい ラスタのほうが色々描けるから、ベクタは選ばないってことですかね。 >>105
巨大なラスター絵は、縮小すればベクターなもんさ 最近フォトショは純粋な写真編集にしか使ってないな
XD便利 HTMLやCSSの話から外れると途端にレベル下がるなｗ 次の画像のようなレイアウトを作りたいです
PC時
https://imgur.com/GzDfq0e
SP時
https://imgur.com/CQ0JELN
要素はこんな感じです
<div>
<figure><img src="_img/gazou.jpg" width="600" height="400" ></figure>
<h3>タイトル</h3>
<p>親譲りの〜〜</p>
</div>
いまはJQueryで画面幅変更時に各要素を囲ってレイアウトしているのですが、
PC時
<div>
<figure><img src="_img/gazou.jpg" width="600" height="400" ></figure>
<div class="wrap">
<h3>タイトル</h3>
<p>親譲りの〜〜</p>
</div>
</div>
SP時
<div>
<div class="wrap">
<figure><img src="_img/gazou.jpg" width="600" height="400" ></figure>
<h3>タイトル</h3>
</div>
<p>親譲りの〜〜</p>
</div>
これをJQueryを使わずにCSSだけで作ることは可能でしょうか？ bootstrapって使う必要性ありますか？
デザインが整うといいますが、自由度がないとも。
学習コストも問題だし(´・ω・`)bu 広告少ない無料ブログだとどこがいいすか？
fc2かシーサーか bootstrapって今思えば、見た目をcssのクラス名にしたものを
複数個並べてレイアウトや表現するやり方と考えたら良いの？
それ以外に何かあったっけ？ >>114
ありがとうございます
Gridの指定が複雑ですが、資料見ながら読み解きます！！ よくわかんないんですけど、スマホでｐｃサイトを表示させたら離脱されるんでしょうか？
無料ブログのスマホ表示だと広告多くて >>115
どんなCSSフレームワークも憶えておいて損は無いけど
bootstrapを使う必要性があるか？って言われたら
使う必要は無いっていう答えになる >>116
無料のとこ端から登録して試してみたら？
結局、使ってみないと自分に合ってるかどうか分からんよ >>119
見る側からすると
今時スマホ対応すらできてない糞サイトか
と思ってそっ閉じ離脱するのはまあまああると思う メディアクエリすら使わずにレスポンシブ化するとかね
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ | コリス
ttps://coliss.com/articles/build-websites/operation/css/media-queries-probably-dont-need.html CSS フレームワークなら、Bootstrap, Bulma も、ほぼ同じ
SASS の@import が無くなるから、Bootstrap 4 は、もう使えない。
@use に変わるけど、格段に難しいから、多くの人が脱落すると思う
Learn Bootstrap 5 and SASS by Building a Portfolio Website - Full Course, 2021/6
https://www.youtube.com/watch?v=iJKCj8uAHz8
5時間の動画だけど、@importを使っている部分があるので、そこは真似しない方がよい 特定のキーワードが出てくると誰も聞いていないのに
独り言を書き込む、いつもの人か >>121
めんどくさそうなのでやめときます。
>>122
そうですね。
シーサーは広告入るみたいです。スマホには。
>>123
やはりデザインを変更する必要はありますか。
>>124
レスポンシブにすればスマホ版に広告はいらない可能性もありますね。 <input type="range" min="0" max="10" step="1">スライダーで0のとき
disabledみたいなグレーにするにはどうやればいいんですか？
disabledだとグレーにはるけど操作もできないので アーティクル部分のデザインなんですが、2つ目の例のようにデカデカと本文まで表示させるのと、1つ目のように横並びにするのとでは、どちらがいいんでしょうか？
個人的に好きなのは前者ではあります。情報が見つけやすいと考えますが、最新記事はサイドバーで表示させればいいという考えもあると思います。
ブログを作ります。
https://www.yamakei-online.com
https://tech.andpad.co.jp 8の倍数ルールというのがあると思うんですが、これを使うとフォントサイズが8px 16p 24pxと極端になりませんか？
見出し１が24px、見出し2が16pxというふうに。 >>132
参考にどうぞ
デザインは8の倍数でできている | 1 pixel｜サイバーエージェント公式クリエイターズブログ
https://ameblo.jp/ca-1pixel/entry-11837685575.html 960pxグリッドシステムってPCには今も最善？
まだワイドが無かった時代よね？
いくつぐらいが適切なんだろう
安いノートは1366ピクセルだから、1280ぐらい？ webデザインはモック作ったほうが良いですか？
あと、好きなデザインがよく分からんのですが、嫌いを明確にしたら少し見えてきました。
やはり、情報を伝えるのが目的なのでテキストベースのサイトが好きですね。
好きよりも嫌いを明確にする意味ってなんですかね？
>>134
うーん、細かいとこは4ｂﾌ倍数も使いまｂｷ(´・ω・`)。。。。 >>136
今の時代はYouTubeに合わせるのが1番良い 今一番見られてるコンテンツはYouTubeだしこの先も当分はそうだろう
世間に一番馴染みのあるコンテンツに合わせるのは常套手段だ YouTubeで動画は見るけどサイトの作りはウンコだよな
使いづらい 世界で一番見られてるのはYouTubeだろ
だったら世界で一番馴染ある優れたサイトなのはここでしょ youtubeが優れてるのはコンテンツであってデザインではないでしょ？ でもこのスレでもこれが1番とかベストはコレだとか答えが出ないしな
そういう場合は1番売れてるものに合わせるのが定石 グーグルが出てきた時
あまりのシンプルさにびっくりしたもんだ 個人的にはUI以上に検索速度の速さにビックリした思い出 GoogleはYahooの検索結果より圧倒的にページ数多くてびっくりした googleが出たとき、検索の速さは衝撃的だったね。感動したわ。
はじめはウザい広告もなかったからあっというまに浸透した。 ティキストベースのサイトが好きってオカシイですか？
画像でごちゃごちゃしたサイトよりも、タイトルバナーすらテキストっていう、、。
それでいて、おしゃれに見える。
そんなサイト知りませんか(´・ω・`) テキストのバナー…？？？
テキストだったらテキストだろう 質問させてください
<div>
<h2>ながめのタイトル</h2>
<p>リード………………………</p>
</div>
h2要素の文字幅がdiv要素の最大幅にしたいです。
その最大幅でp内は適宜改行されるようにしたいです。
divの幅を指定しないと無理でしょうか？ div {
display: inline-flex;
flex-direction: columun;
} >>161
ありがとうございます。
教えていただいたものでは
p要素の幅になってしまいます。
文章が下手で申し訳ありませんがp要素はh2要素よりかなり長く
親要素の幅で改行されてるイメージです div {
width: min-content;
}
h2 {
white-space: nowrap;
} >>163
ありがとうございます！
できましたが、IE11は効かないんですね
IE11だけ何か対策で対応します
>>164
そうです。
上記で問題があった場合、
h2と同じ幅指定にJQueryで指定しようかと思います >>158
bannerコマンド知らんとかモグリか？ >>167
ありがとうございます！！！
ラップしてたdiv自体をラップする必要があるようですが
IE11でも問題なくなりました
コピペなのでどういう振る舞いをしてるかをこれから勉強します
助かりました！ inline-flexなんてあるのか・・・
令和最新版だな htmlで入力フォームつくってAさんが入力した値を次にそのhtmlを開いたBさんが値を参照するにはどうしたらよいでしょうか？
htmlに直接追記変更させたいですが無理でしょうか？ やっぱ無理ですか
まことにごめんなさい
htmlで簡単な管理表みたいなの作りたかったんです それを実現するには、データベースとか、どこかに保存したデータを出し入れしなきゃいけないが
そんな機能はhtmlには無い
管理表的なものなら、お手軽にGoogleスプレッドシートとかで作った方が楽だよ 
HTMLってどうやって勉強しましたか？
どんぐらいほんとか読んだのでしょう。。。 特定のキーワードを含むページに上部に定型メッセージを表示するのってどうやってやるの？
例
コロナというキーワードを含むページの上部に「新型コロナウイルスに関する情報が含まれている可能性があります」と注意喚起 自分のサイトだったら手作業でやれない事のなさそうですけど
見るところ全てだとgreasemonkey等のスクリプトを自前でつくってやるってぐらいしか思いつかない 「特定のキーワードを含むページ」っていう時点で
スクリプトにしか出番は無いわな 孤独な人生って生きがいありますか？
誰のために生きることも出来いない
自分のため？自分にだって価値なんて感じないんだ >>177
Udemy とか、Progate・ドットインストールには無いの？ コピペやテンプレサイトで何個かWebサイト作ってきたけど、全くいちからCSSやってみたら全然出来なくて萎えた
positionプロパティ難しいしdisplayも全然できないし丸一日何も出来なかった
模写コーディングを覚えないとダメだ フレームワークがうまく使いこなせない
やっぱ何となくの独学じゃなくてちゃんと順序立てて勉強しなきゃなあ cssのフレームワークなんているか？
必要な分だけ書いたほうが覚えることも少なくて済むかと html/cssを学びたいんですが何をどう手つけて勉強始めたらいいですかね？
プログラムは未経験ですがインフラやってますのでbashとかvbaは出来ます >>190
esxiでvMotionとかやってるの？ >>192
190ですけど、
主にはawsのクラウドインフラですね
仮想化周りはhyper-vだけでvmはノータッチです モックを作成しているのですが、web ui kitのようなものは使いますか？
パーツも自作していくのでしょうか？
使用ソフトはkritaです。 >>193
インフラってAWSのほうかすごいやん、route53とlightsailしか使ってないわ
サーバレスのlambda理解できずに諦めたわ んで、プログラム初心者ですがhtml/cssはどう学べば良いですか？ >>196
プログラム学んだように書いて慣れるしか無いんじゃないかな 実務的なところはどうですかね？
実務で実際に使ってるようなツールとかなんかあれば知りたいですね 暇つぶしにMDNのフロントエンジニアコースみたいなのやってる。
HTMLが35〜50時間、CSSが90〜120時間をJavaScript135〜185時間を想定しているらしい。
これだけやってもようやくショボいwebページが作れるようになる。
五体満足で若いなら他の資格の勉強した方がいいんでないか？ コーディング1本で食える時代じゃないし
今後未来はコーディングはAIがやるようになるだろうし
他の仕事見つけた方が良いよ
デザインできるなら別だけどデザインになると今度は
ガチのグラデザと同じ土俵で戦うことになるから
生涯デザイナーやるって気概ないなら
バックエンドとか目指した方が飯の種になるよ 今は減ってインフラ・サーバ・PG系で月40万、webの固定客で30万ぐらいもらってる脱サラ個人事業主だけど、
手広くやる方がつぶしがきくのも事実、月100万は数年維持できたし、
15年続けられたのもやっぱり知識分散しているおかげだと思う
若いのならもっと勉強して客を増やせば良い サーバー系はほんと人出常にたりんからな
PGは人口多い割に長続きしないから入れ替わりが早い photoshopなどでモックを作る場合、1pxもずれないように正確に作るんでしょうか？いきなりコーディングに入るとデザインが破綻しませんか >>206
今時フォトショでプロトタイプなんか作らない
そういうのはもうXDとかでやる時代 xdですか。
持っていないので、、、。
しかも個人レベルのサイトなので、有料ソフト買うほどかなと。 回答どうも。使ってみますけど、個人で使う意味あるんですかね？ 今はリキッドレイアウトが当たり前だそうですね。
リキッドレイアウトと8の倍数ルールというのは組み合わせ可能でしょうか？
横幅100%にしても文章が読みづらいと思うので、幅の上限設定は必要かと思います。
例えばvw2100pxを基準とする場合でも、上限は1050px程度にしたい場合、max-width:50%などと設定します。
この場合、横幅は1050pxとなりますが、必ずしも8の倍数とはなりません。
リキッドと8の倍数ルールは共存出来るんでしょうか？
>>211
了解す
イメージでいいのでペイントでいきます >>213
maxやminにパーセントなど相対を入れるのが変
よほど意図があってテクニカルに使うのでも無い限りやらない >>214
maxに絶対値をpxで指定すると(例えば1000px)、3000pxのディスプレイでも、2000pxのディスプレイでも、同じ横幅で表示されるということになりますね。
横に大きな余白が出来てしまいますが、それでいいのでしょうか？
スマホなんかの場合は、どのくらいを上限値とするんでしょうか？ >>215
上限1050って言ってるんだから余白できて当たり前
画面幅に対して同じくらいの幅にしたいなら要素のwidth自体を90%とか相対にするだけ
maxいらない >>216
スマホの場合でも余白が出来ていいんでしょうか？
画面サイズが限られているので、余白ができないようにフルで使いたいユーザーが多いのではないですか？ リキッドデザインと8の倍数の共存ですね。
デバイスのサイズを基準としたいのですが、8で割り切れるサイズばかりではないかと。 max-heightなどは
たとえば中のコンテンツの文字列が長文になってしまったけれどこれ以上のサイズにすれば
デザインが崩れてしまうなどの場合に使って
画面サイズなどに使う必要はないのでは >>213
幅に上限設定するならそれはリキッドデザインというか普通のレスポンシブデザインじゃないか？ >>223
レスポンシブですか。
レスポンシブの場合もVWを基準にしてデザインすると思うんですが、中途半端な横幅のデバイスにはどう対応するでしょうか？
8で割り切れない奇数になっているなど。 8の倍数がどうとかの豆知識を身につけるレベルに達してないから
余計なこと考えずcssを理解すべき たしかに 8 にこだわりすぎてるから、とりあえず忘れようか どのぐらい余白を取るかという指標があるとデザインが楽なんですよね。 余白ルールとかありますかね？
レスポンシブと共存出来る。 こいつはとりあえず始めるということができない隠キャタイプだな やらない（できない）理由探ししてるだけだろ
陰キャで纏めてくれるな archive.phpって一個のフォルダに一つしかできませんか？
名前変えて使うのもありですか？
例えばarchibe_2021.phpみたいに
一覧ページからカスタム投稿でarchive.phpに飛ばすと、決まったCSSデザインにしかできないんですかね
arcive.php内で更に条件分岐して複数ページのCSSデザイン作っていく感じですか？
複数怪奇過ぎてついていけない お知らせ一覧がパーマリンクxx.com/newsに飛ぶ
archive.phpとして処理される
お知らせ一覧なので、特にサムネイル画像とかは要らない
じゃあサムネイル画像が必要な一覧ページも作りたい場合どうすればいいのか？という質問です
例えば物件一覧ページを追加した場合
上から順に新規投稿で下が古い物件一覧ページ
これもarchive.phpで処理されるけどパーマリンクは
xx.com/bukkenに飛ぶ
しかしnewsのarchive.phpとして処理されるからサムネイル画像などcssがいじれない
それともarchive.phpに条件分岐コード書けば物件一覧用としてもcssをいじれるんですか？
archive.php内で複数のページのCSSコーディングが出来るんですかね？ 改めてスレタイ読んでみて、ここで質問するのが適当だと思えば続けてもいいけど
適当ではないと思ったら、WordPressスレに移動しましょう >>223
リキッドレイアウトは(特にPC用の場合に)最小幅を設定しないもののことだぞ
PCで見てる場合に幅を800pxとか700pxとかにしても、画面の一部が隠れて
スクロールバーが出たりすることがないもののこと 複数のCSSとかおかしなことを・・・
テンプレート階層を調べてください 一応、誘導後ではあるからマルチとも言い切れないけど、違う誘導先に書き込んでるしなぁ
唐突にarchive.phpって言われても、wordpress知らない勢からすると( ﾟдﾟ)ﾎﾟｶｰﾝだよな
スレタイに合った質問かどうかよりも、どのスレに詳しい人が多いか考えて質問すればいいのにね wpスレに見放されてweb板を徘徊するような奴はスルー推奨 まぁスレ内容のhtml/cssに関係無い長文貼るマルチはヤバいからな わからんならわからんで答えなきゃいいんだよ
変に絡むからどうでもいいことで争う羽目になる
バカはお前だけだよ ということで >>242の言う通りwpネタはスルーしましょう >>236
archive-xxx.php追加したらあっさりできました
ありがとう😊 静的コンテンツと動的コンテンツってなんすか？
イマイチわからん 静的…コードに書いたものがそのままコンテンツになるもの
動的…phpなどで閲覧する人のブラウザに閲覧した時点でコンテンツ生成されるもの
例えばCMSで読み込む新着記事一覧などは動的
同じ新着記事一覧でもHTMLで毎回手動で更新しているなら静的
そして君はとても性的だよ… google翻訳でgoogle自身が使っているから
ダメじゃないんじゃないかな メインコンテンツがiframeの中、みたいなあやしい構造でなければ
別にいいんじゃね width:100px;のボックスにpadding-left:50px;とbox-sizing:border-box;を指定しました。
しかし、デベロッパーツールを使うと幅は100pxでした。
50pxになるはずではないのですか？ デベロッパーツールでそれを知る事はできないのでしょうか？
比較用のボックスを置くなどしないと。 >>253
100pxになるのは正しい挙動
100以下にしたいのなら
max-width:100pxかinline-block等にでもすると良いんじゃないかな？ widthが固定値だから
paddingつけても変わらんよ width - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/width
> widthはCSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが
> box-sizingをborder-boxに設定すると、境界領域の幅を設定します。
CSS 基本ボックスモデル入門 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area >>253
デベロッパーツールのどこ見て言ってるのか知らんけど
見るべきところはサイズ詳細図になってるところの一番内側だぞ
そこが100になってるなら何か間違ってる google fontなんですが、ダウンロードせずに使うためのリンクってどこにあるんでしょうか？
以前はあったと思うんですが。
https://fonts.google.com/noto/specimen/Noto+Sans+JP 初歩的な質問で恐縮ですが、宅配便の追跡番号が入力済みのURLのように、場合に応じた単語が最初から一部のフォームに入力済みのURLを作成する方法はありますでしょうか？ https://tsurihack.com/6126
このサイトのようにタイトルロゴを中央に持ってくる場合、内包されるボックスの幅を統一しないといけないでしょうか？
space-betweenで配置するのだと思います。
ヘッダの全体幅1000px、左を500px、中央指定なし、右指定なしとすると、ロゴも右寄りに配置されますので そこの場合だとTSURI HACKというタイトルロゴはposition:absouteで位置指定してるね ・ロゴだけabsoluteにする
・左コンテナ ロゴコンテナ 右コンテナで分ける 左コンテナにmargin-right 右コンテナにmargin-leftをauto
・flex-basis
・grid
好きなのどうぞ ｐｃサイトでも横幅は固定しないで、モニタサイズを基準にデザインするもんでしょうか？
しかし、超ワイドもあるわけですよね。 ここで聞くよりも自分で既存のサイトを見て回ってどういうデザインでやってるのか体感しろ トップに画像デカデカと貼る文化はようすたれてくれんかな topのcoverで使う画像サイズってどれくらいのpxやデータサイズを上限として使っているんだろうか トップにでかい画像載せておくだけで見栄えが良くなるからなくならんだろう
作る側も楽だしクライアント受けもいい 俺はwidth1280pxにheight400pxのheader img貼ってるな
1Mぐらいある まあ雑誌やスポーツ新聞の見出しみたいなもんだからなｗ ちょっとスレチになるけど、
トップページのindex.htmlとそれに関連するimg, css, jsをダウンロードしたいんだけどどうすれば良い？
シンプルなサイトならソースおっかけたらいいかもだけど、
結構大きいと何か良い方法無いかなと モニターサイズじゃなくてウインドウサイズにすりゃいいんじゃね？ >>279
windowsならctrl+sでウェブページ完全で保存でいける >>285
それ最初に試したけど、フォルダ構造が1フォルダにまとめられてしまうのが残念でした
htmlは相対パスは書き換えられていないのに、htmlをローカルで見ると単一フォルダに集められたものを見れるという不思議 ブラウザでサイトをダウンロードするとか、curl/wget とか
アセットもローカルに保存する際に、
絶対パスを相対パスに変換して、ちゃんと動くようにしてくれるものもある
再帰的に何階層までさかのぼるか、も考えないといけない
普通は直リンクだけをダウンロードして、
そのリンク先から、さらにさかのぼらない
大量に再帰的にさかのぼると、攻撃に思われるので、やらない方がよい ありがとういけました。
単一のフォルダになってもほとんどがimg, css, jdなので
すぐに振り分けることができました 重たい画像を読み込むまで軽量な画像を代替表示させることって
HTMLやCSSで出来なかったでしたっけ？
動画の代替画像と勘違いしているだけですかね？ 「html 画像 切り替え サイズ」で検索！
srcset, sizes か？
少し用途が違うか？
<img sizes="(min-width: 960px) 75vw, 100vw"
srcset="img-1440.png 1440w, img-720.png 720w, img-360.png 360w"
src="default-image.png"> >>291
IEくらいしか機能しないと思うがlowsrcの事か？ >>291
今でも使われているかわからんけど
プログレッシブ画像ってあったな
インタレースとか imgタグのloading属性の話じゃないの？
lazy指定で遅延読み込みするだけだけど
<img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#attr-loading
代替画像とかIE対応って話になるとプログレッシブ画像かjavascriptかな？ 自分用メモ：
LQIP = Low Quality Image Placeholders
本チャンの画像が用意できるまで表示しておく軽量低品質画像のこと できた
<img loading="lazy"width="400"height="300"src="https://placekitten.com/4000/3000";alt=""style="background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=)0/100%100%">
画像が用意できるまで黒1ピクセルのgifを引き伸ばして表示
ロードしたら差し変わる 孫は５歳で遺族 資料黒塗りばかり/熱海土石流 被災者が交流
ttps://www.jcp.or.jp/akahata/aik21/2021-12-19/2021121913_01_0.html >>297
それ背景画像引き伸ばすんじゃなくてbackgrund colorでよくね cssコードに記載して、にアウトラインを表示する方法ってありますか？
vscodeです
セクションをアウトラインに表示させたいんです ここはフッターのコード
ここはヘッダーのコード
というような目印がほしいんですよね
どこにあるのかわからなくなるので 要するにテキスト末尾の区切りに何かしら入れたいってことだろうな ここからはヘッダ用のcss、ここからはフッタ用のcssといった目印をつけておきたいんですよ。
コードがどこいったかわからんくなる いえ、コメントアウトしてもvscodeのアウトラインには表示されません。
方法はあるでしょうか？ 名前だけで判別のつくclass名にする、では足りないの？ >>311
クラス名はアウトラインに表示されるんですが、
ズラーッと同じ階層に表示されちゃうんですよね
以下のマークダウンのように階層化出来たら分かりやすいなと
# header
## header_title
## header_description
# footer
## footer_copyright
## footer_description
## contact_form
説明不足ですみません わかりやすい日本語で質問できない人が求めるわかりやすさとは 連投すみませんね。
レスポンシブを作っているのですが、ｐｃファーストでcssを記述しています。
その場合、スマホ用のメディアスクリーンにcssを記述しても、反映はされません。
!importantをつけることで反映されるようになりますが、スマホ用cssにはすべてimportantを付ける必要がありますか？
優先順位を変更する正しい方法があれば。
@media screen and (max-width: 550px) { /*スマホ用のデザイン。ウインドウ幅550px以下の場合に適用*/
#container{
border: 10px solid red !important;
}
}
/*pc用*/
#container{
border:1px solid silver;
} >>301
VSCode の質問は、プログラミング板のVSCodeのスレで聞いてください
>>315
レスポンシブ対応は、Bootstrap, Bulma, Tailwind などのCSS フレームワークを使えば？ >>315
pcにもメディアクエリをつければいい
既存サイトの引継でもないのにimportantを使う必要が出てきたらよほどダメなコードを書いてると思おう >>315
その記述だと後半はpc用ではなくすべてに適用となる
sp用に書いたものが上書きされている
spメディアクエリを後半に書くかpcにもメディアクエリでspと排他にするか
「すべてに適用」「pcのみ」「spのみ」でちゃんと切り分けよう >>317
>>318
了解です。ありがとうございました。 >>315
!important使いたくないならpc用より後に書く タブレットは使用したことがないのですが、一般的にはタブレットのサイトにはサイドバーを表示しないものですか？
カラムを下に落とすかどうかです。 >>315
minじゃなくmaxwidthの場合は
記述は下じゃないかね？ >>322
デザインにもよるしランドスケープモードってのもあるし タブのレイアウトってのは、基本的にはスマホと同じ感じになると考えます。
そうであれば、ブレイクポイントは１つで、スマホ・タブとｐｃの２つに振り分ければいいかなと思います。
スマホ・タブ用のレイアウトはサイドバーを落とします。
この場合のブレイクポイントはどのくらいが目安ですか？
960pxという記事を見つけました。
が、小さめのｐｃでブラウザのブックマークバーを表示させた場合、サイドバーが落ちそうです。
960pxは少し大きすぎるんじゃないかと思うのですが、どうですかね。 どういうデザインなのかサッパリ分からんし、目安なんか有って無いようなもんだから、好きにしろとしか
> タブのレイアウトってのは、基本的にはスマホと同じ感じになると考えます。
> そうであれば、ブレイクポイントは１つで、スマホ・タブとｐｃの２つに振り分ければいいかなと思います。
個人的には、そんな柔軟性に欠ける条件で縛って作ったりしない >>328
お前、前にも言われただろ
「いちいち聞くな、手を動かせ」と 後に5chを騒がす「ハチバイマン」が
W3C参与になることを俺たちはまだ知るよしも無かった すまん、途中で送信してしまった
<head>
<style type="text/css">
<!--
このコメントアウト必要だったっけ？省略しても良い？ 海外の12歳の少女が、NFTで1億8000万円を稼ぐ
12歳のナイラ・ヘイズ氏のNFT（※）コレクションが、数時間で160万ドル（約1億8000万円）
を稼ぎ出したと、米メディアの『Business Insider』が報じている。
ヘイズ氏は4歳で絵を描き始め、9歳のときにスマートフォンを使って彼女の代表作
「Long Neckie Ladies」を描いたという。このシリーズは3333点からなる、首の長い
多種多様な女性を描いたコレクションだ。出品後わずか数時間で売り切れとなり、
総額は約1億8000万円にのぼるという。
「アートは私が自分自身を表現し、言葉では不可能なやり方で人々を
驚かせるのためのもの」と述べている。
これまでにヘイズ氏は、NFTで1394ETH（約6億6000万円）を稼ぎ出してきた。
若きアーティストのさらなる活躍に期待しよう。 ブライアン・イーノ氏、NFT販売に対し「価値あるものとは思えない」と持論語る
「詐欺師がカモを探し回っているよう」だそうです
https://japanese.engadget.com/brian-eno-does-not-like-nft-100027971.html
さらにイーノ氏は「NFTは、アーティストがグローバル資本主義から少しばかり恩恵を受けるための手段であり、金融化(financialization)のミニチュア版に過ぎないと思う。なんと素晴らしい。これのおかげでアーティストもまた、ちっぽけな資本家というクソったれ野郎(asshole)になれるんだよ」とエレガントな言葉でNFTを売る行為について説明しました。
実際にはイーノ氏の信頼する知人らもNFTを気に入っている模様で、イーノ氏本人もNFTに関する「質問には心を開いておくようにしている」としました。それでも最後には「いまは主に詐欺師(NFTクリエイター)がカモを探して歩いているような状況だ。そして目を輝かせたアーティストが大勢、喜んで後者に…まあ、私の皮肉はこの辺にしておこう。要するにいまはあまりそれについて前向きには感じていないと言うことだ」と述べています。 <input type="range" name="test" min="0.05" max="10" step="0.05" value="0.05" id="test" style="width:100px">
このスライダーをマウスで１段階動かすと0.2になってしまいます。
stepが0.1なので0.15にならないとおかしいけど
どうすれば0.15になりますか？ 訂正0.15ではなく0.1にならないとおかしいですが 訂正stepが0.05なので0.1にならないとおかしいですが <input type="range">は、何かの「大きさ」や「速さ」の調整など（たとえば音量やフォントサイズの調整）、ユーザーにざっくりとした数値を選んでもらうときに使いましょう。
間違えられると困るような厳密な数値を入力してもらいたいときはtype="number"の使用を検討するのが良いでしょう。 200段階あるのにマウス操作前提で幅100pxは狭すぎじゃないでしょうか マウスで狙って0.5pxポインタ動かすとか無理だわな htmlファイルに画像やcssファイルを含ませる事ができるみたいですが、こういう形式は一般的ではないのでしょうか？
ページを保存しておきたいのです。 chromeじゃあるか知らないけれど
firefoxのアドオンにSingleFileというものがあって
それを使うと画像なども変換して1ファイルとして保存ができる そうです。それ使ってるんスよ。
他の環境に持っていくと開けないのかななんて。 作ったhtmlを試しにchromeで開けば表示できるよ
画像データはbase64でエンコードされたバイナリデータでHTMLの中に埋め込まれるので
HTMLファイルのみでいい
もちろんそのHTMLファイル自体は画像ファイルなどの分、ファイルサイズが大きくなってしまう
MDN データ URL でぐぐれば解説がのっている SingleFileZって機能拡張だと、生成したhtmlファイルはzipのハイブリッドになってて
それを解凍した中にあるhtmlファイルを開けば、どんな環境でも見られるはず どうもです。
ファイルが分けられている場合、正確に保存できなかったもんですから。。。 htmlで下位に属するセレクタに対して、全て継承するような書き方は駄目なんですか？
#header{}
#header .title_logo{}
#header .title_description{}
headerタグの中にtitle_logoとtitle_descriptionがあります。
sassだって以下をコンパイルすれば上記のようになるわけですよね。
#header{
.title_logo{}
.title_description{}
} 数十バイトやぞ
どんだけ書いても適当な画像1枚分いくかいかないか vscodeのアウトラインを分かりやすくする目的でこう書くのは悪くないんでしょうか？
ただ、それだけのためですが。 >>348
画像データをbase64 形式で、HTML 内に埋め込むと、
データのサイズが大きくなるので、大きい画像はダメ
ちょっとしたアイコン・SVG などに使うもの >>355
BEM(Block/Element/Modifier, MindBEMding)を使えば？
BlockとElementはアンダースコア2つで区切る
block__element
BlockとModifierはハイフン2つで区切る
block--modifier
ElementとModifierもハイフン2つで区切る
block__element--modifier >>362
thanks for your comment!! FLOCSSの思想が@importから@useへの移行でメンテがめんどくさくなってきた
BEMそのものは使えるから偉大だと思う >>362
<footer class="footer">
<div class="footer__inner">
<div class="footer__inner--title">
サイトタイトル
</div>
</div>
</footer>
.footer{}
.footer__inner{}
.footer__inner--title{}
こんな感じでおｋですか？
.footer__innerに関してなんですが、footer__footer-innnerみたいにfooterｇが重複する書き方は望ましくないんでしょうか？
.footer__footer-inner--footer-title
こうなっちゃいますもんね titleはfooter__innerのモディファイアではないやろ
普通にBEMについて調べろ 確かに、@use は、めちゃめちゃ難しい。
複雑すぎて、何を言ってるのか分からない
挫折する香具師が多そう >>366
基本的に、フレームはブロックとエレメントで定義するって感じですかね ワードプレス未使用、アフィ以外の別サイトへのリンクで
aタグのtarget="_blank"の脆弱性について、多くのブログ等では
最近のブラウザはrel="noopener noreferrer"属性を持っているがつけておくのが無難
とのことで、まだ見つかっていない脆弱性は別にしてこれで先ずは安心でしょうか？
現時点でこれでも危険ということはありますか？ そういうの考えるの面倒くさいから別窓リンクは辞めたわ
スマホだと別窓あまり意味なくないか？ bemでは必ず親を継承しないといけないんでしょうか？
例えばcontainerの中にはmainとsidebarを入れる構成はよくあると思います。
そうなると、container__main,container__sidebarという名前になってしまいます。 SASSで管理がしやすい名付け方法だから
自分一人で管理するなら自分がやりやすいように
好きに付けたらいいんじゃないかな？ >>372
なんでスマホ限定なんだ？
それにいつの時代のブラウザかと >>377
今どきスマホからのアクセスが大部分だからでは
別窓だろうが同窓だろうが左にスワイプすれば戻れる htmlなんですが、インデントしすぎると見づらくなるんですが、何階層までという決まりはあったりするんでしょうか？ 今の時代、px指定することはなくなったんですか
>>380それだと見づらいので div#abc, #abc では、どちらが良いの？
#abc で良いと思うけど、
なぜ、div#abc を使うのだろう？ 一応詳細度が違うが
そもそもidやclass以外にcss書くのダメコードだと思ってるからわからん
やる人はそのidがなんのタグかのメモのつもりとかじゃないの div#abc みたいに、div とか余計なものを付けると、
少しだけど遅くなったり、間違う可能性も生じる
/* div#abc */
と、メモは、コメントに書いておけば良いと思う >>387
そういえばCSSのセレクタの付け方で表示速度が変わるとかあったな
今のスマホやPCでも表示速度変わるんだろうか？
もう気にする必要はないくらい速くなってそうよね >>378
それは意図と違うだろ
スレッドが別になるんだよ
それに世の中にはパソコンというものがあってだな(ry
そもそも脆弱性のことを理解してる？ >>388
今の時代の機種ならそんなものを気にするレベルで表示速度には影響しない
むしろ通信速度の環境の方から考慮すればいい 高解像度用の大きい画像を用意して軽くするために圧縮して…
って上手くいえないけどなんかすごく変な手順な気がする 解像度とサイズは別の概念だからな
サイズ最適化はしたごしらえみたいなもの SASSってわざわざcssに変換してアップロードするの？
便利そうだけど手間かかるよね
ブラウザはなぜSASSを解釈してくれないんだろうか VSCodeでSASS書いて、保存時に自動でCSSに変換するようにしとけば
プレビューにもすぐに反映されるから、そんな言うほど手間じゃない そのまま上げてブラウザ側でjavascriptのライブラリ使って変換することもできるけど当然描画が遅れる等のデメリットの方が大きいので普通はやらない
今ならsass/lessのいいとこどりのstylus langもええで >>396
VSCode使ってるけど、正直知らんかった VSCode の拡張機能・Live Sass Compiler を入れると、
確か、同じ作者のLive Server も入る
Live Serverは、PC 内にサーバーを立てて、そこからHTML を送るから、
ローカルファイルのアクセスにならないので、CORS を回避できる
詳細はプログラム板にある、VSCodeのスレで聞いて 全然手間じゃないよインストールするだけだし
おれはDartJS Sass Compilerに変えた コンパイル環境作るめんどくささが5なら
sassにすることによるコーディング効率化は5兆くらい sassするにはルビー入れる必要があるって見てやめたわ vscodeの拡張でやるならrubyなんかいらんよ >>405
エディタの拡張でもgulpでもpreprosでも好きにせえ フリーランスで10万以上稼いでいる人は上位10％くらいですか？ Ruby SASS は、もうない
C++ へ移植された >>408
中学生の趣味ブログなら頑張ったらそれぐらいいけるかもね 副業で、フリーランスで月10万以上稼いでいる人は上位10％くらいですか？
本業でも月10万以上稼いでいる人は15％って聞いたんで。 スレちがいの話ばかり
もっとえっちてーえむえるとしーえすえすの話をしてくり >>408>>412YOU達面白いから本当の事は何も書き込まないことにするわ 内容物の文字数の制限ッテできますでしょうか？
overflow hiddenで切り取るくらいですかね。 こんにちは。
Javascript と そのフレームワークを勉強したいと思います。
フレームワークは
・JQuery
・Vue
・React
の中のどれか一つだけを まずが勉強すれば良いと思うのですが、その理解で良いでしょうか。
（たとえば、JQuery と Vue の両方を同時並行で勉強しないと理解できない・・・ということはないでしょうか）
このへんが良くわからず質問してしまいました・・・ jQueryは古典過ぎててPromiseみたいに重要な部分はJSの仕様に取り込まれた
VueとReactはどちらも人気だから好きに
海外では強いFacebookだからReactのほうが生き残る可能性は高いのかな？ >>417
フレームワークを勉強よりもまずその前の基礎が分かってないとな >>418
ありがとうございます！
Javascript を学習しつつ、 Vue または React のどちらか一つに取り組もうと思います。
>>419
>>420
ありがとうございます！了解です。 <input type="text">で半角入力に強制的に切り替えるにはどうやればいいんですか？ カラムのサイズに関して
デバイスのサイズが色々なのでサイズ固定は良くないよと聞きます。
vwを使った指定がいいと聞きますが、具体的にどうやるんですか？
100vwいっぱい似表示されると、ワイド画面では見づらいサイトになります。
ですから、max-widthはpx指定が必要かなと思います。
また、サイドバーとメインカラムは%指定しているのですが、これらもvwで指定するのですかね vw使うのはwidthじゃなくて
sp時のフォントとかじゃ？ そうですね。ワイズに関してです。
フォントにはremを使おうかと。
rootにだけフォントサイズをpxで指定して、以下はremという感じですかね。 そういやvw使ってデザインするなら
viewportをwidth=device-widthにしないで
width 500pxとか好きな数字にしてpxでデザインした方が楽なんじゃないかと思いながら
思考停止でwidth=device-widthを使い続けてるわ >>422
確定された方法は無かったと思う
独自拡張でime-modeという手段がIEには用意されていたが現在は廃れて機能しなかったと思う >>423
何言ってるかわからんからjsfiddleなどで例を出してくれ
っていうか>>213か？ >>426
やってみればわかるけど根本的に表示が違う viewportをwidth=500pxにしたとすると
1vw=1%=5pxじゃないの？ 横から似たような質問だけど
PCファーストのレスポンシブで
img{width:800px}
メディアクエリで
img{width:100%}
とやってきたけど
メディアクエリに書かずに
img{width:800px; max-width:100%}と書くほうが今風なの？
行数減らせるならこれで良いと思うけど、これのデメリットって何かある？ imgにwidthを数値指定してる時点でオエッてなる >>428
自分でも何言ってるかよくわからないですね。
コンテナ幅をpx指定することは今どきはないと聞きました。
であれば、どうやって指定するのかなということです。
ワイド画面では横長になりますからmax-widthの指定は必要でしょう。
だったら、最初から1000px前後で固定でいいんじゃないかなと。
https://ideone.com/pWULZO >>417
まず、jQuery, CSS Selector から学ぶ
Vue.js, React は、VSCode, Node.js, npm/yarn, webpack/babel, package.json、
圧縮などの、asset pipeline・タスクランナーも必須で、
プロジェクトを作る、テンプレート・フレームワークだから、
軽く、jQueryの数十倍は難しい！ vw は、Line みたいな低レベルなサイトが多い
画面の95% が真っ黒で、真ん中に画像が1つだけある。
そして、どんなに拡大しても、サイズが変わらないから、見えないまま
これが文字なら、小さくて読めないまま
絶対に拡大できない >>436
8の倍数とか今時はどうとか訳わからん知識を仕入れてくるのをやめたほうがいいよ
根本をわかってないから >>439
そうですね、もう適当にやります。
主要なサイトは1000pxくらいで固定しているところが多いみたいですね。 >>436
>コンテナ幅をpx指定することは今どきはないと聞きました
そいつをここに連れてこい html、css、javascriptを学びたいと思っています。
今は独学で勉強中なのですが、参考書だけではわからない部分もあり
4月ころから始まる職業訓練に行こうかなとも迷っています。
独学でも会社で通用する技術を身に着けられるものなんでしょうか。
それともやはりスクールなり訓練なりを受けた方が良いのでしょうか。
諸先輩方のアドバイスを頂ければ幸いです。 当然独学で十分
なぜなら昔と違ってネットや動画でありすぎるから
それでダメなら向いていない >>447
返信ありがとうございます。
貴重なご意見、これからの参考にさせて頂きます。 >>437
アドバイスありがとうございます。
VueやReactが必要なケースは限られていて、ほとんど（特に小規模なもの）の場合は jQuery で足りると理解しました。
ちょうど年末に図書館で借りた「jQuery 最高の教科書」という本が手元にあるので 目を通したいと思います。 職業訓練だと一応仕事の斡旋もしてくれるから
いけるなら行ったほうがいい
あと独学だと向いてる向いてない気がつかない場合もあるから
実際働いてやっぱ向いてないで辞めるやつ
ほんと迷惑なんで (´･ω･`)･ω･`) ｷｬｰ
/ つ⊂ ＼ 怖いー HTMLが全く使いこなせていないのですが、勉強方法として「自分が真似したいと思う他人のHPのソースコードをよく読み込む」というのは効果がありますか？ >>450
取り残されるのではない、しがみつくのだ >>450
了解です。
とりあえず JQuery を使えるようになって、少し遅れてVueまたはReactの勉強をしたいと思います。 Jqueryって入れすぎるとサイト重くなるからCSSでできるならCSSで、JavaScriptでできるならJavaScriptでって分けなきゃ行けないんだろ？
極力JQueryは入れないほいがいいって >>458
なるほど。
ということは まずは（可能であれば） Bootstrap 等で済ますことを考えるほうが良いですかね。 jQuery を使わず、素のJavaScript で作るとバグるだけ。
開発時間も掛かるし、低品質
うまい・安い・速いの逆。
まずい・高い・遅い
Bootstrap, Bulma, TailWind などもそう。
これらを使わず、素のCSS で作るとバグるだけ。
開発時間も掛かるし、低品質
開発時間を幾ら掛けても、低品質のままで保守できない。
絶対に高品質にならない >>461
自ら無能ですって言ってるようなもんだなそれ InstagramやTwitterのハッシュタグ検索の結果をサイトに埋め込みたいんだけど
やり方あるのかな？ 質問していいでしょうか？
今、htmlを書いているのですが、ヘッダの下にあるはずのものが中に入り込むのですが
どうしたらいいでしょうか？ 戸締まりとhtmlタグの閉め忘れに用心するのは
昭和から令和になっても変わらないよな 要素名が連番になってて
<div id=“unit-001”>〜
<div id=“unit-002”>〜
<div id=“unit-003”>〜
unitって頭のついた要素名だけに
何かしたい時って疑似クラスでどうにかならない？
chiidはナシで 全ての行を中央揃えにしたいのですが、一々HTMLでセンタリングするのが面倒です
CSSでまとめて中央揃えにするにはどうしたら良いですか？ <div class="toc">
<div class="title">もくじ</div>
<ul class="toc-ul">
</ul>
</div>
<div class="content">
<h2>header2</h2>
<p>本文本文本文</p>
<h2>header2</h2>
<p>本文本文本文</p>
</div>
javascriptでtocをつくてるです。
content内のヘッダーをqueryselectorでとって、idをつけてます。
その後liタグを作り、toc-ul内に入れとります。
liタグが無い場合、tocとtitleとtoc-ulを非表示にするという処理はCSSで出来ますでしょうか？
headerがない場合はtoc自体を挿入しないというやり方の方がスマートですかね？ 非表示にする際は、.invisible とか、何かクラスでも付ければ 回答ありがとうございます。
子要素がない場合、親要素を非表示にするという処理部分はjsでしょうか？ JavaScript で、visible/invisible のどちらかのクラスを付ければ？
.visible { display:block; }
.invisible { display:none; }
<div class="abc visible">見える div</div>
<div class="abc invisible">見えない div</div> display:blockで表示/非表示に使うと
ブロックレベル要素（改行される）、のなんとかならんの
名前からしてvisibility:hidden使いたいのにこれもまた変なオマケがついてくるし >>471
おおIDでやればいいのか！
ありがとう https://patriot.futene.net/work/imsosad/index.html
大変図々しいのですがこのページのコードをどう書いたら良いか教えて下さい。
見出しの「I'm so sad」からバックする「戻る」までを太枠の中に収めたいです。
また、動画は「更に精進していきたいです」〜「戻る」の間に入れたいです。
コードに書いてある通り、太枠内の余白はwidth:1000px、padding: 10px 50pxくらいが良いかなと思っています。
初心者の為、コードを弄っている内に収拾がつかなくなってしまいました........
勝手申し上げますが、何卒宜しくお願い致します。 スマホから見ると動画は「更に精進〜」から「戻る」の間に収まっていますが、PCから見ると収まっていません。 wpならcocoonなどを使うのが普通なんでしょうか？
これこれで操作を覚えるのが大変そうなんですが。
html css php出来れば自在にカスタマイズ出来るし、どちらがいいんですかね。 >>484-485
10年以上前の古い書き方だとかclass名がおかしいとかレスポンシブ化は？とか、色々とツッコミどころ満載だけども
とりあえず、必要最低限だとこんな感じ？
https://jsfiddle.net/4mb6Lzq2/
新たに枠で括りたいところはdivで括って、元々あったpと同じスタイルにして、枠内のpを適当に幅調整して、文末に<br>を追加
動画部分は便宜上、少し端折ってるけど元のコードから変えなくてもいい こういうわきまえてる感じの質問者の人は好感度高いわ
きっとモノ作りが好きなんだろうな
小説書いたり曲作ったりいい趣味やんな
変に色気だしてwebもわかるんだぜ的なサイトより手作り感が好感持てるわ そのサイトいいな
2000年当たりの個人サイトみたいで懐かしい >>489
親切にファイルを共有して下さりありがとうございます！
今弄っている最中なのですが、自分が直したい部分を直せているので理想に近付いている気がします。
「I'm so sad」「戻る」の部分だけ中央揃えにしたいのですが、どうすれば良いでしょうか？
<p class="text-align:center;"></p>で括ってあるのですが何故か左揃えになっています >>490
駄作しか作れませんけどね………
>>491
完全に2000年代のHPですよねｗ >>492
classは、デザインを指定したりするための分類名を割り当てるのに使うものであって
スタイルを指定するためのものじゃないので、CSSの方でpにtext-align:center;を
追加するか、HTMLの方でclassの記述をstyleに書き換えてみてください
https://jsfiddle.net/Lwcgtq54/ >>494
無事できました！本当にありがとうございます！ >>493
flashバリバリ、jqueryで動くグニグニして
結局1周回ってシンプルに戻ってくるから、これで大丈夫
でもおまえさんはもうちょっとhtml勉強しる スクロールさせるとスクロールしないでアニメーションし始めるiPhoneみたいなサイトほんとイライラする あぁいう系はデザイナーやプランナーのオナニー博覧会だからなぁ >>484
Ruby on Rails のレスポンシブ対応では、Bootstrap がほとんど
他には、Bulma, TailWind など たいてい、アニメーションするようなサイトは、
画像などのダウンロードサイズが大きいのを、気づかれないようにするため うねうねグリグリ無駄に動くサイトってその機能で多めに料金取れるとかお客さん喜ぶとかなのかな
背景で画面幅いっぱいに動画が強制再生されるページも嫌だ <table style="width:300px;background:#00ffff">
<tr>
<td>aaa</td>
</tr>
</table>
<div style="position:fixed;left:200px">bbb</div>
PCで横スクロールするとbbbの位置が固定されますが
F12キー押してスマホモードにするとスクロールしてもbbbが固定されません
どうすれば固定されますか？ エミュレータで固定されないからといって
それが何だというのだ :root { overflow: hidden; }
body { overflow: auto; margin: 0; height: 100vh; height: -webkit-fill-available; }
とか ChromeのDevToolのElement Toolの検索でHtmlはShift+F(Windows)でやるのだけども、
Stylesの方はどうして検索するの？ htmlやcssをカプセル化することはできますか？
それができれば他人が作ったコードとidやclassが重複しなくていいと思ったので cocoonとか使うとカスタマイズが余計めんどくなりますか？ >>517
最初cocoonだったけど、こんなんじゃ何も表現できないってなって独自テーマ作ったよ wp始めたての時はcocoonすげえって思ったけど
3ヶ月経ったら自分でfunctionと共にテーマ作ってたわ >>515
SASS が、グローバルな名前空間を使う、@import を廃止にして、
スコープのある名前空間の@use に変える事にしたから、すごい影響がある
難し過ぎて、多くの人が脱落するのじゃないか？ 脱落してくれたら飯の種が増えるがそうはならんだろうなあ >>516
つまりjavascript使わないとできないってことか cocoonとか余計めんどく感じてきますよね、、、 cssで変更しようと思ったらメニューで用意されているとイラっとくるcocoon vscode以外のエディタでおすすめありますか？
必須なのはインテリセンスですね
emaxとか使えたらかっこいい
>>526
やはり自作します
大まかにイメージ作るのには便利そうです cocon触ってきましたけど、結局、コクンカスタムしたいとなると、色々いじらないといけないですね。 >>446
もう見てないかもしれないけど、俺は職業訓練上がりでコーダーの派遣やってる。
>>447の言う通り訓練では調べれば出てくるような基本のことばかり学ぶから、確かに独学でも出来ないわけではないだろうけど、
調べて分からない部分もあるっていうんなら訓練行くのもいいんじゃない
俺も自分でイマイチ理解しきれなかったこととか、細かいデザインで悩んだこととか聞けたから、行ってよかったと思ってるよ
ただ職業訓練に来る人って給付金目当ての人も多くて、やる気ない人とか子供みたいな人も多くてビックリした、ストレス溜まるかも
最後までポートフォリオ完成まで持って行った奴は2割、やる気なし理解できてないポートフォリオ未完成4割、途中で脱落4割
受講は無料だし俺も給付金貰ってたからそこは我慢してやってた、金あるならスクールのほうがまだ質の高い学習できるかもね
仕事の外旋はコロナ過ってこともあって無いようなもんだった、でもポートフォリオのアドバイスとかは貰えたからまぁ就職の役には立ったと思う
訓練とかスクール上がりの奴は信用出来ないって人もいるし、独学よりは訓練スクール上がりのほうがっていう人もいる
就職難易度はポートフォリオとかも重要だと思うけど、やっぱ年齢やね… サイトのバランスというのは、フォントサイズと余白で決まるのですか？
テキスト主体のサイトになります。 客観的な基準が示せない（つまり主観が入る）ような質問には答えようがないんだわ はい。
開発者ツールでcss適用後のフォントサイズは調べられないのでしょうか？
vivaldiなのでchromeと同じです。 >>532
トップページ（レスポンシブ）のコーディングにどれくらいの時間かかりますか？ >>539
cssの変数定義ってそのままファイルに残っちゃうのがね
ファイル容量的にsassからcss吐き出した方が有利だからでは？
cwv対策にcssファイル小さい方がいいしね jsからcssに数値渡したい時は使うようにしてるな
styleを書き換えずにcss変数を書き換える
元のcssは上書きされない ブログカードのflexでのデザインについて
ブログカードを包む要素は.wrapperです
以下のようにブログカードを２列にしたいと思います
■■
■■
■■
wrapperのwidthは640pxにしています。
ブログカード同士の横の余白は32pxにしたいです。
640-32/2として、space-betweenで並べれば中央に余白が出来ます。
こういうことをサクッと出来る計算とかないでしょうか？
wrapperの幅が変わることを想定しています width: calc((100% - 32px) / 2);
だけど2列固定ならgridの方が簡単
wrapperに
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
するだけ >>545
レスポンシブにはしますけど、スマホでもpcでも2列固定ですね
ありがとうございました >>545
すみません、これだとコンテナからはみ出ますね
調べます Gridのfrってなんの略？
ググったら
>外径を表す単位でフレンチと読みます
って医学関係の用語が引っかかる >>539
くっそー、、いつの間に出来てたんだ。。5年前くらいになんで無いんだよって思ってたわ
IＥ未対応ならまあ無理だったが。その後はscssで対応してた
今後はこっちつかう。scssもjQueryと同じ運命ただるだろう。サンクス >>551
ありがとうございます
これでまた一歩、CSS Gridを覚える気力が湧きます ブログカードの高さというのはheightで固定するものでしょうか？
ありがちな方法を教えて下さい。
ブログカードの中に画像と、記事タイトルと、投稿日などを含めるかと思います。
画像
記事タイトル
投稿日
と言った並びになることが多いと思うのですが、ブログカードを固定するのか、これらの内容物の高さを固定しているのかよくわかりません。
参考にしているサイトを調べてみたんですが、ブログカードも内容物に対してもheightの指定が見当たらなかったです。
でも、カードの高さは揃っています。
https://arrown-blog.com
ここっす flexで、並んでるやつは高さが揃うようになってるだけ >>532
レスありがとうございます。
ご親切に詳しく教えて頂き感謝です。
実はご指摘頂いた有料スクールも選択肢に入れていて、
独学をもう少し進めて不明点がぬぐえないならスクールに通うか、訓練校に行こうか、
と考えている次第です。
いずれにせよ決断はもう少し様子を見てからになりそうです。
大変参考になりました。
ありがとうございました。 金かけて行くようなもんじゃない
やりたいことググればすぐに上達する
逆に何がしたいか目的がない奴は金かけても無駄金になるぞ YouTube で有名な、雑食系エンジニア・KENTA の有料サロンの、
Ruby on Rails 初心者用コースには、3千人が参加しているけど、
確か、HTML, CSS/SASS, JavaScript は、Progate・ドットインストールだったかな？
動画を参照して
KENTAは、200万円の学校をぼったくりと言って訴えられているw
マコなりの学校は80万円とか？ >>557
スクールは金の無駄だからやめとけ
その金を作業環境やプログラム、デザイン系の専門書
またはアドビCCに費やした方がマシ
職業訓練校なりスクールなりどっちでもいいが
コーダー1本で仕事なんてできないから
どのみちプログラムやデザインの知識が必要になってくるし
まったく素人から始めるなら
そのための専門書が年間10万近くかかってくる 焦ると学校の餌食になる
お笑い、声優、youTuber、プログラムなどスクールが市場にできるということはそういうことだ
ネギ背負った夢見る鴨が鍋に自分から入るのが養成スクール 2008年ぐらいのphpを見てたら
html内のstyle/cssの前に
/*<![CDATA[*/
とかあるけど、これは何？ブラウザへのおまじない？ >>562
後ろのどっかに/*]]*/があるはず
CDATAセクションでググって >>556
flexだと自動的に揃うんですか
ブログカードは固定したほうがいいですか？一般的に 同じヒエラルキーの要素がいくつか横並びするなら
高さは揃ってる方が見映えいいんじゃね
ブログに限らず 最初は人に教わる環境は必要だと思うぞ
1人だと頓挫するから鞭売ってもらう必要がある
教科書やネットに載ってない重要な事はたくさんある
それと参考書やﾈｯﾄが人に現場で使わない無駄な情報が多すぎる 可変しやすい記事タイトル部分部分だけ切ることにします
文字数制限ならoverflowhiddenなり CSSが次から次と新しいの出してくるけど
リリース情報とかどこでチェックしてる？ 画像の大きさにブログカードを合わせるのか、ブログカードの大きさに画像をあわせるのかどちらなんでしょうか？ >>557
ちなみに年齢にいくつぐらいなんだろう？
年齢が高いのなら未経験は給与は下がるだろうから折り合いつけ無いといけないよ
年齢が若く就職根ざしてるなら訓練校も悪くなかったよ
学校によるんだろうけど学校に企業説明に来てくれる企業もあって
家で悶々とさせているよりは就職を考えるときのハードルも下がった
ただし他の人も行ってるけど学ぶ姿勢がゆるい人も多いから
それに影響されずに積極的に授業外でも課題やったり質問していく姿勢持ってたら悪くないと思う
何より悩んだ時に人に聞ける環境は貴重だと感じた >>573
では枠が最初ですよね。
枠に合わせて画像を縮小させることで、画像のアスペ比が崩れる可能性はありますが、その点はどうしてますか？ >>576
画像の縦横比を揃えるか、object-fitか アイキャッチがない場合の表示方法ってどうしてますか？
ブログサービス問わず使える方法といえば、背景画像の設定くらいしか思いつかないのですが まあ画像じゃなくてもいいですね
アイキャッチないです、という表示を出来れば
positionなど使ってみます >>563
亀レスすまんです
たしかにこのphpのhtmlタグにはxhtmlと書いてあるから
CDATAの中にある文字列はエスケープせずにそのままコードとして受け取ってくれ、みたいな感じ？ ブログカードをデザインする場合、左の赤ボックスと右の黒ボックスはどのくらいの比率にしますか？
赤は固定、黒はflex-grow:1;などで目一杯伸ばしてみたんですが、これだと小さいデバイスで見た場合に、黒だけ縮み、画像の大きさはそのままです。
画像は縦横比を4:3にするときれいに見えるということで、heightとwidthを240:180程に固定していたのですが、上記の問題があります。
flexで1:3位の割合で割り振るのが無難でしょうか？
これだと黄金比云々は捨てることになりますが。
https://i.imgur.com/wuTRT54.jpg
https://ideone.com/r9tL47 黄金比に縛られると凡庸なデザインばかりになるぞ
あくまで目安だ 自分がどういうデザインにしたいかで決めればいいのに
画像もレスポンシブにしなくていいの？ 教えてちゃんには酷やがその辺のサイト見たらわかることや >>590お前スレタイも読めないの？安価もつけられないビビりキッズ君には酷なことやがw 自分だったら
画像のwidthは％単位、heightはautoにするかな >>588
画像もレスポンシブにしますね。
画像をレスポンシブにする＝黄金比は捨てる、ちいうことになるんでしょうか？ >>592
画像はアイキャッチなので、objectfitを使います。
画像の横幅100%ということは、画像を包む要素にpxで幅を指定することになりますよね？ >>594
はい、レスポンシブ対応なら崩れるわ
正解なんて無いから好きにすりゃいいよ
どうしてもデザインが気になって決めかねてるのなら
自分が気に入った既存のWebサイトの比率を参考にしたらどうかね >>583
PCもタブレットもスマホも全て画面が縦横比同じならわかるけど
現実は違うのでそこに同じ比率を保とうとすると無理が出るのは当然。（しかも1：1.6なんて無謀） >>597
横長（PC）用のデザインに縦長（スマホ）用のデザインを同じ比率でそのまんま突っ込んだらどうなるか想像してみたらいい。
仮に黄金比が美しいと仮定したとしても読みつらいよ。
webはアート作品ではない。 見て美しいね。で終わるなら糞だ。
メディアであり情報提供してアクションさせてなんぼだ >>597
崩れるから質問に来たんとちゃうの？
崩れなくてそれを良しとするのなら、そもそも質問にくる必要ないと思うのだが
あと文字サイズも考慮に入れて考えな >>591
ブログカードのheightはどうやって決めてますか？
autoだと、縦長の画像を使ったときにブログカード全体が伸びてしまうので、どこか絶対値で固定しないといけないですが
>>599
>>600
妥協してやります バカの一つ覚えみたいに何でも黄金比が正解と思ったら大間違いだからな
球体を見ろ。あんなに美しいのに黄金比なんかじゃない。
女を見ろ。花火見ろ、自分のPCモニター見ろ。
全く黄金比じゃない。
周囲のあらゆる条件が揃ってそれぞれ出番となるのだ >>601
max-heightやmax-width使わんの？ >>605
使ってみます
ブログカードのうち、大枠に指定するもんなんですかね？ 数十秒で答えが出るような事は、精査してから書き込みなさいよ
LINEじゃないんだから >>608
優しくねえやつは去れよ
要らねえんだよお前 専スレ持ちのあの人だろうから
専スレのノリで質問しちゃうんだろうね
>>609
君も優しくなりなさんな >>609
そういう優しさ強要の煽りレスって、質問者と同一人物と見なされて
結果、誰にも相手にされなくなるんだけど、そういうのを狙ってるの？
それって質問者にとって全く優しくないんだけど、自覚はある？ >>611
どうでもいいことでスレを汚すお前はどうなんだ
ただの荒らしは去れや このスレはスレタイも読めねえキチガイが常駐して荒らしてるだけだな 質問者が無駄なレスを注意されてるのを
キレて煽っちゃダメだろう >>614
いや、頭ごなしに同一人物認定するのもどうかと思ってさｗ 実際に同一人物かどうかは知らんが、こうなってくると
せっかく作ったブログカードのサンプルも貼る気失せるな >>612
なるほど、忠告が質問者の利益になるというのが
全く理解できないのなら、確かにどうでもいいことだねｗ 画像というのは縮小限界のようなものがあるんでしょうか？
chrome(vivaldi)のモバイルエミュで画面を縮小してくと、一定以下のところで縮小がとまります。
ブログカードは、今試行錯誤中です。 >>609だが俺は質問者じゃないけどな
「どんな質問にも優しく答えるスレ」って書いてるのに一文字も従わず偉そうにしてる阿呆の不細工な顔よ
偉ぶる前にそのデブのお腹どうにかしろよみっともねえな
俺は今日2レスしかしてない
他ののレスは知らん >>610
俺に強要すんなよ
他に注意する奴らがいるだろ
と言ってもそいつは1人だけなんだろうけど >>611
質問者が論点じゃねえんだわ
スレのルール無視でググレカスなんて偉そうにできる立場じゃねえだろ
分かんねえならスレに来るなよ
そういうスレだろここ >>621
LINEやってるか？
ここで質問した方がいいぞ
このスレはキチガイ1人が荒らしてるっぽい
5ちゃんねる運営がクソ過ぎてLINEのURL貼れねえわ
LINEのオープンチャットから行けばいい
オープンチャット「プログラミング初心者の集い」 こうしてどんどん5ちゃんから人がいなくなる
まあ知らんけど ルール厨が1番ルールを無視して、すぐ上の質問にも答えず
偉そうに説教垂れて荒らしてるっていうｗ こんな日本語も読めねえからな
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう 初心者にはLINEのオープンチャットの環境が一番いいよ
基本的にここと違って大人が多い
https://i.imgur.com/VWgZ8y8.jpg そもそもいったい何のためのルールなんだ？っていうね
何をもって「優しい」のか「暴言」なのかは主観によるのに
他人に俺様ルールを強要するような奴は5chなんて向いてない object-fit使うと枠の下に余白ができるんですが、これはなんでしょうか？
アスペクト比と関係ありそうですが、調査中です。
computeではpaddingはありません。
https://i.imgur.com/jvOwgpV.jpg
https://ideone.com/W62DMT >>630
スレの>>1すら読まないお前は5ちゃんねるすら向いてない LINEのオープンチャットやってるから、LINEみたいな質問してる
ってことか。理解した。 >>631
emp_image imgにdisplay: block;かflex;かtable;追加してみ
>>636
質問に答えない人はちょっと黙ってて vertical-align: bottom;でもイケる
img下部の余白問題は過去ログにもある定番のあるあるネタだな
>>631
とりま、これでも嫁
【HTML・CSS】img要素の下に余白ができる原因と解決法
ttps://web-plus.jp/image-20211027/ >>625
lineはやってませんね、、、。というかスマホを持っていません。 >>637
>>640
どうも
display blockで改善しましたが、line-heightが適用されてるってことですよね。よくわかりませんが。 img下部の隙間気になって寝にくい日があったのが懐かしい
5分で寝たわ imgを入れるコンテナにはfont-size:0とline-height:0を入れてるわ 質問です。
メディアクエリみたいな書き方するもので
特定のプロパティを使えるかどうかで分岐できるようにするやつって
どう書くんでしたっけ？ @supportsでしたありがとうございます！
忘れんようにスニペットに突っ込んどこう、、 >>653
ごめん、sが抜けてたね
参考に置いとく
@supports - CSS: カスケーディングスタイルシート | MDN
ttps://developer.mozilla.org/ja/docs/Web/CSS/@supports
CSS @supportsの知っていると便利な使い方のまとめ | コリス
ttps://coliss.com/articles/build-websites/operation/css/css-supports-how-to-works.html paddingに関してです
文字が１行の場合、文字サイズに対してどのくらいのpaddingを取るときれいに見えるんでしょうか？
法則でもあれば教えて下さい。
16pxだった場合、半分の8pxを上下に割り振ってます。 レスポンシブのサイトを作る場合、絶対値はmainやsideと言った大枠のみで、他のpaddingやらmarginはすべてremというやり方もありでしょうか？
面倒なので、楽したい、、、
らくしてきれいに見せたいです 法則や決まったやり方など無い
とりあえず、このシリーズでも読んでみろ
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9 | コリス
ttps://coliss.com/articles/build-websites/operation/design/ui-ux-micro-tips-volume-nine.html >>659
padもmagもfontも全部remだとかで指定すると楽になるでしょうか？ >>662
remならルートを変えるだけで住みませんかね？ あと、px指定だとブラウザのスケーリングが効かないというのですが、普通に効きます。
正しい情報ですかね？ どこ情報か書いてくれ
お前が誤読してるのか誤情報なのかわからん
今までの感じ90%お前の誤読 viewportの話でも混ざってんじゃね？
知らんけど pxでスケーリングできないのはIE6あたりまでそんな糞古い話は気にしなくていい 了解です
>>664
楽にデザイン出来る法則がほしいんです
センスがないからこそ vwで指定するとスケーリング使えなくなりますね
これはやめときます、、、 画像の横幅に基づいて縦幅を決めるなんてこと出来ますかね？
ブログカードの画像の縦幅どうしようかなと。
画像は記事内最初に出てくるものを拾っています。
ですから、毎回同じ大きさ、アスヒではないです。
そこでobject-fitを使ってトリミングしています。
横幅が相対値、縦幅が絶対値だと歪な感じになるので。
https://ideone.com/hNhOPZ
セオリーがあれば imgではなくbackgroundでおいて
positionで浮かせればアスヒ気にしなくてもいけるよ
小さい画像ようにボーダーで枠を用意しておけば誤魔化せる >>672
浮かせるってどういうことですか？
困っている点はimgを包むラッパーの高さなんですが、何を指定してますか？ >>671
画像が同じ大きさじゃないのに、画像の横幅に基づいてコンテナの高さを決めたいってこと？
その説明だとブログカードの高さは記事によって違うことになるけど、それでいいの？ >>675
https://jsfiddle.net/bgegg/au0v8q9m/11/
作りましたが、object-fit効かないですね、ここだと。
>>674
いえ、画像の横幅ではなくて、画像を包む要素の横幅に基づいて、高さを決めたいのです。
上の例で言うと.image_wrapperですね。
image_wrapperの横幅はflex:1;ですので固定値ではないです。 >>676
それだとimgにobject-fit指定できてない
親セレクタが間違ってる >>676
可変する幅に基づいて高さを決めるなら高さも可変になるけど
どうやって幅に対する高さを決めたいの？
アスペクト比？固定値の加算？減算？viweport単位使う？
ちなみにセオリーなんて無いよ？ https://jsfiddle.net/bgegg/au0v8q9m/11/
修正しました
>>679
>>可変する幅に基づいて高さを決めるなら高さも可変になるけど
レスポンシブってそういうもんじゃないんですか？
デバイスのサイズが変わったら、表示されている画像の大きさも変わるのでは。
>>どうやって幅に対する高さを決めたいの？
アスヒのキープですね。
vwってブラウザのスケーリングに対応していないみたいなので、使ってないです。 一個一個の用語の意味が絶妙に間違ってて突っ込んでたらきりがないやつ >>680
> レスポンシブってそういうもんじゃないんですか？
盛大に勘違いしてそうな初心者を相手にしてるから、いちいち確認してるだけ
アスペクト比を固定したい＆IE無視していいならaspect-ratioプロパティ使うか
IE対応させたいならpadding-topで比率指定する定番の方法があるが
アスペクト比はお好みでどうぞ >>680
アスヒってなんやねん、キモい隠キャやなぁ >>682
aspect-ratio使うことにします。 スケーリング後の画像サイズを調べることは可能でしょうか？
computeでは駄目でした
画像のソースにカーソルを持っていくとrenderd sizeというのが出てきますが、スケーリング後もサイズは変わりません
vivaldiになります 可能もなにもComputedの青いとことRendered sizeが
まさに拡大縮小した後の画像のサイズなんだが
あとvivaldiだけじゃなく、せめてChrome、Edge、Firefoxでも
動作確認しような
デベロッパーツールは日本語化もできるぞ 固定幅使ってもレスポンシブデザインと言えますか？
縮むようですけど、ちゃんと。 スマホ対応ですね。
pxの固定幅でもモバイルエミュレータでは縮んでますね。 なんか変なの居着いているのは昔のアイツか新参者なのか ieだとobjectfit使えないですが、だとしたらその都度トリミングしなけりゃいけないのですか。
ちなみに何らかのスクリプトをアップロード出来るサーバはないです。 虫眼鏡で拡大したからって対象物が大きくなるわけではない もう固定幅を使っちゃいけない時代なんですか？
メディアクエリくらいには使います。
ブログカードの画像の縦横はどうやって指定していますか？ ハチバイマンにうっかり助言してしまうと嫌だからコテハンつけてほしい >>695
いちおう、見た目上はデカくなるんですが。 >>698
コテハンつけてくれる？お前の私物掲示板じゃないから >>700
そういうお前も答える時にはコテハンつけろよ？私物掲示板じゃないから ろくに詳しい状況も示さず、ぼんやりした条件しか出さない上に
書き込んでるキーワードでろくに検索もせず、回答も待たず返答もせず
立て続けに質問を連投して、殆ど会話も成立しないんじゃ
誰もまともに回答しなくなるわな 池沼相手にエサやるならまだしも
自分が否定されると別人格持ち出して噛み付くタチの悪さ 固定幅じゃないサイトではvwが重要になるんでしょうか？
ブログカードのアイキャッチの幅で悩んでいます。
縦はaspect-ratioにすることにしました
ieはどうでもいいです >>700
お前の私物じゃないとか言う奴って、自分の私物だと思ってる感あるんだよな >>705-706
おはよう、きょうもしつもんばかりするのかい？ >>704
中立の第三者を装って煽るルール厨のエスパー荒らし君かな？ >>705
何でもかんでも自分で決められないなら
テンプレート探してきてコピペしちゃえば？
ページ全体だけじゃなくパーツもあるぞ？ アイキャッチのwidthをvw指定、px指定してみました。
px指定でもデバイスサイズに合わせて小さくなっているのですが、これはなぜですかね？
>>713
いえ、アイキャッチだけ決まればいいんですよ もしかすると、iphoneなどのデバイスではpx指定の処理が違うんでしょうか
500pxを指定しているボックスでも、300pxの画面幅にしたとき、画面からはみ出ることがないように縮小されるようです >>703
最初は悪気はない初心者だろうと思ってたけど
助言の無視具合なんかを見てると荒らしなんだろうな こいつwordpressで質問してるやつか、今頃気づいたわ ulとliタグを使う
横並びにする
箇条書きの丸記号は表示しない
ulの幅は全liの幅に合わせる
ulを画面の中央に表示する
liの同士の間隔はpaddingではなくmarginで設定する
これらを全部満たすにはどう書けばいいんですか？ 2ヶ月前に勉強始めたばかりの初心者だけど忘れかけだから復習ついでに書き殴ってみた。
まずdisplay: flexなコンテナに複数のulを入れて横並びにすんのかな？
丸記号消すのはliだかulのlist-styleをnoneだったと思う
ulの幅？はflex:1で全部等しくなりそう
ulを画面の中央ってmargin:0 autoでなるらしいけど、横並びにして中央に表示する場合はコンテナのmarginでやるべきなのかな？
listの間隔はmargin-bottom:1rem位でいけそう >>720
だけどなんとか試行錯誤してできました
現在ＰＣ使えないのであとで作ったの書きます 常に自分が主役で世の中自分中心に回ってると思ってる可能性 Googleのマイマップを<iflame>で埋め込んで表示させた時、左のリスト一覧を最初から表示させておく方法はありますか？
左上のアイコンをクリックすると左から出てくるやつです。 ゴメンなさい。スペルミスってる上にスレ違いでしたか。優しい人がいるかと思ったけど去りますね。 >>738
もしもし君は変な○と変なスペースは使わないように よろしくお願い致します
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic&;subset=latin,chinese' rel='stylesheet' />
このソースコードはどういった内容を表している記述なのか教えて頂けないでしょうか
特に「latin,chinese」の部分が気になります
フォントの名前が含まれている事やスタイルシートなど断片的には理解できるのですが…
サイトは英語なのになぜラテン語と中国語が突然出て来るのかが不思議でして https://jsfiddle.net/bgegg/3Lxyj5v4/
レスポンシブ作成中です。
全体幅は960pxで、mainカラムはflex 640、サイドカラムはflex 320としています
これは8の倍数です。
ここで問題があるんですが、gapも可変かつ、8の倍数とするにはどんな指定方法にしたらいいでしょうか？
だいたい、960px幅の場合、32px程度になればいいかなと考えています >>741
Googleが提供するNoto SansっていうWebフォントを使うためのリンク
詳しくはこの辺りを読んでみ
Browse Fonts - Google Fonts
https://fonts.google.com/
Get Started with the Google Fonts API ?|? Google Developers
https://developers.google.com/fonts/docs/getting_started flex-growを8の倍数にして、結局flex-growが2と1と一緒なの草 >>745
想定しているデバイスのサイズが540pxであれば、2:1の場合は360px,180pxとなるはずです。
比率を8の倍数にしているわけではないです。
何が草なのか分かりませんが、、、。 今は写真用意するときに何種類用意するのが多数派ですか
デスクトップ用、2x、3x、モバイル用、webp、avif？こんがらがってきた ヽ(^o^)丿
モバイル用はもう全部高解像度ディスプレイでくくってしまってもいいのかな 2倍で旧来フォーマットとwebpのみ
webpなら軽いからいちいち等倍画像とか作らない >>750
2倍だけにするって決めたら頭が整理できるかもしれない
ありがとうございます
横幅いっぱいのレスポンシブ画像のこととかも考えると頭がモジャモジャしてきて flex-growは子要素の伸びる比率
flex-grow - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow 8倍マンはどうやってレスポンシブ化しようと思ってんだろ？
画面幅動かすとgap幅だけ数px動くのじわるｗ >>744
ありがとうございます。ご教示頂いたリンク先を読んで、何をしようとしているかは理解できました
実際そのページ内にラテン語も中国語もないのにサイトの作者がなぜラテン語と中国語の
サブセットを要求したのかは分からないままですが、調べようがない事かもしれないですね >>755
ラテン語の方は元々含まれてて指定する必要は無いみたいだけど、中国語の方は何だろ？
ヘッダーが各ページ共通だとすれば、他のページで中国語が使われてるとか？
例えば中国人のコメントが書き込まれる事があるから、わざわざ対応させてたりね
まぁ、その辺は想像するしかないから、使い方が分かれば気にしなくていいかも >>755
サブセットをジェネレーターか何かで選んでて間違ってチェックしてそのままとかじゃないの >>756
確かにコメント欄はそのサイトにありますね
どんな言語で書き込まれているか一度見てみます
ありがとうございます、勉強になりました！ >>757
ありがとうございます、もう少し調べてわざわざその言語を選んだ理由が見えて来なければ
間違ってチェックしてそのままの可能性もあると頭に置いておきます webpってまだSafari、iOSが対応してないんでしょ？
なんでそんなの使うの？ >>760
ページスピードインサイトで得点源だから WebP - Wikipedia
https://ja.wikipedia.org/wiki/WebP
対応環境
OS
Android - 非可逆圧縮は 4.0 以降、可逆圧縮は 4.3 以降[11]
Microsoft Windows 10 Creators Update以降
macOS - Big Sur 以降
iOS - 14 以降
ウェブブラウザ
Google Chrome
Mozilla Firefox 65以降
Microsoft Edge
Opera
Safari 14以降 天下のPhotoshopも対応したしこれからはｳｪｯﾋﾟｰの時代やぞ IEが生きてる限り無理なのよ…
そして高確率で偉いおっさんほどIE使ってるという コーダー的にはIEやらSafariはさっさと死滅してけれとおもう webpはpictureでくくるのか
下位互換でimgもくくるのか面倒くさいな スマホに横スクロールバーという概念はないのでしょうか？
@media screen and (max-width: 768px) {
body
{
min-width: 320px;
}
.main{
background-color: yellow;
}
}
このように最小横幅を指定しているのですが、画面を縮小していくとbodyが320px以下になってしまいます。
320pxに達した時点で、横スクロールバーが出現するという挙動似できますか？ >>773
chromeのモバイルエミュレータを使用しております bodyにmin-widthを設定するのをやめよう
ちゃんとコンテナを作ろう そもそも横幅320px以下のスマホを考慮する必要あるのか？っていう 横で失礼
320px以下は意識しなくていいと思ってたけどGalaxy Foldどうしてる？ 320pxは無視するということは、それ以下はレイアウトがぐちゃぐちゃだろうが、どうでもいいということですよね。
上の例でmainに320px指定しましたが、特に320に達したからスクロールバーが出るということはないですね。
全体が縮小されたような感じになります
<meta name="viewport" content="width=device-width,initial-scale=1">
ここの指定に問題があったりしますか？ あとvivaldiで動作確認ってやめたほうがいいんでしょうか？
chrome系ですけど。 webpって画像閲覧ソフトが対応してないんな
マイクロソフトpictureManagerがメインだからいちいちブラウザで表示されるとうっとおしい パワーストーンで有名な
Hariqua(ハリックァ)
by滝日伴則@ioix(アイオイクス)
クチコミ自作自演でGoogle炎上中 >>768
Safariは邪魔だな、コロナより先に死滅してほしいわ align-item centerで中央寄せした子要素の２つめだけ、上付け似できますか？
子要素にmarginを使うという手法しかないのでしょうか？ >>791
align-itemsの設定を align-selfで個別に上書きできる
2つ目の子要素に align-self: flex-start; 1年ぐらい悩んでいるが、1カラムのデザインで
section.hoge(width設定無し) > div.container(pcはpx, spは100％) > h2やp
みたいなので
div.containerにpadddingを指定するか、h2,pなどにpaddingを設定するかどっちが良い？
ぶれて混合してしまう・・ デザインによるとしか
その要素そのものの余白しかつけないよ >>794
コンテナの内側paddingは設定しない派？ コンテナの余白はコンテナのpadding
h2の余白はh2のpaddingというそのままの意味だよ
デザインを見てその通りにコーディングするだけ 一応前提としてrootにbox-sizing:border-boxかけるからpaddingは全て内側ね >>796-797
793だけど、俺のどちらかと言うとそっちのほうが良いと思ってたから
同じで良かったわ、ぶれないように生きよう 入れ子の子のmargin上下が親を突き抜ける、未だに勉強不足で、、食らう
paddingなら安心？ >>793
参考に、Bootstrap の公式ページでも見れば？ #img{
top:ウインドウの一番下より50px分上
}
画像をウインドウの一番下より50ピクセル分上に表示したい場合はどうやるんですか？ position: fixed;
bottom: 50px;
ポジションもあった方が良いかも？ このスレかjsスレかどっちに書くか迷ったけど
<img src="aaa.png" id="test" style="display:none">って直接タグにstyleを埋め込んで書くと
test_element.style.display="";で表示できるけど
<img src="aaa" id="test">
<style>
#test{
display:none;
}
</style>
って書くとtest_element.style.display=""で表示できない
これはどうしてですか？ javascriptで操作した場合のソースを見ると分かりやすいよ
CSSの記述の差し替えじゃないから
display:blockとかinline-blockとか値を指定しないと反映されないよ レスポンシブにおいてbodyタグは特別な意味があるんでしょうか？
画面を縮めていくと、bodyに内包されている要素がbodyタグを突き破ったりします。 突き破ることとbodyをつきぬけることになんの関係があると思ったのか書いてくれ こういう思いつきで脊髄反射で書いたような質問は8倍マンの予感 8倍マンはレスポンシブどうこう以前にまずHTMLの基礎を勉強した方が良い https://jsfiddle.net/bgegg/w8qy47d6/1/
flexなんですが、レスポンシブで縦並びに切り替えたときに、真ん中のgapが機能しなくなります。
幅がなくなります。
これはなぜでしょうか？ 高さの場合、画面高さの指定がないと駄目みたいですね。なぜか >>810
>bodyタグを突き破ったりします。
何それ怖い
ゴムを針でブツっと突き破られるぐらい怖い 8倍マンはHTMLだけじゃなくCSSの基礎も必要だな
heightの初期値もよく分かっていないらしい
分からないことは先ずタグやプロパティの意味から調べる癖を付けた方がいい ×高さの場合
○高さ方向の場合
×画面高さ
○高さ >>822
あるのですか？じゃなくてお前が見つけるんだよ それぞれのタグにどういう要素が入るのかも分からないし
理想となるデザインの完成イメージを示さないと答えようがないよ
今のところ君の頭の中にしかない 参照先チラ見したけど、gapってクラス名なのね
同じ名前のプロパティあるから紛らわしい
で、広げても一応幅あるみたいだけど
あと、flexのショートハンド、flex-basisと混同してない？ 以前の流れを見ると、flexプロパティがどういうショートハンドなのかは分かってる気もするけど
flex-growについてはMDN貼って貰ってるのに、未だによく分かってないらしい >>840
Z隠キャは常にオドオドして自分で手を動かさないからな
「〇〇しても良いんですかね？」
「〇〇ってどうなんですかね？」
が多いから相手する必要なし ここのスレタイ読めないカスは、とにかく誰かに偉そうにしたいだけのクソカスよ
優しくできないくせにスレ乗っ取り
過疎化も気にせず誰かの上に立ってりゃそれでいい
自分が気持ちよけりゃそれでいい
カスだろ？ >>843
返答してくれなくてイライラなキッズがわかりやすくて草 position:fixed;
right:50px;
bottom:50px;
でボタンを画面に固定配置したんだけど
スマホだと横幅が長いページだと横にスクロールしないとボタンが出てきません。
スマホでスクロールしなくても画面に固定配置できる方法はありますか？ HTML5って全くわからないまま終わったみたいなんだけど
今はHTML5より前のHTMLわかれば通じる感じ？
HTML5独自の記法が頭に入らなかったんだよ HTML Standardに名称が変わったけど細かい仕様が変わっただけで
差し当たってHTML5と大して変わらない気がするよ
具体的にどの付近で悩んでるの？ >>850
名前が変わっただけでHTML5からさらに追加されたり廃止されたりしていくだけだぞ 何がわからんか整理しようとしてしらべたけど
http://www.htmq.com/html5/002.shtml
これでいいのかな
今までよくわからなかったのはヘッダ部分
の宣言とが省略されてよくわからなくなってたなあ・・・
メイン文のところは
<> </>表記で囲めば従来通りのHTMLと同じでええんやろなあ ヘッダはvscodeとかならかんたんに出せるから気にせんでええで >>853
ヘッダはおまじないだと思って覚えよう
エディタで保管できるから難しく考えなくていいよ
基本は<> </>表記であってる
あとはタグの増減やタグに付随された意味に注意する事
スタイルの記述はなるべくタグに直接書かずにCSSに書く事
フレームを使わない事だと思う >>849
right:calc(100vw-30px);
というふうにやったけどできなかったです 某所で見かけたけど
ひょっとしてPCレイアウトのままでスマホも表示しようとしてる？
それならスマホ用に段組み組み直すのが先だ 今AサイトとBサイトの2サイトを運用しています。
AとBはそもそもサーバ(会社)は違います。
A) aaa.example.com
B) bbb.example.com
とします。サーバ違いでサブドメインが異なる。
会員制サイトでBサイトにプログラムがありBサイトで動きます。
アカウント作成はAサイトで行いたい。
Aサイトにて<form action="https://bbb.example.com"; method="post">として、
流すのは問題有りますか？起きますか？ Aサイトは自分が運用。Bサイトは知人が運用。
試しに自分(Aサイト)で登録フォーム作ってBに飛ばしてみたら、
アカウント作成プロセスが通りました。 フォームを他サイト・外部URLに飛ばすのは問題のある行為なのでしょうか？ Aの登録はユーザーもできるの？
それともユーザーは触れず自分だけで管理？ 電磁波犯罪被害者の症状
体が異常に熱い
ノドが異常に乾く
異常に疲れる
眠い→場所を移動するか頭の位置や方向をずらすと眠気が一気に引く（目に照射感がないか確認）
スマホを所持していないときは被害が軽減する >>864
Ruby on Rails では、CSRF(Cross Site Request Forgeries)対策として、
get 以外のフォーム送信には、認証トークンを入れているから、
異なるサーバーへ送られたら、認証トークンをチェックできない
同じサーバへ送信してもらわないと、ダメなのでは？ こんにちは。
Bootstrap って色の指定を Primay Seconary Sucess Danger とかで指定すると思うんですけど、もっと中間色を使うことはでいないんでしょうか。 <style>
#box{
width:800px;height:300px;background:#ff00ff;
position:relative;overflow:hidden;
}
#text_set{
position:absolute;margin:0px;padding:0px;
list-style:none;display:flex;
left:-100px;
}
#text_set li{
margin-right:50px;background:green;font-size:30pt;
color:aqua;font-weight:bold;white-space:nowrap;
}
</style>
<div id="box">
<ul id="text_set">
<li>みかんみかん</li><li>りんごりんご</li><li>ぶどうぶどう</li>
</ul>
</div>
このよう場合boxの高さが中身のテキストの高さと自動で同じになるようにするにはどうすればいいんですか？
boxのheight:autoにすると中身表示されないしoverflow-xにしても表示されませんでした。はみ出し禁止なのでoverflow:hiddenは削除できません。 >>864
異なるサイトで認証する、パターンもありました
Ruby on Rails では、OmniAuth を使って、
Google, Twitter など、異なるサイトで認証することもできる 今、htmlとcssを教えているんだけど、
<h3>■あれこれ<h3>
ではなく
<h3>あれこれ<h3> beforeにcontent:"■"
を記述する理由を「あれこれ」をマークアップするから■はあくまで人間用の装飾とは言ってるんだが
見た目が一緒だからいいじゃん的な感じに言われる
実際自分もそうだったけど、なにかわかりやすい言い回しないんだろうか >>882
記号であってテキストの一部ではない
本の題名などで考えるなら、タイトルに■を含んでいるのではない限り外すべきだ とか
まあ
検索エンジン向けにはテキストで入力してしまってもやりようはあるし
contentも空にして四角い図形をスタイリングするのではなく
■を入力してしまったら結局テキストの一部として扱われたりするんだが
わざわざ擬似要素を使うならcontentは空にするわ俺なら width！
height！
background！ いくつかある場合h3見出しの前に一括で設定できるじゃだめ？ >>885に近いけど
「見た目の装飾だから」という話ならコンテントにテキスト入力するのはなんか違うよねという感じはする
画像やCSSで矩形作る労力惜しむならh3内に入れたって大して変わらん こういうのが複数あったら、おかしい
<h2>■あ<h2>
<h3>■い<h3> 俺は気にしないな
んなの入れたところで大した違いはない 見た目だけなら気にしなくてもいいけど
SEOを気にするなら気にした方がいいって話ちゃうのん？ beforeにテキスト入れたとき検索エンジンがどう扱うかは明確には分からんしSEO効果があるかどうかは不明では
SEO意識するならbeforeにテキストは入れずCSSでデザインした方がよさそう スクリーンリーダーにはcontentにテキスト入れちゃうと読んじゃうやつあるしな 初めて投稿させていただきます。
一点どうしても自分では解決できない
問題があり質問させていただきます。
リンクをクリックするとエクスプローラで
指定したフォルダを開く処理を考え
ています。
<a href=file:///\\192.168.***.***\共有\目的のフォルダ target="_blank">保存先</a>
とし、Google Chromeで実行した所
ブラウザー上でフォルダを開いてし
まいます。
Google Chromeで目的のフォルダを
エクスプローラで開きたいのです。
知見豊かな皆様にご教示いただきたく
投稿させていただきました。
よろしくお願いいたします。
23歳OL アクセスしたらエクスプローラーが勝手に開くサイトとか怖いｗ
まあ管理用機能とかなんだろうけど input type="file"
じゃダメなん？ エクスプローラーを開くための拡張かローカルサーバー作らないと無理じゃね？ Photoshop 23.2（2022年2月リリース）でWebP保存の新規能を実装 普通とは？普通ではないとは？
もう少し詳しく説明を jQueryの.load()を使って外部ページ(AA)を取り込んでます。
<div id="abc"></div>に挿入するとして、
取り込んだ中のページのスタイルに手を加えたいです。
#abc sectionみたいにかければ楽なんですが無理なんですよね。
方法は無いでしょうか？ >>910
例えば
元ページのheaderのbackgroundは赤。
div#abcに取り込んだページ内のheaderのbackgroundは青。
にしたいのです。 >>911
index.html
-
<div id="abc">
</div>
<div class="buffer">
</div>
target.html
-
<body>
<div class="wrapper">
<header>
<p>this is target</p>
</header>
</div>
</body>
index.ts
-
$(function () {
$(".buffer").load("./target.html", function (complete_data) {
const header = $(this).find("header");
$("#abc").append($(header[0].outerHTML));
$("#abc").find("header").css("background-color", "blue");
})
})
みたいな感じ? Firefoxだと文字がクッキリして
Chromeだとアンチエイリアシングというより拡大してぼやけてるみたいな状態です。
知人の知人にサイトを作ってもらったのですが、
知人伝いなのでなかなか連絡来ず。
cssファイルを辿っているのですが、
transform: rotateで微妙に角度付けてるわけでもないようです。
フォントサイズを小さくしてもぼやけ感が出ます。
EdgeでもぼやけるのでChromium系で全部ぼやけると思います。
文字をぼやかせる要素って何ですか？ Windowsのアプリケーションのプロパティ＞互換性＞高DPI時の
の設定を弄っても何も変わらないので、これじゃなさそうです。 もちろんテキスト要素よね？
transformで画像のエッジはボケるのは仕様、というか改善がむずかしい 原因みつけました！
2段div組されてて内側のdivでの指定に問題がありました。
<div class="outline">
<div class="inline">
test
</div>
</div>
.inlineに「border-radius」の値が%指定してありました。
%以外(px, em, vw)だとぼやけないみたいです。
こんなことあるんですね。
>>918
レスありがとうございます。
画像は気になりません。 サイトのアイコンを作っているのですが、高さ20px程度のpngだとぼやけます。
WEBフォントを使う手もありますが、これだとただの文字です。
svgはあまり使われません。
ボヤけをどうにかできないでしょうか？ 例えばwordpressなどでは推奨されていないんですよ。 こんにちは。
CSSフレームワークを勉強しようと思うのですが、Bootstrap 以外で考えると Tailwind でしょうか。
今後 できるだけ無駄な経験にならないものを選択したいと考えています。 >>922
テンプレートに書かずメディアからアップしようとしてるんじゃないだろうな？ >>924
サバのどこかに置けってことですね
にしても、脆弱性云々とは聞きますよ 高さ20pxしかない画像をスマホなどでぼやけるとかぬかしてるとか SVGで書き出されてるFontアイコンなどと比べると
ぼやけて見えると言っている可能性も paddingとline-heightどちらを使うべきでしょうか？
出来るだけline-heightで済ませれば、文字を基準としたem値を設定出来るので、paddingの記述を減らせますよな >>920
表示するサイズが決まっているのならそのサイズに合わせてpngで作れば良い
そうでないならサイズが変わっても大丈夫なようにsvgでどうぞ >>923
Ruby on Rails では、初心者は皆、Bootstrap。
それ以外は、Bulma, Tailwind
皆が、Bootstrapを使う理由は、外部モジュールのHTML の各部品が、
Bootstrap用のCSS も配布しているから
例えば、kaminari というpagenation を使う場合、
Bootstrap用のCSS も配布しているから >>933
決まっていますが、画像が小さいと粗が目立ちますね、、、 >>925
正規版の有名どころのツールで作ったsvgなら脆弱性とか気にする必要ないでしょ
あとは本体編集するかプラグイン入れてsvg有効にするだけじゃん
プラグインなら脆弱性チェックしてくてるのもあったと思うよ https://imgbox.com/Z9EbP8aj
エントリーカードをdisplay:flexで並べているんですが、コンテンツ量によってカードの高さが変わりますよね。
1番と2番目であれば高さは同一ですが、3と4番目は高さが違っています。
この４つを統一した高さにしたいのですが、これは固定値を入れるしかないんでしょうか？
>>937
了解っす ラッパーをstretch
アイテムもflexにしてheight:100% >>931
そうですね。
たしかに。
>>934
ありがとうございます。
参考になります。 >>939
1列目と2列目では高さが違いますよね。
隣り合うエントリーカードの高さには合わせることができますが、1列目と2列めの高さを同じにするのは無理ではないでしょうか？
https://jsfiddle.net/bgegg/ocpnd20e/9/ 絶対同じではなくある程度幅を取って同じに、でよいなら
min-heightをem設定するというのも >>942
>>943
なるほど、min-heightで試してみます
あるいは高さが違ってもあきらめるです アコーディオンなどの実装してていろいろ調べてたんだが
label + inputを使う事例がほとんどなんで
中にはセマンティックの観点から好ましくないとかまで書かれてるんだが
label使わないinputだけでもだめなんだろうか
勉強中で調べた範囲でこうもかけるよねってのができあがったんだが >>947
もしかしてチェックボックスなどをボタン代わりにするってやつ？
セマンティック的には明確に間違いだから素直にbuttonとjsで作ろう >>947
detailsタグとsummaryタグを使うようにはなってきてると感じる detailsとsummary使うとchrome97のページ内検索でアコーディオン勝手に開いてくれるようになったらしいね htmlの基本機能で実装しておくとブラウザ側で対応が進んでいってくれるのはメリットだよね
スムーススクロールの挙動もいい感じ >>948
いや
labelとinputの仕組みからlabel除くだけよ 標準ぽいのあるのか
まあいいか悪いかわらないけどinputの
beforeやafterにlabelを背負わせるだけね 個人的には標準機能として普及するまでは
軽量スクリプトに処理させたい気分
どうもネットですぐに見つかるアコーディオンは
気持ち悪い Bootstrap のAccordion は？
Collapse JavaScript プラグインと組み合わせて、
垂直に折りたたむアコーディオンを構築します クリックやタップを増やすのが嫌いなのでアコーディオン自体苦手
メガメニューでギリ許容 面倒くさいからjavascriptは使わずhoverで開くだけにしてるわ hoverはスマホがなあ
タッチ基準に考えるので
PCはクリック限定になる 意外とこういう需要ありそうな仕組みが
定まってないのね
勉強しててびっくりだわ
コーダーなのでゴリゴリ書けばいいだけなんだが
CSSだけで〜が多いので合わせてたが
うーんって感じで愚痴ってしまった >>955
bootstrapの話はしてないから、ちょっと黙ってて font awesomeのヘッダに記述するCSSなんですが、どこにあるんでしょうか？
6.0用のcssなんですが、発見できませんでした。 background-image:url("https://www.sample.com/blank.gif";);
のような特定の画像スタイルの要素のみ非表示にしたいのですが、
div[background-image=url("https://www.sample.com/blank.gif";);] {
display:none;
}
ではうまくいきませんでした…
どのように書けばいいのでしょうか？？お願いします。 background-imageはCSSのプロパティであって、HTMLタグの属性じゃない
属性セレクタ使うならdivにstyle属性を追加してbackground-imageを指定しておくか
手っ取り早くclass追加するか、それが無理なら後はjavascriptとか？ >>964
htmlは変更できないのでjavascriptでやるしかないっすかねぇ background-imageはあとで重ねがけすれば
そっちが優先されるよね
標準ではサンプルのURLを割り当てるようにしておいて
見た目画像が消えるようにダミーを重ね合わせる
CSS書いてそっちをオンオフしてみたら? .hoge1 {
background-image:url("https://www.sample.com/blank.gif";);
}
.hoge2 {
background-image:none;
} >>966
ポイントは「サイト中の特定の画像を非表示にしたい」というところなんですよ。
どうやってそれを指定するのかなと思って。 >>970
大体はターゲットノードが
classかid持ってるだろうし
もしくはその親が持ってるだろうし
それを足がかりにかけるしかないような >>966
ダミーが挿入される場合はclassを付与するのじゃあかんの？ やり方はなんでもイイよｗ
自分がやりたい事がターゲットにかかるように
指定するだけだし
どうも意図がわからんな >>968がクラスを2個設定したパターンだよ
最終的な結果はhoge2のnoneが有効になってる
あと結果のところをブラウザの
デベロッパーツール(Chromeの呼び名)
などで見てみりゃいい
いじりたいノードを選んでスタイルの
項目見ると重ね掛けした場合は
あとで重ねた方が有効という表示になるから stylishとかで閲覧サイトの特定画像とか広告をCSSだけで消したいとか？
特定のCSSプロパティ値で探せるセレクタなんて無いから1つずつ探し出すしか
簡単なのはbackground-imageが指定されてるセレクタをそのままコピペしてきて
background-image: none;で上書きして消すとかね javascriptで
CSSを動的にいれるか
idかclass名で目的のノードの
styleを自力で書き換えるか >>977
そうですね、閲覧サイトの特定画像をcssだけで消せないかなと。
＞特定のCSSプロパティ値で探せるセレクタなんて無い
これが答えのようなので、jsでがんばります。
ありがとうございました。 2022年の今、960グリッドシステムは幅が足りない？
ほとんどがスマホアクセスだから、960の12分割なんて今時ではない？ ほとんどがスマホアクセスだから
とPCレイアウトのグリッドシステムの繋がりがわからぬ
PCは適当でいいってことならもうカリビアンコムとかみたいにPCサイトはスマホ表示を引き伸ばせばいいよ バックエンド(django)から取得したデータ（csv）を、djangoのテンプレートに埋め込んで？htmlのテーブルとしてブラウザに表示しています。
データの内容に従って、テーブルの行単位で個別の色をつける必要があり、django側で Tailwind のclass属性をhtmlに追加して出力することで期待通りの表示ができました。
ここまではいいのですが、表示データのソートをするため、DatatablesというJavascriptライブラリを使ったのところ、Tailwindの色の表示がおかしくなってしまいます。
Javascriptライブラリを使うことでCSSの情報が書き変わってしまったためだと思うのですが、こういうのはよくあることなのでしょうか。
解決方法をさがして悩んでいるところです。 ビューにCSSをかけて強調したいのか
ビューに表示されてるデータに
CSSをかけて強調したいのか
この差のように感じる 例えば、Ruby on Rails では、
サーバー側で、pagenation にKaminari を使うと、Bootstrap 用のCSS も配布している。
クライアント側で、タグを付ける、jQuery UI のTag-it を使うと、CSS も配布している
だから常に、これらの内容がおかしくならないように、確認する必要がある
他人のモジュールを使うのは簡単だけど、整合性を保つには、
そのモジュールの内容を調べる必要がある
このスレよりも、JS スレか、WEB プログラミング板へ移動した方がよい このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 114日 5時間 45分 32秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
