HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 38
https://mevius.5ch.net/test/read.cgi/hp/1555113111/
■関連スレ
Webサイト制作初心者用質問スレ part250
https://mevius.5ch.net/test/read.cgi/hp/1546055063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html iFrameタグがない時代のものすごい古いブラウザだと未対応だね サイズ指定 レスポンシブに最も強いのは vwなのかな vwが最強なの？
とりあえず、emは割と拡大縮小で文字のレイアウトはchromeだと崩れやすい印象。
レスポンシブの時は未検証だけど、拡大縮小に強いのはpx >emだと思っている 前スレ>>992
> vwで文字が可変してくれるようになったのですが、ウィンドウが大きくなると、文字が拡大しずきて困っています。
> vwに対してこれ以上は大きくなるな(怒)みたいな指定は可能ですか？
これ参考になる？
http://neos21.hatenablog.com/entry/2017/12/29/080000 フォルクスはステーキじゃなくてサラダバーのために行く 質問とかしてみたいとか思ったりしてるんですけど
何か作法のようなしきたりとかあるんですか？ ホリエモンチャンネル見てたら質問のムダな長さにイライラするよね Wordpress使ったらSpeed Insightで60以下確定？ 置換に優れたフリーソフトを探してるのですが
オススメありますでしょうか？
条件
①複数ファイルを一括で置換できる
②正規表現が使える
③複数行置換できる
④検索もできる（ヒット数を調べられる）
「複数行置換」てソフトが良いかと思ったら④ができない・・・
置換は出来るのに置換前に検索でヒット数が出せないとかもうアホかと・・ >>22
まあ君がアホなのはどうしようもないだろうね > 回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！ >>24
うわw君すごいアホじゃん！
マジかよｗｗ >>22
サクラエディタのGrep置き換えでできるよ。 >>30
ありがと～
処理結果もちゃんとしててイイネ！ >>30
ちなみにこれ複数行の置換はどうやるの？？ vs codeも複数行に原則、対応してないやんけ
わざわざ1行にして改行コード入れんのとかやってられんでしょ。 できるかどうか知らないけど、grep, Ruby は？
でも複数行置換って、正規表現でどう書くの？
RubyとPerl のm オプションは、意味が異なるらしい！
Rubyのmは、正規表現で「.」が改行を含むようになるだけ！ >>40
プログラムはようわからんからめんどいイメージ。
DWみたいに何も考えないでソースコピペして5秒くらいで置換したい。
https://web-diy.jp/images/blog/2016/09/19_01_01.png
↑これは、複数行だからとか行数も改行コードもタブも何も意識しなくていい。
そのまま正規表現つかえばいいだけ。
こういうのが理想。 置換したい複数行ソースをコピペしてきてはっつけて
5秒で一括50ファイルくらい終わらせられるものが世の中にあるのに
それが出来ないことが不快になってしまった。
まあ正規表現時にエスケープしたりとかあるけど手間はそんくらい 誰か作ってくれよ
作ったら売れるぜ
売ってるなら1万円までなら買うわ ページ全体をdivで囲ってセンタリングしたいのですが、
<div style="width:900px; align: center; border:1px solid black">
hello, world
</div>
これだとセンタリングができないのですが、alignの代わりにmargin: 0 auto ならセンターに寄ります。
alignではセンタリングできないのでしょうか？ >>46
検索側を複数行だぞ？
どう見ても1行だよねそれ ああ\nとか分からない人なのね。そりゃ他のツール使うしかないね。 >>52
はあ？改行コードの話なんて最初の最初の方でしてるじゃん？？ 質問者より回答者の方がレベル低いねじれパターンきてんね >>47
align:center って古い気がする。できるできないとはズレる話ですまないが align:centerは別に廃止されるわけでもないし関係無い
廃止されるのは<center>タグであって、その代替がむしろalign:center align: center; って使えるの？
w3cので、チェックするとそんな属性ないんだが！ってエラーになるよ ぁぁぁ、すいません、「align」というcss名は無いのですね。
ということは、全体を囲むwrapperに使うdivは「margin: 0 auto」しか無いと考えてokですか？
>>49-50,57
text-alignは知っていたのですが、divのセンターなのでtextではないのでalignという名前で使ってしまいました。 >>61
そうだよ。
ブロックレベル要素なんて概念は無くなったとか言われてるけど、結局まだ残ってて、
ブロックレベル要素はalign="center"ではセンタリングできない。 >>63
昔tableタグだけレイアウト組んでた時代に、align="center"やってた癖が出てしまったみたい。
リハビリで今、divに慣れようとしているけど、指摘されるまでdivにも使えると思い込んでいたわ。
IE8や、html5策定中の頃と比べると、今から始めるほうがまだ幸せなのかな。
xhtml時代にdivの入れ子の多さとcssなるものに目を回して以来webから遠ざかってけど、なんとか慣れてきた。 そりゃIE6とfloatいう2大難関があって、
jsも大変だったし.png関連もバグだらけだし
角丸もシャドウも使えなかったし変な難易度が高かった >>65
htmlやcssが好きで先取りしてた何人かがその時期、顧客から無理な要求されて
「ハックなんとか使わなきゃ」「IE6から8死ね」とかブツブツ言いながら壊れていったわ・・・
tableタグしかできない自分は外されて助かった。 >>63
div要素もセンタリングできる
センタリングできるかどうかは要素では決まらない。
だからブロックレベル要素なんてものはない
証拠
https://jsfiddle.net/pqo01hsd/ HTML5では（ほぼ？）すべての要素が
ブロック表示にもインライン表示にも変更できる
要素ごとにこれはブロックとか決まってない >>68
はあ？？？
display: inline; ←なにこれ・・・
デフォルトの事いってんのに
んなことすりゃなんだってできんだろがアホか >>68は最近始めたんだろ？
HTML5とcssでの表示指定になーーーーーーーーんの関連性もない。
んなことHTML4からできたわ
初心者が俺様に意見スンナ >>69
> デフォルトの事いってんのに
デフォルト？なにが？
今はブロック"要素"の話だろ？
要素の話をするならCSSは関係ない。
displayが何に設定されていたとしても
それはあくまでCSSで設定する見た目の話であって
要素は変わらない。
要素にブロックとかインラインという区別はなくなった >>70
> HTML5とcssでの表示指定になーーーーーーーーんの関連性もない。
> んなことHTML4からできたわ
何も関係ないから、CSSでどう表示指定したとしても、
HTML4ではdivはブロック要素というカテゴリに含まれているし、
HTML5ではブロック要素というカテゴリはなくなった
CSSの表示指定で、HTMLのカテゴリが変わるわけないんだよ
HTMLとCSSでなーーーーーーーーんの関連性もないんだから display: block （見た目をブロック表示にする）
ブロック要素（HTMLのカテゴリ）をごっちゃにするなよ
この２つは全く別のもんだ
HTML4ではdivをdisplay:inlineにしたとしても
これはインライン表示するブロック要素であって
divがインライン要素になったわけじゃないんだよ タグでセンタリングしたいなら
<div align=“center”>
CSSでセンタリングしたいなら
ブロック要素（div、pなど）ならmargin:0 auto;
インライン要素（span、liなど）ならtext-align:center; display:flex
justify-content:center
これでセンタリングする みんなはさ、タグ書く時はインデントしまくってる？
<div>
<ul>
<li>
<a href="">てすと </a>
</li>
</ul>
</div>
こんな感じのやつ。
初めて他人のコード見て、これやってる人がいて
縦線が出るエディター使ってないし、
すっごい読みにくいんだけど、みんな割とこれは標準なの？ あー、スペースで書くと消えちゃうのか。
山みたいにインデントしてまくるやつのはなしね >>80
お前が言ってるのインデントじゃないじゃん
インデントが10だったり8だったり7だったり
そういうのはインデントがおかしいっていうんだよ >>80
オートインデント、縦線も出してる
面倒でも環境構築して楽できるところは楽しないともったいないよ いろいろ自力で頑張ってみたのですが上手くいかないのでお知恵拝借させてください。
前提：
5行2列のtableがある
border-collapse:separate; border-spacing: 5px; border-radius: 10px; で
角丸のタイル風？になっている
各セルには1行、ないし2行の文字が入っており、tdにpadding: 7px 0 7px 60px; で
上下の余白と左端からのインデントを取っている
やりたいこと：
このtableをページ内項目へのジャンプリンクのメニューとして使用するため、
各セルを、セル全体をリンクボタンのように使いたい
hoverで背景色が変わるようにしたい
試したこと：
・aタグをblock要素にしてwidthとheightを100%にする
→ vertical-alignが効かない
・paddingではなくline-heightで調整
→ 2行の文字が入るセルがうまくいかない
・paddingをtdではなくaタグに設定し、ネガティブmarginを取って調整、
tdはoverflow: hidden; する
→ 文字の長さがバラバラなので、右方向のpadding・margin設定ができない
・上記のaタグでセル内の文字列をくくるのではなく、文字列の前に
空タグとして挿入する
→ wordpressの自動整形で消される…（諸事情によりプラグイン導入不可）
何か方法ありませんでしょうか。 すみません、これだけ長々と書いておいてアレなのですが、
よく見たら2行のセルは数個しかなかったので、
＞・paddingではなくline-heightで調整
＞ → 2行の文字が入るセルがうまくいかない
基本はこれで、2行のセルにだけ個別にstyleを指定してなんとかなりました。
お騒がせしました。 >>88
わたしならaをimg化して貼り込む。
hoverは画像の切り替えで対応する。 >>88
<td><a href=""><span>test<br>test</span></a></td>
/* tableの場合 */
td a {
display: table;
text-align: center;
width: 100%;
height: 100%;
span {
display: table-cell;
vertical-align: middle;
}
}
/* flexの場合 */
td a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
span {
}
}
どっちかで上手くいかない？
想定してることが違ったらごめん >>88は普通tableでやらん
メニューリストだからul>liだろうな 画像とかCSSの指定がルート相対指定になってるサイトの回収を頼まれた案件で
ローカルサーバー使用禁止みたいな環境だった場合
みんなさんならどうやって解決しますか？ Node.jsとかPHPの実行環境すらインストール禁止みたいなクソ制作環境で
ルート相対パス指定されてた場合
みんなさんならどう乗り越えますか？ >>93
安い案件なら、置き換えで絶対パスにしちゃうとか？
全部、相対パスに直せって話なの？ 黒いバーの上にulのliをfloatで表示するやり方わかりませんか？ >>95
ふつうは本番と同じサバ環境にステージング環境を作る
ローカルサーバーが使えても、それはすべき >>97
わかりますよ。左上の黒いアイテムあるじゃないですか？
その右にバーを持っていって上の線を目安として
ul自体を絶対的な感じにしてz-indexで前にすれば後ろにいきますよ。 カネカの古いステージングサイトがフルオープンになってたのは驚いたな
あのレベルの会社でも杜撰な管理してるとこが引き受けてるとは カネカ httpsじゃないよね
しかも最近リニューアルしてる hover はモバイルではオフにすべきか。
要素が選択されていることを示す、PCモバイルどっちでもOKな効果ないですか。 >>101
むしろ古い会社だから年寄りエンジニアがのさばってる可能性
理系会社だから内部エンジニア＆デザがいるから
外注もできず新しい技術を輸入もできずみたいな
さらに古い体質だから若い人が入っても意見言えない聞いてもらえない
BtoB企業だからWEB見るユーザーご意見もないから問題点も改善点の苦情もないとか 結局、これでも気持ち悪だけで文法的には間違いではないって事だろ？
<span>
<div>
<p>sample text</p>
</div>
</span> >>107
間違い。spanの中にdivやpは入れられない。
CSSのdisplayの値で要素が変わるわけではない
HTMLの話なんだからCSSは一切関係ない ブロック要素をインライン要素で囲むのはいかんって読んだな >>109
今はそういう区別はなくなった。
たった２つの種類に分けるなんて無理な話だった。
今は要素ごとに入れられるものが決まっている >>107
https://validator.w3.org/nu/#textarea でエラーになるが？
<!DOCTYPE html>
<title>sample</title>
<span>
<div>
<p>sample text</p>
</div>
</span> ブロック要素やインライン要素という区別は
HTML5でなくなったんですね >>115
これが意味するところは、
ブロックにしかきかないプロパティ、インラインにしか利かないプロパティがなくなったということかな。 >>107といい、>>116といい、「なくなった」となったら何でも自由に変えられると思い込みすぎ
「なくなった」じゃなくて「変わった」だけだろ
しかも、HTMLとCSSの境界も理解できてない CSSは昔から何も変わってないんですけど、なぜdisplayプロパティの話になるんですかねえ 例えば、インライン要素とブロック要素でセンタリング方法が違うだろ あるページが特定のワードで検索結果にヒットするのを回避したいんです
そこで、HTMLでは該当ワード箇所を空タグにしておき（<span class="replace"></span>など）
該当ワードをasciiエンコードした文字列をデコードして空タグのinnerTextに挿入するスクリプトを
追加するということを思いついたのですが効果はありますか >>121
何言ってんの？
HTMLとCSSの概念をごっちゃにしてるぞ ブロックレベル要素は改行されるし
インライン要素は改行されない特性が残ってるやん html自体がそうなってるのではなくデフォルトスタイルが当たってるから
>>122
googleなんかはある程度スクリプト実行するからあまり効果なさそう AdobeのXDとDWって連携できるってきいたんですが、
XDの自動アニメーション機能などは結局一からコーディングしないとだめですよね インライン要素とブロック要素はなくなった、の人
前から何度も勘違いしてその度に指摘されているようだけど、なぜこうまで学習しないんだろ？ × インライン要素とブロック要素はなくなった、の人
○ インライン要素とブロック要素はなくなったという話題で、未だにあると思ってる人 >>130
> ○ インライン要素とブロック要素はなくなったという話題で、未だにあると思ってる人
HTML4にはあるが、そんな主張している人はいないがな HTML5でインライン要素とブロック要素というカテゴリ分けはなくなったんですね。 「なくなった」からインライン要素をブロックレベル要素を内包できると勘違いしているんだろ >>133
アホすぎw
要素ごとに入れられる要素は決まってるって言ってるのに
それを理解してないのかｗｗｗ >>134
「なくなった」は途中経過でしかないからな
其処は重要じゃない × 別の概念に変化した
○ 別の概念でカテゴライズされることになった
そして前の概念はなくなった。 >>138
前の概念はなくならない「変化」ってあるの？ 仕様で要素の種類ごとに内包できるものが決まってるのはHTML4でもHTML5でも同じで、
それがHTML5では新しく定義されたコンテンツカテゴリを使う記述になった、という話ですかね >>139
すべての変化は、前の概念は「なくなる」って言ってる
なくなった。なくなったんだよ。 >>140
内容モデルの概念は昔からあるもので、HTML StandardではHTML4.01と比較して、内容モデルに大きな変化があった、ということ
仕様系は>>1から>>136を発見できるので、周辺の節を一通り読んでおくといいかも
> コンテンツカテゴリ
>>138のカテゴライズに引きずられたのかもしれないけど、特に意味のある用語ではないのでスルーしていいと思うよ >>129
前から何度も指摘してるんだが
ブロック要素じゃなくて、ブロックレベル要素な >>143
ごめん
それは理解していて、「ブロックレベル要素」と書いて彼に伝わらない可能性を危惧して、あえて「ブロック要素」と書いてた
上の「なくなった」もそうだけど、いろいろと不正確な表現を使う人だとは思う(それが誤解の元) display:blockはブロック要素ですか？それともブロックレベル要素ですか？ >>146
伝わらない書き方を危惧して
伝わない書き方をお前はしたよねって言ってる まあどちらにしろ「ブロックレベル要素」はHTML5で無くなったことには変わらんがな https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories
こんなページあるからそういう用語なのかと思ってた
こんなふうに要素(の役割や意味)が分類されて名前がついてるよ、ということだけ覚えときゃいいか >>153
いや、違う
>>152は俺
見事に重複したな… >>156
それであってる。
自称仕様のプロがいるからさｗ >>148
何が言いたいのかわからないけど、彼に伝わるように「ブロック要素」と書いたね > 自称仕様のプロがいるからさｗ
誰も自称してない件 >>146
な。俺のせいにされちゃったよ。
>>143も俺なのに・・ 自分のミスを人になすりつけたいのがみえみえなんだよ 知ってたしー、ブロックレベル要素だってのぐらい知っていたしー
あえて言ったんだしー 嘘はついてないけど、俺のミスだと思うなら、もうそれでいいよ
ちなみに、「ブロックレベル要素」と書いていた>>63も相当変な主張をしてるけどね 誰と明言したわけでもないんだから、「なすりつけ」を申し立てるのはおかしいだろ そもそも、「なくなった」でスレを検索しても「ブロック要素」とかいた奴しかいないんだが、なぜ「ブロックレベル要素」の奴がしゃしゃり出てくるんだ？ まだ言い訳すんのかよ～
人のせいにして不快にさせだんだから素直に謝れよ >>161=>>143だと何で「俺のせいにされちゃった」なの？
彼は>>143の事はいってないよね？ >>161が自分を否定されたと思い込んだだけだろ
まさに自意識過剰 みんなが話してるような
「これはなくなった」「これが増えた」「これは仕様が変わった」みたいな話っていうのは、
>>1のHTMLとCSSのページから情報を得てるの？
そういうのをまとめてる個人のブログとかから？
この辺り、仕事にしたくて最新の話をキャッチできる様にしたいんだけど、定番みたいな場所とか人とかいる？ 追い打ちをかけるようだけど、僕はこっちも気になった
> ちなみに、「ブロックレベル要素」と書いていた>>63も相当変な主張をしてるけどね
>>120-127で既に否定されてるけど、彼はマウントゲームに精を出す前にCSSの勉強をすべきじゃないかなあ >>170
その屁理屈だと
>>165も>>168も別に>>164の事とはいってないよな？ ブロックレベル要素なんてものはなくなった
CSSは関係ない話。
何度も言わせるなよ ここには質問者よりレベル低い回答者が混じってる
何度も言ってる >>174
何が屁理屈なの？
>>161は自分が誰だといってるの？
誰に謝らせたいの？ 匿名掲示板で「何度も言わせるな」とか「～も俺」とか、アホじゃないかと >>178
それには同意。
恐らくインラインかブロックレベルかって話は
初心者が古いページや本見て毎回別の人が言ってるだけなのにな >>177
↓これに決まってんじゃん。
>>144、>>159、>>163、>>164
メンドクセー事なんでさせんの？
人のせいにするし、往生際悪いし、素直に謝れないし
人間性がガキみたい >>180
2行目と3行目は同じ意味だったんだけどね
「>>143と>>161がどなたか存じませんが、ごめんなさい」なんて失礼な謝り方はないでしょ
オレオレ詐欺じゃないなら、レスアンカーで自分のレス番を書きなよ >>175は正しい
> ブロックレベル要素なんてものはなくなった
> CSSは関係ない話。
> 何度も言わせるなよ HTML5の仕様のどこを見ても ブロックレベル要素なんて
言葉は書いてないんですね inline は少ない。span, a, img ぐらい
それ以外は、block 見ろ、これだけ話ししても未だに>>186のような
今気が付いたような新人が次々と見に来てる状態なのに
何度も言わせるなとかさ、同じ人が言ってると思ってたんだろうな インラインレベル要素とブロックレベル要素ってなくなったんですね この話題のキモはそういうことじゃないよね
すでに out of date な知識を拡める技術書や解説HPへのアクセスをいかに封鎖するかという話
英語ソースならまずヒットしないんだけど日本語情報残り過ぎだよん はい。だからインラインレベル要素とブロックレベル要素は
なくなったって言い続けます。 どいつもこいつも必死すぎて草
やっぱこういうのってアスペなんだろうな コーダーとか、プログラマーなんて、少し変わった人が多いだろうしね。 ようやく、質問できそう
なくなった言ってる人ってブロックレベル要素と前から書いてるんだよね？
検索してみたら、>>63と>>67を見つけたんだけど、なんかしっくり来ない
これ本当に正しいの？ これってなんだよ？
ブロックレベル要素ってのはなくなった。
alignなんて属性もなくなったし、ブロックレベル要素全部にある属性じゃない インラインレベル要素とブロックレベル要素ってなくなったんですね >>208
>>207が馬鹿なだけ。何も残ってないよ 訂正
× >>207が馬鹿なだけ。何も残ってないよ
○ >>63が馬鹿なだけ。何も残ってないよ >>209
インラインレベル様子
インライン要素
これ使い分けてる？ 使い分け？ 正しくはインラインレベル要素で
インライン要素は単にインラインレベルを略してるだけって
話をしたばかりじゃん <font color="red"></font>
これで今も動く？ ブラウザが後方互換のために残してる動作とhtml5の仕様は分けて考えましょう インラインレベル要素とブロックレベル要素ってなくなったんですね インラインレベル要素なんて言葉は無いって
何度言われれば理解すんのこの人 >>213
インラインレベルなんて言葉は最初からない。
インライン要素とブロックレベル要素な インライン要素とブロックレベル要素はなくなったんですね ライブドアブログのスレかこっちかで迷ったんですが質問させていただきます。
ライブドアブログのカスタマイズでコメント入力フォームのコメントを投稿するの背景が黄緑色で気に入らないので変えたいです。
いくら検索して調べても、メールとか顔、星をなくすとかばっかで出てきませんでした。
よろしくお願いします。 検索結果汚染のこじきブログじゃないなら教えてあげます どういう事ですか？こじき=アフィって事ですかね？だとしたら違います
検索結果汚染てのはよく意味がわかりませんが、もし知っているなら教えていただけると幸いです。 インライン要素とブロックレベル要素はなくなったんですね >>228
まだブロックレベル要素とか言ってるやつがいると笑えるよねｗ またHTMLとCSSの区別つかないやつがでてきた
包含ブロックとか、display:blockにするとブロックレベル要素に変わるんだーって
言ってる馬鹿と同レベルの馬鹿やろｗ display:inline, flex, grid, block こういうのはCSSによる見た目操作だから、HTMLとしてはいずれもフロー要素でしかない っていいたいのかな？ CSSとHTMLを混同するな氏は >>238
問うてるのは>>231とかがいってるその意味だよ なんだかんだで他に話題が無いから
この話題が一番盛り上がる件 >>239
わからないなら、ブロックレベル要素とインライン要素っていう
言葉はなくなったって思えばいい。
今後使わなければOK 偉そうに能書き垂れてないでさっさと>>224の質問に答えてやれよ。
もちろん、質問に質問で返すのはNGな。
おまえら偉そうだからエスパーしろよ >>243
おまえも偉そうなようだが？
回答者に偉そうにしてないで優しくしてやれ > 偉そうに能書き垂れてないでさっさと>>224の質問に答えてやれよ。
いやです。こたえません。 >>244
そっか。ごめんね(>_<)
最近、頑張り過ぎて疲れてない？大丈夫？ 無理しないでね。
回答者さん達はみんな真面目で頑張りやさんだから...
でもいつも助かってます。これからも応援してますね！！
母より それよりも、ブロックレベル要素とインライン要素はなくなったってことでいいいんだな inline は、span, a だけ。
inline-block は、inlineに、高さ・横幅、margin, padding を指定できるが、
img, input, select, textarea だけ
これら以外はすべて、block
spanに、blockを指定したり、逆にdiv に、inlineを指定したり、
変態的な事もできるが、他人の賛成は得られないだろう >>249
経験何年？？
なぜその知識と経験程度で回答者してんるんだ・・・
まずinline要素（今は亡き）の種類をわかって無さ過ぎる・・・
font em strong b small u i lavel code
それと、spanをdisplay:blockにしたり、divをdisplay:inlineにしたり
当たり前すぎるくらい普通に毎日誰でもやってることだぞ・・・?? なんかスレタイに期待して、数日見てたんだけど、
喧嘩するか初心者ばっかりなの？ floatで作られてるものの改修が多いんだけど、前に習えでfloatで改修した方がラクなのかなぁ
せめて回り込み解除して欲しいんだけど… >>249は、CSSのdisplayの話をしている。
ブロックレベル要素とインライン要素の話ではない。
だから突っ込まれないように、わざと「要素」と書かないようにしている
だが、話の流れから「要素」だと勘違いするようにしている。
つまりブロックレベル要素とインライン要素はなくなった。
>>249にだまされないように 横サイズ1000pxの画像をmax-width:500pxのdiv内に等倍で表示したい
divは可変にしたいが、画像は可変にしたくない。
そしてdivが可変で縮んでも画像は常にdivの中央の位置にくるようにしたい（横位置）
どう書きますかね >>255
条件：-500pxなどのピクセル指定はダメ >>255
<div><img src="xxx" width="1000" height="500"></div>
として
div {
position: relative;
max-width:500px;
height:500px;
overflow:hidden;
}
img {
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
} img使わなければ簡単
divにbackground-image:で画像表示して
background-position: top center; HTML/CSSの入門書って「この本1冊でOK」的な謳い文句の
書籍が比較的多い気がするのですが、簡単なものでも1から
WEBサイトを作るために必要な情報は記載されてるものなんでしょうか？ 10日でマスター英会話
みたいなもんだろ
初心者を釣るための餌
そんな餌がないと売れない程度の本 >>262
構文よりも実例見た方がわかりやすいもんな。 でも初心者が思ってる簡単なものって、初心者にとって簡単じゃなかったりするんだよな。
作りたい物が明確にあるなら、入門書に加えてサンプルコード集みたいなものがあると
便利かもしれない。 さすがに阿部寛で匙投げるようなら何やってもムダだからあきらめて他のことやれ 最近のHTML/CSSのソースはミニマイズされてることも多いし
SCSS前提だったり、CSS設計を理解していないと分かりにくいコードだったりするから
初心者には取っつきにくいと思う まさか…ここで偉そうに回答してる人たちって独学だったの！？ 独学しないとたかが教師程度を超えられるわけなかろう 独学つってもネットで得た知識だけってヤヴァくね
ネトウヨといっしょじゃん 制作会社と独学だけど大したレベルじゃないな
食ってはいける程度 独学→ポートフォリオ作成→インハウスWEB制作部→制作会社
会社の中でも1人ひたすらググる（だいたい英語のサイト）、本を読んでる。独学以外で技術上がった気がせん。 ここの回答者はピンキリだな
結構実務経験あって公式の仕様とか細かくみてる人もいるし、
ろくに経験もなく質問者だったのがいつのまにか勉強した事を披露したくて回答者してるっぽいのもいる 独学で食ってるとか業務で使ってるというのは質問に対して
適切な答えを出せることとは別の話だからなあ
経験も大事だけど本質をつかんでいる人とは次元が変わってくる おそらくデザインのためだけに挿入されたdiv要素によってメチャクチャネストが深くなってるHTMLを読む時
みなさんならどうやって要素の意味を理解してますか？ 俺は人間なんで要素の意味なんてものは理解する必要はない
要素に意味が必要なのは機械相手の場合だけだ
他人が書いた既存のページをいじる必要があるときは、デベロッパーツールで該当箇所のあたりを調べて
目的に合わせて必要な記述を足したり不要なものを消したりするだけだよ おっさんの若い頃はWEB系の学校もなくて独学だったから
デジハリとかWEB系のスクールとか学校とか
何を教えてるのか結構きになる 自分もWEB系のスクールは行ったことない
他だったらいくつかあるけどツールなんかを使えるレベル、実務には到底及ばない
今の時代なら必要な時だけ個人レッスン受けてあとは独学がいいんじゃないかな
と今さら撮影技術を身につけようとしてる中年です 専門学校生のPFはwebに限らず
実際の企業に協力してもらって商品パッケージ、広告、カタログとかと
スマホデザイン、PCデザインと、プロモーション周りをまとめて作ってたよ。
それと何かのサービスのロゴとかも。
これはデザイン系の子で、アプリ、ゲーム開発の方はわからんね。 専門学校はそこそこな企業と繋がってるのが強い。
講師が有名デザイナーだったり、校長のコネ、卒業生のOBとかで繋がってんだろな googleスプシをweb公開じゃなくiframeで表示したことある？
スマホで見るとシート選択の部分だけ浮いて重なるんだけど俺の書き方が悪いのかなー
どなたか試してみてください 頭の悪い人って 経験（年数）をありがたがるよね
ちょっと自分で勉強すればスキルがみにつくという発想がない HTMLコーディングなんて2年も続ければスキルの上昇は止まる。覚えが悪い人でない限り。
流動性が高いので蓄積されないというのもある。
たとえばHTML4時代の知識とか今じゃ邪魔にしかならない。 Webデザイナー・コーダーしてる人の学歴もほどほどだよな コーダーはデザインカンプを再現するだけの仕事なのですか？ まあでも凄いいい仕事する人もいるよ
文言とかおかしい所も必ず見つけて、こうして修正しておきましょうか？とか
スマホデザインなくてもレスポンシブで作ってくれて
凄く丁寧な仕事してくれるコーダーの人いたけど、
たぶん他のどんな仕事やっても良い仕事するって思ったよ。
仕事できる人って共通してメールや報告の仕方ひとつでわかるじゃん。 なんかこのスレ頭悪いやつ多そうだな
とWeb制作会社7年目の俺が行ってみる。 >>297
大学なんて意志を持って通った人は尊敬するけど、
それ以外のやつはクズ同然。 【即時】金券五百円分とすかいらーく券を即ゲット
https://pbs.twimg.com/media/D9F0ciNUYAAyrcm.jpg
[一] スマホでたいむばんくを入手 iOS https://t.co/gxHnK5A2MK Android https://t.co/6JYuSZRjpZ
[二] 会員登録を済ませる
[三] マイページへ移動する
[四] 招侍コード → 入力する [Rirz Tu]（空白抜き）
今なら更に16日23:59までの登録で倍額の600円を入手可
クオカードとすかいらーく券を両方ゲットしてもおつりが来ます
数分の作業でできますのでぜひご利用下さい。 👀
Rock54: Caution(BBR-MD5:b73a9cd27f0065c395082e3925dacf01) >>292
そう、つきあいで仕事たくさん取ってくるしかできない。
10年社長やってるけど、最近cssのfloatとclear覚えたわ、便利よね。
社員はすごいよね、たくさん勉強して結果を出して忙しいからどんどん給料上げてる。
ボーナスは100万には少し届かなかったけど早めに2ヶ月分現金で渡したらみんな笑顔になってたわ。 社長さんfloatはもう使う機会少ないです
ボーナスとその給与水準はこの業界では凄いです、皆さん優秀なんですね
うちは今年は多分ボーナス無いです >>301
別に少なくはないよ。
君がFlexとか使いまくってるだけ。 メタップス上場してるくせに
5ｃｈにまき散らせとか指示だしてんのか
ってくらい無作為に貼りまくってんな >>305
借金1000万ならワンチャンありで挽回できるよ stickyってIEだと使えないし代替えのjqueryだかなんだかを使っても不安定だな
自分でJSいじった方がよさげ と見せかけてmarqueeタグでバリバリやりました
俺すげー >>311
代替えのjqueryってどれですか？興味があります。 大きく崩れてないならいいだろ
大きく崩れてるとこあるけど、自分の管轄が外だから何もいわないようにしてる。
コーダーは知ってて放置してるのか、気づいてないのか知らんが >>320
お前すげー無責任だな。
お前みたいのは会社というか社会にも不要だわ。 デザインですが奇抜なサイトでなければ、960pxのグリッドシステムというのは今でも使えるのでしょうか？ >>294
＞コーダーはデザインカンプを再現するだけの仕事なのですか？
うちは何年も前からデザインカンプ作ってない。
仮アドレスで最初からウェブサイトを見せる。
どうしてもカンプ必要ならスクリーンショットで見せる。
どう考えてもそのほうが効率的。 >>325
いきなりコーディングか。
頭の中にデザインがあってすぐさまコーディングできるならそりゃ効率いいわな。
でもカンプはもっと前の工程で、レイアウト案を見やすくしたものでしょ。
こっちの提示に意見が出ない相手ならいいけど、
意見を言う相手だと全然イメージと違った場合のやり直しはかなり無駄じゃないか？ フォトショ長いけど、最近、物によってはカンプ作るよりもコーディングした方が早いな…って思うことある。
でも、それも「ここに表が入ります」で四角で囲んでおくだけでOKのクライアントなのか、「仮でいいんで表面に作ってもらえますか？」とかいうクライアントかで、
少し手間は変わってきそうね。
カンプの色とか変えるのは少し手間だけど、もうhtmlがOKなら数値変えるだけだものね テンプレート使うならいきなりコーディングもありかな、SCSSの変数で色々管理したらすぐ変更できるし
アニメーションを凝りまくったサイトも、実物見せないことには中々説明しづらいよね イラレでカンプ作ってる最中に素人じゃない人に動かして欲しいって言われる
これはあれか、Flashの出番か？ >>326
スケッチブック持って行って、鉛筆でざっくりしたデザインだけ決めてきて、
次からは仮アドレスで見せてる。
カンプって、広告代理店が間に入ってるとき、
代理店のデザイナーがコーディングできないから使ってるだけで、
カンプ解体してcssで組みなおすなんて無駄でしかない。
そもそもスピード第一の時代にデザインで数日かけるなんてホント無意味。
っていうふうにクライアントには説明してる。
それからPhotoshopでデザインするとパーツを拡大するとき困るから、
全部イラレでやってる。 >>327
その通り。ただの四角いボタンのbackgroundの色変えるとか、
フォトショのほうが面倒で、最終的に変えた色の数値調べてcssにとかもう嫌でしかない。
たっぷり予算があるなら何でもやるけど、予算は？って聞くと、去年と同じでって言う。
人件費は毎年上がってんだけどな。最低賃金に関しては数か月に一度上がる。
カンプづくりの工程さえなくなれば作業効率は格段によくなる。 み、見本？
「カンプをワイヤーフレームで作成」
「カンプをイラレで作成」
みたいな使い方でok？ >334
ありがとう。
大学で言うレジュメとかシラバスとかの業界用語的な感じで、用語を使い続けてる感じなのかな。 >>321
君は甘ちゃんとうか世間知らずなんだよ
俺がどういう関わり方でクライアントとかかわっていてそのコーダー（他社）の人も
どれくらいの責任範囲なのか、保守契約しているのか、
自分が気付いたタイミングで指摘する事で相手に急な割り込み仕事を発生させる事も想像できてないだろ？ >>339
はー？
そんな後出しの状況いわれてもしるかよ。
他社の仕事なんだな？
それは俺でも指摘しないこともある。 自分が関わるところ以外は見ないふりしてる
飛び火してきても困るし 状況もわからないのに
いきなり>>321みたいな事言われたら腹立たない？ 自分がその案件の責任者・管理者だった時は
デザインもコーディングもプログラムも口出したけど、
そんなの状況によって立場変われば一切触れないようにしたりもするわ。 >>343
別にゴミが喋ったくらいにしか思わないな 文字サイズを大きくするとfont-weight:normal;にしても太字に鳴っちゃいますが、どうにかすることは出来ますか？ font-weight:100にでもしたらいいんじゃね font-weight: lighter;
とかどうかな？ >>348
それはフォントによるだろ。
適当なこといわないでね。 ブラウザ形式(html)のゲームを自分なりに改編して遊びたいんだけど、
ChromeやFirefoxのデバッグツールを使って保存しても、Sourceに反映されず、元のまま保存されてしまう。
これって、何が原因ですか？
他のhtmlデータは反映されるので、ブラウザ側の原因は考えにくく、ゲームデータ側が原因かと思いますが……。
TextエディッタでSourceそのものをいじればいいのですけど、デバッグツールのほうが効率がいいので……。 追記：もちろん、ゲームはHDDに保存して遊ぶタイプのモノです。 画像サイズってGoogleさん推奨の幅の1200pxにしてる人が増えてきたんですが、どう思います？
200kb×10とかだと重くて検索で逆効果だと思うんですが 基礎的なことであれなんですが、困ってます。
<div class="oya">
<p class="kodomo">ほにゃらら</p>
</div>
.oya{
width:500px;
height:500px;
background:red;
position:relative;}
p.kodomo{
width:100px;
height:100px;
background:yellow;
position:absolute;
top:-10px;
right;-10px:}
としたとき、
p.kodomoを親要素から右上にちょっとはみ出させたいのですが、
どうしたらいいのでしょか？
上記だとはみ出す部分が表示されません。 >>359
oyaか、それを囲っているさらに外の要素にoverfrow:hiddenでも付いてるんじゃない？ >>357
それってAMPの話だろ
AMP導入してるなら、何の疑問も持たずGoogleのケツ舐めてろ
そうでないならどうでもいいことだ ほんとAMP死んで欲しい。
スマホでブクマしたら/amp/とか入ってるURLになってて、後でPCで開いた時イラッとする。 ampは避けたな
多分なくなるか、もっと使い勝手いい別機能に統合される奴でしょこれ >>357
でかすぎ。
横がでかいって事は縦もそれ以上にでかくなる。
表示速度云々の前に、画像の作成・編集が大変になるだけだろ。
解像度の高い写真しか扱えなくなるし、いちいちソフトが重くなる HTML5の資格とりたいんだけど、何から勉強したらいいのか分からない…
参考書ってCSSも一緒になってるやつだし、細かいことあんまり書いてないの多くない？
例えばH1は1つしか使わない方がいい、レベルのはどういう本に載ってるんだろう >>367
h1に関しては歴史があってな
・html4 h1はページに一個！
・html5.0 h1は何個でもok！全部h1でもok！
・html5.1 h1はアウトラインごとに一個だけ！
歴史を追わずに、いきなりブログかなにかを見ても、古いブログを見たら混乱するだけ
W3Cなどを見て、一旦最新情報を徹底的に勉強したほうが良い 5.0は少し違うかも知れない
もう意味のない知識だから忘れたわ 偉いな。
自分は本はざっと読んだだけであとはネットで調べた事がほとんどだわ しかもそれに対してgoogleは「別に何個でも・・・」と言っているので混乱は更に加速した >>368
なるほど…明日休みだからちょっと見てみるね、ありがとう！
だからあの資格5年しか保有できないとかなんだ… バックエンド出身なんだけど
フロントはフロントで大変だよなと感じる まぁフロントはよほどヘマしない限り致命傷になることはない
他所のアフィサイトの広告リンクミス見つけた時は大目玉だろうな～とは思ったけど フロントの人たちが名前空間に無頓着なの何とかならないのかな
基底になるhtmlやcssに機能として組み込まれてないから仕方ないんだろうか バックエンドの人はクラス名やファイル名に大文字使うのやめてほしいわ
自社サーバーしか触った事ないのかと ネーミングコンベンションは使ってる言語の文化でさまざまだからね
大文字か小文字かなんて美的なことよりも、合理的なルールがあるか否かだけを評価して欲しい 小文字しか使わなくて単語を-や_だけで繋ぐのは言語を問わずPosix系の慣習で、小文字/大文字で単語の境を表すのはJavaやWindows,MacOS系の慣習なイメージ
フロントorバックの対立軸じゃない気がする 大文字か小文字かなんて外形的な些細な拘りは捨てたほうがいいよ
みんなそれぞれの氏育ちの影響を受けてて色んな流派があるんだな
一定のルールが見てとれるならそれで十分 未だにURIでは大文字小文字を混ぜるなという経験則が蔓延ってるからフロントでは小文字派が強いのか～ クラス名はハイフン増えるよか大文字の方がわかりやすい 若手がネーミングコンベンション如きでストレスを感じているのなら、統一できるならしたほうがいいんだろうな
歴史的にあまりに難しいけど…
単語レベルの境
モジュール・ブロックレベルの境
ブロック・モディファイヤレベルの境
3次を分けられれば99%は十分か C++は標準ライブラリ系では小文字を_で繋ぐ慣習なのだけど、VC++みたいな高級ライブラリになると小文字と大文字の違いで単語の境を表現するんだよね
VC++が強かった頃の知識だから、モダンなC++では小文字系で統一されているのだろうか
単語の境なんてのは、処理系問わずに抽象化できるんだから1つに統一できたら、統一するフィルタメソッドさえあれば、みんな幸せになるかなぁ あのさぁ、一家言あるんならそれ語る前にキャメルケーススネークケースケバブケースパスカルケースくらいの用語覚えろよ。はぁ～つっかえ ネーミングコンベンションくらい寛容になれと言いたいだけなので、話を小難しくする用語は排除したほうが良いでしょ 名前付けの文字種ルールくらいはあらゆる言語とプラットフォームで統一されていたほうが学習効率と生産性が上がるんじゃないかなぁ
現状、まだまだそんな状況じゃないけども
ハンガリアン記法なんてものが持て囃されていた頃と比べたらずいぶんといくつかの流派に整理されてきたと思うけどね じゃあコンベンションも小難しいから排除しろ。
いつもベンジョンソンとこんがらがって分からんくなる。 それはスマンかった
『名前付けのルール』や『命名の慣習』にしたほうがよかったね キャメルケース： caSe
スネークケース： ca_se
ケバブケース： ca-se
パスカルケース： CaSe
これが小難しいんだとしたら相当オツム弱いに違いないｗｗ
コンベンションも意味分からないまま使ってるのに間違いないわｗｗｗ
守るつもりのない規約とはｗｗｗｗ
「俺が分からないから緩めていい！」
これで罷り通るのなら背伸びしてコンベンションなんて言ってんなよバカなんだからｗｗｗｗｗ 「大文字使うな」なんていう人向けに選んだ言葉なんだから命名規則の名前なんて当然知らんだろうから使わんよ >>376
あれ言語の命名規約だから仕方ないんだ
で、クラス名が大文字で始まるからファイル名も同じになる
てかなんでだめなの？ 自分の作業の中では見慣れないからなにやら気持ち悪いだけなんじゃないかな
こういう些細なストレスや軋轢は、ツールで解決できそうな気がするんだけど
プロジェクト立ち上げようかしら webだとあんまりやらないらしいけど、設計からやるとコード書く段階より先にクラス名が決まる
というより、設計で作った和名をアルファベットに変換するツールを使って自動変換してクラス名作る
だから被らないし悩まない
製造工程のときは 命名規則って言えよ。
なにがネーミングコンベンションだよ。
文字数長いし知らない人には通じないしカタカナを無駄に使いたがる人は実はバカなんしゃないか。 >>376
× バックエンドの人はクラス名やファイル名に大文字使うのやめてほしいわ
○ バックエンドで大文字なんて使わない。単にお前の会社の技術レベルが低いだけ >>376,399
クラス名に小文字を使うのは止めて欲しい バックエンドではファイル名は全部小文字だし
プログラム言語のクラス名ならパスカルケース
>>376の会社がおかしい 今までフロントとバックは介入し合わなかったからBEMでも違ってても何も問題なかたよ hogehogeはともかくeleeleって何だ？？ ｊｓ使いの人ってキャッメルケース使う習慣あるじゃん？
jQueryのメソッドもそうだし。 >>371
googleは実際の運用がいい加減なところもある
youtubeでは同一IDの要素が複数あったり ハイフンはIEか何かで昔バグったから使わない方が良い
他はまぁ、なんでもいいかな >>407
× ｊｓ使いの人ってキャッメルケース使う習慣あるじゃん？
○ JavaScript使いは、状況に応じて適切な物を使います。バカの一つ覚えではありません。 hogehogeは語源はないけど、
エレエレはelement
ヌーヌーはnumber
とかとか。使うときは数字が入らなくても、たnunuつかっちゃうけどね は？チョメチョメを使うに決まってるんだが？
山城新吾しらない田舎者ですか？ >>412
なんかでもそもそもの部分で慣習みたいなのってあるじゃん？
jQuery → $.isWindow()
css → text-align: left; javascriptでケバブケース使わないのは慣習じゃねーよｗ
使えねーんだよｗ
var a-b = 3; //=> エラー
var aB = 3; //=> OK
エラーにならない書き方することを慣習とは言わないだろｗ
cssomでもtext-alignにはtextAlignプロパティでアクセスするようになってるだろｗ >>418
勉強したことがテストに出て優越感に浸っている人かのようだ。 >>419
お前成長しねーわｗ
来週から来なくていいぞｗ >>418
そやなくてな
慣習ってどうでもいいんだよ
日本の開発現場で一番困ってるのは、旧世代の端末からのアクセス
さすがに3dsなどは除外されるが、スマホでは100%対応などをもとめられる
まぁ、yahooみたいな規模だとある意味逆の意味で囲い込みになるからなｗそれは分かる >>420
…もう少しほかのレスは出来なかったのか？ 全部小文字使う！（だって大文字なんて難しくて使えないもん）とか
凄くレベルの低い話でワロタｗ
なんのためにプログラミングで大文字と小文字を使い分けてるか
どうかわかってないのか。見やすくするためだよ。 >>424
バイト数下げてパフォーマンス上げるためだよ
みやすさは犠牲にされている。
abc
aBc
abC
とあると、サジェスト・インテリセンスがあっても間違うから全然意味無いんだよ
ミスを防ぐなら、全て小文字でアンダーバーでつなぐのが一番良い ネーミング・コンベンションｗｗｗ
サジェスト・インテリジェンスｗｗｗ >>426
煽りきれてないぞ
サジェストは多分、日本語にない >>425
あんなぁ、プログラミングの世界では
ソースコードはビルドするもんで、
ビルドする時にコードもミニファイルするから
バイト数下げてパフォーマンスを上げるなんて
やらないんだよ
ビルドも出来ないお前らがやってることなんだよ >>425
そういうのは、コーディング規約で制限するものであって統一解はない
だから、君が「なぜ大文字を使うんだよ」と嘆いても何も変わらない
問題があるなら、話し合ってルールを決めなさい クラス名も小文字にする人は、どうやってクラスと関数を区別しているんだ？
俺の場合、大文字で始まったら、クラスと決まってるから、>>425のインテリジェンスで押し間違いはあり得ないんだが >428
ごめん、これ今更かよ！ってネタだったんだけど敵とーになってしまった
わかりにくくて申し訳ない
>>430
規約で統一してもブレるだろ
それにプロジェクトごとに規約が変わる。プロジェクト毎というか、時代の流れというか
本当になんとかできんもんかね～
>>431
関数って無名関数に押し込めるからそうそうバッティングすることはない
ってか、それ以前に css作ってる人達がプロパティ名をキャメルケースにすりゃ解決すんじゃね？ JavaScriptをいじってる人
・・・クラス名、関数名、変数名、プロパティがあって大変。ひと目見て区別できるようにしないと
HTMLとCSSしかいじらない人
・・・プロパティしかない。小さな世界で生きてる俺らには区別する意味が理解できない html、css、JS全部書くけどさ、やっぱhtmlとcssはケバブケース、JSはキャメルケースが一番しっくりくるよ
コーディングルールで全部キャメルケースにしろってとこの仕事はやりづらかった
とくにSCSSでキャメルケースは読みにくいしな Ruby on Rails の命名規則では、
テーブル名 : shopping_carts (snake 複数形)
モデルクラス名 : ShoppingCart (Pascal 単数形)
モデルクラスのファイル名 : shopping_cart.rb (snake 単数形)
コントローラークラス名 : ShoppingCartsController (Pascal 複数形)
コントローラーファイル名 : shopping_carts_controller.rb (snake 複数形)
テーブル定義のような抽象的なものは単数形で、
実際のレコードを扱う場合は、複数形にしてる
それと、Linux のファイル名では、aB, Ab みたいな大文字小文字だけが異なるファイルも作れてしまうから、
それをWindows には、持ってこれない。
Windowsでは、それらは同一ファイルになってしまうから、危険！
だから、ファイル名は、小文字とアンダーバーだけにするのが安全！ >>440
もうすぐ無くなる言語の話して何か意味あるの？ >>437
cssにもクラス名あるやん？
プロパティ名はcss自体を開発する人達（俺らじゃない）が付けてるわけだが、
ブラウザ開発とかしてるような人にjsしか弄らないとかよく言えるなｗ ↑間違い
×jsしか弄らない
○HTMLとCSSしかいじらない人 右側の写真のみ（左のはそのまま）をバーの上に持っていきたいんだけどできますよね？ プログラマが考えたいろんな命名規約
その中の一つをウェブデザイナが使わせてもらっているだけ >>448
もうWebデザイナーがデザインもコーディングもやることが当たり前の時代なのかね。
それとも素人が適当に言ってるだけ？
俺は未だにWebデザイナーがコーディングをするというのが慣れない。
デザインはデザイナー、Webページへの反映がコーダーという認識。 コーディングできないデザイナーとは仕事したくねぇよ
勘弁してくれよ コーディングできるデザイナー：
・コーディングは凄く良い。引っかかるところがなく、そのまま使える
・デザインがたまに微妙になる。クオリティを上げきれない
コーディングできないデザイナー：
・デザインは非の打ち所無し。たまにサボるところを見落とさなければ、信頼関係を構築できる
・コーディングはうんこちゃん。大体書き直すことになるので、画像だけもらて最初から自分で書いたほうが良い。jsは絶対書かせるな
LPなんかはともかく、コーディングできない方が良い。適材適所だ >>451
>>452
良いWebデザイナーとは…
コーディングはある程度できるが完璧とはいえない。
しかしその知識を活かしてコーディングに無理のないデザインを作成できる。
おれはこう言う認識。
居ないとは言わないが、両方完璧な人はひと握り。 >>453
あー、そうそう、そんな感じがベスト
書けなくてもいいから、書きやすいデザインを知っている人がいいね ここでデザイナーを自認している人でUI/UXのデザインまでオレに任せて万事OKーって人はどれくらいいるのん？ 大手案件や広告代理店挟むレベルの案件ならデザインのみに集中させてほしい
というか両方は無理だろ。
ルールガチガチ案件で両方対応してしつこい修正もこなせるなんて絶対嘘 写真撮るし、ワイヤー作るし、デザインもコーディングもしてるし、WPのテーマ作成ぐらいならするけど
全部特化してる人には及ばない 個人でやってるならオールラウンダーでいいと思うけどね。
企業で凌ぎを削ってやってるならそれぞれのスペシャリスト集めて
オールスターチーム作って新サービスリリースとかやらんとライバル社に勝てん javascriptのスペシャリスト、phpの専任、seoとフロントの専任、企画立案のディレクター、イラストレーター、メインデザイナー、
サブデザイナー、アニメーター、プロ写真家とか集めて作ってくる制作会社のサービスに
一人で対抗しようとする方がおかしい そんなありえない対立が、成り立ってしまう予感をそれぞれ仄かに感じてるからこそ、こんな話題になってるのでしょう？ Ruby on Rails では、全部1人でやる
HTML, CSS/SASS, JavaScript, Node.js, jQuery は必須で、
他に、Bootstrap, Linux、データベース、SQL も必要
システム設計、サーバー構築運用、テスト、スマホ対応など、10人分の仕事を1人でこなす！
唯一デザインだけは無い！
Bootstrap を使うから 全部一人でやれ言われんのか…railsには近づかないようにしよう… お金が有り余ってる案件はスペシャリストを集めればいいのさ >>463
野球で言うと、昔の巨人、現代のソフトバンクかよｗ 例えばxideoなんてデザイナーいなそうだけど
あれレベルを一人で作れんだろ xvideosは別に一人でも作れるだろうな
金をどうするのかが難しいぐらいで 仕組み自体は楽勝
ただ、googleを越えるとも言われているトラフィックを捌く、最適化は半端ないはず あれが楽勝なのかよ
レコメンドのロジックって何で作るんだ？
動画のサムネイルを自動的にgifアニメに変換し数秒再生される仕組みもわからんわ 国をユーザーのIPアドレスから特定してその国の仕様に表示してんのかな 国内で、10か所ぐらいのCDN を使う、お金が出るかどうかだけ >>473
知らないけど、imagemagick とか、変換するアプリがあるのだろう
>>474
多言語化対応は、Ruby on Rails にもある >>473
動画から適当に画像抜き出して画像解析。この辺は機械学習の初歩だから、実は知ってれば楽勝だったりする
gifアニメも結構選別してるね。不要なシーンや男優は極力映らないようにしている。
思ったけど、単に何度も再生している部分を抜き出しているだけかも知れない。
gif自体の作り方は知らないけど、これはまぁどうにかなる
機械学習知らなければ全部キツイと思う
>>475
もうちょっと真面目に考えたら？小学生並の発送だぞ >>476
rubyってもうすぐ無くなるって聞いたよ
機械学習にも対応できないし、何もできない言語だね この程度のことで悩んでいるようじゃ本気で才能ないから首つって死んだほうがいいぞw >>477
レコメンドは？
なんかそういう外部サービスとかパッケージ使わないとキツそう >>473
> レコメンドのロジックって何で作るんだ？
質の高いレコメンドなら難しいが、基本的な機能であれば
単にこの動画を見てる人が次にクリックした動画を表示するだけ
> 動画のサムネイルを自動的にgifアニメに変換し数秒再生される仕組みもわからんわ
動画の特定のフレームを抽出するだけだろ
ffmpegコマンドを呼び出すだけ
機械学習は別にいらない。機械学習を応用すれば精度は
あがるかもしれないがなくても機能自体は作れる。 レコメンドは機能が難しいんじゃなくて
大量のデータを集めるのが難しいだけ
データが集まってない初期段階では、例えばElasticsearch の
More Like This Query（類似文書検索）を使って
近いタイトルの動画を優先表示させるだけ
データが溜まってきたら、それらのデータを検索ランク値に反映させたり、
動画を解析して出演者などを自動タグ付けしたりすりゃいいけど
そういうのはなくてもいいので後回し 大変なのは運営。なんでも無料の時代にどうやって金を稼ぐか。
人が集まるまではろくに金が稼げない。
その期間をどうやって乗り切るかなんだよ 15万でこういうの作ってくれるならまじで作ってほしいわ 自分で作るなら必要最小限の労力でやるから作れる。
誰から頼まれる場合は、くだらない注文をつけてくるから無理
自分で作るなら、作る費用はかからないが、
その後の運営コストがかかるということもわかるから、やらない
誰に頼むやつは、運営コストまで考えないから後でもめる >>480
>>481の通り、gifアニメがあればレコメンドの性能あがるから、ユーザー任せでも割と行けると思う
後は試行錯誤
機械学習だから上とかではなく、そのサイトにあったレコメンドのシステムが必要
>>488
そうそう
1人なら超楽なんだよね。手を抜きたいとこは全力で抜いて、儲かるところだけ特化させればいい レコメンド自体が不要な機能だからな。
自分で作るなら省く。なんであんな物を付けたがるのか？
無いよりはあったほうが良いだろうが、あとでつければいい。
初期につけてもデータが無いから意味がない >>490
ストレージに関してはどうでもいい、割となんとでもなる
ヤバイのは通信量
>>491
巡回のためには必要だよ
とりあえず最初は同じタグ程度でいいので、ざっくり分けるものでいいから作っておいたほうが良い
それぐらいなら2,3日あれば余裕
後付けはデザインを作りなおす事を考えるとオススメできない >>492
"レコメンド"が必要ないと言ってるのであって
巡回のためには、別の方法を用意すればいいってことだよ
クリック数が多いのとかランダムとか検索キーワードに近いものとか >>493
エロサイトでレコメンドは必要だよ
ロリコンに熟女ものやホモ動画見せるとクレームが来る まあレコメンドのアルゴリズムだけに特化した会社もあるらしいし
本来は奥は深いんじゃないか
youtubeのはよくできるよな hタグとpタグがあって、両方にそれぞれcssをかけてるんだけど、片方しか反映されない
なぜでしょうか？ >>497
どんな意味を込めて「反映」という表現を使ったのか教えて hタグとpタグがありまして、cssとかけます。
そのこころは！ あんこが入っているのはあんまん 肉が入っているのは肉まん
ではアルファベットが入っているまんってなーんだ？ >>497
どこかでimportantが効いている。 ワイは>>497だけどなんかいじってたら治った
タグにへんな改行があったとかそう言うレベルだったとおもわれる。 新しいタグが結構できてるけど
どういう位置付けなんだろうか みなさんは
import宣言に汚染されてるクソCSSを保守しろって言われた時どうされますか？
一から作り直す派ですか？ 内容によるとしか。大抵はそのまま使う
floatと打ち消しでぐちゃぐちゃになってる時はざっと作り直す事もある。どうせIEで崩れてるから後で治す前にやる importって別のCSSファイルを読み込むやつだよな？
昔は読み込み遅いからって事でNG多かったなあ いや、確かIEで順番がおかしくなる
絶対にimportはつかってはならんかった そういう問題を解決してくれるのがsassなんですよ。 >>525
importだらけだと一回先に表示されて
後から表示補正がされたりするからスマートじゃないよな WordPressで画像をまとめてライブラリにアップロードしたときに順番ごちゃごちゃになるんですが、
ファイル名で並び替えたり出来るプラグインなどありませんか？ >>531
ファイル名ソートは無いよ。
FTPで管理すりゃええだけの気もするけど、
管理画面でやるなら、D&Dで並べ替えたり、Media Library Assistantとかでカテゴリ別けしたりタグ付けたりしたら？ impotenceがどうのって妻が言っておりますが
どういう意味でしょうか？ >>533
ReferenceError: impotence is not defined >>540
You can not read English. あなたたちに質問を受け付けない権利はないんですよ？ transform:perspective(100px) rotatey(45deg);とすると片方がぼやけてしまいます。
このぼやけをなくすにはどうしたらよいでしょうか？ それでボケるのがよーわからん
jsfiddleとか使ってサンプルあげて欲しい エッチな本みたら12cmくらいに伸びちゃった///
イったらすぐ戻るからもうちょっと待ってて chromeでbackground-filterがやっとまともに表示されるようになった text-shadowにrotateやskew設定したいなぁ
shadow要素に対してのtransform設定ができるのはまだ先かな？ >>575
そもそもそういう提案ってW3Cに出てるの？ >>357
タブレット系だと1200pxはいい感じ。多少なら小さくしても大差無いし。1400pxためしたら、流石にでかすぎた。 1200pxでもデザイン作るときにはでかくて重くなるからこの流れブったぎりたいんだが >>582
まあ今よりは巨大化しないな。人の手やカバンサイズの制限あるからね カバンサイズ・・・？
1200pxなんてデスクトップPC用じゃないの Retina対応とかアホらしいわ
もうphotoshopの解像度を紙媒体みたいに350dpiとかでやったろかって思うが
ただ、webは紙みたいにA4とか縦サイズが決まってないから
LPで今まで縦20000ピクセルのカンプ作ってたのが今後どうなっちゃうのよって思うわ。
扱いにくくてデザイン作業が非効率になってくのは間違いないわ 有料の写真素材も必然的に高解像度のサイズを購入しなきゃいけなくなるから
素材屋はウハウハだろうけどコストがかさんでくだけだろ 読み込みが遅くなって離脱されるだけ。
制作側の自己満足 >>590
うちは写真専門サイトでリンク先も写真メインだからみなサイズ大きい。
確認したいのですが、横640px的な写真をretina で欲しければ、ほんとに1280pxの用意必要？ なんかよくわからない。 写真専門サイトなら5000ピクセルはないと
DTPで使えんだろ >>592
走査線ノイズやぼかし系にすれば使えるんじゃ！ >>596
一応は8000くらいまではあるけど、業務じゃないから限界があってつらい 自分のPCとブラウザ数種類ではちゃんと表示されてるけど
他人から本当にちゃんとした表示で見れているのか不安になることが多々あってつらい >>599
サブPCとアンドロイドとiPhone両方もってないの？ 自分のHPを作ってからまだ1年くらいしか経ってない素人です
昔よく利用していたHPの管理人がキリ番を踏んだ訪問者のニックネームを公開していた事があったのですが、任意で書いているように見えました
履歴を確認して書いているのであって嘘を公表している訳ではないのは分かっていますが、それでもプログラミングによる自動的かつ機械的な情報の方が信憑性が高い気がしてならないのです
なのでそういった証拠になりそうなシステムをHPの更新履歴等に導入したいのです
かつては公開日時や更新日時を誰でも見れるよう発行するタグがあったようなのですが、今は廃止されてるようなので代わりに使えそうなタグがあれば教えて下さい >>604
何のサービス使ってるの？
それがわからないと一般的な回答しかできないけど、一般的なサイトには訪問者にニックネームなんて無いよね。
恐らくユーザー登録が必要なサービスだと思うんだけど、そういうサービスはプログラムは自由に組み込めないから
自動で出力は多分無理だし、プログラム系のスレがそのサービスの専用スレの内容だな。
公開日時や更新日時を誰でも見れるよう発行
→WordPressなら可能、
→ブログシステムとか使ってないならファイルの更新日時なら可能
→そのサービスが何かは知らんが、そういう項目ないならたぶん無理 昔のあの手のって踏んだ人が掲示板とかで自己申告してたような？ >>602
忍者ブログの「忍者ホームページ」を使っています
確か>>604で書かれている通り、そこのハンドルネーム制の交流掲示板で自己申告をしていたような気がします
もしこれに拘るなら忍者ブログからwordpressに引っ越した方が良いのでしょうか？
ありがとうございました transform:perspective rotatey;をすると手前側の文字がぼやけてしまいます。
このぼやけをなくすにはどうしたらよいでしょうか？ 文字を回転させることによって、擬似的にアンチエイリアスが
掛かってるような状態になってるってことかな？ https://i.imgur.com/KtDsabj.png
こんな感じです。「ん」から左や「も」から右がゲジゲジした感じになります。
ベクター画像っぽく滑らかにする方法はありませんか？ 手前の文字はサイズが小さいものが、そのまま回転されて拡大されちゃってるから、そうなるんじゃないのかな？
だから、1番手前ぐらいの大きいフォントを指定して回転させればいいんでない？
文字列の左端を回転軸にして、右端が奥になるように。
試してないから上手く行くか分からんけど。 使ったことないけど、ブラウザの仕様っぽい
コード見せて欲しい >>613
これやってみたけど、上手く行かなかった
やっぱりブラウザやOSの仕様・設定だったり、見え方はそれぞれの環境に依存するのかも
本来の趣旨とは違うから使えないと思うけど、やっぱりsvgとかの方が綺麗だね
https://jsfiddle.net/Lyhj856k/ いくら技術やデザインセンスがあってもコンテンツ作る才能持ってる奴がほとんど持ってくよな 5ch でも、IE11 で見ると、無限ループか何かでフリーズするから、使えない。
同様に、多くのサイトでは、開発者がIE11で動くように作らないから、IE11は使えない
つまり、Chrome だけが業界標準です！ は？頭沸いてんの？
業界標準はLunascapeに決まってるって
昔からばあちゃんがいってたろ 表作るときってどうしてます？
Tableタグ＆cssがうざすぎて悩んでる。
もうエクセルを画像保存して貼り付けようか。。。 テーブルのとこだけDWとかテーブルジェネレーターとか >>629
Rxcel->table変換
CSSは使い回し どっちも表つくれるじゃん？
ワイビギナーやでよう分からんけど… >>635
それを言ったら他のタグでも表作れるがな
要は適材適所 >>635
なんか勘違いしてるかも
表ってのは、ただボックスを格子状に並べた表現方法なだけだから
非置換要素ならなんだって出来るよ ワイバギナーって言ってる事だし
見た目だけ良けりゃなんでもええんじゃね？
って事でtableでもdlでもどっちでも大丈夫 >>630
エクセルコピーしてDWのビューウインドウにペーストすると自動的にtableで表組みができあがる機能結構使ってたわ >>635
なんか聞いてる感じただ単に表作りたいんよね？多分table使った方がええで。 >>633
オワコンじゃないよ。
Q&A集とか縦横に配列する表形式でなくていいものはdlのほうがいいと思う。 >>641
わお！エクセルもDWもインストールしてないからそんな簡単なやり方があるとは
以前WPで長い表をどうにかならんかなって相談されたことあったけど、ビジュアルエディタにそのままコピペでどうにかなった覚えがある dlというのはセル結合できるの？
できるなら良さそう >>645
dlじゃなくてもHTMLにそんな機能はないんじゃね？
tableだって「このセルは２マス分ですよ」とか書いてるだけだし
逆に言えばdlだけでなくどんな要素でも
gridやらのスタイルを駆使すれば、似たようなことは出来なくもない >>645
それが目的ならtableだろ
疑似的な結合だけど >>644
オーダー服の上下サイズ対応表で20×40項目くらいの表（もちろん結合混じり）をいくつか作る時あったんだが、
この機能なかったら死んでたわ xlsxファイルをPhpSpreadsheetで読んで
そのまま<table>にして吐き出す
てのを作ったことがあるが、いまいち腑に落ちない TSV->Excelコンバータなら作った
Excelからクリップボード経由出来るのが便利 VSCode の拡張機能には、GrapeCity のExcel Viewer もある
View Excel spreadsheets and CSV files
within Visual Studio Code workspaces 外部リンクのリンク先サイトがいつ常時SSL化しても大丈夫な
URLの書き方もしくは方法ってありますか？
現状 http://hoge.com
近い将来 https://hoge.com
試した事
<a href="//hoge.com"> →ダメだった（こちらのサイトがhttpsだとhref属性もhttpsとなり、リンク先がhttpだと警告画面になる） >>653
その書き方はそういう仕様だから
ブラウザの
リンク先がリダイレクトかけてくれることを祈ろう（意識低い系） >>648やったときは
横スクロールバー無しで表をページに詰め込む為に
画面全部が表で埋め尽くされ、webページがもうエクセル状態だったよ。
結合とか整えてると、どこがどこのデータかわからなくなって
1つ1つチェックするのがもうしんどくてしんどくて・・・ ブログのテーマを改造していて気になったのですが
元のテーマに、微妙なマージン（5%以下）を左右に設けるだけのコンテナクラスが何種類か定義してあり
各セクションそのコンテナで包んであります。（フッター＞コンテナ＞インナー＞コンテンツみたいになってる）
大体無駄にネストが深くなってる感じなのでそういう人が作ったんだろうなと思ったのですが
何か意図というかテクニックだったりするんでしょうか？ >>660
自分も昨日それで困った
H2の下にH3があってネストするのはわかるんだけど、同じクラス名を使い回すのは初見でわからないからヤメテー！と思う scssを始めたいんだが、link relのtypeをtext/scssにしてファイル名を.scssにしたんだが読み込んでくれないのはなぜ？ ブラウザはscssを知らないんだからcssにトランスパイルしないとだめよ >>663
どういうこと？なんか別のタグとかが必要なの？ うひゃあ
そんな事を人に聞くレベルならscssやめた方がいいんじゃね？
たぶんネイティブなcssもわかって無いっしょ？ >>662
scssはそのままブラウザで読むものじゃない
SASSコンパイラでcssに変換して使うんだ Qiitaあたりの記事に多いCSSで～とかいうタイトル付けながら当たり前のようにsass/scssで書いてるのも罠だよなぁ スレタイにはSCSSなんて非標準技術の名前は書いてないね。 >>664
VS CodeでLive Sass Compiler使えば簡単にコンパイル出来るよ どう考えてもSass記法の方がシンプルで美しく楽なのに、
猫も杓子もScss記法なんだい？ pythonやpugは好きなんだけど不思議とsassよりscssで書きたくなるのは何故なんだろう 呆れるのではなく、このスレタイで話題に上がるほど切っても切れない存在になったのだと学んだほうがみんな幸せじゃない？ >>679
いいですよ、それでは月曜日にまた書き込みをよろしくお願いいたします。 >>673
たぶんcssと離れすぎてないからだと思う＞scss
必ずしもゼロからsassを書けるわけじゃないから
scssなら、なんならcssの拡張子にsつけてやるだけでいける クソビッチファッキンcssの値を
時刻設定で自動的に変更してファッキンする方法を
教えてくれよクソビッチ なんかでもあれだよね
今頑張ってweb上でcssやsvgやらcanvasやら動画で表現できるようになった事って
もうとっくの数年前にflashでやってた事ってのがね・・・
一般人からしたら裏側なんてどうでもいいから何も大して変ってないって印象だろうな Flashの方がリッチで軽くなかったか
ジョブス最低だな >>696
数年前のFlashで出来てたことはだいたい
数年前のHTML/CSS/JSで出来てたんじゃない？ >>702
不可能な事のが多いよ。
例えばベクターって時点でもう無理。
動画内でインタラクティブコンテンツにするのも無理
jsでアニメーションも不可能でなかったにしても鬼のような行数と当時のクロスブラウザでは無理
そもそも3D表現自体がflash以外では無理だった flashの時は音楽とのシンクロや効果音までやってたが
いまはもうそういうサイトあんまりないよね コーダーやデザイナーからしたら
フラッシュ死んでくれてありがとうだけどな ウルトラ初心者なんだが
リンクの左に▶︎みたいな記号をつけたいんだけど、擬似なんとかで対応可能？ >>711
申し訳ありませんでした
疑似なんとかで対応可能です fontタグやsmallタグは廃止になったらしいけど使ってみたらまだ普通に使えたのはどうして？ >>704みたいなのはガチデザイナーで
独自の世界観とかセンスがないと無理だよな
なんちゃってデザイナーや「私デザインもできますが？」的なコーダーがテキトウにパクって真似できるようなものじゃない
flash全盛期にいたこういうクリエイター達は今何やってんだろ >>714
smallは廃止じゃないよ。
わかってる人はコピーライトを括ったりで普通に使う。 なんかsectionとかarticleとか使ってる人ってあんまいないのな んなわけない。
最近のサイトやWPはみんな使ってる 質問します
今ある課題をやってるんですけど
それちょっと古いやつなんですね
そしてその課題の見本を見たらwebページの区画分けにボーダーラインが引いてあるんです
どうもその課題はいわゆる「tableレイアウト」を使用してるようです
で、俺はtableレイアウトは使いたくないと思っています
そこで質問なのですがflexboxやgridレイアウトを使って区画分けで格子状のボーダーラインを
引くにはどのような手法を使えばいいでしょうか？ 自己解決しました
普通にborderを引くというのでいいみたいです >>715
普通にウェブ作ってますよ
全盛期もフラッシュだけやってたわけじゃなかったし
あと恐ろしいことに
今でもフルフラッシュのサイトを１件メンテナンスしてるよ、毎月
客担当者とディレクターと俺以外、誰が見てるのか…と思いながら更新してるよ！ >>719
最近の課題でテーブルタグっおかしいよ。大学？ >>721
消滅しても誰も気が付かない状況ならメンテしてる「フリ」をしとけば良いのでは?
flashはマルウェアの配布経路としても見放されてしまったほど廃れ切った >>722
タグを見たわけじゃないです
見本の画像があってその通りに実装するという課題です
それ見たら区画ごとにラインで区切られててどうもtableでやってるっぽいと思いました >>722
見本の画像はwebブラウザのスクリーンショットで大元にはhtmlとcssのファイルが存在してると
思うのですがそれは見ていないという事です >>725
gridじゃなかろか
レイアウトの考え方自体はtableでやってたのとそんなに変わらん >>727
課題が作られたのが2012年辺りですのでgridではないですね
それは置いておいてgridで格子状にボーダーラインを引く方法ってやっぱり
borderを使うんですよね？
borderで綺麗な格子状の線を引く方法ってどうやるんですか？
tableならtable-collapseを使って隣り合ったボーダーラインを重複させないで
表示できるのですが >>728
間違えました
border-collapseでした
tableでしか使えないという >>728
昔ながらのＬ字型ボーダーじゃ駄目かね？
最初の行と最後の列だけ上と右にもつけて >>730
ありがとうございます
それは検索したら出てきました
上手くも行きました
ただw
その方法は近代的なweb制作としてどうなんでしょうか？w
ちょっとコードが若干奇形になるような >>731
どこからが近代的だと思ってるのかわからんが
:first-childと:last-childが当たり前に使える今は特に困ることもなかろう
以前はHTMLにクラス書いたりしたもんだが >>732
そうですね
L字型で上手く行ったのでこれでいいのかなと思います
俺としては「グリッドラインの表示」「スタイリング」という機能があればなと
思い質問しました もうすぐ小学生がプログラミング授業の宿題について
ここに質問にくる時代がくるのかもな 親戚の中学生に教えたことがある
久々にemmetもsassもないメモ帳で書いたらわたわたしてしまったｗ 昔、複数人チャットで遊んでたら小学生に囲まれて
学校のジャージの肩の線の本数の話題になったが、
なんとかついていったわ。
しかしジャニーズの話題になってもう無理だと思った。
ネットは既に小学生の溜まり場ができつつある。 いや、このスレもみんな小学生しかいないでしょ？
中学生以上のおじさんは出ていけよ 俺もアメブロ書いてたの胎児だったな
今思うと超恥ずかしい あ？おまえ何小だよ
東小の田中君知ってんのかよ
俺いつも遊んでんだからな 10年前くらいの事なんだが、知り合いの子供（小学生）が
自分達で掲示板作成したよって親に言ってるらしく
それはすごいcgiとか使ったのかなとか思って見たらFC2のレンタル掲示板だった。。
まあ素人からしたら小学生でも掲示板作れるんだって思ってるんだろうなあ >>741
20年前はそこそこの大人が
自作掲示板つってKentWebのコード置いただけだったりしたからセーフ 小学校いくのだりーわ
先生のITレベルが原始人以下で話にならん
AI導入はよ >>739
それは恥ずいな
その辺は基本、胎児になる前に終わらせておかないと グリッドガイドで画像をたくさん表示させてるんだけど、左側に白い線がでる
解決策ある？ 大きさが決め打ちではなく可変で
端数が合わずに隙間が出来ちゃう
というのであれば
ボックスより画像をすこーし大きくしてはみ出させるとか firefoxアドオンでページの背景色を変更したいのですが、どの部分のCSSを変更したらいいんでしょうか。
CSSにも優先順位があるようで、最も優先される部分を変更すればいいかもと思うんですg。 >>754
どのアドオンでどのページのどの部分の背景のどのどのg。 >>725
グリッドレイアウトだと推測。新しいから今なら儲かるかも？ 960ピクセルで60ぐらいで分けているやつだっけ？
グリッドなんとかって結局何のためのものだったの？
レスポンシブデザインをグリッドレイアウトで作るってやつ？
2019年の流行って最低何種類くらいのレスポンシブに分けるのがおすすめ？
3個ぐらい？(～360, 361～960, 961～)
何個も分けるのは大変よね。 >>756
アドオンは自作しているのです
firefoxのdark readerのような背景色を変更するアドオンを作りたいのですが、すべてのページにおいて背景を変更したいです。
すべてを上書きできるようなCSSはないですかね。 >>760
*{background-color: #000; !important}
とか
body{background-color: #000; !important}
とかやれば背景は変更できる可能性高いけど
firefoxのdark readerってそんな単純な仕組みじゃないでしょ。
背景の色変えたら文字の色も変えないと読めなくなるよ コロンの位置間違えた
*{background-color: #000 !important:}
とか
body{background-color: #000 !important;}
が正しい >>762
もちろん文字の色も変更しますが、単純にhtmlタグにstyle属性を使用して、important指定しただけでは、機能しないこともあるんですよね。 >>764
横からだけど、セレクタの優先度を高めて全てを確実に上書きたいたい場合は *:not(#a):not(#aa) のように意味の無いnot(中身をIDにすると効率がいい)を何個かくっつけるといいよ
darkreader使った方が楽だし見やすいと思うけど... >>765
さらに横からですまんですが
理由知りたい！教えて！ >>764
ググればスグ分かると思うけど...
CSSセレクタの優先順位の計算方法 - Qiita
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
例えば下記ルールの両方に合致する要素に対して実際に適用される(発現する)スタイルは1)になる
これは1)のセレクタの優先度が高いことによる(クラス指定よりID指定の方が優先度が高い)
1) #aa .link
2) .aa .link >>767
すまぬ優先度はわかってる
意味のないnotがわからなかったっす 「対象を絞り込まずに」優先度を上げる手段ってことだよ さらにさらに横からで混乱させたいんだけど
importantってインポテンツって読み方であってますかね >>764
style属性よりもスタイルシートの構造セレクタの方が強いよ >>770
あー
notでもid含んでればってことなのね！なるほど
ところで>>767の点数計算ってなんかおかしくないですか？ アドオンでheaderの最後ににスタイルシート埋め込んだりしてる？ あるオブジェクトのCSSを取得したいのですが、想像ではbackground-colorが出力されるかなと思ったんですが、よくわからない羅列が出てきます。
使い方間違っていますか？
https://ideone.com/0W4Api
２ｃｈってコード貼れないんですね >>772
style属性が１０００点となっていますが、これにimportantが一番強いのでは？構造セレクタってなんですか？
調べても出てきません。 >>776
「CSSを取得したい」とあるけど、対象要素に適用されている全てのスタイルを取得したいの?
それとも対象要素の「style属性」を取得したいの? >>776
getComputedStyleはそのエレメントに直に指定したスタイルやcssに記述したものだけではなく適用されるすべてのCSSプロパティが返ります
background-colorがほしいならget_element.backgroundColor
直に指定したのだけ取りたいならelement.style.backgroundColor >>778
対象のCSSですね
idを指定しているもののCSSですね
>>779
どうも、出来ました 想像なんですが、どのCSSが優先されるかなかなか判断がつかないからこそ、背景を指定している部分を見つけて、そこを書き換えるわけですよね？
例えば一番強い権限のCSS設定があったとしても、おそらくページ管理者の設定したものが優先されるなんてことが起こるかもしれません。
javascriptの領域になっちゃいますが、背景色が指定されている部分をすべて見つけ出して、上書きするというのが方法として考えられるんでしょうか？
dark readerのgithub読もうと試みましたが、難しくてわからないです
概念だけでも知りたいです > 例えば一番強い権限のCSS設定があったとしても、おそらくページ管理者の設定したものが優先されるなんてことが起こるかもしれません。
？？？ >>781
dark reader
これ単に、色の値をFFから引いた数値にしてるだけじゃないの アドオンでやってるならユーザーCSSを書いてしまえば良いんでない？ >>767
なんで今さら間違ってる記事なんか持ってくるんですか？
な ん で 今 さ ら 間 違 っ て る 記 事 な ん か 持 っ て く る ん で す か ？
バツとしてそれ書いた人に記事消させなさい ビギナー僕は詳細に指定しているのが優先順位高いかと思ってたけど違うのかな？ どこが間違ってるのか教えて欲しい
優先順位なんてまず問題にならないから、気にしなくなったわ >>787
なんで、元の記事を見ればわかることを聞くんですか？
ほんとうにばかばかりですね >>788
読んでも分からなかったから普通に教えて欲しい
ID、style属性使わなきゃまず大丈夫だから、cssの重みは全然勉強してないんだ >>785
やっぱそうだよね
この点数計算って20年前からあるけど
なんかおかしいよね
https://jsfiddle.net/5re1dwyu/ >>767
探したらW3Cに同じ内容があったわ
https://www.w3.org/TR/CSS1/#cascading-order
調べれば分かるんだろうけど、得るものが少なすぎるｗ
知ってる人いたらcssの詳細度の計算方法教えてくれ～ >>792
なぜ今更、Level1なのか…
Level4は>>791 わかりやすいの拾ってきた！
A = ID
B = クラス
C = 要素
(A, B, C)と考えて辞書比較する
なのでID100+クラス10+要素の計算は間違い
まずAで比較
Aが同点ならB
Bも同点ならC
という計算
とここまで書いてリロードしたら( ；∀；) repeating-linear-gradientについて教えてください
白黒の斜線を1px単位で刻みたいんですが、その際はどちらの書き方が正しいのでしょうか？
(135deg,white,white 1px,black 1px,black 2px)
(135deg,white,white 1px,black 2px,black 3px) >>795
background:repeating-linear-gradient(135deg,white ,white 1px,black 1px,black 2px)
目が細かすぎるから荒くしたほうがいい >>795
background:repeating-linear-gradient(135deg,white 0px 1px,black 1px 2px)
こういう書き方もある >>782
結局、こちらから指定しても、管理者のほうが強いものを設定しているかもしれない
一番強いやつはなんでしょうか >>799
htmlに直書きかjsが強いんじゃないかな？ その一番強いやつを管理者が設定していたら、そちらのほうが強くなるんですかね
だから、上書きではなく、書換でなければいけないと？ サイトの管理者です
外部から書き換えても強さは同じなんですかね
ただ、確実にこれが一番強いというものがなさそうだから設定箇所の書き換えが確実ということですか？ >>801
置換してもJSでフレームワーク制御されている場合
またすぐ上書きされるかもしれないし
ShadowDOMなどで隠蔽されてるかもしれないので
サイト個別に臨機応変に対応するくらいの気持ちがないと無理 jsで<html>に#saikyoを設定
元のcssをfooとすると、後のcssを全部#saikyo fooにすれば全部書き換え可能 >>804
諦めます
dakr readerのソース読める能力もないので(´;ω;｀) ・style直書き(!important付き)
・インラインスクリプトで対象要素のstyle書き換えを検出して再度上書き
上記コンボ採用ページの場合はどうにもならない可能性が高い >>796
> なんかもうええかなって・・・
>>792で「知ってる人いたらcssの詳細度の計算方法教えてくれ～」といったから教えたのに、それはないんじゃないか 階層が深くなるのがいやで<li href="#" />とかしたくなっちゃうんですけど
<li><a href="#" /></li>とするのと何か変わるんですか？ その理屈だと
<html><body href="#" /></html>
とかもできちゃうな 親要素の中にこ要素が3つあって
flexで横並びさせてるんだけど、最後の要素だけ横並び解除させたい？
どうすればいいですか？ boubaubau moi
↑フランス語読みでブボボモワ >>813
何が変わるってliにhref属性は意味がない
まぁ言いたいことは分かるけどね >>817
classか何か付けてposition：absoluteとか どういう内容でそんなことを死体のかよく分からんけど 1ページのみで完結する特設サイトを作るんですがcssファイルをhtmlと切り離すメリットってありますか？ その場合は無いと思う
下手に既存のcssに混ぜると見づらくなるだけ
style要素に直接書いても良いんじゃないか >>820
付けられる要素が決まってるわけですか
失礼しました >>825
そこ知らなかったのか
hrefはa要素だけだよ >>824
さすがにそれはないわ
style属性に書いたらレスポンシブ対応できないし、
不具合時の要因も見つかりにくいし修正が面倒になるだけ >>823
個人的にはcssの行数が多いと、邪魔になる（php、js、html、cssと全部書くとえらいことなる）し
sass使ったり、あとからページ数増やす事なんてザラな印象だわ 特設サイト専用にCSSファイルを1個増やすだけでいいし
むしろ切り離さないデメリットの方が大きいよな style属性だとhoverとかの疑似クラスもできなくなるのに >>827>>830
んなわけないじゃん、と思ったらもう少しよく読んで欲しい
style要素だよ
style属性とかめんどくさすぎるわ
>>829
絶対に切り離した方がいいのは間違いないな
どう切り離すかは好みに寄ると思う >>827が誤読しただけ
この場合は「style要素」でも問題ない 「style要素」って確かに合ってるけど一般的なの？
自分は内部スタイルシートって読んでたわ
・外部スタイルシート、外部css
・内部スタイルシート、内部css
・インラインスタイル、style属性、タグに直書き >>835
使わないと言えば使わない
ただ、style要素と聞けばあぁhtmlに直接書くのね～ってのはまぁ分かる
特にランペなら文脈から想像できるだろう。style属性と間違えるのはありえない 分類するとしたら下記3種
・外部(インポート)
・インライン(style要素に直書き)
・style属性(対象要素に直書き) >>837
インラインがstyle要素か属性か分からない
個人的にインラインでcssって属性の方に感じる >>838
そんな文脈で「インライン」を使うの?? >>839
プログラマだとそういうのが多いんじゃないか？
できるだけ下位要素（webだとhtmlの中の1要素）に密接した形で記述、それがインラインって感覚だわ
foo属性やfoo要素って単語を適切に扱う、分からなければ聞く、を徹底していれば伝達の齟齬は起きないので
俺の所では問題にはならないけどね CSSでいうインラインはブロック要素の対になるインライン要素のことを指す
言葉遣いには気をつけろ >>838
同意だな。
よく営業の人とかもメールで
インラインでお答えしますって書いてくるけど
それもどちらかというと既存のものをそのまま利用してるから感覚は属性の方だよね スタイル属性は、ヤバイやつ
JavaScript, jQuery などで、ユーザーのアクションに応じて、変えるデザイン
コーダーには関係ない。
プログラマーがデザインを上書きするもの
入力欄に、間違った形式の文字列が入っていれば、
エラーチェックで、赤く表示するなど スタイル属性で赤くするとかアホやろｗ
お前プログラマじゃない >>837
> ・インライン(style要素に直書き)
改行を挟んで書くのが主流だと思うけど、あなたは一行で書いてるの？ >>848
臨時的な告知、短期で急ぎの場合、ヤフショのような独自システムなど、
運用最終の状況に応じて普通に使う事もある。
構築だけが制作ではない。
お前コーダーじゃない 世の中には2種類のコーダーがいる
「俺か、俺以外か」 ブラウザを縮めた時に、左から画像テキスト、となっているものを、本来であれば画像が上に来てしまうんですが、縮めた時に画像が下に生かせる方法はありますでしょうか？
通常時の画像、テキストの配置は保ちたいです
よろしくお願いします >>857
ごめん
なんで間違えたか自分でもわからん
雑巾がけしてくる >>855
方法1
ソースの順番を今と逆にして、PCの見た目だけはフロートで画像が左にくるようにすればいい。
<div class="clearfix">
<p class="right">テキスト</p>
<p class="left">画像</p>
</div>
pc
.right{float:right;}
.left{float:left;}
sp
.right,.left{float:none}
方法2
flexでレイアウトして、order プロパティで順番を指定すればいい。（スマホとpcの時とで順番を逆にする） 要件に無くてもWCAG2.1を意識したデザインやコーディングって必要だと思いますか？
先輩がウザいんです >>862
先輩もうざいと思ってるんじゃない？
君からは面倒くさい印象を感じる WCAGというと
10年前の日系企業サイトランキングの惨劇を思い出す… >>864
自分で考えずにすぐひとを頼ろうとするところ うざい先輩いたなあ
でもある時点から周囲が彼を自分の上司にはふさわしくなくなってきたと感じ、
最終的にその先輩と同じ役職まで上ったよ。その先輩はその後色々あってやめた。
うざかったけど、色々教わったことは役に立ってるし、本当にあなたの能力が高いなら、周囲が放っておかない。 すいません、先輩がウザいのは自分の責任だと思いますので訂正します
ところでみなさんはWCAGへの対応ってされてますか？ WCAGへの対応って型にはめてやってるわけではない。
定義されている内容の根本は昔から変わってないので、それはできる範囲で常に意識してるけど
汎用性やメンテナンス性、プログラムとの絡みなど、あくまで一般的に制作負荷になってくる内容ならば重視しない。
もちろん、障害者を意識したサイトであればちゃんろやるけど、常識の範囲でしかやらない。
常識の範囲ってのは慣れないとわからないと思う。 WCAG対応ってのは
まず、これはこう対応します、ここはここまで対応しますっていうマニフェストを作って
このサイトはちゃんとマニュフェスト通り対応してますね、って確認するもの
なので一概に「してますか？」ってのは答えにくい
極端な話「なにも対応しません」というマニフェストであれば、対応していることになっちゃう 今から質問を全力投球するから覚悟を持って受け止めてほしいんだが
どうかね？ 会社のホムペのフッターに住所表記するレイアウトってなうじゃないよね？
ハガキが主流だった大昔の名残りか何か？ 自分ならナウかナウじゃないかは重要視しないけどな
そこに記載する事で利便性が上がるのかデメリットが増えるのか、求められているのかを
考える。ナウかどうかなんんてデザイン力でねじ伏せられるんで。 会社概要がフッターにしか無い場合はそこに住所かいちゃえばいいんじゃね sectionの中にsectionやarticleってあり？ 横から色のついたレイヤーがしゅばっとでて
しゅばっとした後に画像が表示されるエフェクトで
有名なサンプルってある？
なんてネーミングで探せばいいかわからん ホームページのpngデータのボタンアイコンがページを拡大すると荒く表示されます。
画像が原因ですか？ >>891
そりゃ拡大したのが原因だよ
引き伸ばしてんだから荒れもするさ >>892
でも拡大してもアイコンが全然荒れないページとかもあるんですよね… >>895
ベクターデータってイラレで作った
線がパッキパッキデータですよね？
ワイ、イラレでボタンアイコン作ってpngで書き出したんやけど、ホームページに表示させたらなんか解像度あらいんやよね。 >>896
イラレ ベクターデータ
png ラスターデータ
pngにした時点でベクトルの情報は失われている
>>897の通りsvgで書き出すと良い
>>898
普通はwebフォント
font awesome
でぐぐれ みんな回答ありがとう。
みんなの回答を無視して、イラレの元データのサイズを実際に表示させたい大きさの2倍にして、pngで書き出してホムペに表示させたら及第点くらいの解像度になったよ。 ほんとクソみたいな回答しかないし
俺みたいな素人にもうsvgを押し付けんなよな >>901
それただのレティーナ対応や
今なら3倍の解像度が必要 >>904
ワイのディスプレイRetinaとかじゃないんやけど… >>899
えー
font awesomeって普通なん？
colorが使える以外あんまり便利な気がしない印象 >>902
SVG怖くないよー
そんな真新しくもないよー
PNGやJPEG貼るのと変わんないよー
たぶん初心者特有の何か変な思い込みしてるよー >>905
じゃあなんか変なことになっている
ブラウザ表示が拡大倍率になっているとか
>>906
死ぬほど普通
アイコン使えば多少華やかになるし何よりデザイン考えずに理屈で当てはめればいいだけだからめっちゃ楽 フォントオーサムって無理でアイコンゲットできるサイトのこと？ >>909
あーそうではあるんだが
ここで話してるのは
主にベクターデータの絵をSVGファイルとして扱うのではなく
書体のファイルにしてウェブフォントとしてロードして
絵を文字としてHTMLに書くやつ
たぶん フォントも内部的にはベクターデータだからsvgとの差はそんなに無い
使い勝手は大きく変わるけどね プロならfont awesomeをゴリ押しはおかしいよ。
あとからfont awesomeにはないようなアイコンの追加を要求されたら
整合性崩れてオワコンなるぞ。
それと後方互換じゃないからなあれ。 ま～分かっとるさかいに
フォントオーサム4つことるわ やっぱりみんなの言う通りsvgで保存して表示させてみたら拡大してもキレイにアイコンが表示された
やっぱり今どきはsvgがナウやね 便乗質問だけど、フォトショでスライス切ったやつはsvgにできないとです？ イラレでスライスで切ったのトレースしてsvgで保存 >>901
結局、解像度を上げてるから、回答(>>893)を無視してないのね 「回答文の内容たしますだけでは解決出来ませんでした。結局、自分で考えて自己解決しました。」
というタイプはどこにでもいるよ 回答では解決できませんでしたので結局、自分で考えて自己解決しました。 一から十まで教えてくれなければ、回答ではありません、ということか 頂いた回答をヒントに、自分の考えで解決することが出来ました
くらい書ける心の余裕がほしいところ IEが消えてなくなれば
だいたいのトラブルは解決する IEが消えても、自己解決君は消えてなくなりそうにない いや、お前らの回答なんてあくまで参考程度で
正しい解を導き出すのは結局は自分自身なんだが？
正解を教えてやってるってスタンスはパワハラだぞ >>925
おまえらに大してなんのパワー（権力）もねえのに？ パワハラはパワハラ
上司にいいつけてやるからな(怒) >>925
> 正しい解を導き出すのは結局は自分自身なんだが？
それは当然だが、助けを求めておいて上から目線は頂けない 画像を表示したいがクリックしても何も反応しないようにしたいです
どうすればよいでしょうか CSSのbackgroundで表示すれば右クリックでは反応しないはず
まあCSSの解析されたら呼び出して保存が可能だろうけど たまにホムペで画像右クリ保存したいときに、
バックグラウンドされてるとマジでイラだよね。。。 最近のブログてバカみたいに右クリック禁止にしてさ
単語をコピペできないようにしてるけど、ウザイだけだよな
コピペして調べさせたくないならおまえここで完全に解説しろや！
できるのか？あーん？って思うの 酷いのだと、数行のチュートリアル載せておいて、
コピペ禁止になってるやつバカなんじゃないのかって思わ。 右クリック禁止のサイトなんてもう数年見てないけど未だにあるのか
右クリック禁止の禁止の拡張機能入れると気づくことすらないぞ むしろ去年おととし辺りに増えた印象だよ
クラウドのコピペライターとかニュースで話題になったころ。
たぶん、そういうアフィリ向けのWPテーマが出たんだと思う。 右クリできないサイト作った俺ってマジでナウ！
みたいなオナニー感がハンパない ヤフオクの出品画像も右クリできない
わざわざ新しい窓開いてからしか保存できへん
「そんなにワイの邪魔したいの？ハッキリ言ってノーダメなんやけど？(怒)」って感じ >>941
先輩、それはさすがにパクったらアカンやつっす この前右クリできないどうでもいいようなサイト直した
不便すぎるから迷惑料もらいたい！ >>941
画像をつまんでURL欄へドラッグすればええやんけ Firefoxなら拡張入れなくてもShift+右クリで強制的にコンテキストメニュー出せる事が意外と知られていない Chrome以外はブラウザじゃないんで、
Chrome基準でお話をお願いおいたします。 デスクトップでも好きなフォルダでもどこでもええからドラッグ＆ドロップしろや ちょ、落ち着けよ、みんなお、お、落ち着けってててて hogehoge:before{
content:"NEW";
font-family:"うんちフォント";
}
で指定してあるとして、指定のフォントが閲覧者のPCになかったら
ブラウザ指定のフォントで表示じゃなくて、NEW自体を表示させなくしたいんだけど
どう設定すればいいですか？ よく分からんけど@supportsでどうにかなるんじゃない？ そうだそうだ
よくわからないけどなんとかなりそうな雰囲気だ！ CSSじゃ無理でしょ
955みたいなのはJS使ってめんどいことやらないとだめだから、
画像かWebフォントで確実に表示させるのが無難 ここにおるデザイナー寄りのコーダーたちは
イラレとかフォトショとかも結構なレベルで使いこなせちゃう感じ？ 疑似要素を使って下ボーダーの色を一部変更した見出しデザインにしています
この要素の幅よりもテキストがはみ出さないようにするため3兄弟
overflow:hidden;text-overflow:ellipsis;white-space:preを使ってみましたが
ボーダーの色が消滅してしまいます…
デザインを崩さずにテキストをはみ出させないためにはどうすれば良いでしょうか？ レイヤーが2枚あってスクロールすると上のレイヤーだけ動いているように見える効果なんというんだっけ？ >>968
ありがとうございます
border-bottomを設定した要素に疑似要素のborder-bottomを重ねるよくあるやつです
いろいろ試した結果、
overflow:hiddenを設定すると、その要素のborder-bottomについては当然表示されますが
子要素や疑似要素はボーダー（を含む）から下が非表示になり、つまり無理なので諦めます… >>971
> border-bottomを設定した要素に疑似要素のborder-bottomを重ねるよくあるやつです
あなたの界隈では「よくある」で通じるのか… 下ボーダーよりテキストがはみ出るなんてあり得ないはずだぞ
それと疑似要素は下ボーダーの上にz-indexでピッタリ重ねてる前提だよな？ >>974
そうです
ぴったり重ねるとそこからoverflow:hiddenの影響を受けるので見えなくなります
テキストのボトムラインに近くなってもいいなら疑似要素を上にずらすって手もありますけど
不格好なのでやめました 何としても言葉だけで伝えようとしてるが既に誰もイメージがついてないだろｗ どうしようもできない事象はスルーしたほうがよいのじゃよ 全部じゃなくてもシンプル化したコードでも貼れば、こうしたらいいのにってアドバイスも出来るのにね。
殆ど誰も理解できていない状況で、自分の中だけで完結して諦めてるって、そりゃ何も答えようが無いわ。 諦めるのか？
何をやるのもいい加減にして、一生ゼロのまま終わるのか？
それでいいのか？ お前らそれでも男か？悔しくないのか！！ >>960
疑似要素を使わず、オリジナル要素にborder指定すれば解決
→終了 >>983
あ"? おめーは何を解決したんだよコラ！！ >>986
質問者の目的は質問する事だろ？アーン？ ちょっとまてよ
>不格好なのでやめました
っていってるだろ？つまり質問者はあれだよあれ
なんだっけこのやろう！！ >>986
borderの色変更以外に目的があると？ >>990
どうせ色目的なんでしょ？
私をいやらしい目でみてたじゃないの .test{color: red;border-bottom: 1px dashed #fff;transition: all ease 1s;}
.test:hover{color: blue;border-bottom: 1px solid #fff;}
<p class="test">TEST</p>
border-bottomにtransitionが効かないのですがなぜでしょうか？ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 59日 7時間 15分 59秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
