HTML/CSS の質問に優しく答えるスレ 29 [無断転載禁止]©2ch.net
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構
HTML / CSS 関係の事なら何でもOK
質問するときはIDを出すためにメール欄を age にすることをおすすめします
回答してくれる方は優しい人のみ！
質問者に対して暴言を吐く人は このスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
質問側も節度あるレスで！
質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 28
http://mevius.2ch.net/test/read.cgi/hp/1500221766/ テンプレは最低限だけ追加した。
もう少し、リファレンス、仕様のリンクがあっても良いように思うので、意見よろしく。 1乙
公式でなく有名所サイトもあってもいいかな
貼ると宣伝に思われるから控えるが
>>4
そういうこと言わんで、せっかく立ててくれたんだから >>5
正直、個人サイトを入れるべきかは迷った。
個人的には神崎正英氏を信用しているが。
ブラウザベンダー系サイトも一定の信頼性はあると思うが、俺は辞書的に引くことが多かったから MDN や MSDN がチュートリアルとしてどれ程、情報価値があるかを知らない。
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
HTML | MDN
https://developer.mozilla.org/ja/docs/Web/HTML
ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳
https://momdo.github.io/css2/Overview.html
CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS http://mevius.2ch.net/test/read.cgi/hp/1500221766/998
> ユーザーがfloatを段組と勘違いしたのは
> 段組の機能がなかったからだ
それはそのユーザの読解力のなさが問題で誤解する事への弁明にはならない。 世の中には間違ったものが主流になってしまうパターンが腐るほどあるわけで 何から何まで全部対応じゃなくて
見える範囲使ってる範囲で大丈夫ならそれでいいじゃん、という風潮はよ >>9
いや当時floatに変わる段組みの仕組みがかなったのが一番の元凶。
あの時代にこれからはCSSを使えは言いすぎだった これからか。ならHTMLに文書ではないもののタグを作るべきだろうな。
例えばイラレみたいなドロー系ツールを作るとして
パレットに使うべきタグはなんなのかみたいな話だ シンプル低機能めなoekakiならわかるが
イラレみたいな、ってjsでクソ重い画像処理をやらせるのか・・・？ これからHTMLやCSSをどう書いていくか、ならともかく
HTMLの仕様の今後を云々はスレ違い板違いでは >>15
Photoshop Expressとかウェブ版すでにありますが？ ブラウザで動いてるphotoshop expressってflashじゃなかった？
違ってて、今普通に大サイズの*.aiとかjsベースのwebアプリで普通に編集できるんだったら
無知ですまん真面目に謝る だいたいをサーバ側で処理してるんであって
だからスマホ等でもなんとか使えるのだと思った
これをドロー系ツールと言えるのかは疑問だが 文書構造は、検索エンジンやスクレイパーとかが、文書の内容を把握したいからって目的がある
パレットに使うべきタグが仕様で策定されたとしてそれを何が活用するのか >>14
> これからか。ならHTMLに文書ではないもののタグを作るべきだろうな。
> 例えばイラレみたいなドロー系ツールを作るとして
> パレットに使うべきタグはなんなのかみたいな話だ
HTMLの正式名称を知っているか？
"HyperText Markup Language" だ
テキストをマークアップする言語でドロー系ツールに特化したタグが存在するわけないだろ
どうしても欲しいなら、XML + HTMLでタグを拡張するか、新しいマークアップ言語を WHATWG や W3C に提案しろ 昨日の float の件といい、仕様に文句をつける癖に仕様を知らない奴は何がしたいんだ？
IE5時代(1999/03/18～2001/08/26)から「CSSはそれが実現できるほどの機能がない」と主張し続けたらしいが、16年間ずっと文句を言い続けただけなのか？
そんな無駄な時間を費やすぐらいんあら、新しい仕様を提案しろよ
英語が読めない？⇒勉強しろ
仕様を提案できる程の知識がない？⇒勉強しろ
仕様を提案するのが面倒くさい？⇒諦めろ
現状、「俺が悪いんじゃない。世の中が悪いんだ。」と主張してる奴と同じレベルだぞ
世の中が悪いと思うなら、世の中を変えるか、今の世の中と付き合っていく術(処世術)を身に付けるしかないんだよ >>15
HTML5 には SVG があるので、HTML + CSS + JavaScript でドローツールを実装できないわけではない
勿論、<palette> のようなドローツール特化のタグを作るかは別の話
HTML で出来るのは SVG を「埋め込む」だけだ
ドローツール特化のマークアップができるわけではない 現時点で既にテキストをマークアップすること以外を
目的としたタグ存在してるから、その論法は通らないのでは まあ仕様について変えたいだのどうあるべきだのは他所行けよという要旨には異存ない >>24
自分の提案がweb全体に広まっていくとか（しかも無料）こんないい時代はないだろうにね AngularJS の繰り返しでは、
<ul>
<li ng-repeat="d in data">{{d}}</li>
</ul>
Spring Boot の、Thymeleaf の繰り返しでは、
<tr th:each="customer : ${customers}">
<td th:text="${customer.lastName}"></td>
<td th:text="${customer.firstName}"></td>
</tr>
各フレームワークで、独自属性を作っている そういうの覚えてもあっという間に化石になるのがね
smartyめっちゃ頑張って覚えたわ…（遠い目） smartyはEC-cubeとかまだ使うんでねーの
MVVMフレームワークは種類あるし、それぞれ覚える気すら起こらない
なんでjsでやるんだ？って思う。 jsでやる理由、それはサーバ負荷のクライアントへの転嫁 >>31
> なんでjsでやるんだ？って思う。
サーバーの負荷を減らしつつレスポンスを上げるためだろ？ EC-cube懐かしいな
今はamazonに丸投げしてるわ >>9
そう言えばこの間grid使ってみたんだけど
プレーンなテキストの流し込みならいいんだけど
inline-blockな要素とかで、グリッド数より少なかったりすると
まだchromeやsafariでも問題出てダメだったなあ googleプラスのアイコンて<g>ってタグ使ってるから
googleの「g」という独自タグかと思ったらgタグって一応あるんだな padding とmarginってどうちがうんですか？ >>37
似てるようで全く違う
感覚的にはmarginが使いやすいけど、基本的にはpaddingで余白を取るようにした方がいい 何を言ってるんだか。
marginは要素と要素がどれだけ離れているかで、
paddingは要素に含まれる領域ってだけだろ
わかり易い例で言えば、リンクにいくらmarginを増やしたとしても
クリックできる領域は変わらない。リンクのpaddingを増やせば
そこはクリックできる領域になる
使い方が違うんだから、どうしたいかできめるだけのことだ paddingとborderとwidthの調整が、
わかってるんだけどいつも変更→あっ…→ﾑｷｰとなる
解決したいです IEの仕様は正義だった
そのIEの仕様がbox-sizingだ >>40
* {
box-sizing: border-box;
} marginを使うかpaddingを使うか
後でそれぞれに背景色がつくって考えれば
余白は外側に付けるのか内側なのかおのずと決まる 一律にborder-boxにしちゃうのあんまり好きじゃないなー
line-heightの計算とか面倒になるし >>44
>>42は冗談よ
勉強不足の時に一回だけやったことあるけど、逆にすんげーめんどくさくなった
ちゃんと勉強してちゃんとコーディングする
これだけでいいのにね 一律に設定はデフォルトを変えるってだけなので
面倒になるはずがないんだが。
どうせあとから変えたからごっちゃになってるだけでしょ
box-sizing: border-box; をデフォルトにした方がいいよ そこらからコピペしてきたら崩れる、border-boxはめんどくさい、どうせこんなところだろうよ 俺も>>44と似たような理由で必要なときしか使わない派だわ >>43
凄いなそう考えるのか
いつもめちゃくちゃでクロームにデブツールで気合いで調整してたわ
目から鱗だわ >>49
あくまで考え方ってだけなので、全て馬鹿正直にやってるわけではないよ
全部白背景ならどうせ見た目わかんないからmarginだけて対応させちゃう事もある box-sizing: border-boxってなんで下位に継承しないんだ？ リフローがたくさん発生しちゃうからじゃね？
と予想してみる >>48
> 俺も>>44と似たような理由で必要なときしか使わない派だわ
俺も同じだよ？ ただし必要なときしかcontent-boxを使わないってだけ
このスレ以外のネットで検索したらborder-boxにしたほうが良いという
話は見つかるが、その逆は見つからないので、この流れは自作自演に見えるな content-boxの方が面倒だってのを
具体的に説明すると、
例えば横500pxのブロックの中に横100pxのブロックを5個
横並びに敷き詰めるときっちり収まるが
見栄えのためにborderを追加するとあふれるということ 俺もbox-sizingよく使うけど
なんでborderとpaddingだけなんじゃー！っていつも思う
https://jsfiddle.net/15gL2bbq/1/ >>58
この説明でわからない人はグリッドシステムのことを調べたほうが良いよ。
なおbootstrapもデフォルトはborder-boxになってる
こっちのほうがレイアウトを調整するにはやりやすいからなんだよ
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css ああ、ワロテごめんなさい
でもこれ、50%とかじゃなく任意の固定値にしたい場合は結局
border-boxでも自分で計算しなくちゃならないんでしょ？ ちょっとだけ不要なものを削除した
https://jsfiddle.net/15gL2bbq/3/
で、話は変わってscss使っていて思うんだけど、
ちゃんとCSSを書けば、変数や計算は不要になると思うんだよね。
content-boxはborderの幅の分だけheight,widthを
減らさなきゃいけないから同じ値を2回以上使うけれど
border-boxを使えば同じ値を一回しか使わないから
変数に入れておく必要はなくなる。 >>65
なるなる
んで、固定値の場合はどうなるんでしょうか？ >>64
任意の固定値にしたいならline-heightに戻せば？ >>67
background-sizeやline-heightを任意の固定値にした時に
border-boxにしておけば、border幅とかを勝手に計算に含めてくれるのかな？と >>57
content-box に統一した場合は
100pxのブロックに borderを追加するとあふれるが
border-box 統一した場合は
500pxのブロックに borderを追加するとあふれることになるので
どっちもどっちじゃないのかなあ border-boxにすると
親要素に対してはwidthに書いた数値で振る舞えるけど
子要素に対してはそうではなくなるのが欠点ですな >>70
content-boxだとその逆なわけで
まあどちらでも労力はさして変わらんわな >>70
なにか勘違いしてね？
* {box-sizing: border-box}にするんだから
全ての（親）要素がborder-boxになるんだよ。 >>72
関係なくね？
自分のborderとpaddingを計算しなくちゃいかんか
親要素のそれかの違いなだけで >>70は
親をborder-boxにしたとして
その親にpaddingやborder指定しちゃうとその分がwidthから差し引かれちゃうからｱｶｰﾝ!
ってことやろ
親のwidth500pxが493pxとかになって子のwidth100px × 5 が溢れる…みたいな こんなん都合よく使える方を適宜選べばいいだけで
どちらかに統一するようなもんじゃなかろうに… どっちか自分にとって直感的な方に統一できる、
ハイブリッドに振舞って欲しいときはハイブリッドに指定できる、ってだけで十分じゃんと思うのだが
UAによって変わる？知らんなあ >>59
かわええ
なんて犬？
トイプーではないよね？ そこで新しいプロパティの提案
content-width, content-height
margin, border, padding その他のサイズは差し引いて、
とにかく content の合計サイズを確保してくれるもの デフォルト（content-box）時のwidth/heightと同じなんじゃ… iframeタグを使って別ページを埋め込む際
親ページのCSSを子ページにそのまま適用する方法はないかと探ったら
iframeタグにseamless属性なるものを付ければできるというとこまで
たどり着いたのですが、このseamless属性、HTML5の草案では存在したものの
その後正式に廃止になったようです。
廃止になった機能は使いたくないので、他に良い方法はないでしょうか？
スクリプトは使わずあくまでHTMLとCSSの範囲内で実現したいのですが。 >>81
ありがとうございます、これで諦めがつきました 最近、サイトに付いている質問チャット機能って
もうＡＩで対応しているんだな。
マニアックな質問したらわけわからん回答してきたので、
これは酷いって言ったら、申し訳ございませんって謝られちゃたわ >>84
最近というか
えっ？そんな前から？と思う程度には以前からやってるんだぜ >>85
そうだったのか。
2～3年前いくつか設置を試す機会があったんだが、
それらはサイト管理者がアナログで回答するシステムだった。
だからここ1年くらいでビッグデータ×人口知能が進化したのかと思ったｗ
考えてみればペッパー君ももっと前から居たしな あれがAIねぇ。
あんなのただの検索エンジンじゃねーか ・検索エンジンじゃねーか
・機械学習じゃねーか
・人間未満じゃねーか
・それっぽくなったけどエロゲのマイナーキャラについて語ることも出来ない未完成品じゃねーか
・エロゲのマイナーキャラについて語ることはできたけどほとんどテンプレ回答じゃねーか >>88
何がいいたのか知らんが、
人工知能っていうのは登録されてない
ことを考え出す能力がないとダメ >>89
＞人工知能っていうのは登録されてない
どこに登録するの？ 強い・弱いAIの話でしょ
googleもalpahaGoも弱いAIだ！て一生言ってればｗ >>92
囲碁に強ければAIだ！っていう考え方が間違い
なんで囲碁が基準なんだ？
人間よりも計算能力が高い計算機は
人工知能ではないだろう
勝ったから人工知能って考え方がおかしい >>93
これ言う度にそのツッコミ入るなぁ
「それなりに強いAI」ができて、そのパフォーマンスとしてalphaGoを作ったんだよ
囲碁は一応人類最高峰の知的競技
「それなりに強いAI」の一端がalphaGoてだけ 最初にレスした俺が悪くて荒れてしまったスマン
iOSのSiri同様に人工知能ではなく人工無能というやつだったか >>94
お前分かってないじゃないかｗ
囲碁で人間に勝ったことは人工知能であることの証明にはならないんだよ
単に計算が早いだけにすぎない。計算速度はとっくの昔に人間を超えてる。
だけどそれは人工知能じゃない
> 囲碁は一応人類最高峰の知的競技
それ違う。ゼルダの伝説のほうが囲碁より遥かに難しい
囲碁はルールがはっきりしている。曖昧な点はないし
ゴールも相手に勝つというふうに明確になってる。
そのルールも囲碁というゲームの中だけで完結している
もし人工知能があるとしたら、囲碁をやらせたのに
飽きていつの間にか五目並べを生み出していた。みたいな
ことが起きなければいけない
ゼルダの伝説はルールがゲームの中で完結していない。
現実世界の常識を利用する。例えば剣で敵をやっつけるとかな。
そして囲碁と違って高速に何万回と繰り返すことはできない。
どんなに早く走ったとしても、一瞬で世界の端までは行けないからだ。
（そういうふうにゲームが作られてる）
そういやった制約（時間的制約といったほうがいいか？）の中で
謎をとくのは人工知能には無理。そもそも人工知能じゃなくて単なる高速計算機だから
人間の知的能力を利用するゲームは、人工知能にはクリアできない（相当時間がかかる） 謎をとくのは人工知能には無理。そもそも人工知能じゃなくて単なる高速計算機だから
その高速性が生かせないような条件下では、人間に太刀打ちできない なぞを解くのが無理なんじゃなくて
今は謎を解くほどの進化の気配があったら停止させてるだけでは （自称）人工知能にゲームをやらせてて
クリアできたーというのは、そりゃクリアはできるんだよ。
ランダムに動かしていればいつはクリアできる。
でも重要なのは「ランダムに動かしている」というところ
知能がないからいつまでたってもランダムに動かすことしかできない。
マリオをやったことが有る人間なら魔界村で
序盤で意味のない無駄な動きをしまくるわけがないだろう。
知能が有るからだ。
だが無駄な動きをしまくっていたとしてもそれを
何万回、何千万回やればクリアできるかもしれない。
だが知能が有る人間はそんな回数は必要ない
今の人工知能っていうのは高速計算と
あと全く同じ操作ができるという人間にはない能力で
コンピュータには無い知能をカバーしているに過ぎない。
なお知能が有る人間は同じマリオをやらせても
本来のルールにはない最短時間で攻略してやんよとか
出来る限りコインを取らないでクリアとか
ルール自体の改変まで行う。これも人工知能にはできないこと >>99
ランダムに動かすとか軽く言ってるが、何千万レベルではないよ
小さな問題でも、宇宙の原子の個数くらい簡単に超えるので、
理論的に可能な最高速でも漫然とランダムで動かすだけでは決してクリアできない > ランダムで動かすだけでは決してクリアできない
つまり、
ランダムで動かす ＋ 別の何か
といってる。
ランダムで動かすことに変わりはない 別にランダムで動かすのはそれはそれで良いんだけど、
人間と同じ試行回数でやってほしいもんだよね。
人工知能と言ってるのだから、力技をなくして
純粋に知能だけで判断してほしい。 謎なんだがランダムに動かして学習するのは知能じゃないのか >>96
＞人工知能であることの証明
定義すら存在しないのに証明とかあるわけないだろ
強いAI・弱いAIなんて大体で良いんだよ。必死になって反論するのはアホの証拠 今のAiの定義ってのは大体機械学習であることが多い。驚異的な回数学習させて傾向を掴み取るってのが機械学習だな
alphaGoで言うと三ヶ月で2000回の対局だ。一日20回最強の囲碁の対決を休み無しで繰り返してる。まぁこの時点で無理だな
>>99
ランダムじゃねーよｗｗｗｗ
あれは遺伝的プログラミングだ
遺伝的プログラミングの何が強いって、学習さえすればそれ以降は同じようなステージが来ても延々クリアできてしまうこと
ランダムだとステージが増える度に途方もない試行数になる（コンテニューなしの場合）
>>101
いやそんなにはやってないけど…
DCGANの顔認識だと1万画像＊1万回*1000stepぐらいだったと思う
正直回数とかどうでもよくて、時間しか気にしてないわ
>>103
無理だな
人間はかなり学習効率が良い
例えば現実世界でも虫やボールや自動車を避けてると思う。
人工知能の強みは力技が出来ること。それを封印する意味はないし、仮に封印すると酷いものができるぞ
マリオでいうと最初のクリボーで死ぬのを延々繰り返すだけ 機械学習スレかと思った
FAQについては質問に対する回答そのものを機械が自動で正しく作り出せるんだったらまさしく知能 >>104
> 謎なんだがランダムに動かして学習するのは知能じゃないのか
知能がないからランダムに動かすしかない。 > FAQについては質問に対する回答そのものを機械が自動で正しく作り出せるんだったらまさしく知能
実際には質問と回答のペアが予め用意されていて
そこから近い質問（近い文章）を検索しているだけだしな 「わかりません」を伝える時のセリフの
パターンが数パターンしかなければ知能には思えないな。
例えば「七夕」って何の日ですか？って言われてわからない時
「え？たなぼたですか？待ち遠しいです！」みたいに
知らない単語に対して、オヤジギャクで返してくれれば
知能が有るとみなしていいよｗｗｗ ダジャレ等、一般的にオヤジギャグと言われる冗談は、脳の非常に高度な部分を使っているらしい
反面結果としては、若者どころか同年代ですらつまらないと感じてしまう発言となっている
理由は全く分かっていないが、そもそも調べようという人もいない
そもそもAIに
＞「七夕」って何の日ですか？
と質問しても、分からないという事がないので非常に難しい前提ではあるが、
もし解答のない摩訶不思議な質問をした時の答えは場の空気を下げるオヤジギャグではなく、
せいぜい「分からない」になるので
>>112の視点からは永遠にAIが生まれたとは看做せないだろう >>113
別に「場の空気を上げる」言い方をしても良いんだよ？
俺が言いたいのは
データが登録されているから、適切な答を返せている
（結局人間が入力しているということ）
データが登録されていないから、わかりませんとしか言えない
（気の利いたことを言えない）
ということ
考える脳はなくデータを入力しているの人間
もちろん知能はなくても役に立たないなんて言ってないよ
電卓だって十分役になってる。 ふと思ったけど人を笑わせた跡、楽しませた跡、その反響のアクセス解析って難しいかもしれない >>114
＞データが登録されているから、適切な答を返せている
（結局人間が入力しているということ）
＞データが登録されていないから、わかりませんとしか言えない
（気の利いたことを言えない）
＞「場の空気を上げる」言い方
とはどういう内容？オヤジギャグと言う事？ > とはどういう内容？オヤジギャグと言う事？
それを考えるのが知能ってことだよｗ
お前には知能無いのか？ｗ ＞「七夕」って何の日ですか？
と質問して
＞「場の空気を上げる」言い方
ができるのが知能か。これはすごいなぁ 俺はMath.random()を初めて知った時びびった >>118
場の空気を上げる言い方だけじゃなくてもいいよ。
ようは知能があるなら、わからないことに対してでも
データベースに登録されていないことを
返す能力ぐらいあるはずだってこと AIについては下記URL参照をお勧めする
https://www.ai-gakkai.or.jp/whatsai/
AIを一言で表すと「学習出来る機械」
通常、機械はプログラムされた事しか実行できないが、AIは学習によって「プログラムされた事」を拡張出来る
現在のAIは一般人がよく思い浮かべる人間的な思考とは別概念だから、誤解しないように >>122
その発想はたまに見かけるが、AIの事を知らない人が夢物語を語っているようにしか読めなかったな
https://teratail.com/questions/52408
https://teratail.com/questions/54128
質問者は「プログラマはこの先食っていける職業ですか、本当に大丈夫ですか」と不安がってるだけなんだが、知識がない上に不安が先にたっているから、回答を正しく解釈出来ない 不安というより、ただこういう結論を出したいだけに見えるが
「プログラマは今後AIにとってかわられて価値がなくなっていくんだ、もう価値は下がってきてるんだ」ってな
正直いってコーダーって呼称もこういう価値下げ・買い叩きの手段でしかないように思うが もしそういうのができるとしたら
因果な事に作るのはコーディングに精通した人なんだろうな コーディングを『AI』にやらせるために
体系化されたクソめんどくさい仕様データを書く仕事が生まれそう
それか客がホームページビルダーを使う時代に逆戻り 気の利いた質問なんてそう思いつかないし、言い出しっぺに一任するよ 130じゃないが、立候補者がいないようなので質問してみる
HTML Standardの「2.3.5 日付および時刻」を参照している仕様に何があげられるか教えてくれ
https://momdo.github.io/html/common-microsyntaxes.html#dates-and-times
input要素のtype属性がdate,month,week,time,datetime-local、time要素、他に何がある？
https://momdo.github.io/html/text-level-semantics.html#the-time-element >>133
上
該当ページを
以下は妥当なグローバル日付および時刻として記述される例の一部である。
で検索
下
numとかnumberとかなかったっけ >>134
> 以下は妥当なグローバル日付および時刻として記述される例の一部である。
> で検索
ごめん、質問の仕方が悪かった
記載例を知りたいのではなくて、「日付および時刻」がの文法が実際に使われている事例となる仕様(要素とか属性とか)が知りたかった
ISO 8061 拡張形式は他の仕様でも見かけるから文法自体は理解できる
「2.3.5.X の範囲」はその仕様を説明しているだけだから、この質問の範疇にはない
> numとかnumberとかなかったっけ
それは要素名？属性名？
num要素とかnumber要素がない事は https://momdo.github.io/html/index.html をページ検索して確認した
その単語だと <input type="number"> しか自分の思いつく範囲では出てこなかった >>135
あぁゴメン、なんか変だなーと思ってたけど2つの質問してるのかと思ったわ
バリデートはjsでやる派なのですまん、わからぬ
質問に対して質問で返すけど、そもそもバリデートをinputに頼るのか？
あんなもんいくらでも変更、捏造やり放題だから気にしたこと無いわ
それこそ入力しやすいように <input type="number">程度しか使わない >>136
知らないのか、残念だ
> 質問に対して質問で返すけど、そもそもバリデートをinputに頼るのか？
バリデート系は質問からずれていると思うけど、一応答えとく
クライアント側のバリデートは絶対ではなく、サーバサイド処理の補助に過ぎない
だが、クライアント側でバリデートする事で「サーバに送信するまでの時間的コストを短縮すること」が出来るのでユーザビリティを向上できるメリットがある
<input type="***"> はその一つだし、pattern属性やrequired属性もそう
HTML/CSS/JavaScriptのどれでバリデートしても改変されるリスクは同じだから、改変リスクをもってjsが優位になる理屈はない
改変されてもいいように、サーバサイドでもバリデート処理を書いておくのが常套手段
jsのバリデートはHTMLの枠組みでは出来ない場合にはやるけど、HTMLFormElement#checkValidity とか、いわゆるHTML5の Form Validationの範疇でやる事が多い >>137
ありがとう
でも、>>133に書いた通り、それは知ってるんだ
今あがっているのはこれだけ
<input type="date">, <input type="month">, <input type="week">, <input type="time">, <input type="datetime-local">, <time>
> なんでw3cの仕様のほうがテンプレに入ってなくてLSだけがテンプレに入ってるのかわからんが
LSが最新仕様だから、WHATWG仕様のスナップショットとなるW3Cは外したんじゃない？
HTML5という用語が定着した影響で誤解されがちだけど、W3Cにおける最新のHTMLは HTML5 じゃないよ
https://www.w3.org/TR/html51/ 勧告
https://www.w3.org/TR/html52/ 勧告候補
https://w3c.github.io/html/ 草案 >>138
バリデートでjsは、例えば生年月日
1800/1/1に生まれている人間が実際にいるかもしれないけど、そういうのはなしで、
0才～100才以内に限定という感じ
120才が入力するより、20才が間違って120才と打つほうが多いやろ
他にも最近は性別が2種類以上に増えてきて、なんかもうjsで一括でやったほうがいいよなってなってきた
その跡でもちろんphp側でも書けてる HTML5のpattern属性は一見便利だけど
同じパターンが必要な要素が複数ある時、
同じパターン（例えば複雑な正規表現）を
何回も書かないといけないからDRYじゃないんだよな。
CSSみたいに、セレクタで属性を一括指定できる機能が
HTMLには必要だろう。 >>139は何を聞こうとしてるの？
HTML仕様の「日付および時刻」を、参照している仕様、とは
一部UAやどこぞのシステムの独自仕様の例ってことか？ そもそもtype="date"とかってIE/Edge/firefox/Safariあたりで実装されてたっけ >>140-141
要件は理解したが、「捏造やり放題」にどう繋がるのかが分からんかった
JSにしても捏造やり放題なのでは？
両方とも主張している内容は「開発コストを下げたい」と読んだ
捏造やり放題(ユーザ側が不利益を被る問題)と開発コストを下げたい(開発者の都合)は別の問題だから2つは切り離して考えるべきだろう
HTMLはマークアップ言語だから変数宣言して一括切り替えとかは厳しいと思う
やるなら、HTML生成ジェネレータ的な何か
JSでいうAltJS、CSSでいうSCSS的なもの
俺はあまり知らんけど、静的サイトジェネレータになるのかな
ただ、最終的にPHPでバリデーションするならPHPで変数を駆使して目的のHTMLを出力すればいい気がしないでもない
HTMLではどうにもならん部分はJSを併用する事になるだろうが >>142
興味本位で具体的な目的があるわけではないよ
最近、ISO 8061 形式に興味があるから、それが実際に使われている仕様を知りたかっただけ ISO 8601 だった
強いているなら、自分の勉強の為 いや勉強のためとかはどうでもいい
何を聞こうとしてるのかは、具体的にどんな回答を期待してるのか、ってこと
追加された様々なinputのtypeは細かな需要に対応し切れてないので
それなら最初から最後までjsでやる、という現実的な運用を書いただけだと思う
それを書いたのも結局、どんな回答を期待してるかわからないからだとも思うが >>147
期待するのはこういう回答
>>133
time要素は ”For events that occur at the same time across all time zones, for example a videoconference meeting, a valid global date and time string is likely more useful." で 2.3.5.7 を参照してるよ
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-time-element >>147
> 追加された様々なinputのtypeは細かな需要に対応し切れてないので
これはどうでもいい
>>136に質問されたから答えたが、input[type] はかくあるべき云々は質問内容とは全く関係がない
質問しているのは「ISO8601がどこで使われているか」だけ >144
＞ただ、最終的にPHPでバリデーションする
これは当たり前以前に、最初であり最後である
jsやhtmlのバリデーションはサーバーに負荷を与えない以上の何者でもない
大規模サイト以外ではどうでも良い
もし本気でバリデートのために>>133を質問しているなら、死んだほうが世のためである以上に言いようがない > 質問しているのは「ISO8601がどこで使われているか」だけ
一応、補足しておくが、ここでいう "ISO8601" はISOが定めている方ではなく、HTML Standard で定めている「3.5.2.X」の方
「3.5.2.X」を参照している仕様を知りたい
https://momdo.github.io/html/common-microsyntaxes.html#dates-and-times 自分でw3cなりwhatwgなりの文書のソースを拾ってきて
探したい箇所のアンカーのIDを拾って、全検索すればいいじゃん >>150
繰り返すが、>>133の質問とバリデートは全く関係がない
>>138でも「バリデート系は質問からずれている」と書いていて、バリデート系の質問は>>136が俺(>138)に質問する事で始まった
あなたは質問を誤解している >>152
仕様の質問はNGだったか？
>>153
2.3.5～2.3.5.10の間に相当数のIDがあると思うが、一つ一つgrepしていくのは大変な手間になるので質問した >>155
わかってて言っているのだとは思うが
HTML/CSSに関係することであるとは一応いえるものの、
HTML/CSSについての質問ではなく、HTMLの仕様のことですらなく、
「HTMLの仕様文書（とISO）」についての質問だろう
というか相当数のIDがある、一つ一つgrep、ってgrep知ってて () や | も扱えないのか？ >>151
HTML の外からはたぶん参照されてないんじゃないか
その種の構文は低レベルな領域に入るので、他の仕様が直に参照する必要は生じにくいのと、
元々、デファクトになっちゃったふるまいに辻褄が合うように策定されているので（外から参照されるためより、過去互換性と相互運用性を重視して策定されている） twitter/bootstrapをgitから落としてgrunt distってコマンドとnpm installてコマンドやったら
distってディレクトリの中にcssとかjsのファイルでけた。
ここで作業するもんだと思ったらdistの所有者権限がroot（鍵マークがついてる）でtakashiじゃない。
所有者権限をtakashiにしててけとうなhtmlファイル置いていいのかそもそもなんでrootしかいじっちゃダメなのか
難しいことはわからないので簡単に５歳児くらいに教える感覚で教えてほしいです。 >>158
ぼくにはまだはやいね
ちがうのでやってみようね 横に二つ並べたliの丁度中央にborder を引く方法教えてください。
普通に左のliにborder-rightだと1pxズレますか？ >>162
liの境界線を引く場合はこうする
全てに右線、一つめだけ左に線を引くようにする
li {
borderright:solid 1px red;
}
li:first-child {
border-leftt:solid 1px red;
} dtに対してddが複数ある定義リストで、dtとddを横並びかつddを縦積みにする方法はありますか？ dtはwidth固定できますか？
できるならdt,ddをfloat:leftしてdtだけclear、dlにdtのwidth分以上の左余白入れて、dtに同じだけ左にネガティブマージン入れればいいかと あ、固定でなくてもその余白を超えないなら大丈夫です 試してみましたがddのfloat消したら綺麗にできました
dtの幅が決まってればdtだけfloat、ddにはdtの幅分左マージンとるとかでも良さそうですかね。
どうもありがとうございました。 失礼します！
ワードプラスでプラグインを使っていまして、ショートコードで一連の動作ができるようになっていて、はじめはボタンが出る仕組みになっています。
そのボタンをある画面の中央に乗せたいのですが、CSSでショートコードをどのように指定すればいいのかわかりません。
なにかヒントになりそうなことでもいいので教えて頂けたら嬉しいです。
どうぞよろしくお願いいたします。 >>167
ごめん、出先で試せてなくて気づかなかったけど確かにddにfloatはいらないですね
余白の取り方はいろいろあるので好みでいいですよ
>>168
ショートコードで吐き出される要素がわからないから答えようがないけど、その要素にclassが振られてるならそれ使えばいいかと
なければショートコードをdivやspanで囲んで、それにclass振ってそれ使うとかかな
ショートコードの中身はプラグインやテーマによるからこれだけの情報だと答えるの難しいです web関係の人に聞きたいんですが
productionとstagingってどうちがうんですか？ >>173
厳密な決まりは無いと思うけど、大体こんな感じじゃない？
俺のとこではテスト環境・ローカル、などで呼んでる
用語なんて各社で適当だし、そんなに気にしなくていいと思う
production：
ローカルサーバーで作成中のもの
staging：
本番サーバーで公開前、内部関係者がテストしている状態 productionは本番環境のことだね
公開・運用される環境
stagingは言うなればレビュー環境
本番サーバー内に構築してサブドメインとかで本番と同居させる
本番とまったく同じ条件下でのテスト環境って感じでお客さんにも見てもらう
どっちも、自社サーバーで開発してコミットしたものをチェックアウトする >>168
自分はメールフォーム設置にcontact form 7のプラグインを使っててて
上にも書かれてるけど自分の場合はそのショートコードをdivやspan、pなんかで囲ってあげて
それにクラスを指定してそのクラス名でCSSを当ててるよ Production typeだと自慢してた弐号機が結局1台しか作られず真の量産型にフルボッコ食らうアニメがあるらしい ビィィィィストモォォォドォォォ！！！！
→即死
あれは本当に意味がわからなかったけど、監督がキャラを嫌いだったのかな htmlソース内で、リソースを相対パスで指定するとき、カレントディレクトリのファイルは
ただファイル名を書けばいいわけですよね。しかしカレントディレクトリを強調するため
「./」をファイル名の頭につけてもいいわけですよね。
この指定方法の違いによって、何か他に影響がでたりするんでしょうか
まったく同じなら「./」を付ける意味ってないはずなんですが… 確かに
baseで相対URLの基準変えたら./も追従するし
CUIでがちゃがちゃやってるときはPATHやinclude_dirから拾わないでくれって明示指定の意味があるけど >>180
htmlの場合、あんまり無い
windowsやlinuxにはPATH環境変数という概念がある
https://technet.microsoft.com/ja-jp/scriptcenter/ff576179.aspx
例えば
PATH環境変数にdirectoryというディレクトリを登録しておき、
directory/foo/txt
とファイルを置いておく
この場合、
foo.txt
とするだけで
directory/foo/txt
を取得してくれる
./foo.txt
だと
directory/foo/txt
は探してくれない
ただ、どこかで見たけど「./」を付けたほうがほんのすこしだけ早くなると聞いたことがあるのでずっと付けているな ファイル名にコロン : が含まれてたりするとプロトコルと誤解されうるけど
先頭に ./ をつければ誤解を回避できる
というのも見たけど、だったらコロン : 使わないで : と文字実体参照で書けよって話だし >>183だけどすまん、嘘だった
firefox52ESRで、imgのsrcをhttp://localhost/some/image.pngって書いたら
http://localhost/some/image.pngを読みに行って、実際にpng画像置いたら普通に表示された
先頭に ./ 付ける価値一応あるわこれ とりあえずつけとけばok的ってことか
ええ勉強になった >>174
>>175
ありがとうございます
stagingは本番と同じ環境でのテストで
productionは本番ですか >>183-184
エスケープが必要なら、パーセントエンコードすればいいのでは？ urlencodeより./つけたほうが短いし早いし統一的では
././って連なってもかっこわるくはあるが問題ないし RFC2396 の Section 5.2 の 仕様 の話ね >>189
GETパラメータの値はパーセントエンコードしますが、「URIの先頭にファイル名だけ存在する時」だけ ./ をつけるのは統一的ではないのでは？
他にも、# はパーセントエンコード以外に回避手段がないですが、<a href="./:foo.txt">, <a href="foo%23.txt"> これは統一的とはいえないのでは？ >>189
短いはわかるけど、早いとはどういう原理で早いの？
「短い=早い」とは限らないと思うんだけど、URLパーサって「./ で相対参照認識」の方が「パーセントでコード処理」より速いの？
ダウンロード容量が1byte減っても、パーサ処理で相殺されたら意味がないと思うんだけど
ついでにいうと、統一性を持たせるには全ての相対URIの前方に "./" を付与する必要があるから、パーセントエンコード不要なURIの数が多い場合は、パーセントエンコード式の方が全体のサイズは小さくなる
■./式
<a href="./:foo.txt">
<a href="./hoge.txt">
<a href="./piyo.txt">
■パーセントエンコード式
<a href="%3Afoo.txt">
<a href="hoge.txt">
<a href="piyo.txt"> <ul class="tab">
aaa
</ul>
<ul class="content">
bbb
</ul>
↑このul間の微妙な隙間をなくすにはどうしたら？
あと文字列aaa,bbbがかってに右にズレる。
ulタグ特有？の勝手にズレたり隙間ができるのをなくしたい 間の隙間はulのmargin
文字がずれるのはulのpadding
かな
cssで指定してなければUAスタイルが適用されるからそれだと思う
ついでにいうとulはliしか内包できないはずだから直に文字列は置いちゃダメ
liで囲みましょう display:inline-block;を使うとchromeで見た時に
その部分の文字が小さく表示されてしまうのですが
どのように対策すれば良いですか？ そんなことはないと思うけど・・・
タグが違ったり何かスタイルが適用されてるとかはない？
同じタグで同じclassのを2つ並べて片方だけinline-blockにしても違ったりする？ bodyの直下に
<span>あいうえお</span><span style="display:inline-block;">かきくけこ</span>
と記載すると「かきくけこ」だけが小さくなります
スマホ（エクスペリア）で見てるのですが
この機種だけの不具合とかでしょうか >>201
聞いたこと無いな。直接の原因はわからんが
他のcssが変に影響している気もするし、ブラウザのバグっぽい肝する
問題の切り分けをする必要がある
ブラウザを変えてみる
・chrome
・safari
・pcで見てみる
全てで同じ症状が出るなら、
スタイルシートの読み込みを片っ端から止めてみて、どれに原因があるかを突き止めてみる
サイトのURL教えてもらえるなら見るけどね。一瞬で解決する PCや以前使ってたスマホ標準ブラウザでは問題ありませんでした
恥ずかしいのでURLはご勘弁ください へぇ…じゃあエクスペリアの不具合じゃないかな
時間の無駄だから、気にしなくていいと思う
他にやることは山ほどあるよ いちおう試してみたけど問題なかった
XperiaじゃないけどAndoroid6.0で標準ブラウザとChromeで見た
ちなみに試したコードは下記
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>.</title>
</head>
<body>
<span>あいうえお</span>
<span style="display: inline-block;">かきくけこ</span>
</body>
</html> 標準ブラウザって泥4.4あたりで終了したんじゃなかった？ どうせ変態セレクタのCSSが効いてましたってオチだろ >>206
サポートが終了しただけで入ってるね
7.0からは完全に廃止だったと思う 開発者ツールで見ても何も継承してないし
display: inline-blockの違いだけなんですよね
難しいみたいですね cssで以下の記述を見かけたのですが、これはハックか何かでしょうか？
@media (min-width: 1px) {
/* formなどのcss */
}
また、以下のように
(min-width: 0px)
とあるのですが、これは不要ですよね？
@media screen and (min-width: 0px) and (max-width: 519px) {
/* スマホ向けのcss */
} visitedを目立たせようと以下のようにCSSを追加しても、動作しません
sheet.insertRule('a:visited {background: #F22;}', sheet.cssRules.length);
なぜか以下のように2行追加すると動作します
sheet.insertRule('a:visited {background: #F22;}', sheet.cssRules.length);
sheet.insertRule('a {background: #888;}', sheet.cssRules.length);
しかしこれだと、visitedのリンク背景だけなら変な色でもいいのですが、全てのaタグの背景色変えるとなると大体ひどいことになってしまいます
何か手はないでしょうか？ >>215
無知な自分には関数に見える
質問するスレ合ってるのか、これ？
昨日はJSスレでCSSのセレクタについて聞いてる人がいたな
適切な質問スレで聞いた方がいいよ
テンプレ使ってるなら、その作者に聞いた方が早い気もするけど、どうだろうか
下手にいじってもどこに影響あるか分からないから
寝るわ >>216
CSSを追加するってだけのjavascriptなので、内容はあんまり意味ないです
CSSの部分だけ見てもらえれば
特定のサイトじゃなくて適当なサイトでブックマークレットとして実行したいので影響とかは大丈夫です
CSSを直接いじっても同じだったのでCSSの仕様だと思うのですが >>215
a要素のcssを書くときは
link、visited、hover、activeの順で書かなきゃ駄目、絶対
visitedだけ書くと、デフォルトのlinkに上書きされてる
超基本なので覚えるまでこの順番を唱えるといいよ
あと背景色かえたくないけど何か書くときにはtransparentって書くと良いよ
透明
https://jsfiddle.net/zw0umLcu/ >>218
transparentはやってみましたが動かなかったです
とにかく
a {background: #000;}
a:visited {background: #FFF;}
など2色指定しないと、visitedのバックグラウンドカラーが設定できないようです
追加する順番を変えても変わらないのでlink、visited～の順番はあまり関係ないっぽいです
ブラウザ独自の挙動かもなので言い忘れましたがchromeです
何か手はあるでしょうか >>219
よくわからんからサンプル上げてよ
書く順番は俺も>>218と同意見 >>220
すみません、サンプルってどういうのあげればいいのでしょう >>221
>>218のやつそのままフォークして使えば良いんじゃね？
ていうか書き換えて保存すれば/1/とかつくからそれで ありがとうございます
これなのですが
https://jsfiddle.net/n9vkoxt2/
test1、test2も変化なし
test3は背景色変更がうまくいってるものの、通常リンクの色まで変わってしまうので、visitedだけ目立たせる方法はないでしょうか https://jsfiddle.net/
のvisited情報ってどこに格納されているんだ？
ローカルPCのvisitedとはまた違うのか 良いことを教えてあげよう
visitedと一緒にbackgroundは使えないようになっているのだよ
backgroundの値にurl()を使えば、そのユーザが特定のサイトを見たことがあるか否かの情報を
任意のAPIに送れちゃうでしょ
以前このようにしてユーザの動向を特定しようとする荒業が横行したことがあって
各ブラウザ対応したのよ
https://developer.mozilla.org/ja/docs/Web/CSS/Privacy_and_the_:visited_selector 横だけど普通に知らなかった
バグかと思って右往左往してたわ
colorはなんか効くなーとは思ってたけど、そういう経緯があったのねぇ >>225
visited情報はローカルと共通でした
html表示部分は普通のhtmlだと思います
>>226
urlが使えないのは知っていますが、普通のbackground-colorは使えますよ
https://jsfiddle.net/n9vkoxt2/でも実際test3が動いてます(edgeとchromeで確認しました)
なのでこの件にはあまり関係ないと思うのですが 福音を授けてやろう
この手のドキュメントは実装（ときには先行実装）したあたりで書かれるから
現在必ずしも書かれているとおりになるとは限らんのよ
なのでどのような条件で動く動かないは自分で定期的に確認しておくのがよいのよ
ちなみにこの件については
三●谷コノヤロウ！と叫んで済まそう >>229
226のURLのサンプルコードのところにコメントとして
「（:linkの）背景の初期値は'transparent'になっています。これを何か他の値に変更しないと、:visitedの背景色の変更は機能しません（意訳）」
って書かれてる
実際にfirefoxで試すと、その通りの挙動 実際、transparentやopacityが並んでるところを見ると透明度の絡みでなんかあるのかもね
素がtransparent、なので背景色を指定することは透明度を変更することでもある
透明度を変更できると訪問済みかそうでないかで、その背後のなにかが見えるか変わる、だからまずい、とか
一応、visited関係ないところでopacity: 0; で背景画像を設定してる要素は、html読み込み時に
普通に背景画像を通信でとってくるから違うっぽいけど、他になんか深いのがありそう >>231
ピンポイントでそういう仕様だったんですね
いくらいじってもどうにもならなかったわけですね
無事疑問解決しました、ありがとうございました
JSですがとりあえず形になるスクリプト作ったものの、負荷も多そうでやっぱvisitedに背景色って難しそうですね <size=6><color=#808080>ここにコメント</color></size>
とした場合コメントの左右にhtmlソースが出てしまうのですがこれを隠すコードはありますか？
そもそも隠しながら使える別のコードがあるのでしょうか？ >>224
.test3 > a:visited{
background: #f22 !important;
}
.test3 > a:link{
background: #888;
} >>234が求めてるコードはたぶんこれだな。俺はエスパーだから。
<font size="2" color="#808080">ここにコメント</font>
あと、<html>の上に<!doctype>が書いてあったら<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd";>に書き換えておけばオッケ。 >>234
意外といけるもんなんだな
HTMLは知らんタグは無視するって奴なんじゃろか
https://jsfiddle.net/0x1o647b/ みなさんありがとうございます。
なんとか成功できました。 エスパーなのに、いちいち確認する不思議
この人は「隠しながら使える別のコード」をどう解釈したんだろ >>235
a:linkが変な色になっちゃうって悩みなので、importantはあんまり関係なさそうです >>199です
display:inline-blockの方が小さくなっていたのではなく
もう1方が大きくなっていた事が分かりました
html * {max-height:1000000px;}
を指定すると、同じ大きさになります
お騒がせして申し訳ありません
viewportにinitial-scaleを設定すれば良いみたいですが、既に設定済みです
<meta name="viewport" content="width=device-width, initial-scale=1">
これが1つ目の疑問で
もう１つが、各ページに
html * {max-height:1000000px;}
を書くと直るのですが、外部CSSにすると、またダメなんです
開発者ツールでスタイルが適用されている事は確認しました >>246
あー最小文字サイズ制限に引っかかってたのか
max-heightと一緒に
-webkit-text-size-adjust: 100%;もつけたらいいんじゃね？ bold文字が滲んで見づらいので消したいのですが
閲覧しているhtml内で<b></b>指定してある場合
font-weight: normal;を適用させることはできますか そこまで気づいてるなら試してみればいいのに
b {
font-weight: normal;
} >>249
恥ずかしながら
b { }
指定の事を知りませんでした
これで読みやすくなりました、ありがとうございます >>250
要素セレクタはcssの基本だぞ
その辺あいまいなら先に勉強した方がいいかと >>248
消すだけなら<b>タグ自体を消せばいいじゃ？ 変更したいのは自分で作成しているページではないんです
ブラウザのDirectWrite設定がなくなってから自分の環境ではbold文字が緑～紫に滲んでしまい
ページ閲覧がままならず、stylishを入れて閲覧ページのcssを探しながらnormalに変えていました
が、html内で直にbold指定してあるケースの変更方法がわからず躓いたため、こちらで伺いました
いろいろレスをありがとうございます Mirosoftはペイントに3D機能とかやる前に
書体のレンダリングを改善してほしいなあ
あとファイル名の文字コード問題 スマホ向けサイトを作っているとアンドロイドで
borderの破線(dashed)が上手く表示されないことがありす
角丸でborderがdashedのdiv要素などがある場合、
アンドロイド向けにどのような対策をとるのがベストでしょうか？
今自分で思いついたのは四つ角と左右上下を画像化して、
左右上下の画像はリピートさせれるという方法なのですが
もっと手軽なやり方が何かあれば教えて下さい >>256
border-width: medium
のようにキーワードで指定すれば適当に見やすい太さにならないか？ >>257
iPhone
https://i.imgur.com/lj2VNrv.jpg
アンドロイド
https://i.imgur.com/LK74bTx.jpg
同じHTML CSSですがこのように表示に差がでます
アンドロイドだとぼやけたり縦線がsolidのようになったりして困っています
border-widthをmediumにして試しましたが改善はみられませんでした
どなたか対策方法知っている方いれば教えてほしいです >>258
それは仕様
はっきり言って見る方からすればどうでもいいし、作る方からしてもどうでもいいと思えるようにならないと駄目だよ
そんなとこでまごついてたら一生完成しないぞ
で、対策としては画像しかない >>258
気になるなら、画像で実装するしかないんじゃないかな
Googleに修正要望を出せば、いつかは対応してくれるだろうけど >>259>>260
仕様か、ありがとうございます
やっぱり画像で対策します 自分はデザイン考える段階で
角丸破線とか、仕様が怪しいやつは最初から避けるようにしてる 物凄い初歩的な質問をしたい。呆れないで答えて頂けると嬉しい。
2カラムのサイドバー付きのサイトで
コンテンツ部分に横幅いっぱいの画像？って表示できるのだろうか？
自分はコーディング全くできないクソデザイナーなんだが、
段階段階で横幅いっぱいの写真を入れて、その上にテキストを乗せるような
今っぽいレイアウトをクライアントさんに希望された。
でもサイドバーあると、それできなくないのだろうか？
ちなwixで試したら謎の技術で何故か表示された…
プロの人教えて下さい 余裕すぎて鼻毛生えそうなレベル
風呂入ってくる。誰も回答シてなかったら答えるよ あ、できるかできないかの質問じゃなくてやり方を知りたかったのかな
img {
width: 100%;
}
これで親要素いっぱいになる
ちな、親要素より画像が小さい時には画像の100%にしたければ
img {
max-width: 100%;
}
画像が100%以上になって汚くなるの避けたい時ね >>263だけど教えてくれた人ありがとう！！
ノンコーダーの自分からすると皆天才に見えるわ…
そうか、できるのか！固定観念で勝手に出来ないと思い込んでいた。
これで心置きなくデザインできる、ありがとう。 大抵の事はなんとかするが、統一されてないデザインだけは辛い
（一箇所だけなんかずれてる、色が微妙に違う…など） 知り合いのお店のページ作ったんだが、スマホ表示の時、そろそろflexも常用して良いだろと思って作ったら、その方の端末のブラウザが古すぎて対応してなかった…
calcも対応してないし
あとtransformって、Android4くらいのブラウザだと、animationとか疑似要素内で使えないんだね…知らなかった
古い端末のために、色々犠牲にするのはなんだかなぁって感じ
でもこういうユーザーも、少なからずいることは無視出来ないよね… Android4以下のシェアって世界的に見ても2%もないよ
特に日本だけだとiPhone人気が異常だからもっと下がるかと
1%いかないかも
なので切っていいと思うよ
ビジネスなら最初から切ってるし、対応してくれって言われたら対応する時としない時でそれぞれ見積り出して、その1%のためにこれだけ上がりますとか言ってやめさせるね
あとはその1%を切れば表現の幅が広がります的な ＞少なからずいることは無視出来ない
できる、というかアクセス解析見てる？
乱暴だけどiphoneとwindowsさえ抑えておけば後はどうでもいいレベル
あと、古い端末使ってる人は色々と慣れてるし、htmlさえ綺麗なら意外とうまく表示されてるので気にしなくていい
＞その1%を切れば表現の幅が広がります
これはいい言葉だね >>271-272
返信ありがとうございます！
そう、自分も4系のユーザーなんてほとんどいないって思ってたんですが、アナリティクス見ると、その方のサイトにはまだ結構来てるんですよ…
4.0くらいから4.4まで
1、2人くらいなら、もう別料金で対応させることも出来ますとかいえるんですが
依頼者本人も4系の端末なので、依頼者が見られないんじゃ説得も難しいかなと思って、古い端末でも表示できるようにコードを追加してます…
GPU支援を受けるために、動きはtransformで付けてるので、それが封じられるのはきつい…
今更top,leftなんかでガクガクアニメなんか使えないし、疑似要素にrotate使った矢印とかも表示できなし、本当早く廃れてくれって思う
後少しで対応完了できそうなので、愚痴ってないで仕事します…
聞いてくれてありがとう、失礼しました >>273
/* こめんと */
//でもコメント出来ることがあるけど、ブラウザが解釈してくれてるだけ
/* 原則こっち */ こういう会社は何がどうなってこういうHPになるのでしょうか？
http://www.tbrjp.co.jp/index.html
総務の人が片手間に作ってるとかそんな漢字なのでしょうか >>276
素人がHomepage Builderで作っているから 上海に工場もてるくらいの規模なのにそんなＨＰ予算ケチらんでも・・・ 記号の読みを調べたいんですが、どこかまとまってるサイトとかないですか というか読みって統一されてるものなんですかね
↓こういうの知りたいです
^ [ { | どうもありがとうございます
積極的に使っていこうと思います <h1>タグについて質問です
現在、PCとモバイルで表示を切り分けています
レスポンシブとは名ばかりで、
<body>
<header class="pc"><h1><img class="logo" alt="会社名"></h1></header>
<header class="mobile"><h1><img class="logo" alt="会社名"></h1></header>
<main class="pc">～</main>
<main class="mobile">～
という風にガッツリ分かれているサイトになっています
この場合h1が2つあることになりますが、
PCとモバイルで分かれるなら、こちらは2つあってもいいのでしょうか？ >>288
ｈ1が2つあっても大した問題じゃないけど
こうした方がええんちゃう？
<header><h1><img class="logo pc" alt="会社名"><img class="logo mobile" alt="会社名"></h1></header>
ここの人達ならサーバーサイドで表示分けかjsでsrc属性を書き換えとかじゃないかな >>289
ありがとうございます、やっぱり変ですよね・・・ >>286
そういや ^ ってまともに名前で読んだことないかも知れない
ブラケットとブレイスはそのままだな
| は単にパイプって読んでる
あとはアンダースコアはアンスコって略してる
たまにわからない人いて、アンダースコートじゃないよって説明してるｗ
ハッシュやアンパサンドって確かにそう読んでるけどなんかプログラマ特有の読み方な気がするな
そんなことないのかな
>>288
headerやh1が複数あるのはよろしくないね
ほんとならメディアクエリだけどそれなしでの話なら
srcを変えたいだけなら>>289がいいし、headerやh1のスタイルも変えたいんならいっそPC用とスマホ用でsectionで分けたらどう？
sectionごとにheaderやh1が許可されてるから >>288
アウトラインがおかしな事になるので、好ましくないと思う >>291
#はナンバーサインのほうが無難な気がするがわからん。
パイプはunixシェルでパイプ機能のために使う記号ってことで広まった二次的な読みじゃないかな？バーティカルバーのほうが記号自体の読みとして自然な気がする。 >>294
♯はたて棒がまっすぐで横棒がななめの別物。 最近はSNSでハッシュタグって言葉が一般化したからハッシュでもいいかもしんない >>298
よく知ってるな。♯だけじゃなくフラットやナチュラルbからなんだよな。 >>299
音楽教室の仕事した時に仕入れた豆知識(´∀｀) タスクランナーは廃止の方向に向かってる
コマンドを直接呼び出し、一連のタスクとして実行したい場合は
npm runを使って実行するようにした方がいい。
今回の場合にそれができるかどうかは知らないが 長い文章について質問です。
PCでは改行しない、モバイルでは改行するといったことをしようと思っています
・<br>にPC版でdisplay:noneを掛けて改行なしにする
・<p>をモバイル版でinlineにし、改行なしにする
どちらが良いでしょうか？ このサイト、ものすごく表示が早いのですが、何かコツとかあるのでしょうか？
https://www.tose.co.jp/ >>307
<p>改行の為に<p>使うなんて</p>ダメですよ.。</p> >>308
トップページ表示速度3.77秒
この薄いコンテンツでこの速度はもの凄い早いとは決して言えない気がするが。
jsスライダーが特に遅い。画像をpngにすればいいのにjpgだし、cssもminifyしてないね。
株価は東証一部なのにPER179倍で割高っす >>308
トップページ表示速度3.77秒
この薄いコンテンツでこの速度はもの凄い早いとは決して言えない気がするが。
jsスライダーが特に遅い。画像をpngにすればいいのにjpgだし、cssもminifyしてないね。
株価は東証一部なのにPER179倍で割高っす jQuery確かにオワコンだけどなにかと便利だから結局使っちゃうんだよなあ
悩ましい 一部の意識高い系がオワコンって言ってるだけ
あいつら、どんな用途かを隠してオワコンっていってるからな。
なんでかというと大部分はjQueryが今も標準で、
あいつらが隠してる特定の限られた用途でしか
オワコンになってないから。 >>310
すいません、キャッシュが残っていて早いようでした
シークレットモードで読み込んでみると、RSSを読み込んでいるようでした。これがかなり遅い
https://www.xj-storage.jp/public-list/GetList.aspx?company=AS05083&;doctype=
0,5,6,7,8,9,10,11,12,13,14,15,22,23,24,25,26,27,28,1,2,3,4,16,17,18,19,20,21,1030,1040,1080,1090,1100,1120,1130,1135,1136,1140,1150,1160,1170,1180,1190,1200,1210,1220,1230,1235,1236,1240,1250,1260,1270,1280,1290,1300,1310,1320,1350,1360,1800,1801,1999,91,92,93,94,95,96,97,98,210,200,201,202,300&len=
5&output=json&callback=jQuery111102110164091578215_1505400165309&_=1505400165310
あと、なぜpngの方が良いというのは一枚目のことでしょうか？ >>316
厳しい事言うと、スライダーの画像全部容量がでかい。
画像全部読み込んだ後にページロードが完了させるてるし。
キャッシュなし状態だとファーストビューでスライダー部分が真っ白だから、体感としても遅く感じる。
あとjQueryのセレクタ、 $('ul.iconList li').each(function(i) { とかクラス乱用とかeachヤバい.
速度関係ないけど、h1複数付けてるけどこれ後で全部直すハメになるだろうな（笑） >>318
なるほど、ありがとうございます！
h1も見落としてました
一見いいサイトと思いましたが、よく見ると結構ボロがありますね その画像URLは何だろうと思ったが、見ているページが違うんだな。
自分はトップページを見てたんだが
https://www.tose.co.jp/
君はこのIRページ見てるね？ここの株主かい？
https://www.tose.co.jp/ir/individual/
決算日とかアクセス集中するからこのページだけ画像容量に気を使ったのかもな >>318
見てないんだけど
同一セクションでh1連発ってこと？ この変更は衝撃だった
全部h1で書いてましたよえぇ png/jpgでそれぞれ画像用意して、画質の劣化がない（もしくはほぼ無視できるレベル）場合にjpg、pngの方がファイルサイズが小さいやんけ！な時はpngにしてるけど、全部pngにした方がいいのん？ >>324
これってWHATWGの方でもそうなの？ >>326
好きにしたらいいよ。jpgが一番最適な場合もあるし、gifだってそうだろう
個人的には拡張子は揃っていた方が作業効率が上がるから平均的に成績の良いpngに統一してる
src属性やファイル名をjsでごにょごにょする時にもミスらないし >>327
知らんよ。
ただ、少なくともGoogleが複数h1に対対応するのか、するのはいつなのか
HTML5草案時点から疑ってたから個人的にはもうsection毎にh1は止めてる。
「SEO」で検索かけて上位ヒットするサイトも止めてる 今更5や5.1の仕様を気にするのも周回遅れな気が…
少なくともChrome、Safari、FierfoxとGoogle先生は無視してるわけで >>324,329
WHATWGでもHTML5.1でもセクションを分ければ、h1要素の複数使用は認められているように読めるがな
https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
https://momdo.github.io/html/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
https://momdo.github.io/html51/sections.html#usage-summary-0
https://www.w3.org/TR/html51/sections.html#sections-usage-summary
二次情報を鵜呑みにせず、仕様書を確認した方がよい
あと、「h1のネスト構造の廃止」はh1をネストしなければ複数使用を認めるのと同義なわけで、あなたの読解力にも問題があるのでは 複数ｈ可になったときやってみたが結局不便で戻したわ
HTMLソースわかりづらいし、CSSも h1{・・・} h2{・・・} の方が見やすい
そろえるメリット少なくね？ ウェブページなんてパターンが決まってるからね
1ページ1記事なんて書き方をするから
h数字が増えることもない そしてまた一覧性に欠ける駄ページが増えるのであった >>333
小規模な手作りするようなページだとそうなんだけど
セクション単位でモジュール化されて
ある見出しから始まる一群が単体でも、複数の一部としても扱われる
みたいな場合 初心者です
コーディングのルール？が纏められてるサイトってない？
divにstyleで高さ指定したら注意されたり、なんか色々決まりがあるみたいなんだけどよくわからん >>337
誰に注意されたのかによる
人間なのだったらその人に聞くのが手っ取り早い >>338
もちろん人間だよ
会社の方針なのか、コーディング規約上の問題なのかわかんない。
注意したその人はもっと上の人にそう教えられてるだけみたいだから、具体的に何が問題なのかわかってないのでは。 >>339
タグにstyle直書きは読みづらいからしないな
外部cssにまとめて書いたらいいよ
直書きが簡単だけど読みづらくなるし修正やら面倒だったりするからね
コーディングについてはググるか本屋に行けばすぐ沢山あるよ 大きい会社は分からないけど、
コーディングとか大抵我流だから
方針というか基本的に管理しやすいように誰が見ても修正しやすく、綺麗なコード書くのが暗黙のルールみたいなのはあるかもしんない 一般的にだけど
style属性使うと何が問題なのか、みたいなことは
ページではなくサイトを、一人ではなく複数人で、ただ作るだけではなく運用まで
いくつかやってみないと説明されてもピンとこないんじゃないかな >>333
入れ子が増えるとhのレベルがずれるからな
例えば小売として、
・h1 店舗一覧
・h2 東京本店
・h2 大阪支店
で、テンポが増えてエリアごとに表記となった場合など
・h1 店舗一覧
・h2 関東
・h3 東京本店 ←ここ
・h3 神奈川店
・h2 関西
…
統一でいいいなら統一したい
>>337
頑張って怒られながら覚えるか、書きまくって自分のカンを養うしかない
http://qiita.com/soyanchu/items/1fce3d4548d3194057c3
何も考えずに書くと、保守（変更）の時に大変になるんだけど、初心者がそれを分かるわけないよなぁ >>341
> 注意したその人はもっと上の人にそう教えられてるだけみたいだから、具体的に何が問題なのかわかってないのでは。
一般的なルールじゃなく、会社独自の慣習なら会社の人に聞くほかない気もするな
CSS 途中送信してしまった
それに装飾系の属性は廃止の方向に向かってるよ
>339の注意されたやつがCSS使ってないタイプのだったのかもしれないけど 昨日質問したものです
divに直接styleってつまり、cssファイルに
div {
height: 10px;
}
みたいなことがNGって言われた。class指定して当てろって
取り合えず皆ありがとう！経験積んで勘を養うわ div{
全てのdivに影響する
}
div.class {
.class のdivだけに影響する
}
こう？ >>346
divに指定するのは駄目だな
htmlの仕様が変わった時や、要素名の間違いに気づいた時に「div」が変わる可能性が高い
それにdivの中にdivがあるとpaddingなどが全部聞いてしまってすごくめんどくさい
>>348
違う
.class {
.classだけに影響する
} >>336
333だけどそれや>>343やっても333の方が便利だったわ >>332
>「h1のネスト構造の廃止」はh1をネストしなければ複数使用を認めるのと同義なわけで、あなたの読解力にも問題があるのでは
そうかもしれない。
ただ、事実としてリスクを感じたからもうやめている。
複数h1のサイトが検索上位にいつまでたっても上ってこない事があったんだ。
あなたが普通に問題なく運用できているのなら、別の問題だったのかもしれないが。
まあ、今上位のサイトは見出しレベルはh2にしているというのは事実。 html5で質問です
h1ってロゴがいいのでしょうか？それともページの一番上にある案内文でしょうか
また、h1とtitleが同じだと問題ありますか？ floatを掛けるとdisplay:blockになるのですが、これは仕様ですか? >>353
どっちも不正解
そのページのタイトルをh1にすべき
例えばブログの場合カテゴリーページならカテゴリー名、記事ページなら記事タイトルをmainの頭に入れてるでしょ、それ
あくまでそのページ(URL)が何なのかを表す一番重要なものだからね
まあ、言うほど大差はないのでそんな気にすることもないけど >>359
それも不正解
h1にすべきかh2にすべきかは
1ページ全体のテキストと部分的なテキストによる
どちらが良いかは内容見なければわからない。
もっとも見たところで計算式が公開されていないので
誰にも分からない。 >>359
h1は一番最初に書かないと駄目だろ…
記事タイトルは絶対にh2 検索結果の表示順位のアルゴリズムは公開されてないのに、なぜ絶対と言い切れるの？ >>361
一番最初である必要はないよ
他のhタグより先に出さえすればいい
なので下層ページではヘッダー内にhタグは書かない
サイト名はtitle タグに入ってるからね >>362
それな。Google自身でさえパラメータ多すぎで
どの方法が良いのか、わかってないというのに
他人がh1がいいですよ（どやぁ）とか言っても説得力がない
全く同じ内容で、同じドメインで複数作れば
違いがわかるかもしれないし、内容はともかく
同じドメインで複数とか無理だしな >そのページのタイトルをh1にすべき
はそれで正解だがindexだけデザイン変えるときどうしてる？
俺はindexのh1だけidつけてる cgiファイルをChromeで開くにはどうすれば良いのでしょうか h1の上にh2は無いけど、h1の上にpやimgが来てもいいのだろうか？
いつも迷う
>>367
中みたいってことなら、無理 >>366
組み方にもよるけど
header h1 {}
article h1 {}
みたいにやってる
>>368
>h1の上にpやimgが来てもいいのだろうか？
構わないよ
見出しレベルの順番を守っていたら大丈夫 アウトライン形成しててもh1から始めるのは抵抗があるな。h1はページに一個しかおけない病にかかってるわｗ
この辺は本当に好みでいいのかなー >>359の考え方に賛同。
つーかWordPressのテンプレとかも今みんなそうなってるよな。
TOPページだけヘッダーのサイトのタイトルをh1として
下層はページタイトル（投稿タイトル）をh1とし、サイトのタイトルはpタグとして出力分けする。
もう動的で出力分けしないとやってられん時代だ まあ皆も書いている通り、h1程度じゃSEOへの影響なんて軽微だな
アクセス数（ユニーク）が全て >>352
それなら、仕様に言及すべきではないのでは(>>324)
上位サイト云々も「h1ネストにしなかったからランキング上位にある」という因果関係を証明する論拠がないと信用に値しない header footerに直接クラスつけるってまずい？
あと、ulもそのままクラス付けずにdivで囲んだ方がいいのかな 何をもってまずいとか言ってんだろうか
文法上間違ってないなら、良いに決まってるだろ <header>
header
なのか
<header class="header">
.header
なのか
<header class="main">
header.main
なのか
めんどくさくなってheaderとfooterにはclassを付けてない
headerが二箇所目に出てきたら死ぬしか無い >>374
div.wrapperは絶対に必要な場面以外は付けなくていい
ってかつけるな、頼む 質問側も節度あるレスで！
質問前にスレ内を検索しましょう
ちょっと前にクラスについて質問してきた人がいる
参考になるんじゃなかろうか
個人サイトならお好きにどうぞ
レスポンシブBBA アウトラインって絶対に形成した方がいいんでしょうか？ >>381
誰のためにするのかによる
自分のためにするんだったら死んでもやれ >>382
会社のHPを任されまして、絶対に必要なら作り直しになるので躊躇していたところです
とりあえず、作り直しの見積もり取ってみます >>373
因果関係を証明する論拠はないし、今後もGoogleは出さないでしょ
だから疑わしき事は排除し、現実の結果だけみてるんよ
今までH1複数に対応していなかったであろうGoogleが
HTML5正式勧告に伴ってわざわざ複数H1に対応した論拠もない。 正式として発表している仕様書に忠実に従うのは正しいよ
プログラマーならね
でも残念な事にCSSとHTMLという未成熟な言語に関しては、
それが正解とは限らんと思うのだよ いや未成熟だよ
機能もまだ不十分だし
HTML4、CSS2からの変更・追加が多すぎる
プログラミング言語と比較したら全く完成されていない証拠だろ 根幹は変わらずに枝葉の部分や拡張の関数などが追加されるだけなら
時代に合わせての変更と捉えられるけどHTMLの場合は根幹がグラグラ揺らいでるからな プログラム言語も次から次へと機能が追加されてるけど 5.1での仕様変更を見ていると、正常化しつつあって歓迎すべきことが多いのかな。
5.0は良い面もあるけど衝撃的だった（笑）
ジジイな俺にはついていくのが大変だったよ。 >>374
>>377は誤りだから注意
基本装飾やレイアウトのクラスはつけるべきではない
それならdivを使うべき
少し前に話題になってたから遡ってみたらいい
ulはOK（だと思うし、してる） <div class="red-right">
極端な例だけど、
今でもこういう命名しちゃう人って多いよね… class="left"
すまん、css覚えたての頃はやってた
search、shop、wrapper、inner
この辺りの名前が枯渇するともう名前を考えるのがしんどくなるんだよな
今は枯渇しないような構成にできるようになったけど、やはり難しい 無理ぜずローマ字もいいんじゃない？（笑）
ソースの綺麗さなんて自己満でもあるんだもん。
ターゲットとしているユーザーが見えれば良い。
それですら1%のユーザーは切ってもいいかもしれないしね… ローマ字はローマ字でsiとshi、tiとchi、辺りがなぁ
2バイト文字が使えれば一番良かったんだけどね <div class="margin20">
<div class="left">
<div class="red">
・・・
</div>
</div>
</div> class="left"
よくないと知りつつ画像と文の段組みで昔の名残りそのまま使ってしまってる
画像が右は将来含めて100%ありえないから cssで::afterとか:hoverのコロンって、結局最新verでは使いわけてる？
あるサイトでは疑似クラスは:,疑似要素は::となってるけど、
別のところではブラウザの対応非対応で使い分けるような説明がされてるんだけど そのサイトの中での統一性が大事だと思う。
保守する人のことを考えたらね。 >>389
だからそれは>>388で書いたように拡張の関数とかでしょ
もしくは古い記述方法の廃止とかさ
HTMLみたいに、今さら根幹が揺るぐなんてあってはならんのだよ
混乱招くし、ＩＥみたいに無視して独自路線で解決しようと走るバカが現れる filter: progid:DXImageTransform.Microsoft.gradientみたいな愚行な htmlコーダー＝ゴミ、小学生でも出来るプログラミングｗ >>384
> 因果関係を証明する論拠はないし、今後もGoogleは出さないでしょ
Googleではなく、あなたが証明すべきなんだがね
結果的には、論拠に欠ける主観的な意見という印象しか持てなかったな htmlコーダー＝ゴミ、小学生でも出来るプログラミングｗ時給1200円ｗ コンビニのバイトより楽でいいじゃん。
女の子向きのお仕事です。 htmlコーダーはゴミだよ。手作業多いし割りに合わない htmlコーダーは板前の皿洗いみたいなもんだろう
何十年もhtmlコーダーやってるやつなんていねーよｗ HTMLコーダーなんて今はいないぞ
知識が古すぎる
コーディングはフロントエンドエンジニアがやってる
jsやcssアニメーションと一緒にやった方が効率いいしね >>404
そうだな。
SEOというワードでの上位サイトは今こうしているっていう事実と、
自分も今こうしていて、次はこうなる可能性が高いっていう主観だな。
ところで、最近複数h1をしばらく使用してなかったんだけど、
特にSEOへは支障なし？
問題ないならそのままで俺の意見なんて全く気にしなくていいよ。（気にしてないだろうけど） >>393
area box item clomunとかあるからまだまだいけるよ マジックナンバー使い始めて自分でも何が何だかわからなくなる
モジュール集作ればまあよいのだけれど >>393
実はどうでも良い気がするなあ
英語が読める人だけに意味のある4文字だし
class="kushoto"
って書いたら誰も怒らないだろうし
スワヒリ語で左って意味なんだけど リストボックスにしたselectタグにoptionを動的に追加する
という処理を書いています
リストボックスはCSSでサイズを指定しています
selectのsize属性を0あるいは1にすると、
ドロップダウンリストになりますが
2以上にすると、リストボックスになります
気になるのは2を指定して3行以上のoptionを設定しても
特に問題なく表示されることです
気にせず2にしておいてもいいのでしょうか？
そもそもsizeの指定でコンポーネントの種別が変わるのが
イケてないと思いますが、どうなんでしょう どういうデザインにしたいかってだけでしょ
3個以上でも2個表示にしたければ2にすればいい
>気になるのは2を指定して3行以上のoptionを設定しても特に問題なく表示される
何が気になるのかわからんが、項目が2個だろうが10個だろうが同時表示数を2個にすれば2個表示で問題なく表示されて当たり前だが
ひょっとしてoptionの数を指定するものだと思ってるとか？ <div class="左から2番目で赤い枠線"> 日本語式のHTML考えたわ
<区画 俗名="主要箱">和式超文字強調言語</区画>
.主要箱{
本体色: 薄梅鼠;
淵色:藍: 海松茶;
横幅: 20cm;
高さ: 10cm;
奥行き: 15cm;
} javascriptできなくてコーディングしかできない無能なんだけど、俺死ぬしかないん？ >>417
cssで縦サイズを指定しているので、縦は2ではなくそのサイズになります
optionをいくついくつにしても
2で問題ないところがモヤモヤするのです <箱 クラス="テスト">にほんごであそぼ</箱>
.テスト{
背景色: 薄茶;
線の色:黒;
横幅: 20cm;
高さ: 10cm;
奥行き: 15cm;
} >>423
<textarea>だってそうじゃろ
フォームウィジェットはシステムのUIとも絡むので一筋縄ではいかんのよ
くらいに思っとけばいいんでね？ >>421
それ以上のデザイン能力やSEO対策能力があれば問題ないんじゃない？
htmlとcssだけだったらさすがにウンコだし頑張ってjavascriptぐらい覚えよう >>400
当然レスポンシブで苦労もしてないし自然に書けてるがなにか問題でも？
構造が複雑になっても問題ない
スマホでclass="left"が上になる「名前の」不自然さはあるが社内で使うコードでもなし全く気にしてない >>421
その過程でいちいち死んでたら世の中のjavascriptできる人達もほとんど生存してないだろ
まあjQueryから始めたほうが楽でいいかも >>430
429だがオレに言ってるの？
基本書くのは記事だが
図
文
または
図 文
の段組みまたは回り込みが定型なので問題はない
最も一般には変更の可能性含めてお勧めはしない >>429
・classの名前と実態が違ってても覚えてるから大丈夫
・自分一人のサイトだから問題ない
・こんなもの忘れるわけない。忘れる気がしない
先人も言ってきたし、俺も言ったし、お前も言った
多分俺や先人と同じようにお前は止めないし修正もしない
そして保守の時に思い出し、苦労する
まぁ、それだけの事だ >>433
>保守の時に思い出し、苦労する
だからしてないんだってば >>421
そこそこの規模の会社は分業だし、仕事自体の意識レベルが高いなら一向に構わない。
例えば、超大手クライアントの案件だと、ルールの細かさと納期の短さ、正確性を問われるが、
丁寧に正確に対応できる人が居たらjsもphpもできなくても構わない。
それと優れた人は気が効くので、非常に助かる。
持っているスキルよりもその人自体が仕事できる人というのが重要。 結局地獄ってなんだったんだ
自分だけが地獄を見てるという
名前の付け方以外に問題ありそう お前様達
例えclass="left"って書いてあるのがfloat: right;してても
実際にはそんなに混乱しねーだろ？
それごときでいちいち驚いてられるほど暇でもないだろうし
引き継ぎ案件ならせいぜい確認とるくらいで >>440
そんなクソコード書くやつがまともに引き継ぎするわけがなく >>440
429だが、スマン、それはさすがにオレでも無理
rightってclass作るかな
でも実際そういう現場多いと思う
昔からの名残りを直そうとしたら皆からブー食らう、目に浮かぶわ
「んな細けーことはいいんだよ！時間ねーんだよ！」 >>440
これぐらい間違っていても混乱はしないよ
「こんちには みさなん おんげき ですか？
わしたは げんき です。 この ぶんょしう は
いりぎす の ケブンッリジ だがいく の
けゅきんう の けっか にんんげ は もじ を
にしんき する とき その さしいょ と さいご の
もさじえ あいてっれば じばんゅん は
めくちちゃゃ でも ちんゃと よめる という
けゅきんう に もづいとて わざと もじの
じんばゅん を いかれえて あまりす。
どでうす？ ちんゃと よゃちめう でしょ？
ちんゃと よためら はのんう よしろく」 >>440
だからこんなアホなやりとり発生する前に論理的な名前をつけろと >>440
たしかに、サイトが色んな会社を渡り歩いて
その途中でウンコが混ざることなんてアルアル過ぎていちいち気にしてらんないね
もし自社で書いたコードだったら
不味いものを食べた海原雄山みたいになっちゃうけど DW重いからサブライムというやつにしたい
ftpソフトはなにがいいですか？おすすめある ググったらSFTPというのがあった
使ってる人いる？DWに慣れちゃってるけどどうかな？ 今時sublime textはないだろ
Atomにしとけ。
Atom IDE期待してる。 HTML初心者です。
図のようなtableを表示させたいのですが、ツールなどを使っても色々調べてもできませんでした。
どなたか作っていただけませんか？
>>444
同じコンテンツを段組みする場合、各カラム名なんてつけてるよ？
>>452
スレタイ読めない人や宿題やってもらおうという人が来るスレではありませんのでご了承願います
ちなみに見てすらもいない 今の主流ってCSS3ですか？
3年くらい前のCSS3の本に書かれている情報って
今でも古びていませんか？ >>452
これ無理じゃね？
thの位置が中途半端だし >>452
論理的には無理があるが、表示だけなら、
左上角の th を上下のセルに分割して
下の th には見えない詰め物で適当にサイズを与えて
上の th の内容が 下の th に覆いかぶさるように overflow させる
方法が考えられるが、詰め物のサイズが問題になるかもしれない
別のやり方として、下段の左端の td だけ上下に分割すると
他は同じ表示がなぜか可能になる（なぜかはわからん）
そこで、右端にもう1本列を追加して 2列目を幅ゼロにすると
そのような配置の表示ができあがることになる
（ display:none で消してしまうのはだめで、幅ゼロにする必要がある） >>455
SASSっちゅーかcompass
細かいこと考えずに掛けるようになるから超便利
ほとんど書かない、平のcssでokってならCSS3でいい >>455
本はそれでいい
CSSはほとんど変わってない（はず >>452
実現性以前の問題
構造的に表ではないので、tableでマークアップするのが間違い いつになったら、HTMLやCSSを手書きせずに済むんだろう？
CMSとかあるけど、それでもHTMLやCSSの知識は必要だよね。
PostScriptなんか手で書いてる人はほぼいないのに… 誰からも相手にされなくなったので、引っ越して来ました。
暫く定住するので、よろしくです。 >>462
今使われてるポストスクリプト程度の完成度でいいなら
90年代のfierworks2の時点でもう出来てた
現在人力で書かれているHTMLは文書の文脈と構造が反映している
つまり大雑把に言えば、ヒトの言語野を再現できないと難しい <details><summary>の開け閉めにtransitionの効果を加えることはできませんか？ >>465
開閉状態を指定するプロパティがない限り無理だろうな（あるのか？）
UI の詳細はだいたいブラウザベンダの領分なので
ブラウザベンダにリクエストするのが最も早いかも レイヤー作って覆い被す、それからポジションとかで位置をずらす。
20年ぐらい前はマジでそのくらいアホなことしてたよ。 >>465,466
:not[open]を開閉状態のプロパティに見立てて頑張って見たが駄目だった… >>457
教えていただいたことをやってみましたが、自分の技術がないために実現することができませんでした。
諦めて違う表示にしようと思います。
せっかく教えていただいたのに申し訳ないです。ありがとうございました。 www.example.com
example.com
と2つのページがあるのは良くないのでしょうか？
なしに統一した法が良いでしょうか >>470
何にとって良くないのかによって変わる
検索エンジンに関してだったら
「URLの正規化」「canonical」とかで調べると
何すれば良いのか詳しく説明されてると思うよ >>471
ありがとうございます、検索エンジンについて知りたかったのです
検索してきます >>442
class=leftがfloat:rightになる原因まったくわかってねーじゃねーか めちゃくちゃどうでもいい質問なんだけど、みんなの所はフォルダのことディレクトリって言う？ >>468
>>465,466
やっぱり無理っぽいですね
他のプロパティでだましだましやるのもどうかと思うし
（海外のフォーラムみたら活発にやってるみたい）
まだ無理に使う必要なさそうすね >>474
相手によって使い分けてる。
UNIXオジサンならディレクトリだし、
若手ならフォルダーにしてる。
最後の音引きの有無も重要かもしれん（笑） >>477
お、全く同じだ
意味的にはディレクトリって言っておけば問題ないはずだけど、それはそれで通じないからな h1
p
h2
p
h1
p
この形を間接セレクタで作りたいのですが、
h1 ~ * { margin-left : 1em }
h2 ~ *:not(h1) { margin-left : 2em }
これだと、2個目のh1の後に出てくるpがh2 ~でもあると見做されてmargin 2emになってしまいます。
このケースだけに限って言えばh2 ~ *:not(h1:nth-of-type(2) ~)など回避策はあるのですが、
これだと2番目のh1の後にさらにh2がある場合に適用されなくなってしまいます。
どういうhtml構成であっても、
「hxが出たら、ほかのhxが出るまではx文字分のmarginを置く。
新しいhxが出たら、そのhxに従って以降のmarginが再計算される」
というようにしたいのです。
cssでこのようなことは可能でしょうか？ hx要素の後のp要素をインデントしてるけど、子じゃなくて兄弟なんだよね？
その構造のままでは無理じゃないかな
自分ならsection要素あたりでまとめるかな ここでいうpタグに当たる要素って1個とは限らないんだよね？
じゃあ無理だね >>479
ちゃんとsection使おう
人が見てもクローラーが見ても良いhtmlになる
section
h1
p
section
h2
p
section
h1
p ココに書いてある事の殆どが理解できないんですが、
どうしたら良いですかね？ htmlとCSSの入門WEBみたいなの読んだらええ ユーチューブを自由サイズとして変更したいのですが、
どうすれば良いでしょうか？
今は埋め込みURLを取得して、htmlを開いてサイズを直接変更してます。 >>485
cssでyoutubeのiframeの幅を100%に >>482
sectionにclass付けする間違い例の代表だな >>485
ごめん乱暴だった
youtubeのiframeの親要素になるブロックに
position: relative
width: 100%;
padding-top: 縦横比%;
youtubeのiframeに
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
!importantいるかも >>489
なにこのcssすごい
縦横比を決められるの？ >>473
それだと例えば5つの要素を左右左右中央と振り分けたりできないのでは？
１
２
３
４
５
↓
1３５４２ clearfixについてなんだけど
heightが０でも見た目上問題がない場合はどうするべき？ 良くない事が起こる前に付けている
ってかfloatよりflexのほうがいいけどね CSS/HTML というよりデザインの話しでスレチかも
誘導頼む
GoogleとかYouTubeとかその他著名なサイトのページトップバーって，
三 [企業ロゴ] [ ][検索] 田 山 ○
三: menu (help とか)
田: app list
山: notification
○: user icon (or login)
という構成になっていることが多いけど，この意匠の名称ってある？
例えばこれも最近だがGoogleのスレッド構造を呼ぶ「マテリアルデザイン」みたいな用語が件の意匠にもあるのか知りたい。 bodyにwidthやheight,marginとか指定するのって良くないのかな？ aタグは碇の意味ですが
リンクを示すための比喩として「碇」というのはピンと来ません
どのへんが碇なのでしょうか？ >>501
single page applicationの場合
bodyのwidthとheightを100％にすることは良くあるのでは？ >>501
別にいいよ。なんだったら<html>にすらつける
>>502
そこまで考えてる人はもういないと思う
どうでもいいから >>504
全然どうでも良くないですよ
うんこを黄金と呼んでいいんですか？
うんこはうんこなんです
比喩はどうでもいいものではありません 会社でデザインのこと一切しらず、我流でマテリアルデザインみたいなサイト作ってたら、古いって言われたんだが、フラットが主流なんか？ フラット：影なし
マテリアル：影あり
だったけど、いつのまにかフラットデザインにも影が付くようになってすげーややこしくなった
スマホで操作しないならマテリアルデザインにする理由はあまりなく、フラットでいいと思う スマホ用なんや、フラットデザインに変更は今更きつい >>507
言った人目線での相対的な評価なんだから
その人の新しい古いの基準点がどのへんにあるのかによる
わからないのなら気にするだけ無駄かと フラットデザインのサイトは、どこもかしこも、背景白と黒字でトップにインスタ映えする関係があるかわからない写真画像があって、それがスライドしてるか、真ん中にオーバーレイで白字のボタンがあるという金太郎飴みたいなサイトばっかなんだが、あれが主流なんか？
なぜか、バックグラウンドイメージではいけぼかしてるがあれが綺麗に見えるんか？ >>514
個人的にはサイトの個性が無くなって非常に見やすい。もっと流行って良い フラットデザインはすべての要素が厚みがないフラットなデザイン、マテリアルデザインはそれぞれの要素に厚みがあって重なりあってるデザインだね
それを表すために影かある
>>509が言うように最近はフラットデザインにも影が付いたりするけど要所要所だけで、マテリアルデザインみたいに要素ごとの重なりを表すほどじゃないね
>>502
そのページ(aタグがあるページ)がリンク先のページへ錨(普通こっちの漢字使わない？)を下ろしてるんじゃなく、リンク先のページがそのページへ錨を下ろしてるイメージ
「ここに関連ページを停めてます」みたいな 今日凄い伸びてますね
現在独学中、質問です！
<div class="hoge">
<a href="#">piyo</a>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
こんなのがあった場合、例えばliにcssを効かせたい時
.hoge ul li {
height: 300px;
}
ってするのか、liにclassつけて直接するのか悩んでます。
それと、liなら複数classつけるのは非効率だけど、aタグとかならclass当てたほうがいいのかな？
classだとぱっと見た時にわかりにくくてあまり使わないのだけど、実際の開発ではどちらでやってますか？ >>517
そのスタイルを使いまわすことがない前提だけど、
hoge ulを指定しておくと確実だし保守性も良いと思う。
セレクタをガチガチに固めるのはハードコーディングみたいにも思うけど、
その程度ならむしろ良いんじゃないかな。 >>517
ulにflex
aがinlinblock、ｗｉｄｔｈ100%みたいな感じ（クリックできる範囲を広くする） クリッカブル範囲を広げる目的でaをdivみたいに使う場合はクラスつける >>517
詳細性の都合、意味論的にどちらにした方が都合が良いか、を考えて使い分けるので一般的にどうとは説明出来ない
https://teratail.com/questions/86578 >>517
liが100個あるとしよう
すると、<li class="hage">・・・</li> が100個・・・
俺ならulにclass付ける＝div無しにするがaがからんでそうだからそれでいいのでは 普通は、コンポーネントを、div で囲んで(ラッパー)、
divに、ID, class などを付ける >>505
なかなか骨のある奴だな。
要領が悪そうで会社では出世できないかもしれないが、
人とは違った印象のコンセプトや意図のしっかりしたデザインが出来るようになれるかもな。
aタグはanchorの頭文字の略だ。アンカーの和約は錨（いかり）。
イメージとしては>>516の言う通りだ。
それとPhotoshop使った事あるならすぐ理解できると思うが、錨の鎖的な意味もある。
鎖で繋ぐ→リンクさせる（リンク元とリンク先を繋ぐ） エジソンは子供の頃、親になんで？どうして？って質問ばかりしていたらしいが、
ネットが発達した現代に大人になってそれを他人にしたらアホ認定間違いなし。
それと仕事には時間の制約というものがある。
意味がわからなくても、納得できなくても、先に進まなければならない時は、
そういうものだという方向に切り替えて対応しなきゃ生きていけない。
父より >>530
> ネットが発達した現代に大人になってそれを他人にしたらアホ認定間違いなし。
> それと仕事には時間の制約というものがある。
時間の制約があるから他人に聞くんだよ
近くに知っている人がいるのに、聞かないで
自分で調べてたら時間かかるだろ。
もちろんネットが発達した現代に、誰かの仕事の邪魔までして
聞くのはアホ認定間違い無し。
slackなどを使ってチームに一斉に聞くんだよ。
今は自分で調べずにネットで多数の人に聞く時代 >>531
昔、仕事中に後輩にいちいち質問してきてうっとおしいから、少しは自分でググレよ！って言ったら
いや自分で調べるより聞いた方が早いので・・って言われたわ。
ネットで多数の人に聞けってのはわかるよ。
でもそれってどうやるの？どこでできるの？すぐ回答もらえるの？
聞きたい事の単語がわからないんだけど？ってなるぞ。
結局、検索力を付けないとダメ。 それいうなら世界の大多数の人に聞け、で結局ネットで聞くのが一番だね 別に一つの手段に頼る必要はない。
人に聞いて回答を待ってる間に調べれば良い ググっててもそれが正しいかもわからないし、効率も悪いからね。
自助努力は必要だけど、先輩からのアドバイスというか答えは何より心強いからなあ。 デザイナーしているがはっきり言って好みの部分は大きいよ
しかし人々のそれぞれの好みすらも予め予測、把握して先手を打つんだよ
マーケティングと同じさ pの中にリストを入れられないのがモニョることがあります。
たとえば
「選択肢は
・諦めて留年
・山張って猛勉強
・教授を買収するしかない
の3つ。」
という文がある場合、意味上はリストもパラグラフの一部になるはずですが、htmlルール上は違反なのでこうは書けない。
どういう書き方がスッキリするでしょう？ >>540
br改行入れてpで書けばいいのでは？
リストになっているところだけスタイル変えたいならspanでもかませばええんちゃうのん。 >>540
マークアップはページやサイトの構造を示すものであり、話の内容の構造を示すものではないという事。
文中の内容くらいの小さなレベルはマークアップはすべきではないと考えておくと良い。
つまりこの場合は>>541の書き方が一般的であり、サイトのリストとしては扱わない。 それでいいと思う。
箇条書きのところはspanとかでスタイル付けて、
リストみたいな目印を付ければ無難かと。
・をテキストで書くのはダサいからね… <p>選択肢は<br>
<span>諦めて留年</span><br>
<span>山張って猛勉強</span><br>
<span>教授を買収するしかない</span><br>
の3つ。</p>
span:before {
ほにゃらら
}
みたいな えー対応するのこれ…
今のでかいほうのアイホンですらろくに検証してないんだけど >>540
brはよほどでないと使わないほうがいい。
<p>選択肢は</p>
<ul>
<li>諦めて留年</li>
<li>山張って猛勉強</li>
<li>教授を買収するしかない</li>
</ul>
<p>の3つ。</p>
でいい。国語の段落は一旦頭から消したほうがいい。 上下のpタグを一文にしてしまえばいいのにと思っちゃうけどそれはこっちの都合か ありがとうございます。
意見が割れていますね。>>542さんのそれほど細かいマークアップは必要ないという
話でなるほどと思ったのですが、brは連続で使わない場合でもよくないのでしょうか。
<span class=“list”>
<span>諦めて留年</span>
</span>
にして、span.listとspan.list spanをそれぞれ
display:blockのwidth=100%にしようかと思っていましたが、これは何か良くない点はあるでしょうか。
（今PCの前にいないので、何か間違っているかもしれません） >>548
そうですね、実際には
「選択肢は以下の3つ。」
のように一つにまとめることでこの問題を今まで避けていました。
しかし、今日また同じことがあって、一般的にはどういった対応をしているのだろうと気になったのです。 >>548
そうしたいとこなんだけどな。
でないと納得できないというか落ち着かなくて調べたら547の通りだったのでそれで続けてる。
>>549
よくないというか単独でも普通はpタグを使う。連続なんて悪例の代表例だぞ。
><span class=“list”>
いかんいかん。何のためのタグつけかと、見た目は後回しにすべき。
「3つ」なのだからリストでいい。４つになる可能性もあるかもしれない。 >>540
そういえば、これ悩むんだよな。
たまにしか出ないから、すぐ忘れちゃうけど。 何でbrはよほどでないと使わないほうがいいんだぜ？
一文の中だったらbr使って良いと思ってたが。 ｂｒは見た目の為に連続で使ったりしなければ問題ない。
つーかぶっちゃけ、連続で使ってもそこまで問題は出ない。
芸能人ブログのように改行だらけでもアクセス数は文法なんて凌駕するのだ。
質問のやつはリストとしてマークアップする意味が無い。
マークダウンという概念を覚えたほうがいい。 なんでもマークアップすればいいってものではない
例えば広告でこれ全部強調してって言われたら何も伝わらない広告ができ上る
同類の他店より安くて
今回増量してビタミンが豊富で
ここでしか買えなくて
しかも期間限定で
20%オフで
沖縄離島以外は送料無料で
レビューしてくれた方はプレゼントが付きます >>540
アスカ「あんた日本語で考えてるでしょう！？」 HTMLファイルの作りとしてはどちらが理想的なのだろうか
・ヘッダーやフッターなどを気にせず、記事本文など重要な要素が上の方に存在する
（その下にナビゲーションやパンくずリストなど）
・一般的な形式に則って、ヘッダーやフッターの間に記事本文など重要な要素が存在する
（記事本文の上にナビゲーションやパンくずリストなど）
みなさんの意見が聞きたいとです >>557
SEOにはどちらも関係ない
ユーザー的には場所に関係なく、ストレスなくサイトメニューが把握できる仕組みがいい
（いちいちスクロールしなきゃメニューにいけないサイトは嫌） しかし使いやすさの効率を求め過ぎると、サイト滞在時間が短くなるというジレンマもある >>557
後者。
なぜ前者の考えが候補にあるのか？ >>557
そもそもなんでこんな作りになるのかがわからん
適切にheaderやnavを付ければクローラーは解釈できる >>531
自分自身の能率だけを考えるなら、他人に聞く方法は良いけど、聞かれた人はあなたに説明する為の時間を割いているわけで、能率は下がっているからね。
そういう他人の時間を使う自覚のある人なら、「これぐらいなら自分で調べれば答えが出るな」と判断できるものは自分で調べる。
逆に、すぐ他人に聞く人は、「自分の事しか考えない人なんだな」と思ってしまう。
そういう自己中心的な人が先輩の立場になった時、後輩が「あれは何？これはどういう意味？」と質問攻めされても懇切丁寧に答えてくれるかは非常に怪しい。 >>561
駄目なんて言ってない。
リスト要素が下にあってもマークダウン的には問題ない。
ただ、それがナビゲーションやパンくずリストだと分かっている前提で
何で下に置くという分かりにくい配置が理想的な方をきめる候補にわざわざあるの？ >>553
一文の中だったらbr使って良い
そんなルールはないｗ
>>554
芸能人ブログのように改行だらけでもアクセス数は文法なんて凌駕するのだ。
そりゃそうだ、だがここは質問回答のスレだからな
先ず基本を答えるのは定石だろう
あとは勝手にすればいい
見てる側からすりゃどうでもいいことだ link rel="prev",link rel="next",で質問です
fooで検索した結果の1ページ目が以下の時、どのようにつけるのが適切でしょうか
http://example.com/search/?word=foo&;offset=0
http://example.com/search/?word=foo&;offset=0
には以下のみ
<link rel="next" href="http://example.com/search/?word=foo&;offset=1">
http://example.com/search/?word=foo&;offset=1
には以下
<link rel="prev" href="http://example.com/search/?word=foo&;offset=0">
<link rel="next" href="http://example.com/search/?word=foo&;offset=2">
http://example.com/search/
との関係性は示さなくてもよいのでしょうか？ >>565
じゃあいったい、brはどういう時に使うの？ >>561
ひと昔前は、h1とか重要なソースはできるだけソースの初めの方に書いた方が良いという時代があって
見た目と全く違ったソース順序にする手法などが横行していた（positionで無理やり持ってくるとか）。
理由はわからない。ネットの通信速度かサーバースペックの問題とかで、
全てのソースを読み込み完了せずにインデックスされるイメージだったんじゃないだろうか。
しかし今の時代になってそういう不自然で手間のかかる手法は完全淘汰された感がある。
そんな小細工してもSEO的な結果は何も変わらないという結果なんだろ。
ちなみにheader,footerなどの共通部分は、ただの「共通部分」として扱われるだけだよ。
mainタグ付けとけば探して関連付けて解釈してくれるさ それとパンくずは大変重要。検索結果にも表示される。
とりあえず言える事は、ブラックハットまがいの小細工はもう意味をなさないという事。 >>567
んなもん滅多に使わんぞ
使うとすれば1行の中で改行するとき
改行と段落は違うからな、ググってくれ たまーに画面の一番下にハンバーガーメニューを設置してるサイトを見かけたりするけど
あれは一体どういうつもりでああいう構造にしてるんだろ？？
単にトップに配置するんじゃありきたりだからって理由なのかな？ 「一文の中ならbr使って良い」って「1行の中で改行」という意味だから問題なくね brは多用しちゃいけない
ってよく見るけどその理由ってなんなんだっけ？ >>572
>>565
>>573
多くは見た目のために使うから
その例が>>544
一度に多く使うならwhite-space使うとか >>573
連続brはブラウザやWYSIWYGによって解釈が異なるから。
1つとして扱われるものと、そうでないものがある。（見た目が）
多用がいけないってのは聞いた事無いなー
端末によっておかしくなるからか？ つまり
アクセスするブラウザによって表示のされ方（見た目）が変わっちゃうのか HTMLを考えた外国人が
1つの文中の中で
<br>
<br>
<br>
<br>
こんなに改行するなんて
<br>
ありっこないっていう前提だったんだろうなbr <nav>とか<ul>とかのブロック要素って、<div>や<header>等別のブロック要素の中に入れないといけない決まりってありますか？
例えば箱を４つ並べる時、4つ目の箱だけ中にリストを作りたいから
<divの箱> <divの箱> <divの箱> <ulの箱>
このようなdivと同じ使い方はアリですか？
それと、ulやliって中をfloatしたときにheightが0になる場合、レイアウト上問題はなくてもheightを出した方がいいですか？ >>582
アリ。無駄なタグは一切使うなってこういうスレで怒られた事ある。
height0の件はclearfixで高さを認識させる。後続要素や背景色が今後付く可能性が0%なんて事は原則ないから。
今後も100%問題ないと言い切れるなら別にいいんじゃない >>560
それいいな。直感的だし。
クライアントがCMSでブログ書く時、いちいち外部cssでクラス追加とかめんどくさいもん http://phiary.me/css-centering-don/
この縦横センタリングの手法ですが
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
この設定の意味は何でしょうか？ デザイン見て作りやすい順に要素置いてるけど、パン屑は上の方に書いたほうがいいみたいなこと言われたことあるわ
なんか意味あるんかねぇ >>583
無駄なタグは一切使うな、は正論だが582の場合なら俺は
<clearfixのdivの箱>
<divの箱>
<divの箱> <divの箱> <divの箱> <ulの箱> 余分にent押してもた
<clearfixのdivの箱>
<divの箱>
<divの箱>
<divの箱>
<divの箱>
<ulの箱>
にする。見通しいいしCSSが楽だから
clearfixのdiv > div {
float: left;
} >>585の件ですが
left: 0px; right: 0px; top: 0px; bottom: 0px;
だけで
width: 100px; height: 100px;
がないと、当然ですがブロックが親要素の全面に広がります
一方、
left: 0px; right: 0px; top: 0px; bottom: 0px;
がないと左上に来てしまいます
原理が分からなくてバッドノウハウ的に見えてしまいますが
多分ブラウザは問わないんですよね？ というか、CSSってそもそもが信じられないくらいクソな仕様だと思います
全部捨てて新しいの作った方がいいんじゃないでしょうか？
コードを見てもやってることが分からないとかあり得ませんね？ floatを文字の回り込み以外に使うのはもうやめようぜ。
今はflexじゃい。 >>590
君は何をしたいのかね？
>>592
古いブラウザ使ってるとこもあるからな
切り捨てられたらそんでもいいが >>591
JavaとかC++みたいな厳密な言語をやってきた人からしたら、
何故こんな曖昧な状態のままリリースされてしまっているんだろうって思うかもしれない。
しかしクソに入いればクソに従えという諺があるように、クソまみれの中から掴んだクソは
意外と悪くないかもしれないねというクソミソテクニ そもそもcssはプログラミング言語ではないのでJavaやC++と比べるのはお門違い 実際flex使いたくてうずうずしてるけど、もうちょっと対応してくれんと使えない >>590
古いIEとかは知らんけど、モダンブラウザは大丈夫
他にも方法はあるけど、どれも条件があって微妙
みんなも同じように1度は中央揃え関連は悩んで検索した事あるんじゃないかと思う
なぜスマートな方法がないのか？これに限った事じゃないいつもの事だから気にもしてなかったわ ぶっちゃけ、全部divだけで無理やり作ることも可能なんだよな ちゃんとしたマークアップ構造を意識しだすと横並びの要素は全てリストタグで書かなきゃいけないような気がしてくるけどそれであってるのかな >>600
俺個人は例外もあるけど取り敢えず5つ以上はli使ってる <div class="abc">
<p>あいうえお</p>
<img src="img001.gif">
</div>
上記のhtmlファイルがあったとして.abcのimgだけ横幅を変更させたい場合どう指定すればいいのですか？
下記みたいにやったけどダメでした。
.abc img{
width=300px;
} width=300px;
↓
width:300px; 質問なんですが
もしかしてHTML5やCSS3って今現在でも新しい要素やセレクタなんかが付け加えられたりしてますか？
数年前に発売されてた参考書には載ってないものが結構あるみたいなんですが >>606
ありがとうございます
そうなんですか
2013年発行のやつだと載ってないのが多過ぎてあんまり使い物にならなくて・・・
display:grid;
とかも当然のように載ってません
それと
ナンバリングではなくなった
とはどういう意味ですか？
HTML5やCSS3の数字の部分が付かなくなったってことでしょうか？？ display：gridとflexはここ最近の大きな進歩だな。 App Storeで配れるレベルでアプリ作れる人、ビジネスしません？
コンテンツの内容でいいアイディアがあるんだけど、アプリ作る知識はなくて。 サイトのリニューアルで
下層のページはヘッダー、サイドバー、フッターなど共通部分のみを付け替える場合、
新cssを旧ページにも読み込ませる必要が出てくるので、新・旧のcssが混在してしまう
reset関連はほぼ同じ内容だから旧を削除しても問題ないが、共通cssファイルのhやaタグなどの扱いが異なるから困る
で、質問
共通部分には旧cssを効かせたくない、コンテンツ部分には新cssは効かせたくない
これをスマートに実現するにはどうしたらいいかな？
css側の全セレクタに親クラスを付けて有効範囲を限定させれば対応できるんだろうけど、これは手間すぎるしちょっとダサイ。
イメージとしてはiframeでぶった切っているみたいにcssの有効範囲が共通部分とコンテンツ部分で完全分離する方法ないかな >>609
アプリ作る知識がないなら勉強すればいいだけでは？
アイデアなんてだれでも考えつきます。
あなたがアプリを作る勉強したくなくて
開発はすべて相手にさせるのであれば
あなたはその労力に見合った仕事か金を提供しなければいけません
つまりアイデアを実現可能な仕様書に落とし込むのです。
アプリを作る以外のことまで相手に考えさせようなんて
虫が良すぎますよ？ >>611
はい、ですからお金を提供します。
誰にでも思いつくアイディアもありますが、わたしの場合、かなり努力して積み上げた知識や経験をアプリで情報発信したいんですよ。 分割になりますが、500万くらいなら質のいいものつくれますかね >>609
節子、そのアイデアは先人がもう失敗してるアイデアや >>614
アイディアというより技術というか知識というか。
オリジナルなものだから先人はいないですね。 現にその知識を情報発信して、利益は上げてるんですが、よく売れるときと売れないときの波が激しいんですね。
情報発信が下手なもので。
アプリにすれば安定して売れると見込んでます。 アプリ開発の勉強をしてるヒマがあれば自分でやりますけど、今ちょうどチャンスなんですね。ある法律の改正がされそうなタイミングでして、それがビジネスチャンスなんです。
なので、お金を払ってでも急ぎたいわけ。 そうですか。
アプリがなくても多いときは月に100万円は超えるので、アプリがあればもっと上がると思うんですが…。
やっぱり2ちゃんはダメですね。
他のスレを覗いてみてもチャンスを逃す人しか集まらない。 普通に業者に依頼します。
業者に依頼するより個人で取引したほうが面白いもの作れそうと期待したんですが。
じゃ。 >>619
俺もな～んもせんと月100マン稼いだ時期はあったよ、半年だけなｗｗｗｗ
で、製作者を探す→喧嘩別れをする（実力が無いので相手の力量を見極められない）→自分でやろう
で、ここの亡者と成り果てる ネットの知識ほとんど無しの下手くそな情報発信でも100万売り上げたんで、アプリで安定して発信できれば100万なんて端金と思えるわけですわ。
残念だ。 詐欺師もよく使う言葉だ「残念だ」
言っている本人だけが「残念だ」と思ってる。
ほかの人は、ふーん 個人の面白い発想とか期待してたんですけどね。
同じお金を払うなら、こんなネガティヴな発言しかできない人に払うより、無感情な企業の方がまだマシかなと思いました。 お前の考えは知らんがスレチなのは間違いないよね
せっかくの質問が埋もれちゃったら可哀想だろ 内容わからず手を組むやつはいない
まず仕様を提示してそれに乗るかどうか判断する
ビジネスでは当たり前のこと
それができないやつは相手にされない >>627
2ちゃんにそんなん書くバカもいないだろw まあ、直接話を聞いてみようって行動をとれるような人間じゃなきゃ、こっちが魅力感じないから。アプリ作れてもつまらんから却下ということで。 >>630
オナニーでも月に100万売れてるから立派な社会貢献オナニーですわ ビックリするぐらいスレ違いなんだけど・・・
そもそも２ちゃんねるで同志募るとしてもなぜにこの質問スレで？？ｗ >>632
その時点でレベルの低さが分かるよなぁ
しかもアプリといいつつhtmlってなーんも分かってないぞ ・質問ではない
・アプリを作れと言うがここはHTMLスレ
・きいてもねーのによく喋る
・業者に依頼すると結論を言った後に名残惜しいのか喋り続ける
虚勢を張りたい馬鹿が蝿のように迷い込んだとしか思えない。 画像のaltって画像に含まれる文字全て入れるべきですか？
例えばたまに見る英語見出し+日本語見出しのときとか
コンピューターに理解してもらうためなら全て入れるべきだと思うけど、アクセシビリティの観点で言えば必要な情報だけを入れるべきだとも思うんです >>636
コンピュータに理解させるってよくわかんないな
SEOに無関係とは言わないけど最悪空でもいいし、代替テキストでしかないんだからそこまで情報を詰め込まなくていいでしょ 画像にもよるけど見出し画像なら入れればいいんじゃない？
日本語+英語の見出しの場合、lang="ja"なサイトなら日本語だけ、lang="en"なサイトなら英語だけでいいかと >>636
マジレスすると、画像の種類や意味付によって変わって来るんだよね。
ナビメニューとかなら、リストとかで既にテキストがあれば、あえてつけないことが正解になることさえある。
図版やグラフでは、その内容がわかるようなクソ長い説明文を入れるのが正解の場合もある。
まあサイトの性格にもよるだろうね。
ハンデのある人は間違いなく見ないサイトならアクセシビリティなんかいらないと思うし。 HTML5なら省略してもいいってどこかで読んだ気もする。
ただ、誰がどんなブラウザで閲覧しているかわからないからな。 ありがとうございます 状況に応じてってことですね
ていうか聞くスレ間違えてますね、すみません… 横に分割するのはカラム（列）レイアウトですが
縦に分割するのは何と呼ぶのでしょうか？
columnに対応するのはrowですが、
ローレイアウトなんて聞いた覚えがありません そもそもhtmlは上から下に行くもの
いくらでも分割されている
縦書きサイトでも、右から左に読むサイトがあれば、
それに対して2ロウレイアウトや3ロウレイアウトという表現は合うだろう
存在するのかしらんけど アクセスカウンターのサービスで、条件に合うものを探しています。
静的サイトしか動かせない環境に、アクセスカウンターを設置したいと思っています。
当然、別のサーバーで動作するサービスを利用し、JSとhtmlだけ貼り付けることになります。
条件は、
- アクセスを数えるページと表示するページを分けられること(必須)
(たとえばトップページに設置したトリガーの数値を、すべてのページで表示する等)
- 広告が入らないこと(必須)
- CSSを適用したいので、アクセス数がgif画像等ではなく文字で取得できること(出来れば)
の三つです
もしこれを満たすサービスをご存知の方がいらっしゃったら、教えてください >そもそもhtmlは上から下に行くもの
>いくらでも分割されている
言われてみればそうですね
縦に分割されているのは1カラムということになるのでしょう
ウェブアプリによくある、
fixedなヘッダで
ビューポートの残りの部分をメイン画面に使うようなレイアウトの呼び名を
知りたかったのですが
1カラムレイアウトというと普通のウェブサイト的なレイアウトを想像します
アプリ的なレイアウトの呼び名は何でしょうか？ 最近の流行りで、サムネイル画像をバックグラウンドにして、ぼかして、サムネイルを上にかぶせるやり方はどうやるのでしょうか？
誰か、教えてください。 あ、自己解決、バックグラウンド背景にして、フィルターでぼかして、あとはサムネイル画像をposition: relativeで乗せてるのね
サムネイル
background-color: rgba(67,67,67,0.7);
overflow: hidden;
position: relative;
サムネイル壁紙
position: absolute;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
filter: blur(5px);
filterでぼかせるのは知らかった(´・ω・｀)
こういうのがあるのね でも、これ元の画像サイズが小さくて背景にするとぼかしてもだめぽいね、荒くて使えないぽい filterというプロパティ初めて知ったわ
多分一生使うことないだろうな 俺の母さんも一生使うことがないと思う
だってウェブ制作のプロじゃないしね >>658
んな事は無い。既にこういうのでみんな一度は使ってきているぞ
filter:alpha(opacity=50) だからウェブ制作のプロじゃない>>658は
一生使わないってこと 煽りが成立してないね
ウェブ制作のプロじゃないいから何？って感じ ウェブ制作のプロじゃないいからfilterを使わない プロじゃないっていうか、使うのはほぼデザイナーだけだろう。 スクロールに応じてぼかし増やしてほしいって言われて使った気がする マウスオーバーでぼかしたりってのも普通にやるよね？ しないというか、モバイルファーストだからマウスオーバーのイベントは一切作らないと決めている
マウスオーバーを使うとユーザーが色々と想定外の動きをする 意外とfilter使ってぼかすのって使わないんだね？ opacity: ○.○;
filter: alpha(opacity=○);
がセットなんだっけ？ PCで（というかそもそも分けないが）マウスオーバーは使う
モバイルでも影響ない程度に
>>669
定外の動きとは例えば？ タップでhoverに指定したCSS普通に発動しちゃうのがな >>672
filterってopacityとセットで使うの？
なんで透明いれるんだろう？ 勘違い、filter: alpha(opacity=○); オプションが透明度なのね >>675
最新のブラウザなら>>672の一行目のみでいいけど
古いブラウザ用のための二行目だったと思う IE8対応でしょ
もうほとんどやってないと思うから気にしなくていいと思うけど >>674
そうなっていいプロパティに限って書かないか？
imgの枠の色変えるとか 基本的なことで申し訳ないんだけど
グリッドレイアウトとかレスポンシブwebデザインってheightはどうしたらいい？
横幅はデバイスの幅でパーセント指定するのはわかるんだけど、
んじゃ縦はpx指定で大丈夫なのかな。
それと、%に代わるvwとかがあるみたいだけど、
例えば％だとbody{width:100%;}にしてたら、bodyの幅に合わせてサイズが変わるのに
vwだとウィンドウの幅に比例してサイズが変わるからいまいち使いどころがわかんない
長文スマソ heightは滅多に設定しないな
ブラウザまかせだ パーセントと違って親要素の幅に左右されないのが利点
>>489
こういうのもvwで済む
caniuseは確認してな heightを決める場面って何かあるのか？
下を揃えたければflexを使えば指定しなくていいぞ １つのページに<input><select>などのフォーム部品を数箇所散りばめて配置する場合
ＯＫやキャンセルボタンなしに、フォーム部品が変更されたら即座に反映させる場合
リセットがいらない場合
フォーム部品をそれぞれ<form>タグで囲う必要性ありますか？ jsですると思うけど、ajax送るならいらない、submitするならいる 684です。みなさん、ありがとう
jsで、submitしません
一部のタグ（要素）の色を変えたり表示・非表示を切り替えたりなどです >>607
遅ればせながら、はい
HTMLやCSSの仕様を策定する団体は１つではなくなりました
w3cは相変わらずですが、ブラウザベンダーで構成されるwhatwgとは完全に袂を分かちました
今後どちらを信頼するかは、自分のゴーストの囁きに従ってください >>688
form要素はサーバーにデータを送信するのによく使われるけど他にも機能がある
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form
> <form> 要素には、:valid および、:invalid の 2 つの CSS 疑似クラスが使用可能です。
入力チェック機能ってことだな
> autocapitalize
> これは iOS 版 Safari Mobile で使用する非標準属性であり、子孫のテキスト型フォームコントロールで
> ユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。
> autocomplete HTML5
> input 要素がデフォルトで、ブラウザーによる値の入力補完を受けるかを示します。
divでくくるぐらいならform要素を使ったほうが良いよ >>680
例えばpaddingやmarginの上下の値とかの事でしょ？
自分はこんな感じで左右は%だけど上下は仕方なくpxでやっている
padding:5% 20px;
vwで綿密に計算してもブラウザの解釈が違うのか、ウインドウサイズによってズレるんだよな。
だからまだ仕方なくpxでPC/SPで書き分けている 訂正
×padding:5% 20px;
↓
○padding:20px 5%; かんたんなSVGアニメーションをさせたいのですが2つのSVGを用意してホバーするとその間を補完するようにアニメーションさせる方法はありますか？ >>691
ありがとう！
あんまりレスが来なくてちょっと悲しかったから有難い >>690
入力チェックはjsやphpでやるだろ
divでくくることなければいらないってことだな
684でいちいちくくるようには思えん >>695
> 入力チェックはjsやphpでやるだろ
あんたHTML5を勉強した方がいいのでは？
http://www.htmq.com/html5/input.shtml
max属性 入力できる最大値を指定する
min属性 入力できる最小値を指定する
pattern属性 正規表現で入力値のパターンを指定する
required属性 入力必須にする HTMLの<input>でmax属性など書いておく←ユーザーのために一応書くが、当てにならない信用できない
JSで更に詳しく←ユーザーのため及び厳密チェック
これ常識
入力チェックできるからform使うとか有り得ん でも最終的にはシステム側で不正データは弾かないといけないよ。
HTMLによる抑制なんてセキュリティ的な意味は持ってないからね。 あ、JavaScriptで弾くのも同じく意味ないからね。 >>700
んなもん言わんでも分かっとるわｗｗｗｗｗｗｗｗｗｗ じゃあなんのためにJavaScriptで入力チェックをするかというと？ サーバーに送信しないから反応が早いから快適さにつながる 従来はJavaScriptが必須だったものが簡単なチェックは
HTMLだけでできるようになった。 >>703
余計なページ遷移をさせない為
巨大なサイトならphpに負荷を与えないというのも理由になるな >>706
簡単なチェックで済む事がまずない
大抵jsで再チェックすることになる。そんなことするぐらいなら最初から全部jsに投げたほうが確実で楽 掲示板への書き込みぐらいならそのチェックでいいかもな 699だが、加えると鯖に送信する場合JSチェックでさえ当てにならない信用できない
悪人が無効にして適当な値ぶっこまれるからな >>709
その場合はCustom Validationを使えばいいだけ
http://stephenwalther.com/archive/2012/03/13/html5-form-validation
バリデーションの内容を書くだけで、エラーメッセージをだすUIは
ブラウザが用意してくれる >>710
公に目つくとこにそんなセキュでいいのか？
下手すると閉鎖になるよ サーバー側でチェックする必要があるっていってるやつは黙れよ。
JavaScriptでやってもHTMLでやっても、
どちらもクライアント側なんだから、
サーバー側でチェックする必要があるのは同じだろ つーか必須、正規表現、最大最小値が使えて
JavaScriptでカスタムできるなら、
HTMLでやったほうがいいやん。
UIまで全部作るは面倒だよ。 >>712
それよく知らんが使用者にエラメで案内とかできるの？
○～○までの値で入力してくださいとかできるの？ inputでのバリデーションはデザインに合わないしメッセージ違うし使わない
入力時にjavascriptでリアルタイムバリデーションしてデザインに合ったエラーメッセージ出す
送信時にもう一回全体バリデーションした上で通ったら初めてPHP側に送信して厳密にバリデーションする
これでEFO、ユーザビリティ、デザイン、セキュリティぜんぶが保たれる >>718
>>696はサーバー側のチェックの話なんかしてないじゃん。
クライアント側でのチェックの話をしてる。 >>717
> それよく知らんが使用者にエラメで案内とかできるの？
> ○～○までの値で入力してくださいとかできるの？
メッセージをカスタマイズできる >>717
http://www.girliemac.com/blog/2012/12/01/html5-form-validation-jp/
> エラーメッセージの表示をカスタマイズするには大まかに２つの方法があります。
>
> では簡単な方法から。これは title 属性を使ったインラインテキストを表示させる方法で、
> ここで指定されたテキストはデフォルトのエラーメッセージに下に表示されます。 >>720
それが一般的だし一番楽だな
ここ個人情報入力や公開の場にHTMLチェックだけとかいそうで怖い 昔掲示板作った時、サニタイズもバリデイトもしなかったけど問題なかったぞ
…誰も使わないから；； >>721
そのレスおかしいぞ、よく読んでくれ
もっとも>>696はそれすら知らなそうだが >>720
> inputでのバリデーションはデザインに合わないしメッセージ違うし使わない
デザインもメッセージも自分でカスタマイズすればいいだけの話
http://jsfiddle.net/ztxzducc/1/
せっかくHTMLレベルで基本的な機能が用意されてるのに
使わないとかアホらしい。
最終的には変えるかもしれなくても、プロトタイプ的に使って
あとで作り込む時にデザインやらメッセージやらカスタマイズすればいいだろ >>726
入力チェックは 「js」 やphpでやるだろ
って言ったのは>>695ですよ？ jsでsubmitしませんって言ってるのに
サーバー側のチェックって何言ってんだ？って思った >>730
そこはすでに元の話と一般論の話と分かれてるよ
どちらも間違いではない >>731
だから一般論としてサーバー側でチェックすることは当たり前で、
その上でクライアント側でのチェックにも意味はある。
ここまでの前提があって
クライアント側でのチェックでJavaScriptで全部やるのか
HTMLの機能でらくらく作って、足りない部分だけをJavaScriptで
補うのどっちが良いのかって話をしている所に
前提以前のサーバー側で～って話を持ち出すのがアホなのはわかるだろ？ HTMLでのバリデを否定はしないが
HTMLは本来のコンテンツの記述に絞って、デザインやレイアウトはCSS、メッセージなど動的な面はjsで
・・・という俺は古いのだろうか
保守性含めて >>733
かも知れないけど、俺は同意
htmlとjs混ぜてバリデイトとかめんどくさい。ブラウザの検証もアホらしい >>732
>>696が全てHTML（しかもinput）でまかなえるようなこと書いてるからサーバー側～って話になった
別に流れ的には変ではないよ >>733
HTMLはコンテンツってのは間違ってないが
そもそもフォームはコンテンツではないのだよ。
セレクトボックス、チェックボタンはコンテンツか？
って考えればわかるだろう？
HTMLにおいてフォームはコンテンツではなくユーザーのが入力するもの
だからそこにバリデーション機能やエラーメッセージが有ることは問題ない。
フォームの存在自体を否定したいのならば、間違ってはないがな。
そしてHTMLのバリデーション、デザインやレイアウトは当然CSSでカスタマイズするし
メッセージもフルでカスタマイズするならばJavaScriptを使う。あんたの希望通りだよ。
CSSやJavaScriptを使わなくても、HTMは標準のデザインと処理が有るだろう？
フォームの標準のデザインと処理で良ければCSSやJavaScriptはいらない。
一貫性は取れている。 >>734
プロフ入力など一般的なのはJSやjQuery使った出来合いのものが
フリーでもライブラリでもあるしな >>735
> >>696が全てHTML（しかもinput）でまかなえるようなこと書いてるから
え？書いてないよ？
>>695が入力チェックはJavaScriptとPHPでしかできないように書いてあるから
>>696がHTMLでもできるって書いてあるんだよ。 >>737
> プロフ入力など一般的なのはJSやjQuery使った出来合いのものが
> フリーでもライブラリでもあるしな
え？ マシなのある？ ちょっと教えてくれよ。 >>737
そういったライブラリはデザインに合わないしメッセージ違うし使わない >>736
>セレクトボックス、チェックボタンはコンテンツか？
コンテンツという言葉は捉え方いろいろあるが
本文に組み込まれるようなものなら十分コンテンツと言えるよ。
例えば
平成<select>年は西暦○○年です。
少なくとも元の質問の作品（？）はそれに近いものとも読み取れる。 >>741
何が言いたいのかさっぱりわからん
年を選んでJavaScriptで西暦に変換する処理がコンテンツだというのなら
年をテキストで入力して数値じゃなければエラーをだすのもコンテンツだろうな >>738
入力チェックはJavaScriptとPHPでしかできない、とは書いてない
一般にはそっちでやるもんじゃないの？
inputのチェックだけでは足りないのでは？
ということ
HTMLでもできる、とも書いてないな >>742
>処理がコンテンツ
ではなくて、場合によってはフォーム部品もコンテンツに含まれるということです。
そもそも元の質問はフォームではないのだからその”場合によっては”に当てはまると予想できます。 >>743
入力チェックはHTMLとJavaScriptとPHPでする。と書くべき所で
入力チェックはJavaScriptとPHPでする。と書いた。
これはHTMLでできないと思ってる何よりの証拠
> inputのチェックだけでは足りないのでは？
もともとJavaScriptはHTMLで足りない所を補完するもの。
例えばselectボックスを２つ並べて、
県セレクトボックスを選んだら、動的に市セレクトボックスの内容が
変わるようにするとかね。
だけど県を選ぶだけのように、HTML標準でできることなら
HTMLでやればいいんだよ。足りないところだけ補えばいーの。 >>744
だから何が言いたいのかわからんって
フォームはコンテンツ派なら、
フォームの機能はすべてコンテンツってだけだろ >>740
そっか、書いた俺が言うのもなんだが俺は自作
その方が安心だわ >>728
これってボタン押さなくてもエラー出せる？
EFOでは入力中でもエラー表示や解除がいる
例えば10文字以上の項目で、1文字でも入れるとメッセージ出て、10文字に達したらメッセージ消えるみたいなの
あと、複数の入力項目の組み合わせでエラー出たり、ある項目によって他の項目の条件変えたりが必要
できるなら使うんだけどなあ >>738
>HTMLでもできる
>>712のようなものを挙げるならともかく、input挙げてそれはないわ >>746
>>684から読んでる？
フォームがコンテンツか否かとかどうでもよくね？ みんななんでいちいち言葉尻を捉えて言い争ってるの？
そういう考え方もあるんだとか、そういう方法もあるのかとか、それは自分には合わないなあとかでいいんじゃないの？
なんかこわいよ >>749
http://jsfiddle.net/girlie_mac/te3Qd/
これを見ると、
input[type=text]:invalid の時、文字が赤で
input[type=text]:valid になったら、文字が緑に
文字を入力するたびに変化してる。
ということは、文字を赤にする代わりに、
CSSでエラーメッセージ部分がかかれた
divをdisplay:blockにすればいいのではないか？ >>751
フォームがコンテンツとか言い出したのは俺じゃねーよ >>750
> >>712のようなものを挙げるならともかく、input挙げてそれはないわ
だからinputだけでもできるんだって。 inputの高さ指定ってどのCSSでやるのがいいの？
paddingでやったらFirefoxだけ高さ狭い >>745
>これはHTMLでできないと思ってる何よりの証拠
なんでそうなるかな・・・
>>699 >>756
それがどうかしたの？
inputだけでもできるって言われて、それが事実だったから、
それだけじゃ機能足りないんだよーって言い訳しているようにしか見えない。 スマン、訂正
>>745
>これはHTMLでできないと思ってる何よりの証拠
↑なんでそうなるかな・・・
>>699だってあろうに >>759
> なんでそうなるかな・・・
> >>699
後出しだからでは？ >>699は、>>696でHTML5でできるって言われて
気づいたんだろうね >>753
>>757
おお、なるほど！
ありがとうー
これは使えそうだな 元は<input>で何ができるでなくて<form>はいるかなんだな
元の質問で、<input>でできるなら<form>いらないということなのかな >>763
ちゃうわ！ｗ
その方が広く使われてるだろうよ >>765
例えば、フォーム要素の中の
input要素が一つでもエラーであれば、
フォームの周りを赤線で囲うとかできる。
そりゃ、なんにも機能がいらなければ
いらないのは当然だけど、sectionいらなくね？と同じ話
文書構造として複数のinput要素をグループを構成しているのであれば
submitやresetボタンがなくとも、formで囲うのはいい選択って話。 >>766
残念ながらHTMLだけでバリデーションするってのは
広くは使われていない。IE10から対応だし
知らない人がいても不思議じゃないよ。 散らばったフォーム部品をこと細かくform>で囲うんだ・・・
エラーならピンポイントでその部品を目立たせるな
その方が親切だと思うがそうでない場面が浮かばない 意味があるグループを構成してるならね。
細かくってのがよくわからんが、
もしかしてページ（ほぼ）全体を一つのformで囲うって
発想がないのかな？
余談だけど一つのformで複数の異なったsubmitボタンを配置していい
ってのを知らなくてJavaScript使ってるやつとかいたなぁ >細かくってのがよくわからん
↓
>フォーム部品を数箇所散りばめて配置する場合 >>769
よくある注文や登録画面はそれ
枠？を赤線で囲うとかあるかな？
グループ構成してたとしてもピンポイントだよな
まあ特殊な場合ではあるかもしれない フォーム部品を数か所散りばめたからって
細かくformで囲う必要はないって言ったんだが、
理解力たりなくない？ｗ >ページ（ほぼ）全体を一つのformで囲う
くform>の中にコンテンツ（？）本文（？）ぶち込むんだ・・・
いや別に否定はしないよ
ただキモイかな >>770
まとめて送信ならまだわかるが即時変更だろ、ないわ～ display: none; だけ、
visibility: hidden; だけ
のクラス。どういう名前つけてる？ >>774
キモい以外に言うことがないなら否定にはならないね。
formはアウトラインを形成しないのだから何の問題もない。
フォーム位部品をあちこちに散りばめたくなるってことは
結局それらの部品すべての値から表示内容を切り替えたいってことなんだよ
もちろん１つと言ったが、正確には意味がある単位なので
２つとか３つの場合もある。それはみてみなきゃわからん >>775
> まとめて送信ならまだわかるが即時変更だろ、ないわ～
送信するかJavaScriptだけで反映するかに関係なく
HTMLは作成しなければいけない
役割はきちんと分離して書かないといけないよ >>776
display: none; だけ
の意味が分からない。そんな要素は作らない
レスポンシブとしてpc-hiddenやmobile-hiddenはよく作るけど >>776
> display: none; だけ、
> visibility: hidden; だけ
>
> のクラス。どういう名前つけてる？
それだけではわからない。
まず状態（モード）という形で考えなおす必要がある。
タブだったら選択状態ってあるだろうし、
メニューなどの開閉ボタンならopenedやclosedという状態があるだろう
CSSの中身が同じでも状態の名前が違えば別物
どういう状態か？っていうのを考えれば自ずとクラス名はでてくる >>770
>意味があるグループを構成してる
グループなら fieldset で十分じゃない？ バリデーションの件は変革期なんだろうな
アニメーションだってCSS3のみでやるかjQueryでやるかで悩む
今までjsでないと実現できなかった事がHTML/CSSで実現できるようになってきていて
まだその途中経過の真っ最中だから悩むな まあ個人的にはバリデーションとかHTMLで実装とかどうでもいいから
CSSなんとかしろって思う。
前に出てたボックスの上下中央配置もそうだし、ぶらさがり文字とか、ページ内リンクの位置ズレとかさ リストをさ、マーク含めた全体にリンク付けるのはどうしたらいいのかな
今はマークと文字にリンクが効いてるんだけど、マークと文字の間の空間にもリンクを付けたいの <ul>
<li><a>・ほげ</a></li>
</ul> >>786
まあそうなるか
試してないけどbackground-imageでもいけそうだね
それ以外に方法ありそう？ liのpaddingを大きくして、
bg-imageするのがベストだと思う。 aをfloatにしてpaddingかければいけそうだけど考えてる内にアホらしくなってきた と思ったらダメだった。aの後ろに丸がずれる
<li><a href="#" style="
float: left;
padding: 0 0 0 20px;
display: inline-block;
">aaa</a></li>
liの黒丸ってインライン要素なのか？ >>753
便乗質問だけど、これメッセージを
getElementById(hoge)やjQueryの$('#hoge')などのように
任意のDOMを指定して好きな位置に表示できますか？
divの外側など >>785
親ブロックに position: relative;
子の中に
<a href="#hoge" style="position: absolute; top:0; left:0; right:0; bottom:0;"></a>
でいちおう全体がリンクになるよ
下線は引かれないので別途対応する必要があるが
↓だと ul 全体がリンク
<ul style="position: relative;">
<li>…
<li>…
<li>…<a href="#hoge" style="position: absolute; top:0; left:0; right:0; bottom:0;"></a>
</ul> >>785
floatにする場合はbrを消す。
大丈夫、バレやしないって・・・
<ul>
<a href="#"><li>あああ</li></a><br>
<a href="#"><li>いいい</li></a><br>
</ul>
ul {
list-style-position: inside;
}
a {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid blue;
}
・・・俺には恥ずかしくてできねえ ulのなかにはliしか入れられないぞ
chromeあたりだとおかしくなるとおもウ >>798
マジに突っ込むのやめてくれ
Win版ではできたよ。Android版は知らん。ちなみにFox、IE9もOK
W3Cのバリデは当然エラー
あとは785の意気込み次第 >>795
右下にメッセージ表示
http://jsfiddle.net/9y8xz3c0/2/
ポップアップを変えたきゃ、メッセージの表示をキャンセルできるんだから
キャンセルしてそのメッセージを好きな場所にいれればいい >>779
>>780
動的に表示させたり消したりするため
（jQueryでのaddClass用とremoveClass用） >>802
そんなことは分かっとる
手段じゃなくて目的を言えって話 ウィンドウ内の左上にタイトル欄があり、右上にログアウトボタンがあるような画面があります
これが今同TR内の二つのTDで、タイトル欄幅500px、ボタン欄幅500pxでボタン右上配置みたいになっています
この状態だとウィンドウ幅1000px以上の場合はボタンが左から1000pxの位置にありますが、
ウィンドウ幅を1000pxより狭くしていくとボタンがウィンドウ内の右端にある状態でタイトル欄に寄って行きます
この動作を、タイトル欄の幅を指定せずに実現したいです
（ウィンドウ幅を狭くした時にボタンが見えなくなるのが嫌ということです）
cssで絶対位置指定をするとウィンドウ幅を1000pxより狭くした時ボタンがウィンドウ外に出てしまいますが、
何かいい方法はないでしょうか >>785です
いっぱいレスついてて嬉しい
まだ一つも試してないけど、取り合えずID変わる前にありがとうと言わせてくれ >>805
あとはこれとかね。
http://jsfiddle.net/ztxzducc/1/
普通にHTML+CSSだから好きな場所に移動できる >>785
ulのlist-style:none;
aに擬似要素でマーカー入れる よく考えたら、list-style-imageってあったな。 >>808が正解だろ
list-style-typeなんてブラウザ差異が出るから普通は使わんのだよ
昔は,liにbackground-imageが一般的だったが、今は自分も疑似要素でやる事が多い >>807
まじか、すげーな
親要素やその親要素にもできてしまうのか（CSS自体それできないので）
でもSEOの観点からは悪そうだな
複雑になるのでロボットが正しく読み取る可能性が低くなりそう >>812
SEOの観点から言うならばHTMLの仕様どおり作るのが一番だよ。
最近はJavaScriptも解釈できると言うがどの程度かわからんしね。
なのでHTMLのフォームバリデーション機能を使ってボットに正しく認識させ
JavaScriptで加工するのが一番いいやり方。
昔から変わらないやり方では有るが。 >>813
その観点から、バリデーションのエラーメッセージなどはなるべくJavaScript側に入れたほうがいいな
HTMLはなるべくコンテンツそのものに絞りたい >>804
タイトルとボタンそのものの幅だけ指定して欄の幅を指定しなければいいのでは
あとなんでtrとtdなんだ >>814
いやいやｗ
inputのtitleはバリデーションメッセージとして扱うわけで
それ以外に書いたらバリデーションメッセージとして解釈されないでしょ。
「正しく解釈させる」というのはそれが何であるかを伝える方法が
あるってことだよ。JavaScriptに書いたら無視されるかもしれない。 少しバリデーションメッセージの講釈をたれておくと、
良いバリデーションメッセージというのは、どうすべきかを書くのであって
問題の原因を書くのではないということ。プログラマはよくこの間違いを犯してしまう。
具体的には「文字が10文字を超えています」はダメ
「文字は10文字以内にしてください」これはOK
条件が複数ある場合は、「10文字以内の英数文字を入力してください」はOK
これはユーザービリティの話として、○○してくださいと具体的に指示を与えたほうが
ユーザーは適切に行動できるから。
「文字が10文字を超えています」だったら今度は10文字は超えていないけどカタカナを
入力してしまって今度は「カタカナを入れないでください」なんてでたら、
最初からそう言え！と言いたくなるでしょ？
そしてどうすべきかっていうのは、1つのメッセージに集約できる。
つまり10文字こえただとかカタカナ入れただとか、問題点の指摘をすると
1つの項目にエラーメッセージが複数必要になる。だけどどうすべきかだと一つだけで良い。
エラーメッセージ（どうすべきか）は一つだけなのだからinputのtitleに1つ書くだけで十分ということになる。
問題点を指摘するやり方（＝悪いやり方）はinputのtitleに書く方法では実現できない。
またどうすべきかっていうのはエラーメッセージではない。つまり入力内容で決まるわけではない。
なのでinputのtitleに書いておけばマウスでカーソルを合わせた時にポップアップで
どうすべきかが表示される。（何も入力してないのに「10文字を超えています」が出てきたらおかしい）
正しい使い方をすれば正しくハマる。良く出来てるでしょ？ マテリアルデザインって、漫画のコマ割りみたいなイメージでいいんかな？ どんなのをイメージしてるかわからないけどたぶんそれはフラットデザイン
フラットデザインは立体感やグラデーションがなくて各要素がはっきり分かれてる
マテリアルデザインは各要素を物質的なものに捉えて、例えるなら「触ればそこにある」みたいなイメージ
要素通しが重なりあったりもする
なので「漫画のコマ割り」って感じならフラットデザイン イメージ的に、ボックスシャドウ使いまくるのは、わかるんだけどむずかしいな aaaaabbbccc（11文字）
「10文字以内の英数文字を入力してください」
アルファベットだけじゃダメなのか？となる マテリアルデザインはめちゃむずいよ
googleは紙とインクを表現するとかいってて何言ってるかすらわからなかった box-shadow: 2px 2px 4px #eee;
右 下 ぼかし
これ、プラスが右、下で、マイナスが左、上なのね
わかりにくいな、マイナスで逆に指定とは・・・・
どっちもやりたい場合は、,でつなげていくんかな？ >>816
無視されていいんだよ
SEOわかってる？ box-shadow: -5px -5px 0 5px #999 inset;
中に入れる場合は、マイナスとプラスで左右と上下反転するのね titleはそのものの説明やガイド役としてtitleの目的があって、エラーメッセージとは区別すべき >>827
そうだよ。だからinput のtitle属性っていうのは
エラーメッセージを出す場所じゃない。
ただ入力でエラーがあったときユーザーに正しい情報を
入力するためのヒントでとして表示される。
ということはそういうふうに使えということ。
でサーチエンジンなどもそういうふうに使われることを前提にしている
画像のaltみたいなもんさ。無くてもいいがあるとより適切に解釈される。
それがSEO >>825
せっかくのtitleに何も入れないとはもったいないｗ マテリアルデザインのイメージ
┌─────┐
≡ │
│ │
│ │
│ │
│ ○│
│ │
│ │
└─────⊿
≡:ハンバーガーメニュー
○:クリックで書き込めたり
⊿:クリックでめくれて画面を覆ってなんか表示する ページ一番右下に、二等辺三角形
二等辺三角形:クリックでめくれて云々 >>825
SEOなんてものを意識するな。
HTMLの仕様として正しい使い方をすればいい。 ハンバガーメニューは、日本だと悪みたいな印象だけど、なんでなの？ >>830
ソーシャルゲームのよくあるUIのデザインは、マテリアルデザインなんかな？グラブルとか？ 情報の匂い（）がないから
その代わりコンパクト
一手間与えるのもクソ扱いされてる 日本では悪ってより世界的に「あまり良くない」ぐらいじゃない？
慣れてない人は≡がメニューとは気づきにくいとか
タップしないと何が(どんなメニューが)出てくるかわからないとか
クリック率はハンバーガーの方が低いとか
なので最近はボトムナビが増えてきた印象 >>834
あれはリストを表してるんだけど、日本はもともと縦書き文化、感覚と合致してない
って本当っぽい嘘を今考えた まあ、それはないな
サイト見てて縦書きを期待するユーザなんていないだろう >>833
HTMLの仕様として正しい使い方がSEOの第一歩であり基本なんだよ >>816,817
”など”と書いてあるがな。
ところで書いたのわしではないが>>767の
＞input要素が一つでもエラーであれば、フォームの周りを赤線で囲うとかできる。
だと赤線だけでは不親切であろう。
フォーム全体のメッセージが欲しくなるが>>807やらtitleやらでできるのかいな？
JavaScriptの方が簡単そうで広く誰でも使えそうに見えるがどうなのだ。 以前見た記憶だと
ハンバーガーメニューの三は
もうほとんどの人がメニューの表示のことだと認識してる
って書かれてたよ >>780
様々あるそれらを聞きたかったのですがもういいです
どうもでした display_none
visibility_hidden >>842
> HTMLの仕様として正しい使い方がSEOの第一歩であり基本なんだよ
だよね。HTML5のバリデーションは
HTMLの仕様の1つ >>843
静的な情報と動的な動きを分けて考えたほうが良いよ。
静的な情報というのはここは何の入力項目で
どういう入力規則があって、何を入れればいいかという情報のこと
静的な情報に動きはない。
SEOはこの静的な情報を基本としているから、ここにきっちりデータを書いたほうが良い
例えばバリデーション規則を見て、ここは郵便番号だなって判断するかもしれない。
そしてCSSで見た目を味付け。JavaScriptで動きを味付けするんだよ
このとき原則としてデータはHTMLに書かれたものを利用するようにするとよい。
> フォーム全体のメッセージが欲しくなるが>>807やらtitleやらでできるのかいな？
<form>
<div>フォーム全体のメッセージ</div>
<input ～ title="入力項目ごとのメッセージ">
<input ～ title="入力項目ごとのメッセージ">
<input ～ title="入力項目ごとのメッセージ">
</form>
フォーム全体のメッセージを入力項目につけるのはおかしいぞｗ まあこんな感じだね。フォーム全体のメッセージ（JavaScript一切なし）
http://jsfiddle.net/9y8xz3c0/3/ aタグの中にaタグって使えないのでしょうか？
jsでリンク飛ばしするしかないのでしょうか？ aタグの中にaタグ？？？
一瞬だけサイト表示させてすぐさまもう一つのサイトに飛ぶとか？？？ クリクkする箇所によってリンク先を分岐させたいんだろう
無理 Web制作者のためのSassの教科書 改訂2版
Webデザインの現場で必須のCSSプリプロセッサ
2017/9/15
改訂2版が出た これは買わなきゃ損だぜ！
みんなも買おうぜ！霜降りひらたけ よくデザインと構造を切り分けろと言われますが、
imgタグにwidthを直接打つのはいいのでしょうか。 サイトナビゲーション周辺のアクセシビリティに関する質問なのですが、
目の不自由な方を対象とした場合、下の【1】と【2】のマークアップではどちらが良いでしょうか。
ネット上では目の不自由な方はタブで移動するとか、見出しを使ったマークアップが大事といったことなどを見かけました。
また、他にも方法や助言があれば教えてください。よろしくお願いします。
【1】
<h1>タイトル</h1>
<h2>ヘッダー</h2>
<h3>ナビゲーション</h3>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
<h3>パンくずリスト</h3>
<ol>
<li>リスト</li>
<li>リスト</li>
</ol>
<h2>ここからメインコンテンツ</h2>
【2】
<h1>タイトル</h1>
<h2>ナビゲーション</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>パンくずリスト</h2>
<ol>
<li>リスト</li>
<li>リスト</li>
</ol>
<h2>ここからメインコンテンツ</h2> >>857
そういやこれ、なんでだろうな
読み込み時に描画領域の確保だかなんだかでほぼ必須と言われているけど、他の要素のwidthやheighはどうなるんだって話
それとも遅い回線の事を考慮してのことなんだろうか >>858
<h1>タイトル</h1>
<header>ヘッダー</header>
<nav>
<h2>ナビゲーション</h2> ←これ、存在する？
<ul>
<li>リスト
<li>リスト
</ul>
</nav>
<nav>
<p>
<a href="/" rel="index up up up">第一階層</a> >
<a href="/products/" rel="up up">第二階層</a> >
<a href="/products/dishwashers/" rel="up">第三階層</a> >
<a>現在位置</a>
</p>
</nav>
</header>
<article>
<h2>ここからメインコンテンツ</h2> >>848
＞入力項目につける
（赤表示した）フォーム全体の各種メッセージのことなのだ。
よってその”やら”を使わない場合のイメージはこんな感じ。
<form>
<input ～ title="入力項目ごとのメッセージ">
<input ～ title="入力項目ごとのメッセージ">
<input ～ title="入力項目ごとのメッセージ">
<p>フォーム全体のメッセージ</p>
</form> 確かに枠の見た目変えて入力項目ごとのメッセージだけ変えるってあるかな？
なら入力項目の見た目変えれば済むわな >>860
その要素より下の要素の位置の、再計算を避けるためかも
事前に、サイズが分からないと、画像がDL された後に、他の要素が再計算されるから >>864
配置の再計算とかカスみたいなコストだろう CMS組み込み前提のサイトだと画像はwidth指定しておいた方が絶対いいよな px単位でレイアウト組んでたら必要だろうね。
むかーし、回線が電話だった頃、widthやheightがないと、
読み込み中の画像サイズがなかなか判明せずに動きまくったよ。 >>847
HTML仕様に合っているかはもちろんのこと、
SEO主体だと極端な話メッセージ類や広告はなく本文だけのほうがいいんだよな
（広告はコツ次第でクリアできるが）
現実そんなわけにもいかず
本文とメッセージ類は分けたほうが正しく解読してくれる可能性は高い
そんなとこだな
これは経験実績上間違いなく言える フレームワークのuikitって使いやすいの？
あまり、使ってるところ見ないけど、なんでなの？ 仕事としてweb制作やっているならcssフレームワークって選択肢はまず無いはずだけどなあ
デザインが先に来る制作工程なのに、フレームワーク使ったら、出来あいの物を崩す事からまず始めなきゃいけなくなる
ブロガーのように枠組みは出来合いのものでいい、0から作る必要は無い、
構造を理由に自分の裁量でデザイン妥協できるなら話は別だが Web制作というかデザインなんてそんなもんじゃないの…
完全なオリジナリティなんて誰も求めてないよ。
いかに流用してそれらしく見えるものを作るかだと思う。 >>858です
レスをくださりありがとうございます。
返答が遅れて申し訳ないです。
>>859
今の自分には難しくてまだ分からないです(´・ω・`)
>>861
<h2>ナビゲーション</h2>は、それに続くグローバルナビゲーションに対する見出しです。
始めは不要だと思っていたのですが 、W3Cのアクセシビリティに関する記事を見ていたら混乱したので質問することにしました。
まだ、勉強中なので変なところばかりです。
参考 https://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H42.html どこもかしこも、似たような金太郎飴みたいなフラットデザインで独自性もないんじゃね？
背景白で、黒字、トップページはインスタ映えする画像載せてフラットボタンこんなページばっか >>868
懐かしいな
上下にバコバコ動くんだよな >>873
アウトラインとしても本来必要だけど、そこに見出しはどう考えても無理がある
W3Cは必要と言ってるけどgoogleはんなもんいらんだろって言ってる
無理に作るぐらいなら、ないほうが良いと思う
まぁ気持ち悪いならあってもいいけどね。評価は上がりも下がりもしないだろうけど、さすがにダサイ
<h2>当サイトページ一覧</h2>
<li>テンポ一覧
<li商品一覧
>>874
独自色出して変なサイト作るよりも、見やすくて保守しやすいサイトの方が数百倍価値が有ることにやっと気づいたんだよ ほんとなぁ、検索エンジンの方を見てサイトを作るとかバカだよな。
人間のためにサイト作れよ。 客「navに見出しは必要ですよね？＾＾」
製作「不要です」
客「W2Cにも書いてるし」
製作「変になりますよ。要望があれば実装しますけど」
客「変だからdisplay:noneにして非表示にしてほしい」
製作「SEO的におかしくなります」
客「だったらコードごと消せ！」
製作「作業料頂きます」
客「払えるか！」
こうやってこじれていくのです… 四角い画像に、box-shadowかけることできたんだな
filter: drop-shadowでやるとは知らなかった >>872
それはあなたがコーダーだからでは？
フレームワークの構造前提にして、デザイナーがデザイン起こすことは普通はありえないよ。
bootstrapはいくつか試したし、既に組み込まれいるサイトを修正させられたりして思う事は、
融通が利かない。
勝手に決められている枠組みをリセットするのがめんどくさい。
というか汎用性重視しているし、日本語サイトに合わない部分が多い。
訴求力のあるサイトや最適の見せ方を考えていたら邪魔になる事が多い。 bootstrapに関しては同意見だわ。アレ本当に使いにくい
サーキュレーションサイト大量に作る場合とかはいいのかもしれないけど フロートレフト使ってるサイトは古いサイトが多いって聞いたけど、そうなの？ 単純な横並びとしては古い書き方になりつつある
でもfloatじゃないと書けない部分もあるので、使っているから古いってわけじゃない >>844
本来floatは文字の回り込みを実現するもの
画像があってそこに文字を回り込みさせるためのもの。
文字だけじゃなくてブロックも回り込みさせられる。
これをうまく利用すると、カラムレイアウトが実現できる。
ということでレイアウトのために利用されてきたが
本体これは想定される使い方ではない。
だけど昔はCSSが貧弱でfloatでしかカラムレイアウトが実現できなかった
今は専用の機能で実現できる。
だからfloatでカラムレイアウトを使ってるのは古いサイトということになる なるほど、昔はフロートレフトでしか、出かなったのね
知らんかった 今でも、回り込みでも段組みでも使ってるよ
それ以外にする必要ないから
それなら対応ブラウザ狭める必要ないから floatの方が早いって言いにくい
flexはプロパティを覚えきれてないわ >>889
wrap-reverseとか早々使うわけでもあるまい、どんなレイアウト組んでるのか 中央揃えはこの四点セット
display: flex;
justify-content: center;
align-items: center;
text-align: center;
後は毎回検索してるわ
botweenなんちゃらはプロパティ名も覚えられん 正直marginの相殺は未だに良く分からん
気持ち悪いから下にしかmarginは付けないわ marginの相殺じゃないな
marginの相殺は分かるけど、marginの相殺を考慮した上での適切な設計だな >>895
俺はよく考えられた仕様だと感心したんだけどな。
普通はあんなの思いつかない。考えたやつ天才だわ。
marginの相殺が理解できないのはmarginの相殺のルールを
知ってるってだけでmarginの定義を理解してないからだよ。
marginの定義っていうのは周りの要素から、
最低これくらいは離れて欲しいっていう値
俺のテリトリーの中には入ってくんなって値だよ。
相殺というよりどちらか長い方が使われるって思ったほうが良いかもね。
１em離れてほしいと思ってる要素、2em離れてほしいと思ってる要素
その合計の3emなんて誰も思ってない距離になることもなく、1emしか離れないこともない。
1em離れてほしいと思ってる要素からは、2emになってしまうが、
それは、隣りにいる要素が2em離れてほしいのだから、違和感は発生しない。 >>895
深く考え過ぎなだけじゃね？
重なるってだけだよ なんか、最近作られてるユーチューバーのサイトとか、キュレーションサイトとかを見ると、悪だといわれてるハンバーガーメニューをバリバリ作ってるんだが、
結局、ハンバーガーメニューって日本でも認知されてるから作ってるんかな？トップメニューはあっても、ボトムメニューはあまりないんだが、なんでなの？
ハンバーガーメニューじゃないとやっぱり、会社情報とか、他のカテゴリーとかの表示を収めることができないの？
トップやボトムナビメニューは使いづらいんかな？ >>899
話題性があれば多少無理な構成でも使ってもらえる
有象無象のサイトでは出来る限り配慮しまくる必要がある
それだけの話 >>899
サイトを作ることを生業にしてる人たては
案外そういう意見に流されんもんなのよ バーガーメニューも慣れさせちゃえば平気になるだろうな
iPhoneだって最初は戸惑ったけど今はそのことすら忘れようとしている
初めてパソコンを自分で触った時も、パソコン=インターネットだと思ってたから
なんでメインとなるネット（IE）のボタンがこんなちっちゃいところでこじんまりあるんだよ
わかりずれーよって思った ハンバーガーメニューってやっちゃいけないやり方だったんだ・・・ >>903
ハンバガーメニューやめて、ボトムメニューは作りたがらないよな
最近、作られてるサイトは、ボトムメニューはデザインからしたら、ダサいんか？ >>906
作り手側の都合なんだよね
トップに置くタイプのハンバーガーメニューで失敗しても、まさに>>902を言える。「これが今の標準なんですよ～」
ボトムで失敗したら間違いなく責任問題になる。例え上手く行っててもそれを証明するすべがない。（ハンバーガーメニューに作り直した後に計測する手もあるけど、アホらしすぎる）
デザインがダサイとかそういう観点じゃない。如何に使いやすく作るかが肝。更に商業的な観点から言えば、いかに文句言われないように作るかも大事
強いて言えばデザインにこだわるそういう観点はダサイと断言はできる div
とにかく長くて5000pxぐらいあるサイドバー
div
メインコンテンツ
こんな感じなんですけど、ここでサイドバーだけスクロールさせるのってどうやればいいんでしょうか？
今はサイドバーに合わせてメインコンテンツも5000pxぐらいheightがでてしまってるので
まずはサイドバーのheightをfloatか何かで消すか、
もしくはメインコンテンツをstickyにするべきなんですかね >>908
設計がいかれてるなｗ
frameでいいんじゃね ハンバーガーメニューについては語り尽くされてると思うけど？
使いづらいか使いやすいか、デザインがどうとかじゃなくて
ハンバーガーメニューの中にあるものは気づきにくい
ってのがいちばん重要な点
だから気づかせたいものを置くのには適さないし、
気づかなくて良いものを置くのであれば別に構わない
そこら辺を考慮しないからダメなんだよ。
ハンバーガーメニューそのものがだめなんじゃない 桁の書き間違いと思ったらその下にも5000pxと
それをどうするかより、何がそうしてるのかそっちに興味ある サイドメニューが5000pxってウインドウのサイズが縦1000pxの
5ページ分なんだからそんなに不思議じゃないだろ
カレンダーとかタグとかいっぱい出していたらそれぐらいになる >>910
だから、よくハンバガーメニューの中でに利用規約や会社情報入れるのね
てか、カテゴリーメニュー入れてるところもあるけど、あれはあまり使わないんかな？ webサイトでのハンバーガーメニューは使いどころが難しいけど（それ置くなら小さく表示しておけば良いのでは？となるし）、アプリでは重宝してる
左端からスワイプすると出てくるメニュー
twitter、amazon、Gmailとか（Android版） >>910
自分スマホ用には無条件でハンバーガーメニュー使ってたけど
確かにボタン押さないと中身表示されないしね
まあ自分が個人的にやってるサイトだとハンバーガーメニュー以外の箇所にも
メニューのいくつかを常時表示で表示させてるし
その他のやつもフッターとかにリンクで表示させてるから
結局自分のやり方だとハンバーガーメニューそのものがなけりゃないでもいいんだよね・・・ｗ >>917
サイバーエージェントの方は
スマホで見るとハンバーガーメニューの上6つが
そのトップ画面にも常時表示されてるね 現在見てるページをリロードしてその後に自動で最下部まで飛ばすリンクのタグを教えてください
または現在位置でリロードしてくれるリンクでも
ブラウザの更新では現在位置でリロードしてくれるが、リンク(自前の更新ボタン)からそれを再現したいです >>918
あれはメイン部分の上にpadding設定すればいいだけだぞ 毎回それ考えながらコーディングするの俺的には結構手間
スムーススクロール入れるついでにヘッダーの高さ分ずらす方が楽かな 要素のheightを%で指定する時に
親の高さを明示的にするために
html, body {height:100%}
とやりますが、
ルート要素であるhtmlにも指定するのは、
ビューポートがhtml要素の親と考えるからでしょうか？ ページを更新すると、たまにボタンの上に変な画像が出ます。
変なといっても全くページと無関係なものではなく、同じページ内の他のところで:afterのcontentとして使用してる画像です。
ただ、ボタンとは位置も離れているしcss的にも関係ありません。
その画像がボタンの上に重なって、ボタン形に切り取られて表示されます。
ボタンの上にマウスを乗せると画像は消えます。
これは一体何が原因なのでしょうか？
ボタンにはJavaScriptでイベントを設定していますが、JavaScriptの方でもその画像や、その画像が関わるクラスについては触れていません。 >>927
そのリンク先のどこにも height プロパティ や auto は書かれていないが？ >>926
とりあえずその画面が出たらF12で見てみたら？ パンくずリストを2つ設置しなきゃいけない場合のマークアップってどうすればいいんですか !? なぜにわざわざ２つ？？
トップに一つ
延々スクロールした最後にも一つってこと？？ >>926
他の要素の上に、宣伝の画像がかぶって表示されるのは、よくある。
画像の横幅が長くて、位置を固定している要素の上に、表示されてしまうとか
F12開発者ツールを起動して、デバッグして原因究明するしかない ＞他の要素の上に、宣伝の画像がかぶって表示されるのは、よくある。
ねーよｗ グリッドレイアウトで質問
どうしてもvwと％が混在してしまうんだけど、これって統一すべき？
それに画面幅に比例して要素も大小するはずなのに形が崩れるのはどうしてなんだろう http://jsbin.com/rayigumogu/edit?html,css,output
p要素の中に異なるサイズのフォントを入れました
そして大きい方のフォントにvertical-align: middleを設定しました
すると何故か、大きい方のフォントではなく、小さい方のフォントが中央に寄りました
どういう理由でこんな動作になるのでしょうか？ >>941の件ですが
色々試してみると、
中央に寄った小さいフォントも
middleの位置に揃っているわけではありませんでした
vertical-alignが設定されると、そのフォントはbaselineの計算対象から外れる
その結果、baselineが設定しなおされる
baselineを決めていたフォントが大きかった場合、
設定しなおされたbaselineは中央に寄ったものになる
ということのようです フォントじゃなくて要素ですね
vertical-alignをmiddleにしても動かなかったのは、
もともとspan要素はp要素のmiddleに置かれていたからでした >>938
慣れてないなら%一本でいいだろう
形が崩れるのは記述の間違い >>920
方法1 jsでやる
location.reload();とこれ組み合わせる
http://kinopyo.com/ja/blog/javascript-get-scrollbar-to-bottom
方法2 phpで現在ページの絶対パス（相対だとリロードしないから）を動的生成し、
ページ内リンクくっつけて最下部へ飛ばす >>936-937
しょっちゅうある
SASS の、clearfix という、mixin を使っていないサイトでは、
宣伝が、他の要素に重なって表示される
すべてのブラウザで、float を解除していないから。
すべてのブラウザで、テストしていないから opacityを辞書で引くと「不透明」とあります
opacityについて日本語のサイトでは透明度とか書かれているのですが
それだと小さいほど透明、大きいほど不透明なのはおかしいですよね？
不透明度と言うべきではないでしょうか？ >>947
＞日本語のサイトでは
どこのこと？
変なサイトに書かれてることはうのみにしちゃいかんよ CSSで要素のn行目を特定する方法ないかな？
例えば、可変で
<ul>
<li>hoge</li><li>hoge</li>
<li>hoge</li><li>hoge</li>
<li>hoge</li><li>hoge</li>
</ul>
横2つ、縦3行になった場合のみ3行目の2つのliのmargin-bottomを0にする
って場合。こういうのよくあるよね？ よーわからんけど俺ならmediaqueryでwidthのサイズ指定してulへのpaddingで実現するかな >>952
まあたぶんそれしか方法無いんだろうけど
それだと最後の行しか特定できないんだよな。
質問はn行目。
例が悪かった・・ >>953
n行目ってのはない
mediaqueryでどーちゃらこーちゃらで3.4番目の要素をmargin:0 n行目ってなんだ？
最後の行じゃなくてもそうしたいってこと？？ nth-childでいいんじゃないの？
どういうようにしたいのかいまいちわからんが >>947
仮に「不透明度が高い」を「透明度が低い」と言い換えてれば、おかしいとも言えない それだと透明度が低くなるにつれて数字が大きくなっちゃうってことでしょ
クソどうでもいいけど >>954
ありがとう。n番目しかないよね。
>>955,>>956
答え出てるけど、例を変える。CSSで要素のn行目を特定する方法を探してた。
例えば、可変でPCでは横4つ縦2行だが、スマホだと横2つ、縦3行になる
スマホの場合、2行目の2つ（hoge5、hoge6）のliのmargin-bottomを0にする
ソース
<ul>
<li>hoge1</li><li>hoge2</li><li>hoge3</li><li>hoge4</li><li>hoge5</li><li>hoge6</li><li>hoge7</li><li>hoge8</li>
</ul>
PCの見え方
hoge1 hoge2 hoge3 hoge4
hoge5 hoge6 hoge7 hoge8
SPの見え方
hoge1 hoge2
hoge3 hoge4
hoge5 hoge6 ←ここ
hoge7 hoge8 しまった
誤り
例えば、可変でPCでは横4つ縦2行だが、スマホだと横2つ、縦3行になる
スマホの場合、2行目の2つ（hoge5、hoge6）のliのmargin-bottomを0にする
↓
正
例えば、可変でPCでは横4つ縦2行だが、スマホだと横2つ、縦4行になる
スマホの場合、3行目の2つ（hoge5、hoge6）のliのmargin-bottomを0にする nth-childだと行内に収まる数が変わったらおかしくなってしまうから
行で特定できたらいいんだけどな。
まあやろうと思えばjQueryのトラバースで対象をwrap()で囲えばできるんだがCSSでできたらいいのにって思った。 そもそもHTMLの書き方的に列が存在してないのだからcssではどうにもならないね
hoge1
hoge2
hoge3
hoge4
hoge5
hoge6
hoge7
hoge8
ってなってるから、行の指定=nth-childになるわいな
wrap1
wrap2
wrap3
wrap4
で２つずつ囲ってあげればwrap3のhoge要素って形で指定できるけどね SPの見え方
hoge1 hoge2
hoge3 hoge4
hoge5 hoge6 ←ここ
hoge7 hoge8
そもそもなんでそんな中途半端なとこの
margin-bottomを弄りたいのかがよく分からん・・・ｗ
実際のサイトで見たらすぐに理解出来るんだろうけど >>962
確かにそうだね。
ウインドウ幅でもなく、見た目のレイアウトから条件を派生させるって事になるから無理だよね。
>>963
一番下段の「行」だけ余白を無くしたい
てのは実際よくあるんだけど、それだと親要素のpadding-bottomで見た目的には対応できる。
しかし、それだと汎用性が落ちる。
枠組は汎用クラスのsectionなので、中身のリストの為に枠組みのpaddinngをいじるのはおかしい。
中身の問題は中身自身で解決させないと、他の部分に影響が出てしまう。
だから一番下段じゃなくても対応できる方法なら、きっと中身自身で解決できる方法だろうから
それを導く例にしてみた。なにこのややこしい説明。 一番下段の「行」だけ余白を多くしたい、他はなくてつけたい、なら簡単なんだがな
上にあるようにメディアクエリとnth組み合わせるのがいいのかな
>こういうのよくあるよね？
皆そうなの？ｗ liということはたいてい同一系列のものを並べるものだろうが
動的にそこだけ違う条件が加わったことしか思い浮かばない
その場合はjsなりでその要素にclass付けてやればいいだけだし >>929 >>936
F12を押すと画面の再描画が行われるせいか消えてしまいます。
最初からログを表示しておいた場合は、今のところ表示されてすぐ消えています。
（onloadでjavascript起動していて、ログで画面描画が行われるせい？）
今後、F12表示状態で画像が残ることがないか注意してみます。 すいませんcgiで設置された所を画像アップ出来るようにするにはどうしたらいいですか？
親記事しかアップできなくて子記事にもアップしたいです 情報不足で分からない。
あと、スレ違いだから回答はなさそう。 >>969
落ち着け
てにをはに気をつけてもう一度描いてくれ >>969
8時に駅の出口で待ち合わせってミーさん言われたんだけど、
来れる？
※何月何日の8時（朝か夜かわからない）なのかどこの駅のどっち口なのか
そもそもミーさんて誰やねん >>969
一行目を読んで、画像アップローダーを設置したい、と言ってるのかと思ったが
二行目が謎すぎる… 質問です、最近、画像やフォントサイズで、vw、vh、vmin、vmaxがよく使ってるのを見かけるんですが、ビューポートの相対指定が意味がわからないんですが、あれはどういう指定なのでしょうか？
1vwのピクセルがわからないです ビューポートは、CSS ピクセルじゃないの？
Retina みたいな高解像度の、実際のピクセルなんて、考えなくて良いだろ vwとか正確に計算して叩きだした数字だと何故かズレるから考えても無駄だと思ってる。
実際の見た目で合わせていってるよ。理屈で考えるのやめた。 レスポンシブデザインで画面サイズごとにvwで文字サイズ変えるのでしょうか？
あるサイトは、4vminってふってたんですが >>976
vwはビューポートに対する比率の事だから1vwは何ピクセルって固定の概念ではない
例えばwidth:50vwで指定したら、ビューポートが320pxの時は160pxで640pxの時は320pxになる ビューポートに対するパーセンテージで親要素に左右されないからスマホ用のスタイル書く時にすごく便利 ググればいくらでも説明出てくるけどな
まあ>>982みたいな個人的な意見が実は一番ありがたいんだよな スマホページだと、フォントサイズって14pxって小さいのでしょうか？
15pxくらい必要でしょうか？ pxよりptがよくね？
まあ14pxでも読めるとは思うよ。やってみなよ（笑） グーグル推奨は16pxなのね
レングスは1.2emなのね 画面に合わせて拡大縮小するならば
vwのような相対値で頑張るよりも
viewportのscaleの方を変えてしまった方が早い気が >>988
実際、レスポンシブの時のフォントサイズ対応はviewportのscaleでやっているの？
上手くいく？
最近知った手法だと
親にcalc(**% + **vw)と対象にemの組み合わせってのがあった
試してみたが、悪くは無い。ただやはりこれでも個別の微調整は必要そうだ JavaScriptやPHPを使わないでコンテンツをランダムに表示する方法がほしいです！
おみくじサイト作りたい(´・ω・`)
誰かアイディアくれ！ JavaScriptやPHPを使えよｗ
逆にそっちの方が難しいわ htmlとcssにランダム要素ってなんかあったっけ？ >>990
そういうことはpythonにやらせよう javascriptで100回引いてランダムに出た結果をhtmlに予め書いておいて・・あ、駄目か このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 56日 3時間 26分 14秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
