HTML/CSS のどんな質問にも優しく答えるｽﾚ 46
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 45
https://mevius.5ch.net/test/read.cgi/hp/1601474123/
■関連スレ
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 スレ立てなんてつまらない仕事でも手を抜かず
当り前のようにやり遂げるなんてなかなか出来ないよ まったくスレが伸びないのはみんな休みに入ったからか https://ascii.jp/digital/
こんな感じの3ペイン中央コンテンツ 左右メニューか広告のサイトってよくあると思うんですけど
ここのサイトは中央コンテンツが短くて左右のコンテンツの高さが高すぎることがよくあります。
左右の高さを中央と同じ高さにして(中央の高さはコンテンツによって変動します)
入りきらなかった部分はhiddenにすることってできますか？
後者はoverflow:hiddenでいけるとおもうんです。
weautopagerizeを使ってると左右ペインの高さが高すぎて
コンテンツの終わりまで来てもページが追加されないのです。 アスキーいまこんななのか
PCのデザインひっでぇな インプレスが旧世代だと思ってたらアスキーはもっと酷かったｗ
もしかしてグループ会社？ たしかにひどい設計ですよね
左右ペインの高さをあそこまで取るならコンテンツのページ分けをもっと少なくするべきだし
コンテンツのページの高さがあのままなら左右ペインの表示をもっと少なくしないと
コンテンツの下限より下の広告なんてほとんど見ないでしょって思う HTMLやJavaScriptのタグがまとめられたおすすめのマニュアル本などがあればご教示願いたいです。出来ることと書き方などが書かれていると良いです。 >>13
前スレでも同じ話題が出てたけど
今時の本ならどれでも大丈夫だよ
出来るだけ薄くて装丁のいいやつがおすすめ
それなりに必要なことは書いてあるし
逆にそれで入門できなかったらどの本でもダメだと思う
ただMTML/CSS/JSをひとまとめに書いてるものは
あくまで、さわりしか書いてないと思ってください
本気で書いたら本の幅より厚みの方が大きくなっちゃうので
入門本に書いてあるレベルのことを
自分で何度も何度も反復練習して
ある程度わかった気になったら、オライリーとか
ガチの本を買うといいと思います あるサイトのクラス名で、6桁ぐらいのランダム英数(たとえば dQh8cX)を使ってるところがあるんだけど、これって難読化のつもりなの？
ただ、意味のある文字列＋ランダム文字列っていうクラス名(例えば notice_message_hYk9bGみたいな)もあって、完全にランダム文字列ってわけではない。
アクセスの度にjsで生成してるのかと思いきや一応毎回固定みたい。 >>16
単に人間が書いていないだけなのでは？
難読化ってのは
簡単に読まれたら困るからするわけであって
主にJSでやるものですよ >>16
CSSには名前空間がないから、最近のフロントエンド開発だとクラス名を自動生成するんだよ すみません、質問させてください
○やりたいこと＝自分のドコモ契約uimカード（foma3G契約、いわゆるガラケー）の
”固体識別番号”（iccの後の20桁の数字）が知りたい
○既にやったこと＝自分でサイトを作って、そこに携帯からアクセスすれば
ｉｃｃが表示できるようにしたい
○参考にしたサイト＝ttps://qiita.com/piruty/items/2dc457017f589c1f91e4
ttps://www.nttdocomo.co.jp/service/developer/make/content/browser/html/tag/utn.html
○結果＝失敗。・ガラケーでアクセス⇒ブラウザがjavascriptに対応してないから表示されない
・foma3G対応の古いスマホやガラホでアクセス⇒端末の種類、アンドロイドのversion、
ブラウザの種類は表示されたものの、肝心の固体識別番号は表示されない 固体識別番号を取得するには、utn属性を付加しなきゃいけない…ってのも
他のサイトで見て、
例：
<A href="URL" utn>
<FORM method="メソッド" action="URL" utn> みたいなのを
>>19上側のurl先にあるサンプルページのタグに追加したりもしたみたんですが、やっぱり表示されず…
もちろん、固体識別番号を取得さえ出来れば他の方法でも良いです。 ユーザの行動追跡が楽にできるから全機種に搭載すべきだ！(広告屋 https://play.google.com/store/apps/details?id=com.tamersaadeh.iccid&;hl=ja&gl=US
ICCIDを取得するためのアプリ
これは read phone status and identityという権限を使う
片やAndroid版Firefox
https://play.google.com/store/apps/details?id=org.mozilla.firefox&;hl=ja&gl=US
こちらにはそのような権限はない
つまりアンドロイドの普通のブラウザは
iccidにアクセスできないし
利用しないのでできる権限をとる必要がないということだろう
もちろん、imode対応ガラケーなら可能だろう
javascruptじゃなくてcgiとかでやればいいんじゃないかな >>24
ありがとうございます、無事 ICCIDを取得することができました。本当に助かりました。
>>22
DSDV機スマホのSIM1に3Gfomaのsim、
SIM２にMVNOのデータ通信990円3ギガのsimを挿して
2026年の3G停波まで使うつもりです。
そしてその後はさすがに普通のスマホに乗り換えますが
GalaClientってアプリがありまして、
ガラケーのIMEIとFOMAカードのICCIDを入力することで
ガラケーサイトをスマホから見ることが出来るという優れモノです ガラケーサイトも作らないといけない案件って何だろうか
俺のじいちゃん(90)でもiphoneなのに。
最近pornhubからお気に入りの動画が消えて残念がってたけど・・・ >>27
まぁ当時は浮世絵しかなかったんちゃうかな
知らんけど >>29
60代以上は20代以下よりITへの親和性高い
使いにくいUIのエレクトロニクス黎明期から
今日まで全部使い倒してきてるので
興味さえ持てば理解早くて深いんよ >>31
いやそこじゃなくて
エロ動画を集めてる事を孫にいうくらいエロに関してオープンなんだなって事
昔は隠すのが普通で、誰もいない山にエロ本捨てるくらいだったから うちの爺さんは俺にはオープンだったなあ
おっさんになった今は
爺さんの精力に尊敬の念を… >>32
誰も集めてるなんか言ってないぞ
元はエロサイト見て感染して修復作業をしたら
数日後にまた感染を繰り返して、これはかなわんと思って説明しているうちに、iphoneで見ると安全ということになった。
どんなジャンルが好みかはわからないし、履歴から見ることもない。ただエロ動画を愛する同盟であることは間違い無い typoraについて
https://www.virment.com/add-original-css-typora/
base.user.cssというファイルを定義するとcssを上書きできるんですが、そもそもレンダリングしないようにはできないんでしょうか。
普通のcuiのような感じにしたい どこかでリセット用のCSSでも拾ってきて改造するとか html配下のcssをすべて無効にしたりできないんでしょうか？ CSSを全て無効化ってのが、どういう状態を言ってるのかにもよるな
CUIのような感じとか言ってる時点で、単純に無効化しただけでは
希望通りの見た目にはならんと思うが
だったらMarkdownエディタ使わずに、メモ帳とか普通のエディタ使えよっていうね そうですね
でも、アウトライン解析機能がほしいんですよ
linuxで使えるエディタで 過疎って誰も書き込まないんだから、別にええやん
貰ったレスにもちゃんと返してるんだし
礼さえ言わない質問者よりマシなくらいだわ >>49
マルチっていうか、検討している段階なんだからいろんなスレに書き込むのが必然ですよね？
他人にキチガイとかいうやつは自分を顧みたらどうだろう？ > マルチっていうか、検討している段階なんだからいろんなスレに書き込むのが必然ですよね？
良し悪しは置いといて、それマルチ。 単純にマルチは嫌われるから避けるってのが、古来より語り継がれる2chというか5chの常識
マルチが必然だというなら、5chでキチガイだの煽られるのも、また必然
キチガイというより、ただの無知な初心者
初心者はwineでも使ってMery動かしてろ こういうのが湧いてきて絡まれるから、マルチはやめようなってことか
わかりやすい 他所の会社に就活かけてるのがバレて落とされる人みたい そんなところ今時あんのかね？
Googleだって
他所と天秤にかけられてる前提で話してくんのに >>51
全く必然では無い（少なくとも掲示板等では）
人様に何か尋ねる場合は答える側への配慮が必要
マルチポストするならするで「〇〇のスレ (サイト) から誘導された」とか「〇〇のスレ (サイト) ではこういう回答を得た」等を書かなければ違うスレで同じ回答が連続する問題が起きたり
既にほかのスレ (サイト) で解決済みであるのにも関わらず善意の回答者が回答してしまったり問題が起こる
まぁそもそもこんな当たり前の話はいちいちオレが書くまでもなく少し調べればわかる話
https://ja.meta.stackoverflow.com/questions/2418/マルチポストとはなんですか-何か問題があるのでしょうか
https://ja.wikipedia.org/wiki/マルチポスト
それすらもできない能無しが偉そうに「必然」を語るとか新年早々に笑えるわ 言わんとしてることはわかるけど
5ch程度ではそれほど困ることもないと思うけどな
答えている人たちは
忙しい中時間を作っているボランティアではなく
暇を持て余した答えたがりの溜まり場なんだから
同じ質問が各所に投げられたところで
そこの答えたがりの欲求を満たす餌になってくれるわけで マルチポストをわざわざ調べたり、長文書いてまで絡んだり
このスレ、暇人多すぎじゃね マルチも暇を持て余す煽りたがりの餌になってるわけで
結果、質問にもろくに答えてもらえず、スレ違いのマルチ談義で盛り上がる始末
いくら正論ぶちかましたところで、マルチなんてするもんじゃないという結論にしかならないわな >既にほかのスレ (サイト) で解決済みであるのにも関わらず善意の回答者が回答してしまったり問題が起こる
それ問題か？ >>59
つまりそれはお前が勝手に思い込む「5ch程度」って話
「答えている人たちは忙しい中時間を作っているボランティアではない」
「暇を持て余した答えたがりの溜まり場」
っていうのもお前のただの偏見・感想でしかないわ >>62
解決済みのにも拘らずそれを知らず（無駄な思考・書き込み）時間を使う回答者が生じるのが問題じゃないというのならお前がそれだけ無駄な時間を浪費して生きているゴミなんだろうな >>63
そう？
そんなに達人で
忙しい中
誰かに強制されてここにいて
答えて差し上げてるのん？
そんなバカなw >>65
さあ？
気になるなら統計でも取ってくれば？
バカでないお前がｗ >>65
ボランティアではない = 達人
誰かに強制されている
誰もそんなことを書いていないがどこからその観点が出てきた？ やはりというかマルチ擁護 (本人) はおつむが足りないようだな >>64
既に解決済みであれば質問者にとっては無駄な回答になるかも知れんが、回答者にとっては
そんなん関係ないだろ。
仮にマルチじゃなくても質問者が自己解決したらその瞬間に回答者の行為が無駄になるのか？ >>69
お前が馬鹿なのは理解したから>>58のリンクでも読んでこい
お前の相手するのが無駄だわ >>64
問題があると思ってるならその問題を説明すりゃいいだけなのに
なんで人格攻撃に走るかねぇ 人格に問題があるからだよ
人様の時間を浪費しても何とも思わないゴミがマルチするからゴミと書いているだけ Web制作板の住人って技術的でない話題になると急に活き活きしだすよな >>70
つまりあんたは
>中にはこれを嫌う人もいます。
この「嫌う人」だということだろ？
たいてい、fjでマルチポストが禁止されてた理由も知らないのに
「マルチポスト」という言葉だけ聞きかじったような人だよな。 >>72
頭悪いな。
回答したことが時間の浪費だったとして、他で回答を得ていたかどうかで
それが浪費かそうじゃないか変わるわけもないだろう。 こんな会話を時間の浪費だと感じない時点で、
何を時間の浪費と感じるかが人によってあまりに違うことは明白やん
一律で語ることがおかしいわ >>72
マルチであってもなくても、どっちにしろ浪費じゃね？
こんなところで質問に答えていること自体が
世のため人のためになるような
レアな質問と回答は、ごくごく稀だもの
俺は、回答に間違いがないように調べ直すことで
自分の知識の補強になるから答えてる
って自分に言い訳してるけど
どんだけタメになってるかは怪しいw
何か書き込んで時間潰すための
お題目を質問者にもらってる、てのが本質かも まーだ、やってんのか
普段、全然質問に答えないくせに mark downというのはルール変更は不可能なんでしょうか
例えばh2だったら
## h2
ではなく
\t## h2
としたいです 質問がヘタクソ
pastebinとかに貼ってくれ
・style.css が css フォルダではなく同じフォルダに置いてる
・body タグを閉じてない
あたりが臭い？
ブラウザで開いたら Ctrl+Shift+I 押すかして開発者ツールを開いて、エラーを確認してくれ 「KUJIRA Cafeへようこそ」でググると
たくさん出てきてワロタ。
練習用のデータなのね、書籍の内容を打ち込んでいるのかな？
自分のお仕事ポートフォリオに入れている奴もいるんだがｗ >>82
すいませんガチで入門者なもので…
CSSのフォルダはちゃんと説明通り別の場所に入れてました
doctypeのあとにhtmlを入れるの忘れてたのでそれかな？と思ったんですが
書き換えても何も変化せずでした
htmlのコードは機能してるみたいなぜなのですが何故なのでしょうか
https://pastebin.pl/view/586b5b05
https://pastebin.pl/view/0d86dc05 >>86
@charset "UTF-8"の後にセミコロン（;）抜けてる Syntax error in xxx とか出たら解りやすいのにな・・・・ >>87
色変わりました！
ありがとうございます。 @charset "UTF-8"
body{
background-color: #eeece9;
}
VSCode なら、CSS ファイルに書いたら、body にエラーの波線が付くから、
@charset "UTF-8" がおかしいと分かる
そもそも、@charset "UTF-8" って書く必要ある？
pastebin も良いけど、jsfiddle を使えば？ メタタグってすべてのページにいちいち書くもんなの？
cssみたいに「メタタグ用の別ファイル」を読みに行かせることってできないのかな
できればhtmlとcssだけで。ローカル環境で確認できる手法で。
いわゆる関数みたいなことをしたいんだけど >>94
htmlとcssだけで、とかは無理
他の方法ならググれば色々と出てくる そうかあ？
viewportとか書かないと
しんどいことにならん？ 質問内容が此処じゃなかったら間違ってたらすみません
今HTMLなどを勉強してて通勤途中や職場の休憩中にPCを使って勉強したいのですが今持ってるノートPCが化石で起動が遅くてそれだけで時間が掛かってしまいます
iPadやタブレットでHTMLやCSSのコーディングや勉強をしたり出来ますでしょうか？やっぱりノートPCのほうが良いでしょうか？ >>101
出来るっちゃ出来るが
効率的かと問われればネガティヴだなあ
少なくとも現状では
web界隈の開発環境のメインストリームは
タッチデバイスではなくデスクトップだもの >>102
ありがとうございます
やはりタブレット系だと効率悪いんですね
今あまり金銭面で余裕がないのでタブレットでもと安易な考えでしたが6-7万前後のノートPCがあれば良いのですが詳しくないので宜しければおすすめなどあれば教えて頂けると幸いです 化石のノートって、Ubuntuとかでも重いんだろうか
HTML/CSSの勉強・コーディングの為に６～７万の出費は勿体ない気がする >>101
N予備校でLinuxの入れ方からhtmlの勉強まで一通りできるよ
勉強のためだけに新しいノート買うよりは経済的だと思う >>103
そんくらいの値段のマウスとかでいいんでない？
俺マカーなんであまり詳しくはないんだけど
会社に置いてある安いPCでも
開発に使うツールは一通り動いてた気はする
Adobe系がどれくらいいけるかはわかんないけど
事務用Windowsノート使ってるPMさんとかも
たまにPhotoshopで画像書き出しくらいはやっ
てるみたいだから何とかなりそうではある うちにあるHDDをSSDに載せ替えた7年前のノートPCでも結構イケてる
Win10にしてあって、フォトショとかイラレなんかも動くから、VSCode程度なら
余裕で動くし、起動も余裕で耐えられるぐらいの速さ
でもHDDのままだと使い物にならないので注意な どこまでやるか知らんけどとりあえず4500Uの8GBあたりでもいいんじゃないかな リースアップのsandy i3、2GBを4万で売ってるからお買い得だぞ section > h1
↑
この「>」直後か何かの意味だと思いますが、cssで何と言われるものですか？ >>112
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
子結合子
> 結合子は、第1の要素の直接の子に当たるノードを選択します。
構文: A > B
例: ul > li は <ul> 要素の内側に直接ネストされた <li> 要素をすべて選択します。 メモ帳とブラウザが動けば良いんだから
スペックなんて3万のPCだって十分だろ メモ帳はさすがにどうよ（最後に変なもんくっつく問題は解決したん？bomだっけ）
サクラエディタがおすすめから外れた理由は何だろう、、 sectionにpaddingを設定するのと
section配下のh1やdivなどにpaddingを設定するのが未だにどっちが良いかわからないんだけど、
おすすめはどっち？ こむすび あいこ(78)
子ども3人、孫7人、旦那は他界
正月のお年玉が少し負担が大きく感じている >>117
おすすめはないどこにpadding付けたいか
全部の要素にborderつけてみたら？ インライン要素の中にインラインブロック入れちゃ駄目ですか? >>116
いまいち機能不足というか
やっぱAtomかVSCodeが良いと思う
今のウェブ制作はさほど専門的ツールは使わないので
入門者でもプロに倣うのが
余分な手間がなくて学習に集中できると思う
で、最低限必要なのは
・ブラウザ（スマホ含む
・エディタ
なんだけど、ちょっとやったらすぐに
・ローカルサーバ（docker含む
・中間言語の(コン|トランス)パイル環境
・CLI環境（ターミナルエミュ含む
・バージョン管理ツール
・ファイル転送ツール
あたりが必要になる
このうちPCリソース、特にメモリを食うのが
ブラウザ、electron製エディタ、ローカルサーバだと俺は感じてる
のでPCは、CPUは弱くて良いから
安いメモリをぶすぶすブッ挿せる奴がいいと思うな h1にタイトル文字列を入れて、text-indent: -9999pxして
backgroundでアイキャッチを指定するやり方あるけど、
text-indent: -9999pxするような隠し方するのはgoogle的には見えない扱いになるの？
レスポンシブのことを考えてimgにしたいけど、h1使えないし・・ >>124
text-indent:-9999pxとか、なんで10年以上も前の手法を今更使いたいの？
SEO不利だって噂で使われなくなったのも、５年以上前の話だよ >>125
やっぱ昔の話なのか
むしろ今風なのがどうやって良いかわからない >>126
h1を消してもいいし
<div class="eye-catch"><h1>title</h1></div>
.eye-catch h1 { display: none }
imgでもいいし
<h1><img alt="title" /></h1>
この程度のことで検索順位なんて上がり下がりしないから、好きにやればいいよ >>127
上のほう、悩んだんだけど、
h1{display: none}だと、
先述のtext-indent:-9999px
みたいな小細工と思われないか気になってたけど、
使っても良い？
もうgoogleが賢すぎて、小細工なんて見ずに人間が見た同じ感覚をシミュレーションして判断してそうだよね imgってインラインか
divに放り込んで謎の余白にハマってたわ h2の中にul, liを入れるとまずいでしょうか？
h1はタイトル、h2は説明文みたいなイメージがあります >>138
h1もh2も見出しなのに、勝手なイメージだけで使い途を変えないように
何を作りたいのか知らんけど、そんなことしても上手く行かないと思うよ 項目と説明の関係なら
dl,dt,ddじゃね
h1とかはひたすら『見出し』だから h1がタイトルでh2が説明文なら、h3～h6は何を入れるつもりなんだろうな 今はなき？hgroupで
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
みたいにh2をサブタイトルとして使う方法もあったよねそういえば
>>138のしたいことはこう？
<header>
<h1></h1>
<ul><li></li></ul>
</header> https://i.imgur.com/gakXX5k.png
この"りもーと"をstylusとかのcssで消すにはどうすればいいですか？
.kremote をdisplay:noneしても動かしてもりもーとの文字だけ残ってしまいます >>149
DOMの構造を書き換えるのが早いけど
無理なら、直上のlabelを起点にして直後の兄弟要素を消すとか
label[for="knagasi"] + label {
display: none;
} >>151
消えましたありがとう！
しかしこれを自分で思いつくのはどう考えても無理そう そらそうだろう
木構造を双方向に走査とか、嫌な予感しかない >>153
現状難しい
前にも何度か出てるけど
計算間に合わん fontawesome（などクラス名を指定するだけでスタイルが適用されるタイプのcssライブラリ）で、
:hoverや:focusなどによって別のクラスを当てたいとき、
たとえば「<span><i class="fas fa-cookie"></i>biscuit</span>」のspanが:hoverのときに
「<span><i class="fas fa-cookie-bite"></i>biscuit</span>」と同等の挙動にしたいときなどは、
span:hover > i.fa-cookie::before { content: "\f09b"; /* 「fa-cookie-bite」のスタイルを直接書く */ }
などと直接書くかJavaScriptのマウスイベントでクラス名を書き換えるかになってしまいますか？
せっかく「fa-cookie」や「fa-cookie-bite」などとスタイルが分離されていて
クラス名を指定するだけで再利用できたのに疑似クラスがからむと
直接書くかJavaScriptのお世話になるかになってしまいますか？ iphoneXぐらいのサイズでサイト確認用のAndroidの実機を
持ちたいのですが、何を選んでおけば鉄板でしょうか？
あまりにも多いカメラや5Gなどは必要無いです
メーカー的な鉄板はあるのでしょうか？
予算は2-3万ぐらいです >>157
たまに確認するだけなら買わんでも良いんでない？
実機確認サービス使えば
と思ったけど
個人なら買った方がコスパいいのかな… 安さで選ぶなら7インチのAmazonタブレット
セットアップ少し面倒くさいけど >>156
クラス名だけ書き換えて当該タグ部分を再利用したいっていう縛りだったら
そりゃJavaScriptしか無いんじゃね？ >>161
どうもありがとう
擬似クラスによるスタイルの変更はよくあると思いますが
あらかじめ定義しておくことはできないんですね
その都度指定しないといけないんですね
fontawesomeがこうなっているのも仕方ないんですね >>162
あらかじめ定義、っていうんだったらspanの中にアイコン2つ置いといて
displayでON/OFF切り替える手もあるけどな HTML側に負担してもらう・・・そういう方法もあるんですね
検討してみますありがとう Visual studio codeでHTMLの勉強を始めたんですが
タグを入力すると自動で終了タグ</>が入力されてしまうのですが
この機能をオフにする方法を教えて頂けないでしょうか タグでもカッコでも
閉じてから中身書くようにした方が
幸せになれると思うけどなあ >>166
ファイル -> ユーザー設定 -> 設定
から、auto tag とかで検索すれば出る
あとはAuto Close Tag入れてからSublime Text3 Modeにチェック入れると幸せになれる 回答者の鑑やな。俺ならギャグネタかまして質問台無しにするわｗ @media screen and (max-width: 480px) を使ってスマホ用cssを書いているのですが、top,margin-topを指定する際にpxを使っても端末ごとにデザインが崩れないのでしょうか？
横幅は%で指定してます。端末の横幅は変わりますので%にしましたが高さを調節する際にどうしても%では不可能でした。 >>172
デバイスによって幅はまちまちなんだから
固定値を書いたら画面幅に対する比率は変わるよ
比率を保ちたいなら
vwとかremのような画面幅を基準とした単位を使うといいよ
デザインカンプを作ってからやるようなWeb制作では
vwが主流だと思う
vwに換算する関数をsassで作っておけば
デザインカンプ上での大きさをそのまま使えるから vwだと%でも良いかと思うけど、
親の要素的にimgは100%は便利だけど、
sectionやdivの余白とかはvwとか便利そう ※vw興味なかったら読み飛ばしてください
文字まで含めてぜーんぶ単位vwで統一すると
「デザイン上の200pxはこの要素の親要素の何％か？」
っていちいち考えなくて済む
@function vw($w: 0, $base: 750){
@return ($w / $base * 100)+vw;
}
みたいな関数をSASSで作っといて
.foo .bar .etc{
width: vw(200);
font-size: vw(24);
}
みたいに書くだけで、スマホの幅がいくつだろうが
デザインカンプと全く同じレイアウトになる
$baseは、デザインした時の画面幅
ただウインドウ幅を自由に変えられるPCでやると色々面倒なので
SPやタブレット限定だけどね てかスマホの文字でかくね？基本でかいからダサい
かといって自分のとこだけ小さめにすると他のサイトより小さくなっちゃうもんなあ
ブラウザ縮小機能使ってる人って実際には少なそうだし >>178
日本のサイトは特にそうだね
モバイル用のデザインは海外の方がずっとおしゃれだけど、日本でやると浮きそうだし、悩ましい 逆に言えばその辺のデザインで良い物を作ってノウハウを蓄積しとけば他よりアドバンテージになると <ins class="○○○" data-ad-slot="○○○"></ins>のようにタグにstyleやclass以外の要素が付いているのを見かけるけど
これはタグにstyleやclass以外の要素を自分で好きに名前と値つけてパラメーターとして渡せるということですか？
inputのnameとvalueみたいなもの？
受け取りはjavascriptがするのですか？ data- で始まるものは、data 属性
自分で、好きな名前を付けて使える >>182
data-で始まる物は
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*
スクリプトからはelement.getAttribute/element.setAttributeを使わずとも
data-ad-slotの場合element.dataset.adSlotの形式で読み書きできて便利
data-で始まらないオレオレ属性やっちゃいがちだけど、仕様違反だし後から仕様に追加されたりしてかぶる可能性もなくはないのでやめとけ <に続けてタグ名とスペース書いたら
その後は/と>以外は何書いてもいいんだよ 枠線の色を変えたいのだけど変更できません。
どうしてでしょうか？
<table border="1" bordercolor="#ff0000" style="border:1px; border-collapse:collapse;">
<tr>
<th colspan="2" BGCOLOR=#333>
<FONT COLOR=#ffffff>水平方向の結合</FONT>
</th>
</tr>
<tr>
<td BGCOLOR=#f1f0e8 bordercolor="#ff0000">データ1</td>
<td>データ2</td>
</tr>
</table> >>188
bordercolorはIE独自の属性で、一般的には非推奨な属性
なので、IE以外のブラウザでは色変更は反映されないが、IEなら反映される
その状態でIE以外にも反映させたければ、style属性にborder-colorプロパティを追加するか
別途CSSで指定する >>189
ありがとうございました。できました。
てか検索して最初に出てきたのでそのままコピペしたのですが、
私の検索の仕方が悪いのでしょうか？ >>190
悪いというか、>>188に書かれたソースが全体的に古いので
期間を指定して新しめのページを検索した方がいいかも できたはずだったのですが、またできなくなりました。
どこが悪いのでしょうか？
<table border="1" style="border:1px; border-collapse:collapse; border-color:red;">
<tr>
<th colspan="2" BGCOLOR=#333>
<FONT COLOR=#ffffff>水平方向の結合</FONT>
</th>
</tr>
<tr>
<td BGCOLOR=#f1f0e8>データ1</td>
<td>データ2</td>
</tr>
</table> <table border="1" style="border:1px solid red; border-collapse:collapse;">
borderには太さ線のスタイル色を記述したら反映されるよ >>192
border - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/border
> border は CSS の 一括指定プロパティで、要素の境界を設定します。これは border-width, border-style, border-color の値を設定します。
これを踏まえて整理するとtableタグに指定のborderは>>193のように、まとめて書くか
<table border=border-width: 1px; border-style: solid boder-color: red;
と書く ごめん、下記途中で送っちゃった。
まとめて書くのとは別に
<table border="1" style="border-width: 1px; boder-style: solid; border-color: red; boder-collapse: collapse;">
という風に分けて書く書き方もあるけど、まぁ>>193のようにまとめて書く方が一般的 borderのように一括指定できるプロパティって他に何がある？
borderはよく使うから覚えているけど、
backgroundの並べ方がイマイチ覚えられない
flexもあったけどこれも並べ方が難しい >>193,194,195
ありがとうございました。 >>196
よく書くのはmarginとpaddingじゃないかね
animationみたいな数多いのは忘れがち font, grid, outline, transition >>196
全部じゃないけど
一括指定プロパティ - CSS: カスケーディングスタイルシート | MDN
ttps://developer.mozilla.org/ja/docs/Web/CSS/Shorthand_properties
CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説
ttps://webliker.info/css-short-hand/ >>198
そうだった。
親の顔よりよく見るmargin, paddingは、確かに一括指定使ってるわ
>>199-200
サンクス、家の壁に貼っておくわ すみません。時間がなくて丸投げさせていただきます。
スタイルシートを使えない環境です。
下記文章を古いやり方ではなく、
最近のタグ等で書き直してください。
お手数をおかけしますが宜しくお願い致します。
<TABLE WIDTH=100% BORDER=0 CELLSPACING=1 CELLPADDING=6 BGCOLOR=#CCCCCC>
<TR>
<TD COLSPAN=2 ALIGN=CENTER VALIGN=middle BGCOLOR=#333>
<FONT SIZE=3 COLOR=#ffffff><B>Aについて</B></FONT>
</TD>
</TR>
<TR>
<TD ALIGN=CENTER VALIGN=middle WIDTH=25% BGCOLOR=#f1f0e8><FONT SIZE=3><B>B</B></FONT></TD>
<TD ALIGN=left VALIGN=top WIDTH=75% BGCOLOR=#ffffff><FONT SIZE=3>C</FONT></TD>
</TR>
</table> どんな課題だよw
そうだとしても出題意図がわからん 古い文明でHTML4というものがありました。
現代の最新技術で置き換えた場合はどのようなコードになるでしょうか？
という設問だと思うの >>202
それ、質問じゃなく作業代行依頼だから
ここじゃ誰もやってくれないよ まーじんぱでぃんぐは別として
背景とかFlex, gridは保守的な面を考えると一括記述はしない方があとあと苦しまない ランサーズとかクラウドワークスとかじゃね？
仕事引き受けてわからんから丸投げ 流れ豚切りですまんですが、
トグルでliのwidthを固定値px(デフォルト値)と100％を変えたいです
Jquery無しでできるとのことですが、
そもそもどういう仕掛けでプロパティを変更しているのでしょうか？ >>217
初めてforkボタン押してみました
https://jsfiddle.net/qc0641nt/1/
ulにwidthを指定しました。
liには600pxの画像が入れて、250pxで表示するとします。
displayのblock, noneの切り替えではなくて
トグルボタンによって、オンの時はliのwidth:100%を加えて、
オフの時はwidth:100%を消して、元の規定値に戻したい感じです。 >>218
CSSのプロパティの値を動的に変更するってのは、jsやjQuery等を使わず
HTMLとCSSだけでやるのは無理
https://jsfiddle.net/gbdmyah8/ >>218
liとcheckboxを隣接や同階層に置くのはあれなんでプロパティ変更は面倒そうですが、
その中のdiv要素とかでwidthを調整するのはどうでしょう？
https://jsfiddle.net/vu6w2z5q/ >>219-221
ありがとうございます
221が一番の理想です。
不思議なのが２点あって、
トグルスイッチに必要なheadタグやlinkタグが無いのですが、どういう仕組みなのでしょうか？
あと、display:noneなinput checkboxがあるのに
その親であるトグルをクリックするとcheckedの扱いになるのが不思議です
トグル用のdivに画像のタグを入れるというのが斬新です
input:checked ~ ul li img
波線って初めて見たのですが始点input・終点imgまですべて対象という意味でしょうか？ あと、label for="1"を消すと
トグルが消えてしまいました。
inputはdisplay:noneだけど、id="1"に紐つけられたlabel for="1"は
トグルとして表示される・・・
これってどういう原理なのでしょうか？
また不勉強で申し訳ありませんがよくある使い方なのでしょうか？ >>222
外部リソースは左メニューのResourcesで指定する >>222
> トグルスイッチに必要なheadタグやlinkタグが無いのですが、どういう仕組みなのでしょうか？
jsfiddleの機能で、左カラム内のResourcesをクリックしてcdnのURLを入力して＋ボタンを押すと
headにlinkを設置しなくても、cdn等の内容が反映される
> あと、display:noneなinput checkboxがあるのに
> その親であるトグルをクリックするとcheckedの扱いになるのが不思議です
inputとlabelがidとforで紐付いてるから、親子とか兄弟とか関係無くlabel部（トグルボタン）をクリックすれば
非表示になっていてもチェックボックスがONになる
> 波線って初めて見たのですが始点input・終点imgまですべて対象という意味でしょうか？
「A ~ B」って書いたとして、同じ親要素内にあるA要素よりも後ろにあるB要素にスタイルが適用される
一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator
>>223
label要素に::beforeを設定してcdnのCSSでボタンを作ってるから >>226
リソースを左で登録して、不要なコードを見えなくできるのですね。
その他もなんとか理解できました。
ありがとうございます。 日本を代表するような会社が下手くそなホームページで幻滅する >>229
どこの会社か書いて初めてそのレスに意味が出る >>232
そんなこと言ってるからおまえはいつまでたっても
貧乏なんだぞ >>234
心理学の投影からすると、あなたは貧乏であることを気にしていることがわかる >>235
ほうほう
自分では全然貧乏とは思ってないけど
人様の定義は違うからねえ
アンタのいうところの貧乏ってのはどのようなものですか? >>235
オンドレの見立てではどれぐらい以下なら貧乏なんや
分かりやすく書いて見ろや
オオッ？
コラっ
それから、人様捕まえて貧乏呼ばわりするぐらいやから
オンドレはどれぐら稼ぎあんのか書いてみろ
クソが >>242
あなたの財布の厚みとかけまして
あなたの頭髪とかけます
そのこころは「とても薄い」です ホームページ制作とかけまして
あなたの頭とときます
そのこころは
「もうけはなしに近いでしょう」 マジレスすると儲けなしに受注する奴はおらんやろ・・・ おまいらは程度悪そうだからHPBを使っているんだろう なぜかアメリカの会社とやりとりすることになったんだが
あいつらなんであんな大雑把なんだ( ；∀；)
そしてあんな大雑把なのに
なんでコンピュータで天下取れるんだ >>250
おいコラっ
自演ハゲ
早よAGA外来行ってこい >>249
英語が母国語で、中国・インドに続く世界第三位の人口数だからやろ
アメリカ人は大半が雑魚だけど、エリート連中がやばいという格差社会だよ >>235
そんなこと言ってるからおまえはいつまでたっても
貧乏なんだぞ >>254
うーん
相手も、わりとエリート様の集まりの
それなりに大きな会社なんだけどなあ >>256
それで大雑把なら、単に扱いが雑なんじゃね
丁寧に接しなきゃならない相手だとは思われてないだけな気がするが >>257
そんな気はしねえけどなあ
そうあって欲しい？ >>258
そうあって欲しい？って、どうだっていいわｗ
単にエリート様とやらが本当にエリートなら、
格上の企業と仕事する時まで大雑把なんてことはないやろってだけだわ ・横長リンク群ページＡを、別ページＢからヘッダ(<header>)として読み込む
・上記リンクにマウスオーバーすると下へビローンと小窓を展開したい
・ネットによくある方法をためすと、小窓展開と同時にページＢが下へずれてしまう
これどうしたらいいの？ＢほかすべてのページにＡを直書きするのは非効率だし >>265
ページBが下へずれてしまうのはページBに原因があるのかページAに原因があるのかを切り分けないといけない。なのでページAだけを表示した段階で小窓展開と同時にページが下へずれてしまうかをまず試してみてずれてしまうなら小窓展開した時のCSSが原因だからその部分でmargin、paddingを0にしてみるなどためしてみては？というかこういう風に日本語で状態を書いても読み手にはとてもわかりづらいんだよ？わかってでしょ？自分が見えているものは相手にもみえてるからわかるよね？なんて思っていたら大間違いで、つまりなにがいいたいかというと、ソースを開示するなり、過去の質問者のようにソース共有サイトにきじゅつするなりしないと回答もらいづらいよってこと width:100%と
max-width:100%の使い分けってどうしたら良い？
結果は同じになるけど、どういう時に違いが出るの？
max-widthはレスポンシブ用？ >>267
同じにならんよ
幅300pxくらいの画像置いて
ウインドウ幅を300px以上にしてみ 待て待て待て待て
それなんも変わらんだろw
maxは絶対値で使うことが多いんでないかい？
width: 100%;
max-width: 300px;
みたいにして、それ以上大きくならんように
俺はそんな感じ 267だが
https://jsfiddle.net/xhsb2nmq/
ごめん、全然わからん
最初divに入れてない画像は100％だと引き延ばされたけど、
いつのまにか引き延ばされなくなってしまった >>270
class名を数字から開始するのはNGな
あと100%の後はセミコロン入れような <p>それじゃ早速</p>
<p> </p>
<p> </p>
<p>ご覧いただきましょう！</p>
<p> </p>
.....
<p> </p>
<p>こちらです！</p>
このようなブログを絶滅させるのはムリなのでローカルで Stylish で
<p> </p> だけでも display:none にしたいんです
br
{
display: none !important;
}
で、brを繰り返しているタイプのは消せましたが、実はこれも連続した br の2個め以降だけを消したいところだと思ってるくらいの理解力です 原始的な手打ち
ホームページビルダーも使えないん？ ホームページビルダーって単語見ると和むな
ほのぼの感がすごい flexboxの子divが4つあるとして
上2つは上詰め、下2つは下詰めってできる？
それぞれクラス名はそれぞれあります >>279
普通にATOKを常時使ってるから全然懐かしくねえなｗ 281です。
div3つでやってみた
こんな感じってできる？
https://jsfiddle.net/yfj29bo1/ align-content:space-between; firefoxでyoutubeのおすすめを非表示にするアドオンがありますが、displayなどでdisableにしてるわけですよね。
cssだけで登録チャンネルのみ表示するとかいう切り替えは出来るでしょうか？
apiなどがないと無理でしょうか？ というか、flexコンテナの方にheightが無いから
ある意味、下詰めにはなってるな 今のcssには子孫要素で判定する方法が無いのでcssだけでは無理じゃね？ >>284
できた！flexおもしれー
https://jsfiddle.net/ftk6vrg3/12/
Ctrl+Sするとすぐに反映されるけど、枝番号も増えるのねｗ
>>286
floatと違ってflexのデフォルトはその列の下端に合わせてくれる
>>289
俺もカキコ後にそう思ってたけど>>284のお告げでパッと閃いた >>291
> floatと違ってflexのデフォルトはその列の下端に合わせてくれる
いや、そういう風には見えるけど、そういうことじゃない
>>289-290
俺環だとfirst-of-typeとかで指定して妥協してる >>292
flexの中でdiv群を上下にbetweenで分けたけど
:last-of-typeとか下端に下ろすことってできるの？ >>293
そういう話じゃ無い
他の回答とごっちゃになってない？ ブログでよく見かける記事の上に飛んだり下に飛んだりTOPページに戻ったりするやつの名前を教えて下さい topページに行くなら『リンク』の方が正しいか
ページ内のはアンカーリンクだし >>298
>>299
どちらも検索したらjavascriptとjqueryでそれっぽいのがありました、ありがとうございます section.aaa div.bbb article.ccc配下のh1と、その子孫のh2を指したい場合は2行に書き分けないといけないの？
兄弟子みたいなのをつかうかもしれないけど、どれかわからない 複数の対象に共通のプロパティを適用するって話？
だったらカンマ切りされていれば1行でも構わないけど
CSSだけでやるなら、それぞれセレクターは頭から
書かないとダメだよ >>303
section.aaa div.bbb article.ccc div.ddd h1
section.aaa div.bbb article.ccc div.ddd h1 section.eee div.fff h2
に対してpadding-rightとpadding-leftを設定したいのですが、
「section.aaa div.bbb article.ccc div.ddd」ここが共通なので何か省略できるのかなと思ったのですが、やはり上記しか無いのでしょうか？
sass,scssは使いません。 SASS で、下のように書いたら、
div.a h1 {
background: red;
div.c {
background: blue;
}
}
CSS 出力は、
div.a h1 {
background: red;
}
div.a h1 div.c {
background: blue;
}
だから、同じ部分は、まとめられない
div.a h1
div.a h1 div.c firefox 78～、chrome 88～, safari 14～なら:is()擬似クラスが使えるけど
それより古いブラウザにも対応するなら面倒でも全部ずらずら書くしかないね >>304
これは手を加えられないコードのスタイルだけを弄ってるって話なの？
本来は親要素かhタグにクラスを追加して済む話で、そんな複雑な書き方をしなきゃならない話じゃないけど htmlもCSSも手を付けられない縛りがあって、機能拡張とか使って
CSSを上書きしたいけど、元のCSSの書き方がそうなってるせいで
ちょっと面倒臭いのどうにかならん？って話なら分からんでもないが
まぁ、それでもセレクタを簡素化して!important付けちゃうとかで
何とかなりそうな気もするけど >>291
時代はflexだもんな
floatはもはやロストテクノロジーになりつつある >>307-308
元のコードが上記の通り書かれていて
レスポンシブのためにh1, h2を上書きしたいという状況です cssの1行で書くときのルールの推奨ってある？
セレクタ名 { magin: 0; pagging: 0;}
セレクタ名と{に半角スペースがいるか
{とプロパティ名に半角がいるか
;とプロパティ名に半角がいるか
最後の値の後ろに ; がいるか
日々ぶれてて悩む 人間が決めたルールは色々あるけど
ブラウザとしてはvalidであれば構わんので
好きに書いて良いかと 商品説明はpタグを使うとしたら
商品名は何のタグが適切？
divの中にタグがない状態で
<div>たけのこの里</div>
<div><img></div>
<div><p>サクサククッキーにチョコレート</p>
cssが付かないタグ無しよりpタグでも良いと思うけど、
パラグラフじゃないし、何か良いタグある？ >>314
div使わずにdl dt ddを使うとか
意味合いが微妙に違うけどfigure figcaptionを使うとか
https://jsfiddle.net/ox1309rk/ スレチだったら申し訳ないけどfancybox3に詳しい人います？
マイナーなのか調べてもあんまりヒットしないし公式ドキュメント見てもわからんくて。。
いわゆるモーダル系のjsライブラリなんだけど背景クリックしてもモーダルを閉じないオプションあれば教えてください >>316
詳しくはJSスレで聞き直してもらいたいが
fancyじゃないのを使うのをお勧めしたい >>315
dl, dt, ddかなるほど
ddにimgブロックにして文字列も入れているのね
ddにp入れたら駄目とは知らなかった
こういう正解の無いHTMLって難しい・・ >>319
ddにp入れたらダメってことはないよ
<dd>: 詳細説明要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dd
ddは複数設定できるから、「たけのこの里」の意味の説明として、画像と説明文を
それぞれddに入れてもいいかも >>317-318
すまん、そっちで聞いてみる
諸事情でこれ使わないといけなくてな。 >>321
横からすまんが、そういうタグを使うとSEOには有効に働くの？ 文書構造的にやるに越したこと無いと思うけど実際のところ見返りはありそう？ ない。googlerのtwitterアカウントを片っ端からフォローしてればたまに情報発信するので分かるが、そんな人日本にほとんど居ないので、SEO詐欺師/詐欺会社のいいメシのタネとして利用されている。
なおgoogleのサイトは大抵divオバケである。 >>325
ぅゎぁ・・・そうなのかoz
まぁdivお化けもxhtmlの名残りだけど、タグの使い分けにもっと夢を見たかった >>326
その夢を見るには少し若すぎたな…
00年台の検索エンジンはGoogle含め
みんなHTMLを読んでたので意味はあったんだが >>279
イラレが販売専用の時使い方わかんなくてポップ作りに使ってたな BootstrapのAccordion使い始めたんだけど難しい
エラーにもならないけど、他のヘッダーをクリックしても前のヘッダーが閉じてくれない
何を間違えてるんだろ
クラス設定が多すぎるんだよ！(逆ギレ 属性名を誤字ってたのを見つけた
こんなのどうやって間違えずにコーディングするの？ vscodeにlinterとかIntellisenseとか機能拡張入れる >>334
何を見て欲しいの？
こんななげーの読まないし結果がどうなってるかまずみれるように他の人と同じcodepenとかつかえや sass, scssとか変換とか手間だし見向きもしなかったけど、
もしかしてVSCodeで管理してsassならセーブすると勝手に指定したcss名で保存してくれるの？
それならディレクトリの変化を検知して自動アップロードしてくれる機能があるから助かるけど、そういう感じで管理できるの？ 「position: absolute;」な要素を「position: relative;」な親要素の大きさに合わせたい場合など
縦方向の場合「top: 0; bottom: 0;」とするのと「top: 0; height: 100%;」とするの
横方向の場合「left: 0; right: 0;」とするのと「left: 0; width: 100%;」とするの
どう違いますか？どう使い分けますか？
こっちは不具合出やすいから使わないほうがいいとかありますか？
.parent { position: relative; }
.parent > .child { position: absolute; left: 0; right: 0; }←どっちがいいの
.parent > .child { position: absolute; left: 0; width: 100%; }←どっちがいいの >>336
個人的に感じているデメリットはデバッグ・・。
デベロッパーツールの行数とscssのソースが異なるからわかりにくくなる
自分だけかもしれんが
Source Maps使ってもすぐ効かなくなるから生cssと比べると色々めんどくさい position: absolute;で width: 100%なんて効かんやろ？; >>336
IDEとかでも保存と同時にコンパイルしてくれるし、
そもそも開発やってる連中はgulp-watchとか使って保存と同時に自動コンパイルだよ
手動でコンパイルなんてやらないから >>340
まじですか
じゃあ{ top: 0; bottom: 0; }または{ left: 0; right: 0; }
しかないんですね 四方向0にして
margin で位置決めるやり方があった気がする 大きさ合わせる話か
勘違いしてた
>>343 は無視して liの中のaタグが余白もクリック・タップできてしまうので
文字だけ反応させるにはどうしたら良い？ >>336
VScodeの拡張機能、Live Sass Compiler とか。
依存関係で、同じ作者の、Live Server も入る
VSCode のスレは、プログラム板にある。
おすすめ拡張機能も、数十ある
Node.js も入れて、npm プロジェクトを作っているなら、
gulp, npm scripts みたいなタスクランナーがある >>345
aタグのpaddingを消してliに同じ値のpaddingを指定 仕事でプリントアウトしたexcelの書式に手書きで記入する作業があるのですが、手書きは面倒です。エクセルファイルに直接入力するのも元の書式を崩しそうなのであまりやりたくありません。
確定申告のフォームのように、入力ページ上で記入欄に文字を入れたりプルダウンメニューで項目を選択したりしてpdfなどを生成する仕組みを作り、それをプリントアウトしたいです。
そこで質問なのですが
1.html+cssで書式を作ることは可能でしょうか
2.入力用のページと書式で2個html(場合によってはcssも2つ)を作るということでいいでしょうか？
3.現在htmlとcssはある程度書けるのですが、他に何か習得する必要はありますか？調べてみましたが色々情報があって何を学習すればいいのか全くわかりません。 >>348
まずexcelをプリントして、画像ファイルにするでしょ
それを背景画像にして、あとは<input type="text">をposition:absoluteで調整して
border:noneにしたり、スタイルを調整すればいいんじゃね
入力が終わったらそのまま印刷すればいい
入力したものを保存したい場合は、面倒になるな
つーかエクセルファイルをコピーして入力するのが一番早い気がするが 昔、MacのWebページ作成のソフトで最終出力を1枚の画像ファイルにしてリンクはイメージマップになるのがあったなあと思い出しました。divだのリストだのフォントだの行間だのめんどくさいのをヤケクソで固定するある意味いい機能だなあと思いました。 >>349
回答ありがとうございます。
たしかにexcelへ直接入力した方が手っ取り早いですよね
ただ、他の従業員(excel苦手な人が多い)も使用できる仕組みを作りたいことと、個人的にhtmlやcssの復習や、スレ違いになるかもしれませんが何らかのプログラミング(検索したらjavascriptやphpが出てきたが、よくわからない)の勉強も兼ねてフォームのようなものを作りたいなと思ったのです。 >>351
とりあえず入力データを保存する必要があるかないかだな
入力データを保存しなきゃならないなら、プログラミング言語がないと基本的には無理
それが要らないなら、HTMLとCSSだけでほとんど出来る
メディアクエリでPC画面と印刷画面のデザインを切り替えて見やすく、使いやすくして、
最後にJSで”印刷する”ボタンでも付ければ、初心者でも扱えると思う 正直エクセルで印刷用フォーマットを作った後
別ファイルにコピーして
そっちでシート2に入力しやすいようなフォームを作って
シート1のフォーマットがシート2の入力フォームを参照するようにして
さもそちらを入力したように表示するようにシート1を手を加えたほうがよさそう
で印刷するならシート1を印刷 まあ本人の希望がWeb関連技術でやりたいだし、Excelが苦手な人もいるって前提だからな
業務用ならAccessのForm機能とかもあるけど、そういう話じゃないんだろうさ
やりたいようにやればいいよ 十数年前に
ウェブサイトを印刷する仕組みを売ってましたが
Webページを紙に印刷する時
用紙のサイズにぴったり合わせるのは
なかなかに骨の折れる作業だよ
link要素のmedia属性にprintと書けば
印刷用のCSSになるんだが
まーこれがいうこと聞かん、ブラウザごとに変わるし
リキッドレイアウトならまだマシなんだけど
帳票のようなものを考えているのなら
それなりに覚悟したほうがいい
あと入力UIはinput要素ではなくdiv要素にして
contenteditable属性を使うのおすすめする
枠内のレイアウトの自由度が段違いなので https→httpにリファラ飛ばすreferrerタグってまだ対応してないのも多いですよね？ 283, 291です。
過去に質問した
https://jsfiddle.net/yfj29bo1/
で、291でグループを作って上下に引き離したことで見た目は上手くいったのですが、
別の方法を考えていて、
.bbbにflex-growを指定すれば、2つ目の下にある余白が埋まってくれると思ったのですが
.bbbにflex-grow:2(数値は適当)をしたのですが効かないのはなぜでしょう？ > 2つ目の下にある余白
元になった最初のソースだけ貼って残りを言葉で説明されても、実際に何やってんのかサッパリ分からんが
もしflexd-growが効いたとて、恐らく希望通りの動作にはならないと思う ごめん、flex-grow効きました。
成功前のソースに記入したのもありただのdisplay:flex忘れでした、これは恥ずかしい。
https://jsfiddle.net/79d6vtk8/ Bootstrapリンクさせたらフォーム部分スマホのレイアウト崩れたんだけどBootstrapのCSSが邪魔してるのかな この2週間でだいぶ成長したわ
もう素人の中では中堅の自信 >>368
リンクのオンオフで検証してみればすぐわかる html/cssは独学でなんとかなる
だがphpやjavascriptとなると無理っぽい
普通免許と大型2種くらいの差を感じる >>369
全能感出ていると、業務を作業的にさせられる時に絶望感を味わう
まぁ仕事につけたらな。 顧客の要望と納期、同業の厳しいチェックこれらを経ないと自己満 >>371
そうかあ？
実際現場でやってる人達は
誰かに懇切丁寧に教わったことない人のほうが
多数派なんじゃないかなあ
数えたり統計取ったりしたわけではないんだが
この商売してると
テックアカデミーみたいな会社の広告がよく目につくけど
悪どいとまでは言わんまでも
えぐい商売してんなあ、とは思う お前ら、普段ろくに質問に答えないくせに
素人の自虐書き込みを勝手に拡大解釈して
スレ違いなマウントの取り合い始めるのやめろや 学校出た人ってあんまみかけないな
新人とかいるけど激務やドカタでだいたい30歳になる前にやめてく
残ってるのってだいたい独学な人たち
エンジニアと同じで実務・実力というか
ナンダかんだ好きじゃないと続けるのは辛い業種だけに
腰掛け程度の気分で来るとだいたい潰れる スマホファーストなのに、PCでの見た目ばかり要求してきて飲みたくないんだけど、
何て説明するのが良いの？
スマホのユーザーが8割あるって言ってんのに、自分たちはスマホあまり触らないから無茶言うわ まず要望通りのPC版を作って、後で改修させて二重請求にするのか
おまえら頭いいな スマホファーストの意味が分からん
スマホ優先すればPCデザインに影響でるかと言えば出ない
出るとするなら納期や工数が少しへるくらい
要するにスマホファーストってPC手抜きって事になる気がするんだがどう？ ↑もちろん両方注力するのは大変だ
しかし技術的にはファーストによる影響はない レスポンシブの話してんのか？
素人だからわからん
サンプルWeb見せて うちのサイトはプログラミング系のサイトだからというのもあるが、
PCが9割だからスマホはほとんど無視して良いレベル
それでも一応スマホ版のChromeとFirefoxで動作確認をしている そりゃそうだ今の若い奴なんてパソコンなんて持ってないぞ >>381
マウスポインタとウインドウありきのUXUIはいかんよ
っていう話だろうな >>391
それぞれに最適化するのが当たり前（PCはマウスポインタとウインドウありき、スマホはないデザインでレスポンシブ）
という感覚があるからちょっと理解に苦しんだ・・・ >>390
これマジだよ。ホリエモンもPC使うのやめたって >>393
誰がそうするか、みんながそうするか
で決めるものでもなかろう
基本的に今のタッチデバイスの多くは
それように作られたコンテンツを利用するのに特化してるので
ただ消費するだけならそれでいいと思う >>393
手帳使わないって動画でそれ言ってたね。 >>394
それな
堀江は指示だせばいいご身分だから問題なかろ 次はそのうちネットはもう古い
やめたって言い始めそう 今年オープンした京都の住友系高級ホテルのwebは手打ちなんかな？hpbではなさそう >>399
どれ？ 三井のしかでてこんな。クソ重いサイト hpbって最近できたフレームワークなのかなと思ったら
IBM謹製ほめぱげビルダーのことか wordpress用テーマもあってビビったｗ
知識がHTML4.0編集ソフトで止まってたわ
ホームページビルダー22 Q&A
Q. スマートフォン用のサイトを作成できるか
A. ホームページ・ビルダー22に搭載されているWordPressテンプレート、
フルCSSテンプレートはすべてレスポンシブWebデザインに対応しています。
ホームページ・ビルダー22のWordPressテンプレートまたはフルCSSテンプレートを使用し作成したホームページは、
自動でスマートフォンに対応するため、スマートフォン専用のサイトを準備する必要はありません。 >>399
自ウェブサイトだけでなく
新聞、テレビ、ラジオ、交通、動画サイトなど
いろんなメディアで広告を見るような企業のサイトは
広告代理店、又はハウスエージェンシーに発注して
代理店が大手広告制作グループに投げて
その子会社の制作会社が作る、って座組みになってる
んで、そのような制作会社で
HPBを使うなんてことはまず無いよ
理由は自由度もクオリティも低い上に遅いから あんなに資本力もあるのに
事務員に作らせたの？というようなサイトがあるのはなんだろうね。 そりゃ事務員が発注して上がってきたデザインに事務員のセンスで校正入れてくるんだから最終デザインが事務員レベルまで落ちるのは当然だろ 地元じゃCMバンバン流してる不動産屋なのにwebはSSL切れてたりレスポンシブされてなかったりよくある M井系の不動産でAdobeのExperience Manager使わされたなぁ
普通につくるほうがラクなんで、あそこの仕事はもう受けないことにしたわ
まあ、俺なんかに回ってくる可能性自体ほとんどないんだが 若い頃はホームページというのがなんか気恥ずかしくて
絶対ウェブサイトと言っていたなあ
まだ「ウェブサイト？なにそれ？」って人も多かった頃なのに
今は「インターネットのホームページを作る仕事してます」って言っちゃう
「ホームページというのはそのサイトのスタートページのことで云々」って突っ込まれると、なんか微笑ましく感じる >>418
年取ると自分語りに気恥ずかしさを感じなくなるのですか？ >>421
そうだねえ
子供の頃はあんなことやこんなこと
なんで恥ずかしがってたんだろうって思うことよくあるわ 「隙あらば自分語り」の意味が分からん
物事のほとんどは主観と自身の経験にしか価値無いと思う
だってそれ以外ってネットで調べれば回答得られる事でしょ？ まぁ言いたいこととしては
スレに不要な情報も含まれる的なことを言いたいんじゃないかな >>424
掲示板の自分語りには価値ないんじゃない？ 「>>436、おれ隆司。タニシってんだ、よろしくな」 <li>
<input>
</li>
という構造で、通常時はliにborder付けて、
input:checkedの時はborder消すって出来ないですよね？
inputが子要素なので指定できないですよね？ 計算フォーム作ってるんですが
商品名 単価 数量 小計
の並びで
・商品名をセレクト要素で
・単価は商品名が選択されたら自動で切り替わる
・数量はテキスト入力として(セレクトでも可)
・小計が自由計算される
というフォームを作りたいです
参考サイトで途中までは出来るんですが、セレクトから単価数量計算がうまくいかない
参考サイト
https://mitsumori-js.com
うまくいかないコード
<tr id="mitsumori-js-item-7" class="mitsumori-js-item" data-itemnum="7">
<th class="item-name">
<select class="select-quantity" data-itemnum="7">
<option value="">人参</option>
<option value="">バナナ</option>
<option value="">焼肉</option>
</select>
</th>
<td class="item-quantity">
<input type="hidden" class="unit-price" value="100">
<input type="text" class="text-quantity" data-itemnum="7">
</td>
<td class="item-price">￥<span></span></td>
</tr>
</tbody>
</table>
<table class="mitsumori-js-total-tbl" data-taxflg="0">
<tbody>
<tr>
このサイトのように
https://www.pi-pe.co.jp/regist/is?SMPFORM=lfoj-lekana-e206952dbe64483488c751ed479325ec
商品名を選択したら単価が自動出力されて数量を決めればあとは自動計算されるようにしたい
おすすめのサイト教えていただければ幸いです >>442
オススメサイト知らんけど、javascriptスレの内容だよ。
その参考サイトだとjQueryで書いてるこの辺が乗算じゃない？
var result = q*p;
subtotal = String(result).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
//console.log(result);
$(this).parent().parent().parent().parent().find(".subtotal").val(subtotal); >>441
そういうのはJavaScriptでやる
liにborder用のクラスつけて、inputと連動させてtoggleしろ >>441
inputをliの兄弟要素にしちゃってpositionで位置調整するとか >>444
プログラムはさっぱりなので、ざっくりtoggleを調べてみましたがinputがcheckedかどうかの状態を取得する書き方がよく分かりません
このページが結構近いのかなと思いましたが、この例だとonclickで判定してますがcheckedで判定する方法はあるんでしょうか
https://web-tsuku.life/classlist-toggle/ >>446
フィクションのネタなら面白いんだが
実際に家族がそれやると
なかなかに微妙な空気になるんだぞ >>452
一応スレ別れてるので
続きはJSスレで聞いてくれると助かる
向こうでちゃんと答えますので >>459
公認じゃねえよ
父ちゃん土下座して
俺と姉ちゃんでどれだけ母ちゃんなだめたことか
それでも父ちゃん全然懲りてないっぽいが border-top: 1px dotted #AAA
border-bottom: 1px dotted #AAA
これって1行でまとめられる？ 無理か・・
css3になって色々ショートハンドとかも便利かなと思ったけど、
1行ずつ書くしかないのね
正規表現みたいな書き方できたら良いのになぁ border-topやborder-bottom自体がショートハンドだからな border-blockはsafariとか非対応だから
素直に分けて書いた方が早い 2行には変わりないけど左右0でいいなら
border: dotted #AAA;
border-width: 1px 0;
ってするかな table1の中にtable2を入れた場合で
table.table1 td{
padding:0px;
}
とするとtable2までpaddingが0pxになるけど
table1のtdのpaddingだけ0pxにするにはどうすればいいんですか？ >>472
やり方はいくつかあるけど、.table2 tdにpaddingを設定するのがシンプルだと思う vscodeでcssに
セレクタ名 {}
と空プロパティにすると
Do not use empty rulesets
と怒られるけど、セレクタ名の階層的に空プロパティは設けてはだめなの？ だめではないけどごくわずかにパフォーマンスに影響する可能性があるので空ならルール自体いらないんじゃないかという警告
うざいなら設定でcss.lint.emptyRulesをignoreにすればいい >>476
ただの警告だから、無視していい
「これミスじゃね？ガチなの？」って警告 >>476
IE6でそれがあるとそれ以降の記述が一切効かなくなるってのはあるよ >>479
懐かしすぎて
色々思い出して少し泣きそうになった >>481
あいつの事を思い出だけで終わらせたくなくて・・・ >>479-480
それ見ただけで蕁麻疹が出るからやめれくれ IE8「兄のIE6だけがご迷惑をおかけして申し訳無い」 IE6「私の事嫌いになってもMicrosoftの事は嫌いにならないでください＞＜ 」 >>491
日本は広告代理店が態度変えてくれたらすぐなんだがなあ 日本IT後進国だから無理だなぁ
XPで時が止まってるから <article>と<section>の扱い方、
特に入れ子で扱う時の扱い方がわからんぴ。
<article>の中に<section>を含む
<section>の中に<article>を含む
この二つのパターンについて、
これを表現するなら<article>の中に<article>じゃないの？？
と思ってしまう。。 >>494
よくある説明ですまんが
articleの最たる例はブログの記事
1つだけのことも、いくつかの記事が並ぶこともある
けどそれぞれは、article毎に独立・完結した内容になる
※part1、part2みたいな関連はあってもいい
sectionは誤解を恐れずに言えば
h1～h6のように、ulのネストのように、文章の階層、レベル毎に存在する
なので
1つのarticleの中に何段階かレベルのある文が書かれるなら、そこにsectionがあってもおかしくないし
逆に、たとえば「記事紹介」というsectionの中に
articleが並んでいてもおかしくないのです >>493
物凄く驚いたのが、一部上場の電機メーカー
社内の標準がIE、勤怠やらのシステムはhttp、メールはoutlook、zoomは使用厳禁
俺、もうあそこのネットワーク機器かわねぇ >>496
逆に考えるんだ
その構成で問題起こしてない技術力の高さよ >>497
んー、特定されると厄介なんでなんだけど
問題起こしまくりww
ニュースにもなってる
何も成長してない 全部上場した暁には、ブラウザはEdge,
暗号化も意識してhttps, 会議はTeams,
そしてメールはWindows Live Mailに置き換わるだろう >>502
windows live mail知らない世代が出てきたか・・・ phpに関する質問は……ダメですよね？
おｋなスレとかないですかね。メールフォームについて質問したいんですが >>511
しらんがな
Mozilla Thunderbird とか、Gmail ？
そもそも読まないうちからウィルスに引っ掛かるような常識外な脆弱性って、他のメーラーにあった？ 大企業でThunderbirdとかGmailとか草 >>516
RFC-1149, 6214 に適合させなきゃ font-sizeのemを使いたいけど、
0.95emとか長くなるなら95％とかで良いのではないと思うけど、
実際%でレスポンシブも含めて不具合があるときってある？ >>518
不具合ではないけど
%だと、画面上の表示サイズは同じでも
CSSに書く値が、要素のネストによって変わるのが面倒くさいとは思う
remとかvwとか
画面幅に依存する単位の方が一貫性があって
使いやすいと個人的には好き そうだrem忘れていた。
bodyにfont-size:100%って書いておけば
remを使えばどこでも全体のバランスを考えて設定できるってことでおｋ？ 100％だとブラウザのデフォルト毎に変わる可能性はあるけどね
俺はもうリキッドする時はvwしか使ってないわ
PCではメディアクエリで範囲限定して GAFAの一角であるGoogle本社社員もGmailなんだが SSL化させ、httpはhttpsにリダイレクトするように設定しました。
httpと入力してもhttpsにリダイレクトされます。
しかし img src で本文中に画像を埋め込んだものはURLを見るとリダイレクトされていますが、
ブラウザの警告が出てしまいます。
本文中のURLを変更せず、警告が出ないようにする方法はありますか？ >>527
じゃあ、本文を書きかえるしかないということですか？ HTML初心者です
inputボタンを横並びに4つ並べているんですが、
押すとフォーカスされて色が変わるようにしています
しかし画面外のデスクトップなどをクリックすると色が戻ってしまいます…
どのような処理をすれば良いでしょうか…？ >>528
そもそもhttpとhttpsが混在してるから警告が出るわけで
自鯖にimg置いてるなら、この際、絶対パスじゃなく相対パスに書き換えたら？ >>529
> 押すとフォーカスされて色が変わるようにしています
どうやって書いてるの？ >>531
説明が分かりづらくてすみません…
下記のように記述して、javascriptで表示されるグラフが
年〜週に切り替わるようにしています。
<input id="btnYear" type="submit" value="Year"/>
<input id="btnMonth" type="submit" value="Month"/>
<input id="btnWeek" type="submit" value="Week"/>
【CSS】
input:focus {背景色と文字色} 待って
ページ自体がリダイレクトされてるのに img src が問題になるってことは、相対パスで書いてないの？
src="/img/image.png" とか >>532
フォーカスされたら色がつくのなら
フォーカスが外れたら元に戻らなきゃ困るんでないの？
望んでいるのはフォーカスではないのではないかい？ >>534
おっしゃるとおりですね…
用語をまだまだ理解していないので上手く伝えられず…
少し勉強してきます… 今日からCSSを始めたのだがいきなり壁にぶつかりました
back-ground
color
font-style
だと反映されるのに
back-ground
font-style
color
順番の入れ替わっただと反映されない
これって何かルールがあるのでしょうか？ ちゃんとコード貼ってよ
カッコの対応取れてないとかかもしれないじゃん 反映されるcssが
@charset "utf-8";
h1{
background-color: #008000;
color: #ffffff;
font-size: 50px
}
されない方が
@charset "utf-8";
h1{
background-color: #008000;
font-size: 50px
color: #ffffff;
} htmlはどちらも
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ここにページの内容を書いていく -->
<h1>サンプル食堂</h1>
</body>
</html>
初期設定みたいなコードはコピペです
できた
https://dotup.org/uploda/dotup.org2389849.jpg
できない
https://dotup.org/uploda/dotup.org2389847.jpg コピペして上下を入れ替えるとありがちですね
ぼくも良くやりました… >>541
セミコロン入れたら入れ替えてもできました
こういったミス無くす方法ってあるの？癖をつけるのが一番ですか？ 癖つけるのもいいけど、エディタの機能拡張にCSS用のlinter入れると
間違いを警告してくれるから、間違いを探しやすいかも https://dotnetfiddle.net/qyQ85m
上のコードで.shop-photの 0 1em 1em 0という部分があるのですが
この１emの具体的な数値はなんなのでしょうか？
親要素の相対的な数値であることまでは何となく分かるのですが親要素であるpの数値がなんなのかわかりません CSS Validation Service
https://jigsaw.w3.org/css-validator/
; が無いのは、
このサイトの直接入力に書いても、VSCode に書いても、エラーにならない
勝手に、; が補完されるのかな？ >>545
親要素に指定してないならブラウザで設定しているフォントサイズと同じデフォルトだと16pxかな
フロートして文字回り込ませてるから1文字分空白とりたいんでない？
つかその本あまりよろしくなさそうだからささっと片づけて他の教材やった方がいいと思う
色々な教材で書いていった方が覚えるんじゃないかなあ >>547
親要素に指定ないときはデフォルトサイズの16pxになるのですね
ありがとうございます
Manaの入門講座買って実践編が難しくてそれでスラスラ分かるHTMLのきほんって本やってたんですが
あんまり良くない本ですか
他にお勧めありましたら教えて欲しいです 計算結果がどうなってるか知りたいならブラウザの開発ツールの使い方覚えなされ サイトを作っていて、先方のfirefox2台で
一方は期待通り、一方はline-heightが異なる感じがする場合
どこの設定を疑えば良いでしょうか？
Ctrl+0で100%にするぐらいしか思いつかないです。 >>546
最後の閉じ括弧直前のセミコロンは省略可
っていうのが実は正式な仕様だとか何とか >>550
ブラウザの「言語と外観＞フォントと配色」の設定が違ってるとか >>552
強制フォントの設定がONになってました
固定長フォントがプロポーショナルになってたオチでした 商品サイズと目的地をプルダウンメニューで選んで検索ボタンを押すと
送料がいくらか表示されるようにしたいけど
何の言語でプログラム作るのがいいかな？ pcでwidthが指定されている要素(td)を
レスポンシブの時にwidthのプロパティを指定しない扱いってできる？ >>557
指定しないってことは自動的に初期値が設定されてるってことだから
widthの初期値autoを設定してやればいいんでない？ なるほど、autoか。
margin: 0 autoぐらいしか使わないから、それでいけそう。
ありがとう。 >>555
フラッシュプレーヤーのアンインストールが進んでるこんな時代に
まだフルフラッシュのサイトのメンテナンスやらされてる人の気持ちわかんの？ >>560
URL貼ってくれ、元Flash職人だった俺はサイト見たい。 >>561
コンプライアンス！
流石に5chに貼ることは出来んw
普通の生活にはあんまり関係ない
そこそこ高価な嗜好品の会社
しかもそこで扱う商品ではなくCSRコンテンツ
スマホ向けにリニューアルしようって10年提案し続けてるけど
客と俺しか見ないようなサイトなので
客の担当者も全くやる気なくて
ルーティンの更新だけ淡々と続けてる MANAのHTML＆CSSの入門書を持ってる人がいたら教えてほしいのですが
209ページと210ページを何回読み直しても理解出来ず前に進めません
position:relative、position:absoluteとすることによって何が起きてるのか。
top:0がなんなのか？何故display:blockにしたのか margin:0 auto;とは・・・？
以上解説お願いします＞＜ margin: 0 auto
って始め何も知らずに呪文のように使ってたけど
今見たら普通に理解できてびっくり。 >>565
CSSのpositionを総まとめ！absoluteやfixedの使い方は？
ttps://saruwakakun.com/html-css/basic/relative-absolute-fixed
CSSで要素を上下や左右から中央寄せする7つの方法
ttps://www.granfairs.com/blog/staff/centering-by-css absoluteするセレクタがrelativeにはなれないの？ >>569
absoluteの基準にできる親要素のpositionは「static以外」なので
親要素はrelativeじゃなくabsoluteでもOK あれ？topとかは position: absolute
が無いと指定できなかったんじゃなかったけ？
positionに absolute と relative を両方なんてできるの？ >>571
top等が効くのはstatic以外
absoluteの親要素にはrelativeじゃなくabsoluteを指定してもいいって話だよ
両方設定するって話じゃない 記事サイトでよく、例えば
https://www.afpbb.com/articles/-/3332239
みたいな構造のURL見かけるけど、
この /-/ って何なの？
不要ならないほうが美しくない？
https://www.afpbb.com/articles/3332239
みたいな感じでさ。
/-/ が必要な理由を知ってる方、教えてくださいませm(_ _)m >>574
理由は知らんけど
そういうCMSなんだよ
Sitecoreなんかもメディアファイル置くディレクトリの名前はハイフンだな その理由が知りたい。
なんたらこんたら.com/#/へろへろ
とかはjsでクライアントサイドルーティング実現するためだったというのは聞いたことあるけど/-/は意味不明。
鯖側事情だとしてもそれどんな事情よと。 web画像保存の現状
webpとかjpfとかの形式使ってますか？
google page speed insightで
使うよういつも打診されるけど、
jpgでok？今の画像保存の常識を教えて欲しいでづ そんなものはCDNの機能で自動変換させる。
クライアントの能力に応じてフォールバックまでしてくれる。
設定する以外何もすることがない。
CDNも使えない零細は知らん。 >>576
ディレクトリの階層を同じに揃えて管理しやすくしてんだよ
例えばハイフンがimageで、その下の階層が記事と同じ文字列になってると
その記事内で使われてる画像のURLになるとかさ 画像だとちょっと例えが悪いな
ハイフンをcommentにすると、同一記事のコメントページのURLになるとか
って方が分かりやすいかもだ ヘッダーフッターのみレスポンシブ対応にして、中のコンテンツはレスポンシブ
非対応にするのってどうすれば良いかな？
ヘッダーフッターに関してはSPのデザイン(フォントをvwで指定、横幅100vw)で、中のコンテンツ部分はPC表示って可能なのかな？
viewport指定してスマホ表示にしたら、案の定中のコンテンツが拡大されちゃうんだけど。 >>579-580
モダンなURL設計だともはやそうはならないよね？
昔はそういうのが一般的だった時代があったのかな？
日本固有じゃなく世界的なものだったんだろうか？
今でいうRESTみたいにその思想を表す名前とかないの？
歴史知りたい。 かたいこというなよここ追い出されたらどこ行きゃいいんだよ >>581
まずコンテンツ部分がスマホで
広過ぎず狭過ぎず表示できる幅にviewportを設定して
その幅で適切に見えるような大きさになるように
ヘッダ、フッタのSP幅スタイルを書く
こういう「ヘッダフッタは変えますが、コンテンツ部分はそのままで」っていう部分リニューアル面倒だよね… ピクセルパーフェクトなレイアウトのメンテナンスばかりやってきたから
ノーマライズcssや大雑把なレイアウトが全然できない・・・ HTML / CSS 関係の事なら何でもOK
質問者に暴言を吐く人はこのスレは見るな！！
回答するかさもなくば何も書き込むな！！ >>591
いや、>>1 に書いてあるまんまをコピペしただけ いまってなるべく、極力、div要素は使わない方がいいんだよね？・・・質問①
<div id="header">なんかもいまは<header>で記述できるわけだから
その場合、header要素に対してidって、みんなどうしてるの？・・・質問②
単純に<header>だけなのか、まさか<header id="header">とか記述してるわけ？ > いまってなるべく、極力、div要素は使わない方がいいんだよね？
別に構わんだろ 特定の記事を一覧や最新記事から非表示にする方法はありますか？ >>597
自分のサイトの話なのか、他人のサイトを閲覧する時の話なのか
何かしらのブログシステムを使ってるサイトの話なのか、情報が少なすぎて
答えようがない >>598
自分のlivedoorブログのaboutページを記事一覧から非表示にしつつグローバルナビゲーションの固定リンクから見れるようにしたいです
よろしくお願いします >>599
記事の公開日時設定を1番古くするんじゃダメなの？
それがイヤなら逆に公開日時設定を未来の日時に設定して、その記事を先頭に固定して
それをfirst-of-typeとかで指定してdisplay:none;で非表示にすりゃいいんじゃない？ >>600
日時設定は盲点でした、first-of-typeもやってみます
ありがとうございます >>593
質問①
んなこたーない
質問②
好きにしろ >>593
idやclassに使う文字列については昔からある質問なんだけど
わりとまじで好きにしていい
機能としては識別子足りえればいいわけで
実際、機械が書くhtmlだったらランダムな文字列になることもある
で、人間が書く場合は
外側というか、インデントの浅い位置にある要素に
「header」のような汎用性の高い単語を使うと
後々「ちっ…」てなる程度の後悔は起きやすいと個人的には思う >>593
どっちかというと
idはページ内でユニーク（唯一）な存在でなきゃならん
ので、なるべく使わないようにしてる感じ
アンカーやjavascript でしょうがなく使う、
くらいなるべく使わない。 header なんて文書構造を示すタグで、css とかで修飾すべきではないんじゃないかという個人的感想
だからidなんてナンセンスじゃないかと思ってる
表示のためのタグと構造のためのタグがごちゃ混ぜで困ると思うのは少数派かな？
div の中の要素の margin は外側の div の margin に加算されるけど、p の中に p を入れちゃうと中の p の margin には外の margin は加算されなかったりしたと思うけど、そんな細かい違いがごちゃ混ぜ、という意味 セクショニングタグに対してスタイル掛けない方がよいのでしょうか？ えええ
むしろ自分でコントロールしてない要素がひとつでもあるなんて気持ち悪いというか
ソワソワしちゃうわ俺 >>605
pの中にpって、そもそもできないだろ
それやったら自動的に内側のpの直前で外側のpが閉じられるから
意図した表示にはならない >>608
だから p は div と異なって、表示の構成のためではなく文書の構成を示す意図が込められている
このように、表示と文書の二つの軸を持つDOMってごちゃ混ぜで困るよね、という発言 pは段落という意味なのでネストは意図的にもおかしい divの中にpすら書かずに文字を書くのは厳密的にNG？ >>607
結局は囲う要素増えると面倒なので、セクショニングタグにもスタイル掛けてるけど、
言わんとすることはわかるので、どうするべきかずっと迷ってますわ…
セクショニングタグの中身にposition: absolute; 掛けたりすると、
見た目上はセクショニングタグだけ取り残されてたりするので、もやっとするんですよねｗ >>610
いや、だから
HTMLの仕様が表現寄りのタグと、構造寄りのタグが混在していて座りが悪く思えるという話で、p はその具体例に過ぎないから、そこに拘られても困るんだが 最終的には保守しやすやり方が
仕事で使う上の正解になる
たとえW3Cがなんて言ってこようとな
グーグルに拾われりゃどんな構文だってかまいやしねぇ >>613
要素の意味とスタイルには何にも関係ないので
その拘りはあまり意味ない気もしますがね >>588
すまん、もう実は解決したんだ。ありがとう
奇跡的に、中のコンテンツ部分は全部幅固定になってたから、あとはそれに合わせて作った。
最初、SP表示の体にならなかったのはタグの内包の仕方の問題だった >>616
セクショニングタグは構造を示すタグだからスタイリングの対象じゃない
みたいな感じだったかと
まあ、気にし過ぎても意味ないですしね .wrapper{
max-width: 1100px;
margin: 0 auto 0 auto;
padding: 0 4%;
}
とあるのですが paddingの4%の数値はいくつなのでしょうか？
親要素に特に指定はないようですが 親要素にwidthの指定が無い場合はwidthは初期値auto widthのautoの４％は具体的な数値はなんでしょうか？
後margin-top 10%も何を相対的に見て10％なのかわからないです
https://pastebin.pl/view/881c503b >>621
それじゃwidthのautoの具体的な数値はどうやって決まってると思う？
margin-topのパーセント値もmargin-right、-left、paddingと同じように
包含ブロックの幅に対する割合 >>622
すいませんわからないです。
というかどっからwidth、なぜwidthが出てきたのかも理解出来てないです。
一通り入門書でHTMLCSSのタグとプロパティは勉強したのですが
やり直したほうが良いですかね；
お勧めの初級本も教えて頂けると助かります >>625
大雑把に言えば親要素の幅よ
ただプロパティによっては自身の幅になることもあるんで
その辺はひとつずつ、自分で試してくれると助かる >>625
子要素のwidthの値がautoだと、基準となる親要素の幅が、親要素の兄弟要素の幅によって決まったり
その兄弟要素も全体のビューポート（スマホやPCの画面の幅）によって、基準となる数値が変わったり
とにかくケースバイケースなので、autoの値は何で4%の具体的な数値は何？って聞かれて、HTMLや
CSSのソースを全部出されても、具体的な数値は答えられないってことなんだよ
これは例えばvwとかemとか相対的な割合を示す単位なんかでも言えることなので、単位については
CSS の値と単位 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units
auto設定した場合の効果については、プロパティによって異なるので、widthに限らず下記URLにあるプロパティの
リンク先を読んで、色々と勉強してみるといいかも
auto - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/auto cssでレイアウトを一々指定するのが面倒くさいです。ドラッグで簡単に幅を調整できるようなツールないですか？ 俺も興味本位でblockの入れ子が可視化できるようなものがあれば面白いなあと思ったけど
開発ツールでソースにマウス重ねるぐらいで良いか Firefoxの3Dビューじゃね？と思ったら
廃止されてた
アドインとしては誰かが作ってるとか >>630
あれ良かったんだけどなぁ、クライアントに見せるとテンション上がるの面白かったｗ
廃止されたのは残念無念 margin, paddingで発狂していたあの時も
突然、違和感無く考えられるようになったなぁ みなさん、何でコーディングされていますか？
やっぱりメモ帳ですか？ マルチカーソルとemmetのないエディタではコーティング出来ない軟弱な体になっちまった… >>640
理由じゃねーよｗ
道具は何だって聞いてるんカスが サイトのタイトル<h1>のの1文字ずつに<span>とCSSで色と装飾をほどこしたいのですが
（Googleロゴのような感じで）、
その場合、SEO的にはバラバラの文字として認識されるんでしょうか
それともタイトル文字列がひとまとまりとして認識されるんでしょうか google先生は見た目命
心配ならtitle属性書いとけば >>647
ありがとうございます
title属性書いておきます HTMLでの特殊文字について教えてください。
特殊文字を使わなくても問題なさそうな記号ってありますよね。例えば ×÷→などなど
こういった記号もコードで書くものですか? あんまり意味ない気はするけどな
見る人が使ってる書体にその文字が無ければ表示できないんだし
気になるようなら
ウェブフォントで書体を決めた上で普通に書けばいいんじゃない？
その方が抜けがない >>649
あと文字コードで書くあれは
数値文字参照という <style></style>は<body></bodyに書いてもいいんですか？ styleタグってあったなぁ。
最初分けるのが面倒だったけど、セレクタが100個超え出して意外とすんなり分離してできるようになったわ HTML/CSS初学者です。
お客さんから制作サイトのデザインをもらった時の各所の高さや幅、フォントサイズの特定方法についてお聞きしたいです。
カラーコードやフォントを画像から特定してくれるWebサービスは見つけることができたのですが、
widthやheightやfont-sizeはどうやってデザインデータから特定するのでしょうか？
実際にまだ仕事を請け負う段階ではないのですが、ふと疑問に思ってしまいました。 >>655ですが、marginやpaddingも同様にどうやって特定するのでしょうか？ デザインって手書き？
作っていく時に都度脳内で考えて作っていくなぁ
あまり事前に考えるとしんどいよ >>657
手書きであったり、ペライチの画像データとかで渡された時を想定していました（実際にそういうことがあり得るのかはわかりませんが。。。）
Photoshopのデータとかの場合は、高さや幅もデータから読み取ることはできるのでしょうか？
まだまだ勉強途中なので、的外れなことを言ってしまっていたらすみません。 フォトショからのデータからは無理、拡大して見極めて フォトショやイラレはボタン等をスライスして使うにしても、データを作成する時点で
Web用にデータ作らないと、寸分違わず作るとか無理だからなぁ >>659
PhotoshopかXDのデータしか貰わんが
ピクセル単位で全部わかるよ
Photoshopなら全ての要素がレイヤーで分かれてて
要素ごとの大きさは選択すれば表示される
要素間の距離も大体は触るだけで表示される
テキストの書体、サイズ、行間、文字間も
選択すれば全部わかる
テキストのバウンディングボックスが適当な大きさの時
他のオブジェクトとの距離がいい加減になるけど
ガイドラインとスライス上手く使えばきっちり測れる
商業ウェブ制作は九分九厘そうやってると思うけど
違うことあるんか…？ >>658ですが、皆さんありがとうございます。
ペライチとかで渡された場合は、ある程度感覚と経験的な部分で推測していく感じなんですね。 もし1枚画像で「なるべくこれと同じに作って」と言われたら
それをキャプチャー画像として下絵みたいなもんにして、
あらためてデザインカンプ作って作業するかな、、
むっちゃシンプルならざっくり作っちゃうかもだけど >>663
イラレから出力したpdf送ってきて
「ここまで俺が作ってやったから1日あったらできるでしょ」オーラ嫌い
お前がやれと言いたくもあるが、言えない事情もある あと「なぜこれぐらいで3人日かかるんだよ」とか言われるけど
12時間ごとにレイアウト変えたりするオマエのせいだよと
言いたいけど言いにくい事情もある マルチデバイス時代だと理解していない客を相手にした時の頭の痛さよ 言わないから伝わらないんだよ
言うべきときにはちゃんと言うべし デザインってのはこの仕事やってるなら常にアンテナ張って収集しとくもんだ 送られてきたデザインを元にどうコーディングするかって話の最中に、自信満々にこの発言 >>670
そうなんだ
俺はデザイナーではないのだけど
同僚のデザイナーには黙々とペンタブ握ってる人も
紙に鉛筆で色々描きまくってウロウロしてる人もいるから
よくわからん世界だー
わからんで済ませてはいかんと思ってはいるんだが
勉強するのもなかなかしんどい… >>675
そりゃ製作の手法は各自で色々とあるだろうけど大抵のプロは資料揃えてると思うぞ
インスピレーションだけでやるのは喰っていくレベルでやるには限界あるよ もしかして
紙ベースのとこがwebに進出しようとしてる話なのかな htmlのbaseってどういう意味なんですか？
テンプレートの設定って認識でいいんですか？ 最近は写真と特殊なフォントでもないかぎり
ほぼCSSで再現可能だからな
素材切り出しもそんなないんじゃ >>678
URLの起点
けどこんなの
20年前でも既に使わなくなってたので
よほどのことがない限り忘れていいと思う marginとpaddingの明確な使い分けってあるんですかね。
ボックスモデルは理解できているのですが、「marginとpaddingのどっちを使っても見た目が同じになる」ってことがよくあるのですが、そういう時にどっちが正解なんだろうって思ってしまいます。 >>683
そういう場合はどっちでも良いってことですか？ >>685
どっちでも問題やいのなら好きにしていいよまじで
ただ後々のことも考えて
本当にどっちでも良いのかは決めた方がいい
一箇所だけなら
不都合があったときに変えるのはさして苦にならんけど
大量になると厄介だしね marginの相殺とかあるし、後々border設定するかどうかとか
border-boxがデフォな場合とか、色々とあるしなぁ marginは要素を越えて出っぱることあるから
あんま好きくない
けどマイナスマージンは何気に便利だし 親要素にborderかpaddingがないとき
子要素のmarginが貫通する仕様って
20年前以上から変わらんけど
なんでこうなってるんだろう… jQueryはもう古いとか、オススメ出来ないとかいう情報を見るのですが、
オススメ出来ない理由は下記で、これがどうでもいい場合は使っても問題ないのでしょうか？
①使わない機能が多いのに、DLするサイズが大きい。
②jQueryの機能は、普通のJavaScript機能で代用出来るケースが多い。
③①と②の理由により、SEO対策を考えると、他に選択肢がある。 >>691
合ってる
要するに、主にファイルサイズと実行速度の問題だから、
それが問題にならないなら使っても良い サイズは、90KB ぐらいでしょ？
これでダメなら、動画を使っているサイトは、すべてダメ！
jQuery を使わないと、バグが増えるから、100万円とか開発費用が高くなる。
それが受け入れられない 俺もふと思った、jQ使わないとなぜバグが増えるんだ？ >>698
それはないんじゃない？
多くの人にデバッグざれてるものだし h2{
font-family: "游ゴシック体"."Yu Gothic",YuGothic,sans-serif;
}
とあるのですがこの場合どのフォントの設定が適用されてるのですか？
4つありますが 見る人によって環境違うから先頭から見て入ってる物を表示する
無ければその人の環境で設定されてるsans-serif 入門レベルの質問をさせて下さい
HTMLファイルを書く時に、(例えば)<p></p>タグの中にEnterで段落を入れても
ブラウザで表示される際は反映されないことは分かったのですが、
皆さんはエディタを使う際に<br>タグ以外の箇所で改行を入れていますか？
改行を入れないとエディタ内の文章がものすごく横長になってしまって
把握しずらいんですが… >>703
個人的には横に長くなってもらう方が楽だけど
見づらいのなら折り返す設定にすればいいんじゃない？
HTMLとしては
改行文字と、連続する空白文字は
ひとつの空白文字として表示されてしまうので
文章の途中には絶対入れない
というか入れちゃダメ エディタの設定で表示領域で折り返すってのがあるはず
エディタ何使ってるか分からんけどVS codeならメニューの表示から右端で折り返す >>704
>>705
ありがとうございます
>>704
マジですか…知りませんでした
改行削除しないと…
>>705
本に付いてたテラパッドです
起動して見てみます >>701
英数字をこれを優先させて日本語はこれ・・・みたいなこともできるの？ >>707
基本書体を最初のbodyに記入
英数字だけとか分けたいなら英字フォントと日本語フォントを入れる
それか各所記述するかclass分けをしたりしてデザイン面を意識しながらタグ付けしていく
GoogleFontで検索してごらん はじめまして、 自分のレベルとしては書籍「HTML＆CSSとWEBデザイン 入門講座」とプロゲートのコースを一通りやったが、じゃあ何か作れと言われたら頭がほとんど真っ白になるレベルです……
次のステップとして簡単なサイトを作ってみるor模写？？をしたほうがいいのか、もう一度プロゲートをやって一部わからないとこもあるというレベルまでやり込んだほうがいいのか。
次のステップに迷っています。アドバイスいただきたいです。 君はウェブ制作から手を引いた方がいい
向いてない
書籍を読むことや、コースをゴールすることが目的化しちゃってる
ウェブで何かを表現したいとか、そもそもそういう熱意がないんだよ
無駄に時間を浪費したいなら、サイト作りでも模写でもなんすればいいと思うけど >>709
とりあえずとっかかりはできただろうから
あとは反復練習だよ
ウェブ以外の物事を学ぶときと同じやり方でいいよ >>706
terapadはunicode対応がいまいちだから他のエディタの方がいいよ >>710
いるいる
〇〇することが目的になってる…って言ってくる上司
お前がやれって言ったんだろと >>709
「完璧を目指すよりまず終わらせろ」っていう有名な言葉があります
先のことで悩んだり、細かいことは心配せずに
まずはとにかく作り始めて形にしてみるのが、上達や進歩への一番の近道です
そこからもっと良くしたい、そのためにさらに勉強したい、という気持ちやモチベーションも生まれてきます プロゲートなんて大して時間かからないでしょ再確認してもいいんじゃね
その後いきなり完璧なもの作ろうと思っても無理だろうけど
カードやらアコーディオンやら良くサイトで使われてるようなパーツ作ってみるとか
そしたら後配置するだけでしょ 適当にテーマ決めて、例えば架空の企業とか飲食店のサイトでも作ってみるとかな
んで、概要は同じでデザインだけ何パターンも作ってみるとかね
とにかく端から色んなもの作って数をこなして行った方がいいね >>714
それさ、ザッカーバーグの言葉らしく、名言集みたいのに入ってたりするけれど
企画・制作チームに対する愚痴だと思う、、、 なんのためにWEB勉強してるのか
自分のサイトを持ちたいなら自分のサイト作ればいいし
職業にしたいっていうなら
今の時点でそれだと向いてないからやめた方がいい 普段、ろくに質問に答えないくせに、聞いてもいないことを
いちいち言わなくてよろしい >>709
俺も初心者なので偉そうなことは言えませんが、
プログラミングを上達させるには、構文などある程度内容を把握したら
実際に自分なりに書いてみることだと思います
本を読み、Progateも一通りやってみたというなら
次のステップは実際に作ってみることだと思います
自分の興味のある内容をサイトにしてみてはいかがでしょうか？
骨格は本やProgateを参考にして構成し、
技術的な疑問点はここで質問すればいいと思います cssで「この行はどこのページに使われているんだろう」というのは
どうやればわかるのでしょうか？ 自分だったら、classやidはエディタのgrepでがーーーっと検索しちゃうけど
もっとスマートな方法があるかもしれない >>723
後出しで申し訳ない
htmlならvscodeの検索ですぐに出てくるのですが、
wordpressなので手元にソースが無いのです wordpressだったら、手元にソースが無いのは他人のサイトだからなのか
単に自分のサイトのテーマのありかを知らないだけなのか、公式テーマを
使ってるなら何のテーマを使ってるのか、状況によって対処法が違うんだから
分かる範囲でいいから、もっと色々書くことあるだろう >>725
独自テーマなので、クラシックエディタでhtml手打ちです
sqlでクエリ投げるか、移行用のバックアッププラグインからgrepするぐらいしか無さそうですね いまって３カラムを表現するのに、float:leftってもはや化石？
いまだと３カラム表現するのにどんな技術使ってるの？ floatはもはや消えゆくもので今はフレックスボックスが主流 floatは全体レイアウトには向かないけど
その要素だけ横に置きたいときに単体で使うにはいい
flexは親が必要になってくるんで
単体1個だけ動かしたいって時はfloat使っちゃうな 楽天のサイトのソースの一部に
id="'s_equ_9'-10-3"
とあったんですが
これをCSSのセレクタで扱うにはどうしたらよろしいのでしょうか
#'s_equ_9'-10-3
ではエラーが出てしまいます すいません。コンソールで試してみたのですがダメっぽいです
document.querySelector("#\'s_equ_9\'-10-3")
Uncaught DOMException: Document.querySelector: '#'s_equ_9'-10-3' is not a valid selector >>740
document.querySelector("#\\'s_equ_9\\'-10-3") >>741
いけました
度々即答ありがとうございます 質問というか改善点指摘欲しいんですが
jsでクラス付与除去で開閉するアコーディオン作ってみたけど動きが気にくわない
カクカクな感じを改善する為にどうしたらいいですか？
https://jsfiddle.net/4z93n6rs/ >>743
とりあえず、.openのmargin-bottom: 2px;は、.acco-contentに設定した方がいいかも >>743
あと>>744に加えて.questionのmargin: 0 0 2px 0; はmargin: 0;にして
.openのmax-heightはremとかemじゃなくpx指定した方がいいかも こういうのってjqueryじゃあかんのか？
ゼロから作るの出来ないからすごいことだと思うけど >>744-745
指摘部分メインにちょっと試してみます >>746
この程度ならあんまり
jQ使うメリットもない気もするがなあ
クラス取っ替えてるだけだし
中身の高さが未定で測らにゃならないとしても >>749
自信ないけど、labelとdisplayとtransitionみたいな感じ？ CSSだけで似たようなの作ってみたけどこっちの方が動きがスムーズですねえ
こういうのはわざわざjsでクラス付与除去しないで書いた方がいいんですかね
https://jsfiddle.net/z7crbfup/ 10年前まではjQuery全盛期だったのに
いまはすっかり人気ないんだね
じゃあ、jQueryの代わりに流行ってる技術って何なん？ さらに調べてみましたアコーディオンタグだけできるのか
detailsとsummary知らなかった・・・ >>751
>>752にもあるように、それらとcheckbox使う感じだね
スクリプト使わずにcheckboxのONOFFでCSS切り替えるの便利
>>754
detailsとsummaryは便利だけど、IE非対応だしなぁ ReactとかBootstrapとか？
PromiseとかquerySelectorとかが仕様として移植？されたので、本家のjQueryを使わなくても良くなった >>753
代わりにというか
無くても困らなくなったんだよ
昔はブラウザで実行できるJSが貧弱だったんだよ
querySelectorすらなかったわけで
だからjQのようなライブラリが重宝してた
jQ以前は、みんなオレオレライブラリを作ってたけど
jQがスタンダードになり得たのは、タイミングというか
ウェブを作る人の数がドカンと増えた時期と重なってたからだと思う ソースコードで長い文章をenterキーで改行するとブラウザで表示したとき勝手に半角スペースが挿入されるけど
挿入されないようにするにはどうすればいいんですか？ >>758
>>704
それを無理やりどうこうしようとするのは
20年前のバッドノウハウなんで
今はその辺は
融通のきくテキストエディタを使ってなんとかしてください CSS で 3px以上のテキスト縁取りを付ける方法を解説してるページを教えてくれないか？
svg とか text-stroke 以外で すみません
pixivでいいねブックマークの数字を消したいのですがstylusでどんなCSSを使えば可能でしょうか
調べて色々したのですが上手くいかず教えていただきたいです そのpixivとやらのサイトのどの画像かぐらいurl貼ってよ >>760
ほれ
縁取り文字・白抜き文字のCSS生成
ttps://webparts.cman.jp/string/outline/ >>761
「いいねブックマーク」なんてものがあるのか、「いいね」と「ブックマーク」
それぞれ別の数字の話なのか知らんが、とりまエスパー
dd[title="いいね！"],
dd[title="ブックマーク"] {
display: none !important;
} >>764
俺も見たことないけど、クライアントは数字だけ消せってお達しやぞ >>763
ありがと。
ただ、これは縁取りというにはチョット
ギザギザが醜い。
これが、限界なのかな？ >>765
実はこれで数字消せるのよ
>>766
ぼかしを増やすしかない 最近、stylusネタ多いな
どこかで流行ってるのかね >>769
pixivの場合、単に数がddで出力されてるってだけだよ >>761です
画像貼るべきでしたすみません
画像用意したら改めて教えていただければと思います
>>764
なんの画像もなくすみません有難うございます ネストの深さってどのくらいまでが許容範囲なんでしょうか。
ページ全体をdivでwrapして、その下にheaderタグ入れて、その下にdivでheader_wrapperクラス置いて、その下に各ブロックのコンテナクラスをそれぞれ作って......なんてやってたらネストが5とか6とかになってしまいました。
私としては分かりにくくは無いように思えるのですが、他の人が読んだらここまで深いとどうなのかなぁと。 タグは削ろうと思っても限度があるからな
具体例を挙げてくれれば、改善案くらいは出るかもだけど >>772
そもそも人間が読むものではないから
そんなに気にしなくていいよ
書きにくいようであれば
HTMLをモジュール化できるツールとか使ってバラバラにすれば
インデントしすぎて書きにくい、みたいな問題は
そこそこ緩和するし 「まさかhtmlを人が書く時代がこんなに続くとは（作った当時）思わなかった」 そうかなあ
HTMLはそこまででもないけど
CSSがガンガン便利になっていくから
それを最大限使うメソッドが次々と現れるので
HTMLを作るプログラムでは対応が追いつかない
っていう現状は
賢い人は読めてたんじゃない？ >>772
前任者が10ぐらい平気でもぐらせたから大変だわ。
とりあえずすべてのネストにdiv class="contents" 入れてるから面倒 テーブルレイアウト全盛期なんか10とか20とかヌルイ数じゃなかったし
なっがーいHTMLをガーッとスクロールして
波打つ様をビッグウェンズデーと呼んだものです いちいちインデントつけてんだったら
インデントがうざいとは思うかも >>776
実際これから先もまだまだ続くのかね
グラフィックソフトみたいので組んだら納品レベルのhtmlとcssが出来上がり
みたいのは来ないのか >>782
そんな簡単にできるようになると商売敵が増えるから敷居高いままでええわｗ >>776
うちはバックエンドはGo、フロントエンドはjs+cssでhtmlはほぼjsが出力するものだけにしてる
要するにxhtml+xslの現代版だけど、やはり万能じゃないなぁ直感的じゃない
でもselect要素のリストとか一個受け取って使い回すんで通信量は激減(formのsubmitも廃止でapi呼ぶ) デザイナーとか分業してない零細だからできる構成なんだよな
滅茶苦茶にダサイのがネック
ダサイおかげでWFIに関しての改修はしなくて済んだ https://saga135.hatenablog.jp/
この記事ページの白色背景を透明、或いはサイドバーと同じような半透明にしたいのですがどうしても巧く行きません
色々試しましたが結局ダメでした
やり方教えて欲しいのですが宜しくお願いします >>788
.entryのbackground: #fff;を消すか
上記#fffをhsla(0,0%,100%,.2)に変更 >>789
すいません完全な初心者なもんでまだ分からないのですが
cssのbackground: #fffを消すという事ですよね？
それをしても、検証してからhtmlを削除しても何も変わらないのですが >>790
はてなブログ使ったことないから、何を言ってるかサッパリ分からんが
何かしらのテーマを使ってるんだったら、デザインCSSとかいうやつに
.entry {
background: hsla(0,0%,100%,.2) !important;
}
とか追加すりゃイケんじゃね？
知らんけど >>791
出来ました！
本当に有り難うございました＾＾ HTML手打ちで作ったサイトなんですが、PCで見ると程よいのに
スマホで見るとフォントが大きすぎたりして見づらいです
丁度クロームの簡易表示くらいにしたいんですが
どうCSSを弄ればいいでしょう。
また、スタイルシートを二つ用意すればいいんでしょうか >>793
レスポンシブウェブデザインについて調べてみるがよい >>793
メディアクエリについて調べてみるがよい どうなってるんだ
コードを書いてブラウザを開いても
コードがそのまま表示されるだけだ
あえ？ <!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>猫の実態</title>
<meta name="description" content="猫の好きなもの、日々の生活をご紹介">
</head>
<body>
<h1>猫の一日</h1>
<p>ひたすら寝ています。</p>
</body>
</html> 解決しました
おしんこにｈｔｍｌていれなきゃダメなんだね
ちなみに大文字と小文字は区別しないと、ですか？utf-8だとアウト？ 少し目が悪くなってきて
おちんこに〇〇〇〇いれなきゃダメ
に見えたわ Bootstrapなつかしいなｗ
あったな～ｗと思い、いま調べてみたら、
なんか俺の知ってるBootstrapと違う・・・？
ガワが新しくなっただけか・・・？ 新着情報
2021-03-09：時間短縮営業中です
2021-03-10：ざるそば始めました
2021-03-11：出前対応しました
こんな時って日付と内容の所は
ul li
dl dt dd
どんなタグを使うのがセオリー？
情報にも2要素あるからdlだろうか dlで頑張るのもよく見るけど
1行毎にdl要素書くくらいなら
正直tableでいいと思ってる あぁぁ、tableの枠無しか。
文書構造的にはと思ったけど、どうでも良さそうなとこだもんね アドバイスありがとうございます
https://techacademy.jp/magazine/9369
メディアクエリについてここを参考にしてCSSを書きました。
結果としてPCのブラウザを縮小すると合わせてレイアウトも指定通り縮んでくれるようになったのですが
スマホの画面上（chromeや他のブラウザでも）だと変わりませんね・・・
もちろんキャッシュは削除した上で確認しています >>805
<meta name="viewport" content="width=device-width, initial-scale=1"> >>806
これだ・・・
本当にありがとうございます 自分のホームページに、FBのいいね！ボタンを付けるか迷ってるんですが、
付けるとしたら何か注意する点はありますか？ とにかく見やすい・読みやすいシンプルデザインがいいんですが
参考になるサイトありますか？
テキスト主体です >>802
<section>
<h3>新着情報</h3>
<dl>
<div><dt>2021-03-09：<dt><dd>時間短縮営業中です</dd></div>
<div><dt>2021-03-10：<dt><dd>ざるそば始めました</dd></div>
<div><dt>2021-03-11：<dt><dd>出前対応しました</dd></div>
</dl>
</section>
いまどきならこんなのが多いんじゃね そこはsectionよりarticleのがいいような CSS書くこと考えると
tableのようにrowになるブロックがあった方が自由度は高い
このようなのをdlで書くのは
00年代前半のウェブ標準ブームの時からあるけど
HTMLとCSSのことなんか知ったこっちゃないデザインに泣くことも多かったものです >>819
なんでｄｌの中にdiv入れてんの？だよね dlの中にdiv入れてもいいんだけど気持ち悪いけど便利は便利 もうdateタグなんて使われていないのかな
<date>2021-03-09</date>なんてあまり見ないか 結構長いことコーディングしてるけどdateタグなんて使ったことねーや リンク先のホームページを新しいタブで開くようにしたいと思い調べてみたら、target="_blank"を記述すればよい、と書いてるサイトを見つけたのですが、
その他多くのサイトではこの記述方法は非推奨となってるみたいです
その理由を教えてもらえますでしょうか？ >>827
別タブや別ウィンドウで開くかどうかはユーザーそれぞれが決定すべきであり
サイトの提供側がコントロールするのは間違ってるとうるさいのがたくさんいたから
まあ、そんなこといわれても、商売でWebサイト作ってる立場としてはなるべく長居させないと
クライアントに詰められるので、そんなきれいごとは無視するのが普通だな timeタグだね
<dt><time datetime="2021-03-10">2021-03-10：</time><dt><dd>ざるそば始めました</dd> 昔は別タブで開くと、スマホ初心者が前画面に戻れなかったりしたと思うけど
今時は問題ないのかね 外部サイトはリンク横に別タブ開きますよアイコンつけて_blank
みたいなとこ多いしな MDNでもtarget属性が非推奨なんて無いから、モバイル端末でのバッドノウハウとか、勝手に言ってるんだろうな win9x時代は新しいウインドウ開かれるとリソースがーとかあったなぁ 遅くなってすいません
>>828の人やその他参考になるレスをくれた方ありがとうございました 下に画面スクロールした時に、横のボックス（div）を途中で固定させてるサイトを
見かけるけれど、アレってCSSでもJavaScriptでもどちらでもできる？みたいだけれど、
一番スマートなやり方だと何なんだろう？ CSS。
JSでやると端末の性能によっては結構処理重いよ。
CPU/メモリ使用状況をdevtoolで見て確かめて。 キャラメルとかハイチュウとか
スニッカーズの中身とか食べた時にstickyて言う
CSSのstickyはIEで動かんのでご注意
俺は広告系ウェブ制作なので
JSでscrollTop見ながらpositionをfixedにしたりstatic戻したり法を
嫌ってほど作らされてきたけど
ここ数年は重くて困ることはほとんどない印象
総務部から廃棄されたCore2Duoの事務用デスクトップをテストベッドにしてるけど
onScrollで2～4個の条件を計算させても平気 その他いろんな処理の積算だからな
チリツモ注意
使わず済むならそれに越したことない >>839
へぇ！特には役に立たないけど良いこと知った！ 保守面でもjsよかCSSで実装できるならCSSのほうやで
昔はCSSでできなかったからjs使ってただけで
そのままCSSに切り替えられないでjsのままのサイトが多いってだけだろ
IEも今年度中には死んでくれるだろうし
IEに関してはもうシカトしても問題ないだろ >>843
ジャンルと業界によると思う
なんせ、去年edgeのChrome化を
わざわざ遅らせてもらったほどの国ですから > IEも今年度中には死んでくれるだろうし
いやとっくに死んではいるんだ
ただ成仏せずに亡者となって彷徨い迷惑かけてる うちの客の医者爺さん達はあの水色のアイコンしかダブルクリックしないからなぁ
firefox用意しているのに、癖でIEを使ってばっかり まだにIE使ってるような客なぞいらん！
って言えたらいいのに～♪ IE→edgeのリダイレクトをコンテンツ側で書けるようにしてくれればいいのに >>849
それ、もしかしたらどうにかできるんじゃないのかな
今googleフォームでユーザーからのリクエストを受け付けるフォーム作って
ブラウザテストしてるんだけど
ieで開こうとすると
強制的にedgeで開くようになってる
でも、自分のサイトはそんなんならない hoge ul li a:nth-child(n + 8)
で、nth-childが効かないんですが、
何が原因でしょうか <div id="hoge">
<ul class="nantoka">
<li><a hred="nanka">メニュー1</a></li>
<li><a hred="">メニュー2</a></li>
<li><a hred="">メニュー3</a></li>
<li><a hred="">メニュー4</a></li>
<li><a hred="">メニュー5</a></li>
・・・
</ul>
</div>
css
#hoge ul li a:nth-child(n + 8) ; #hoge ul li:nth-child(n + 8) a; >>856
ほんとうですか？
aを後ろにやるんですか？ >>855に似ているのですが、
↓でdummy(間に幾つ入るか不明)を除外したk番目のtargetをCSSセレクタで指定とかできますかね？
<div class="main">
<div class="target"><span>No.1</span></div>
<div class="dummy"><span>dummy</span></div>
<div class="target"><span>No.2</span></div>
<div class="dummy"><span>dummy</span></div>
<div class="dummy"><span>dummy</span></div>
<div class="target"><span>No.3</span></div>
...
</div> 上に、<dl>の中の<dt><dd>を<div>でくくっていましたが、
<dt><dd>を2コラムのなかにfloatで並べて、
2つの<div>の高さをJSで揃えることはできるでしょうか？
できますよね。 <div>でくくるのは、そういう目的じゃないですか？ >>862
残念ですが出来ないです
>>863
flexやgridじゃダメなんですか？ >>866
やっぱりできないですか……ありがとうございます position: fixed; で右下に固定している要素があるのですが
iPhoneのsafariで、下端にあるブックマークとかのバーが出てきた状態で
上にスクロールすると下端からずれてしまい宙ぶらりんな位置に移動してしまいます。
しばらくすると下端に戻るのですが見栄えがよくありません。
何か対処方法は無いでしょうか？ fixなのに固定されないって変じゃね？
タイマー的なもので制御されているのかな
というか雑な作りね >>852
そんでそのリストに載せてってMSにお願いするメールアドレスが公開されてるんだけど
基本的に公共性のあるサイトに限られてんのよね… 複数のHTMLを一つのHTMLにまとめるのってメリットデメリットある？
例えばゲームの攻略サイト作るときにプルダウンメニューで武器.htmlや防具.htmlを選べばiframe内に内容が表示される構造を
index.htmlに全てまとめたりする場合
ファイルサイズが大きくなるから読み込み遅くなったりすんの？ >>871
一長一短だけど分けるメリットをひとつ挙げるならブラウザ側でhtmlキャッシュが有効に活用される確率が上がる。
例えば一緒くたのhtmlの場合、武器情報が更新されたときも防具情報が更新されたときも一緒くたhtmlの内容全体が無効情報となってキャッシュ破棄だがそれぞれ分けてiframeで読み込んでるなら武器情報が更新されたときは武器.htmlのみ、防具情報が更新されたときは防具.htmlのみがキャッシュ破棄対象。
もちろんサーバでキャッシュまわりのヘッダをきちんと運用してることが前提だし、httpバージョンによってはコネクション数増加と相殺して必ず有利とは言えないかもしれないが…
デメリットは他の人が目を三角にして語ってくれるだろう。 >>858
会社で、aを後ろにやったら、できました。
ありがとうございました。 ul liの仕様みたいなのを
<li>カラー赤, 果物, 甘い, バラ科
と書きたいけど
客が
<li>カラー赤 / 果物 / 甘い / バラ科
こう スラッシュをセパレートに使っているのはgoogleや記法的にはデメリットある？ gridってよく使うの？
うちはまったく使わないflexばかり <option value=""></option>
</option>は省略出来るけど<option value="">って省略か記述短くする方法あんの？ >>877
optionの中身とvalueの値が一緒ならvalue省略可 >>876
パッと思いつくのは
・帳票のようなレイアウトするとき
・tableのrowspanのようなものがあるタイルレイアウトのとき
・HTMLのこと考えないでレスポンシブデザインされたとき
・HTMLは変えられないけどデザインは変えなければならなかったとき
とか >>874
逆にカンマだと何かメリットある？って話じゃない？ >>876
普通に使うでしょ
レスポンシブにはこういう概念がある方が製作しやすい flexが便利なのは身に染みてるんだけど
gridってレスポンシブでどう活用するのかいまいち分からない 高さのそろってない□が敷き詰めてあるレイアウトだいきらい >>882
並びの順番変えなきゃならん時とか
デザインする段階でちゃんとHTMLとCSSのこと考えて
出来る範囲でのデザインしかしてないなら
まあ遭遇しないとは思う 並びが必要な時はflexのorderでできるじゃん いやgridなんだからカラム数決めるでしょ？flexと違って。
それをレスポンシブに使うと便利だというケースがピンと来ない。
どうすると便利に使えるんだ…？ 横に並べたとき折り返しで横幅レスポンシブと相性いいじゃん
gridは何をどうしたらレスポンシブに便利なの？
煽ってるんじゃなくて便利に使いたいからユースケース教えてくれ PCとSPで全然違うレイアウトにするときじゃね？
良くあるじゃろ
LPとかやってると特に 企業サイトとかでフッターに入れないといけない情報が多い時とかgrid使うかな
あとはインターネット老人会的なつかしいテーブルレイアウトとか テーブルレイアウトは現役だな
50ページぐらいあるけど、作り替える体力がもう残っていない企業 sjisは、いろいろ諦めがついてよい
大したことやってないだろうし boostrapって色の独自カスタムッテできないんでしょうか？
primaryとかそういうので指定知る感じですか？ >>897
んなこたない
上手く使ってる人は
Bootstrapの骨格を活かしてガワを変えてる感じ
ただきちんと細部まで理解せずにやると
むしろBootstrapであることが嫌な方向に発露する
おっちゃんそういうの何度も食らってる >>898
最大のメリットはグリッドシステムってことですよね。
嫌なこととはカスタムCSSとの干渉とかそういうことですか。 今だから言える。
複数クラスを使い始めるまで数年かかった
冗長的にプロパティを使う違和感は感じていたのになかなか踏み出せなかった >>899
どうだろうなあ
最大というほど大したもんでもねえ気もするが >>901
普通に自分で組んだほうがいいと？
フレキシブルデザインへの対応は相当面倒らしいので
そもそもｐｃサイトしか作ったことないすけど >>902
今時スマホを無視するサイト製作とかありえんよ >>897
bootstrap-4.4.1/scss/_variables.scss
に、様々な変数が定義されている
$primary: $blue !default;
$secondary: $gray-600 !default;
など、8種類の色も定義されている。
これらは、$theme-colors でも使っている
この$primaryを直接上書きすれば、primaryの色がすべて変わる。
これで影響が大きすぎるのなら、$primary-100 とか新たな変数を追加して使えば？
YouTube にある、たにぐちまことのBootstrapの動画を見るとよい >>902
レスポンシブデザインのことけ？
さして面倒に思ったこともないけどなあ
携帯電話の頃はそもそもHTMLの段階から
PC/SP用に別々に作ってたじゃろ？
それがスマホになってHTMLはひとつで
CSSだけメディアクエリで分けて書けるようになって
便利だねって話なんで 慣れないうちは混乱するけどね
絶対値で考えない習慣ができれば自然と順応できる
はず スマホ、タブレットは単位vwで統一しちゃえば
絶対値で考えてても大丈夫
ウインドウの大きさが変わることないから ユニコードの追加多言語面の「シェイヴィアン」や「オスマニア」などの
文字を textarea などの中に表示しようとしても四角形が表示される
だけでちゃんと表示できないですが、表示するにはどうしたら
いいでしょうか？
meta 要素に charset="utf-8" 指定はしています。 まあCSS得意とは言えない人はboostrap使っといたほうが無難ってことでうｓかね
携帯サイトは別につくってたような気はするけど、 >>911
得意じゃない人の足りない部分を補ってくれる物ではないよ
得意な人がちゃんとCSS全部わかった上で便利に使う物 フォントの大きさをptで指定していて
パーセントを覚えた数年後にemの存在を知って
1.2emとか使い出したらremなんて出てきて
古くからあるサイトのcssは全部入ってるわ >>911
このスレには何でもかんでもbootstrapを推す変な人が居るから
勧められても、あまり真に受けない方がいい >>916
かといって批判してる奴が記述してる方法が効率的かといえばそうでもなく
フレームワークはライブラリでエンジンみたいなもんだな
でもデザインが頭に入ってない奴はどう作ってもそれなりだろう >>917
jsfiddleでいいから不具合が再現可能な最低限のソース貼って iPhone限定の不具合って、動作確認するのが面倒臭いんだよな > かといって批判してる奴が記述してる方法が効率的かといえばそうでもなく
ケースバイケースとしか言い様がないし、効率以前に何でもかんでも馬鹿の一つ覚えみたいに
Bootstrap勧められてもなぁ
全く脈絡も無くBootstrapの話をし出したり、質問の答えとして的外れなことが多いし
まぁ、そんな変な奴はRuby厨同様、スルーされてるから別にいいんだが iPhoneに限らずだけど、端末でしか再現しない不具合は面倒だよな Ruby on Rails をやってる香具師は、バックエンドしか知らない
フロントエンドのHTML, CSS も分からないから、
SASS だけやって、Bootstrap を使う
JavaScript も浅くしか知らない >>915
去年のデータだけど
国内のアンケでいまだフォントはpxとemつかってるってコーダーが6割くらいだった
以外にremは使われてない >>917
大雑把な話だけど
CSSだけだと完全にはうまくいかない
iOS Safariはあの伸び縮みするURL欄とボタンエリアをうまく計算に含めてくれない
どうしてもどうにかしたいなら
都度clientHeightを見て動かしてやるしかない
と思ってる >>926
商業web制作だと
九分九厘、PCではpx、SPではvwだと思う おれもアドレスバーが出たり引っ込んだりして画面の高さが変わるせいで、fixedでbottom配置した要素がおかしくなる現象苦労した…
位置が固定されず見栄えが悪いのはまだマシで、androidのChromeしか試してないけど、
下にスクロールさせてアドレスバーか引っ込んだと同時に強制的にスクロールをタッチして止めると、
fixedでbottom配置した要素のタッチできる位置が狂う。
clientHeightとか画面がリサイズされた時にイベント拾ってサイズを取得してみたけど、
自然停止した時は高さは更新されるが、強制停止するとサイズ変更は反映されないうえに、リサイズイベントも発生しないんだよ…
ちなみに上下どちらかに少し動かすと高さは更新された
もう仕様だと思って諦めたけど…それかアドレスバーを出したままにさせる工夫をするか。
だからfixedかつbottomでクリックできる要素を配置してるサイトは、この操作をするとタッチ位置が狂うのは検証したよ
firefoxは都度イベントが発生し、値も更新されるので、この現象はおこらなかったです
誰か解決方法知ってたら教えて欲しいわ… >>929
>>927ですが俺もonResizeやonScrollではダメだったな
animationFrameで常時監視ですわ fixedじゃなくabsolute;にしてjsでbottomを常時計算させるとかは？ 質問があります。初心者です。
Adobe XDでデザインカンプからコーディングしています。
ヘッダーが以下のような感じになっています。
★PCデザイン
幅：1440px
左右のpadding：120px
★スマホデザイン
幅：375px
左右のpadding：15px
この場合、PCデザインとスマホデザインにそれぞれ120pxと15pxを指定しまっていいのでしょうか？
それとも、それぞれ%などの相対単位で指定したほうがいいのでしょうか？
このケースの場合、左右paddingの指定はどのようにすべきか、単位も含めて教えていただけないでしょうか >>933
ちょうど >>932 のリンク先を読むと解決しそうな スマホは機体によって横ピクセル変わるから
最小限320pxと最大限を設定しないと崩れるぞ
特にいまだ320pxとか古いスマホつかってるオッサンとかいるからな
そういう機械に疎いおっさんほど偉かったりしてクレームになる >>933
scssで
@function vw($w: 0, $ww: 375){
@return ($w / $ww * 100)+vw;
}
みたいな関数作っておくと楽
padding: vw(15);
って書けばどんな幅のスマホでも
デザインカンプ通りの見た目になる word-break: break-word;
このプロパティと値にモヤモヤする・・・ word-break
word-wrap
white-space
の違いをよく読むと
その辺のもやっと感は少し薄れるかも word-break:break-word;
とまと
しんぶんし
イタリアでもホモでありたい >>934-936
ありがとうございます！
Sassはこれからなので、参考にさせていただきます。
もう一つ質問があります。
ブレイクポイントについてですが、XDのスマホデザインの幅が375pxならば、
それに従ってブレイクポイントも375pxにしていいものなのでしょうか？ iPhone12ProMaxは428あるし余裕みて480pxあたりじゃね？ bootstrapについて質問です
vs code使用なんですが、bootstrap5の補完機能はないでしょうか？
あと、フォントサイズを指定するときfs1などと指定しますが、fs1.2などとすることはできません。
「用意されたクラスだけ使用することで、デザインが整うよ」というものなので、基本的にはカスタムしないほうがいいわけですよね？
fs-1.2が使えるとしたら、バランスが崩れるということですか？ >>944
その場合、ブレイクポイントを480pxにしてヘッダーの幅を375pxにするということでしょうか？ bootstrapはそういうものなのでその程度使ってやってください >>946
それじゃあ足りないじゃん
デザインカンプの幅と
想定するビューポートの幅が違うのであれば
実装時に換算するしかない
そんなの面倒極まりないから
普通は>>936みたいなことする そんなに凝ったことしないなら%でも良いんじゃないかなと display:none;でテーブルの表示・非表示を切り替えてるんですが、Safariだけ正しく動きません
ググると特定の要素に対して効かないと出てきたのですが、表示したりしなかったりで規則性が無くさっぱり解りません
なんか代替え策は無いものでしょうか 分からない奴が口を挟むなと叱られるだろうけど
全体をdivで囲んでdisplay切り替えたら消えないの？ selectのoptionくらいしか消せなかったことないなあ
もしtableが消せないのだったら
俺もその親要素ごと消すのを推す テーブルをDIVで囲ってます
キャッシュをクリアしたら反映されたのでSafariの問題じゃなかったみたいですが、CSS外部ファイルのキャッシュは他のブラウザでも発生するしリロード程度で解決しないので、より深刻化 開発ツール開いてる時はキャッシュ無効化する機能あるっしょ そもそもiPhoneのsafariなのかMacのsafariなのか
バージョンが何なのかソースはどうか何も情報がない >>933
Bootstrap では、例えば、
.m-2 : margin のサイズ2
.p-3 : padding のサイズ3
$spacer の基準値は、1rem=16px。
$spacers Sassマップ変数にエントリを追加することで, さらにサイズの追加が可能です
サイズ
1 - $spacer * .25
2 - $spacer * .5
3 - $spacer
4 - $spacer * 1.5
5 - $spacer * 3
auto - auto 「クラス名にプロパティ名と値書くなー」と、女上司に言われた10年前の夏 左上のサイトロゴって昔はh1だったけど、
今はどうするのがセオリー？h2とかそもそもh系は使わないとか。 誰かデイトラの無料素材の模写コーディングやった人いますか？？
https://note.com/tokyofreelance/n/n4baf7dd10306
結局これの見本コードはまだ入手できないんでしょうか？？ 人の書いたコードを書き写す勉強法、らしい
どこまで有用なのかは分からんけど
真っ白なエディタを前に萎縮して何も書かないよりはマシなんじゃないかな
あと失敗恐怖症の人なんかにも良いかもしれない > 人の書いたコードを書き写す勉強法、らしい
* *
＊ ＋ うそです
n ∧＿∧ n
＋ (ﾖ（* ´∀｀）E)
Y Y ＊ そこのnote見た感じとあるサイトを同じように自分で書いていく事じゃないのかね >>964
>>965
あと良い感じのサイトを目コピで同じのを仕上げて製作スキル上げるとか あーなんか界隈で写経とかいってるやつ？
意味あんのかあれ htmlもcssも知らんけど特定のデザインだけなら組める
みたいな >>969
学生とか未経験がプロゲートとか終わってじゃあ次何しようってなったとき多少意味ありそう。 新しい言語を試すときにサンプルを写経しないでどうするんだ？ >>972
サンプルそのまま持ってきて
意味わかりそうなところから少しずつ手を入れてみる 初見
<ol>
<li>文章1</li>
<li>文章2</li>
<li>ここだけ文頭を連番じゃなく、type="circle"にしたい。</li>
<li>でも、ここ以降は以前の連番を継続させたい。つまり、ここは3</li>
<li>ここは4</li>
</ol> >>931
横からですが同様のトラブルが起きてしまっているので常時計算を試してみたいのですが
どんな仕組みで作ればいいんでしょうか？
bodyを基準座標としてブラウザの高さやらスクロール量やらで計算する感じであってますか？ 上位IDの強制力を解除する方法ってやっぱインポータントしかない？ すまん980だけど
規制中でスレ立てできんので
>>985よろしく 俺も誰かが作った7年前のサイト触ってるけど
カテゴリ別にid使われているから
レスポンシブでインポいっぱいだわ スマホでスクロールしようとしてメニューに触れた瞬間にサブメニューにdisplay:blockが発動するんだけど、これってどういう仕組み？
cssにタップではなくて触れた瞬間に作動する仕組みってあったっけ？ >>983 jqueryのclassメソッドとかじゃなくて？見当違いなレスだったらごめん すまん建てられなかった
もうちょいしたらもう一回試してみるけど誰か建ててくれたら嬉しいわ HTML/CSS のどんな質問にも優しく答えるｽﾚ 47
https://mevius.5ch.net/test/read.cgi/hp/1617839294/
改行多過ぎで建てられなかったので少し詰めちゃったすまん >>983
onclickだと自然なタップの感じ
ontouchstartだと触れたらいきなりの感じになる
後者なんではないだろうか position fix、bottom 0で中央寄せってできる？ >>979
いいんでない？
上手く行くかは試してないので分からんが >>991
その1
{ position: fixed; bottom: 0; left:0; right:0; display:flex; justify-content: center; }
で全幅の入れ物作って中に入れる
その2
{ position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); }
直にできるるがchromium系でぼやける場合あり >>991
fixedもabsoluteも
margin: auto; にして
左右中央なら幅を決めて
left: 0; right: 0;
天地中央なら高さを決めて
top: 0; bottom: 0;
親要素からはみ出す可能性があるときは
-1000pxとかにするといい このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 108日 11時間 26分 54秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
