HTML/CSS のどんな質問にも優しく答えるスレ 35
レス数が1000を超えています。これ以上書き込みはできません。
タイトル:どいつもこいつも
死ねよマジで
タイトル:どいつもこいつも
空白空白死ねよマジで
こうしたいんだけどどうすればいいですか? >>100
<p>タイトル:どいつもこいつも<br>死ねよマジで</p>
<p>タイトル:どいつもこいつも<br> 空白空白死ねよマジで</p>
<style>
p {
margin-bottom: 1em;
}
</style> >>98
ありがと、好きなテンプレートエンジンを使えるのね
実際の使用感を聞きたいな >>99
padding-left: 1em;
text-indent: -1em; >>102
俺はhandlebarsやmustashが好き。
Pugやslmみたいな省略して書けるんです系のは嫌い。 >>73
>同じように <br /> も未知の/という属性
/ は属性とは認識されないはず
>>56
>つまり、SEOガー、SEOガーの話
section、aside、article などは、
SEO ではなく accessibility の話じゃないのかな? >>105
section、aside、article などで
アクセシビリティがどのように変わるというの? >>105
SEOガーいってるやつは負けて荒らすために書いてるだけだから >>107
公式な取り決めとして
<main>やら<nav>やらの意味が定義されると
マシンリーダブルになるんさ
従来のHTMLは
語や句をマークアップする要素は沢山あったんだけど
ブロックについては<form>くらいしか意味のあるものがなくて
セクションを明示するものは全くなかった
だから、たとえばプログラムで
ナビやら広告やらではなく本文部分にアクセスしたい
なんて時に、とても難儀してた
これがHTML5で定義されたセクショニング系要素があると
<nav>や<aside>は本編ではない、<main>が本編、とわかっているので
大変アクセスしやすくなったわけですな
そういう観点でアクセシビリティに大いに寄与している >>109
マシンリーダブルとアクセシビリティにはなんの関係もないですよね >>110
アクセシビリティってのは
ドキュメント内の要素へのアクセス出来やすさ具合のことよ
要素内のコンテンツを得るための障壁がいかに低いか、だけでなく
要素自体へどれだけ到達しやすいか、も重要なファクターなわけよ 国語 : 50点
算数 : 70点
みたいな表を作るとき、HTMLの要素はなにが適してますか?
自分の知識では
<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li>
とかなんですがlabelでもpでもなんか違う気がしてまして…… ふつうに書き直しました
<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li> >>115
ありがとうございます
table調べてみます tableを知らない世代が出てきたか。
かつてのHTMLはtableだらけだったんだよ。 >>116
tableはやめとけwww
そんなことしたら恥ずかしすぎるぞwww
どう考えてもdl >>123
tableでもdlでもおかしくないと思うがな dl好きなやつ一定数いるよなあ
dtとddをセットにして括る要素がないから使いづらいと思うんだが >>125
いや基本文章なんてタイトルと本文だろ?
それの繰り返しでhを下げていってhほどでもないものはdlになるわけだから増えるのが当たり前 headerとかh1とか邪魔だったんで、display:noneしちゃったんですけど、seo的にやばかったりします? >>113は「表を作る」とはっきり書いているので、<table>が適切なのだろうな >>128
いいえ。SEOなんて嘘、まやかしです。
そんなものありません。HTMLの書き方で変わることなんてありません >>127
また国語勉強しないといけない人?
リストであればいれるでしょ
どうして「なんでも」になるの? >>125
別に一対一じゃなくていいぞ
dl
dt
dd
dd
でも可能
でもこういう場合は普通hになるけどね
>>128
h1を消すと検索結果の表示が変わる
それでいいなら別に問題はない >>131
>>126を読むと、dtをhnと同等に扱うというよに見受けられるから、じゃね?
俺もたまに、なんで<article>にしないで頑なにdtとddなのかなー
と思うのに出くわす
横からすんませんでした 海外では最近どこもflexboxのサイトばっかだな
3、4個のカラム横並びにして、でかい写真でごまかす
同じようなデザイン
俺はそういう軟弱なデザインは使わない
htmlにtableでデザイン
cssもいらない
cssは不幸にしかならないよ
サイト作成の依頼募集してます 日本語ってvertical-align:centerを設定してもアルファベットに比べて上よりになってしまいますが、
ここって調節してますか?
https://html5experts.jp/takazudo/13592/ >>133
1対1じゃないところこそが
dtとddをくくってくれる要素がないことが不便なんじゃね?
tableのtrにあたる要素があれば便利なんだけど <html>
Hello World
</html>
これだけありゃあ十分やろ dtに続くddを拾うのに
次のdtが現れるか親dlが終わるまでnextSiblingを1つずつ見てかなきゃならん
ということじゃね? 次の</tr>を見る必要があるのと、何の違いがあるというのか このスレの範疇で言えば
tableでは tr:first-child って書けるけど
dlではそれが出来ない、的な >>141
いやいや
trがあるから、thとtdのセットはいちいち数えなくても、trの子要素として拾えるのよ
dlにはtrに当たる要素がないからそれが出来ないって話 dl
dt
dd
dl
dt
dd
別にこういう風に繰り返しても良いんだぞ それだと1つ目と2つ目のdlがセットであることを以下略 インプットとラベルを一々二要素に分けたくない という質問です
<input type="checkbox" id="labelX">sample</input>
<label for="labelX">ラベル</label>
こうすることで文字列「ラベル」をクリックすることにより、「sample」のチェックボックスをオンオフの切り替えが出来ます。
でも、一々こうやって2つの要素を作成しid, for属性を対応させるというのが煩わしいのですが、
1要素だけで「文字列をクリックすることによってオンオフの切り替え」をしたいです。
つまり、「sample」文字列をクリックするだけで「sample」のチェックボックスのオンオフを切り替えられるようにしたいです。
しかも1要素だけで。 別の言い方をすると、
<input type="checkbox" style="display:none">click</input>
これだけだと「click」をクリックしてもオンオフの切り替えが出来ませんが、これをオンオフの切り替えが出来るようにしたいです。
1要素で。 >>146
ちょっと変わった書き方だな
こうする人が多いと思う
forを使う場合
<input id="hoge">
<label for="hoge">ここをクリックしてもOK</label>
forを使わない場合
<label>
<input id="hoge">ここをクリックしてもOK
</label>
前者のほうがCSS的な意味で都合が良い場合が多い、と個人的には思う >>147の要望通りではなかったのですが、
<label><input type="checkbox">sample</input></label>
では、「sample」をクリックするだけでチェックボックスのオンオフ切り替えが出来ますが、
こうすると、cssでinput:checked に対するスタイルの設定が効きません。
なぜでしょうか… >>146
すまん>>150のforを使わない場合の方は
<input>のidはいらなかった >>151
input:checkedはあくまでinput要素に対するスタイル
inputは置換インライン要素なので、中身はない
<input>文字列</input>
と書いたところで、文字列はinput要素の中身となるわけじゃない 置換インライン要素ってのは
要素の形成するボックスの中身が何かに置き換えられる要素のこと
主にimg、input、select、video、audioなどのこと
inputは形成するボックスの中身がUI部品に置き換わってる感じ >>153
なるほど
では、
<label><input type="checkbox" />sample</label>
とすることによって、css側で「子要素のinputがcheckedになっているような親要素labelに対するスタイルの設定」というモノをすれば良いのでしょうか
でも、そんな設定って出来るんですかね 例えば、
<label><input type="checkbox" />sample</label>
これに対して、「sample」をクリックしたら背景を赤にするというのはCSSだけでは無理ですか? >>156
親は無理なんじゃないかなあ
CSSをごにょごにょしたら出来るのかも知れんけど
input[type="checkbox"]の親のクラスをトグルするJS書いちゃった方が早い気がする > input[type="checkbox"]の親のクラスをトグルするJS書いちゃった方が早い気がする
こういうのがjQueryが得意なことなんだよな。
Reactやvueじゃ面倒になる >>161
そんなに変わんなくね?
要素アクセスして
changeイベント拾って
parentのclassname変えるだけじゃん? >>162
それを100個作ることを考えてみ。
jQueryだとHTMLはそのままで良くて、
ほんの数行(たぶん3行)書くだけで終わり
Reactやvueを使うとHTMLがガラリと変わってしまい
100個分コードを書かないといけなくなる >>163
100個分のコード書くわけねーだろカス >親のクラスをトグルする
こんな漢字か
http://jsfiddle.net/d50mhLkw/
なんだろう、なんか微妙。何かが違う気がする。垢抜けない >>164
そう?ならHTMLを書いたから(100個は多いので20個にした)
これをわずかの修正(可能な限りHTML、CSSを修正せずに)で実現してみて
https://jsfiddle.net/s1Lqwp8m/
ちなみにjQuery版、HTML、CSSは全く修正せずに、3行JavaScriptコードを追加しただけ
https://jsfiddle.net/Lnh2ac74/ ReactなんかはJavaScriptを使ってコンポーネントを作って
そのコンポーネントをHTMLで使うという感じ
(といってもHTMLで直接使えないのでJSXとJavaScriptコードの中に書く)
jQueryはHTMLとCSSでコンポーネントを作って
そのコンポーネントにJavaScriptで動きを追加するという感じ >>166
お前バカだからそんなしょーもないレベルのただのテスト環境で勝ち誇ってるってわかってねえんだろ 私のレスに色々知恵を絞って貰ってありがとうございます。 >>163
なんか勘違いしているよ
このくらいのことはむしろ
jQueryがあってもなくても大して変わらないタイプのコードだと思う
querySelectorが使えなかった頃なら
Sizzleの使えるjQに若干アドバンテージがあったかも知れんけど >>156
まだ:hasが使えるブラウザは無いのでcssだけでやりたいなら素直にforを使うしかない この程度ならinputの後ろのテキストをspanで囲って兄弟セレクタで色々やるだろ普通 >>174
は?なんの話してんの?
標準機能ってなに? >>173
兄弟セレクタなら誰でもできるんじゃね?
質問はlabelをinputの親要素にした時の話だよ 今ってキャッシュさせたくないときってどうするのがいいの?
設定してたの全部旧式になっちゃったみたい <label><input type="checkbox"><span>sample</span></label>
input:checked + span { background-color: red; }
こうすればいいって事か >>166
俺は164ではないけどこんな感じかなん?
jqueryのソースをほぼ展開しただけみたいな
document.querySelectorAll('input[type="checkbox"]').forEach((e) =>{
e.addEventListener("click", function (e) {e.currentTarget.parentNode.classList.toggle("checked")})
}); >>180
jQuery版に比べて動的に増減した場合には対応できないって問題点があるね
あと要素の数だけクロージャーが生成されるのでリソースの無駄とか
querySelectorAllの要素にforEachが使えない場合があるとか
作り込みが甘い >>166
jQuery分の数万行足し忘れてるぞww ブラウザのコード数百万行に比べれば
無視できるレベル document.addEventListener("click", e => {
const t = e.target;
if (t.nodeName === "INPUT" && t.type === "checkbox") {
t.parentNode.classList.toggle("checked");
}
});
実際にはclickイベント拾うのは並べてある要素でいいし
inputに同じclass与えておいてそっちで判定した方がいいと思うけど まあ作りどうこうはともかく
>>163の
> 100個分コードを書かないといけなくなる
は「そんなこたーないんじゃね」ってことだね > は「そんなこたーないんじゃね」ってことだね
いや、反論まだ出てないんだが・・・
四の五の言わずに>>166に対してreactのコードを書けと
vueでもいいんやで 誰もjQが劣ってるとかいってるわけじゃないんだから
優位性を語るのは他所でやってくれんかね 優位性じゃなくて適材適所だな
誰もゲーム作るのにjQueryを使えとか言ってない
ウェブの大半を占めるウェブサイトはが、これからもアプリ開発なんかするわけもなく、
ウェブサイトとして欲しい機能はこれからも対して変わらないのだから
jQueryが適切という話しかしてない わかった
よくわかったから、もう自由に書いていいから
次からコテつけるかID出してお願い
全部保存して家宝にするから 言われなくても自由に書いてる
IDつけるかどうかも俺の自由だ >>193
よほどでなければ良い悪いは無い
別に>>179でも良い
俺は>>158 >>190
空気読めよNGするって言ってんだよ
公共の場では他人に配慮しろよ学校で習っただろ >>195
一つ一つNGにすればいいのでは?
俺が気を使う必要はないよね >>194
いい悪いじゃなくて標準機能ってなんだよって IME(日本語入力ソフト)が変換前文字列の下に出すアンダーライン(横線)って、色とか変えられるんでしたっけ?
text-decoration-colorはダメっぽかったです
黒線のままだと、黒背景のとき困るなと思い…
キャレット(縦線)の色はcaret-colorで変えられるんですが、これで一緒にアンダーラインの色まで変わったりはしないようです… >>199
PCならすぐ下に候補でるから困ら無いと思うけど
OS依存だと思う devtoolのメッセージにstyleを適用させるのってどうやればいいんでしょうか?
https://i.imgur.com/39E08hB.png >>201
途中で書き込んじゃった
%c を文字に入れて、第2引数にスタイルを書く
例えばこんなの
console.log('%cabcde', 'background-color: #f00'); >>200
え、ダッと一気に文打って終わりでいいならいいですけど
推敲というか、戻って文章の途中を削除してそこに新たに文字を入れる場合とかけっこう見づらくならないですか?
とりあえずWindowsのChromeにだけ対応できればいいんですが
黒背景ということは文字には色がついているわけですから、フォーカスされたtextarea自体に
textarea:focus { text-decoration: underline; }
と設定し、変換前文字列の下だけは黒線が出る(つまり線が消えたように見える)という逆のやり方で一旦対処します… >>202-203
そういうのがあったんですね、ありがとうございます
ちょっとおもしろい センタリングの際の
text-align:center と margin: 0 auto
の使い分けがわからない。 >>206
text-align:center インライン要素が中央揃えになる
margin: 0 auto その要素自体が中央揃え。block要素のみ
text-align:centerは猛烈にダサくなるので使わないほうが良い
基本的にmargin: 0 autoで良い cssで親要素の端から端まで往復するアニメーションを作ってみようと思ったのですが、うまくいきません
どのようにすれば良いでしょうか
http://jsfiddle.net/564sbkn2/5/ >>209
ありがとうございます、うまく動きました!
http://jsfiddle.net/564sbkn2/8/
あと、CSSでthisみたいなのは使えないんでしょうか?
右端を親要素の右端に合わせる時、widthは決め打ちするしか無いのでしょうか
.span4 {
width: 20px;
}
@keyframes span4 {
0% {left: 0%;}
100% {left: calc(100% - 20px);}
}
以下のような感じで記述できると有り難いのですが
100% {left: calc(100% - this.width);} >>210
100% {left: 100%; transform:translateX(-100%);} ここの人らはgulp使ってる?
なんかオススメのプラグインあったらおせーて すいません質問お願いします
【Google検索結果で「ページがモバイル フレンドリーではありません。」を表示させない方法】
PCのみで、スマホサイトがないのですが、ヘッダーに下記ソースを記述しても特に問題ありませんか?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ttps://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja
PCのみのサイトなので「ページがモバイル フレンドリーではありません。」とGoogle検索結果に表示されているのですが、
この表示を消したいのです。
ttp://kino-interior.com
このサイトはスマホサイトがありませんが、<meta name="viewport"~の記述があります。
Google検索結果では「ページがモバイル フレンドリーではありません。」が表示されていません。
この表示を無くす方法を知りたいのですが、手法をご存知の方おられますか? 訂正。
Googleでログインした場合のみ表示されますが、その話とは別に
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これを入れても入れなくても特に問題ないですか? >>217-218
・まず、スマホ対応のために以下のコードを入れるのは正しい
<meta name="viewport" content="width=device-width, initial-scale=1.0">
・これを入れても入れなくても特に問題ないですか?
入れないとめちゃくちゃ見づらい
俺は問題があると思うが、100%PCからしか見ないサイトなら問題はない
・Google検索結果
表示順位は下がる
入れない理由はさっぱり分からないが、
モバイルには見せたくない等の理由があるならまぁいいんじゃないかな >>217
PCのみでスマホ用がないんならモバイルフレンドリーじゃないんだからその通りだろ
逆にモバイルフレンドリーである(モバイルフレンドリーではないの表示がない)ならスマホ用がある
>Google検索結果では「ページがモバイル フレンドリーではありません。」が表示されていません。
そのサイトはお前のサイトか?
それなら人に聞く必要なくない?
お前のサイトじゃないなら表示されないのは当たり前
その表示はサイト所有者にしか表示されないからな bootstrap使うためには結局jqueryとcss HTMLの知識が必要じゃないですか? >>221
native bootstrapもあるからjQueryはなくてよい
htmlとcssなんて中学生でもできるんだからそれくらいやれ
キミが小学生なら今からがんばろう <html>と<body>、この2つの間にインデントは付けますか?付けませんか? >>224
なるほど、ありがとうございます
どういう時に使い分けてますか? >>220
IE残って欲しいの?
そうならないようにEdgeが必要なんでしょう
誰もがChromeをインストールするわけじゃないんだから IEからの移行でEdgeが流行ればもう少しこの界隈は救われるかと思ったけど、移行失敗でEdgeという要素が増えただけ それを成功させるためにChromiumベースにするんだろう
OS標準で最新ブラウザを搭載するのは
ユーザーにとっても重要なことだし
ビジネス的にリターンが見込めないならば
開発コストを減らす方が重要
せっかくOSSとして落ちてるんだからバンバン利用しなきゃ >>220
いや、だから下に訂正って書いてるじゃねーか
ちゃんと読んでからレスつけろアホ >>222
HTML CSSはやってるんだけど暗記科目過ぎて全く覚えられん 特にCSSの要素多すぎ >>233
全然多くない
普通に暗記できるレベル
九九以下 そもそも大半使わんからな
アニメーション関係はややこしいけど使う時にどうせもう一回調べ直す cssは覚えるもんじゃないよ
気づいたら覚えてる
九九と一緒、気づいたら60の段くらいまで言えるようになってる ゆとり以降のガキって、マジで1桁の九九しか覚えないらしいな
26×31とかの問題でたら、もしかしてひっ算とかすんのか?
非効率 ゆとりはインド式かけ算を習わないのか?
親に聞いてもインド式カレー?とか言ってたし 少なくとも戦後の日本の学校で
9x9以降を覚えさせる教育はしてないな
中学受験が過熱してた90年前後は
3.14の段と、11〜19までの平方数は覚えてただろうけど 今の時代なら15x15(FF)覚えさせればどうだろう?
奴隷化がスムーズですよ経団連さん >>249
ゆとりって言われるだけだからあまり年寄り扱いしないほうがいいぞ
ゆ・と・り♪ 今の若者ってゆとりじゃないらしいな
この間、2ちゃんで大学生を、最近のゆとりは〜とか言ってバカにしたら、おじさん逆に叩かれちゃった >>250
加齢臭プンプンでワロタwwwwww
こんなスレに書き込む前に頭部のお手入れからしろよな^^ cssで属性指定してn番目、ということは可能でしょうか?
nth-of-typeは要素のn番目しか指定できないようです
jsでなんとかするしか無いでしょうか ゆとり世代は20代後半ぐらいだからな
それより下のことをゆとりと言うのはまじでおっさんかじじいだけだね >>254
[foo="var"]:nth-child(n) >>250
そういやお前いい加減結婚したの?
ゆとりの俺の子供はもう小学生だよ?
まだ童貞つらいてるの? >>256
ダメでした
記述間違ってますか?
http://jsfiddle.net/sjpemn83/1/
[class="osaka"]:nth-child(2){
background: red;
} ゆとりじゃなくて無能か、ゴメンな
>>256
はNG
>>258
[class="osaka"]:nth-of-type(4){
background: black;
} >>259
ありがとうございます、うまく動きました でも何でclass指定だと要素扱いのような挙動になるのでしょうか
仕様ですか <!DOCTYPE html>
で書き始めた場合、ブラウザはhtmlのバージョン幾つで解釈するのでしょうか
常に最新でしょうか、それともそれっぽい感じで解釈してくれるのでしょうか >>263
ブラウザのバージョンによる。
例えばIE6だとHTML5に対応してないから
5で解釈するわけがない >>266
Chromiumユーザーよりかは多いぐらいだよ
で、それが今の話となにか関係あるの? >>264
5.0、5.1どちらでしょうか?
>265
自分のサイトですが、IEのバージョンと割合です
11 93%
9 3%
10 1.4%
8 1.15%
7 0.29%
6 0.01%
5 0.00%
ガラケー以下です、考慮しなくて良さそうです
>>267
>Chromiumユーザーよりかは多いぐらいだよ
google analyticsでChromiumかどうかは、
どこで判別するのでしょうか
>で、それが今の話となにか関係あるの?
多数のユーザーに不満がない環境を提供したいために質問しています
0.01%のための環境構築は不要でしょう >>270-271
そんなもん
PCサイト
11 94.74%
9 3.06%
8 1.02%
10 0.98%
7 0.2%
6 0.01%
5は無し
スマホゲーサイト
11 75.81%
9 15.04%
8 8.85%
10 0.29%
5-7無し
まぁIE6を引き合いに出すのは無いわ 昔からたいていのブラウザはhtmlのバージョン厳密にチェックしてたわけじゃなく対応してるタグであればその通りに表示してたわけだし
<!DOCTYPE html>はhtml5以降という意味より標準モードを担保する役目の方が強い気がする 思った以上に脱IE進んでたのね
IEは全部捨てて良いという結論に達したわ
ちなみにIE自体は全体の8%
11.0 95.0984559%
8.0 2.5499363%
9.0 1.4591302%
10.0 0.7224819%
7.0 0.1133305%
6.0 0.0424989%
7.0b 0.0141663% https://netmarketshare.com/browser-market-share.aspx
1. Chrome 63.60
--- IE以下全部切り捨て --
2. Internet Explorer 11.19%
3. Firefox 10.00%
4. Edge 4.34%
5. Safari 3.82%
6. Opera 1.57% サイトごとにちゃんとアクセス解析して調べないとね
BtoBのサイトと、BtoCのサイトではブラウザの割合もまた変わってくるし >>279のおかげで思い出した
HTMLのバージョンが何と解釈されるかって話に
IE6のシェアがどう関係あるの? >>265
>例えばIE6だとHTML5に対応してないから
>5で解釈するわけがない
0.0x%の特殊なユーザー環境を前提に回答するアホがいたから話がややこしくなった IE8は今でも企業内の多くのシステムで必須ブラウザとして使われているからなあ ページ全体で基底となる文字サイズや行間などフォント関連の初期設定は
html{}とbody{}どちらに定義するのが適切ですか? htmlで一旦sans-serifにリセットした直後にbodyで改めてフォント指定するのって深い意味あるの?
やってる事が分かりやすいっていう可読性の話だろうか んなこたーない
多分htmlで指定していることを忘れている わからん
// 2. Change the default font family in all browsers.
って書いてるけど、古いブラウザのバグ対策か何かに見えなくもない bodyでフォント指定忘れた場合iphoneが明朝になる対策
と、思う 人の数だけ理想のノーマライズがあるから、結局のところReset.cssが一番重宝する そもそもhtmlに書くプロパティ ってほとんど無いと思う
見た目を変えるためのスタイルならbodyから継承させるのが筋じゃね この↓ページの
https://www.deviantart.com/rikitza/gallery/
メインの画像?だけが表示されてるフレームのURLを知りたいんですが
可能ですか?
上部のコンテンツ名やら作家名、左側の"Gallery Folders"
とか以外の部分です。 昨日の話題だけど、
IE6と7はほとんど中国人
アダルトサイトには余裕で1%以上くる 現在無職の30半ば(男)です
転職活動中ですが時間があるので、
htmlを勉強しようかと思っています
そこで質問ですが私の年齢からhtmlの勉強をするのは難しいでしょうか
PCはネットが不自由なく出来て、エクセルでメジャーな関数は使えるレベルの初級者です
ちなみに、これを仕事にするつもりはありませんが趣味でwebサービスを作りたいなと思ってみたり
※手帳は持っていませんが高次脳機能障害を患っています
ロジカルに考えることが苦手で記憶力も低下しています このスレで高次脳機能障害なんて文字列に遭遇するとは
お互い頑張ろう >>309
そうですよね
なんかありがとうございます
オススメのテキスト及びサイトはありますか >>306
真面目な話、年齢的には全然問題ない
30代後半から始めて仕事としてやってるやつも周りに結構いる
だけど、障害の種類や程度にもよるけど高次脳機能障害となると難しいかと
htmlするなら当然cssも必要になってくるけど、cssにはロジカルな思考がいる
「このスタイルでこうなる」とか「ここは親からこのスタイルが適用されてるからこれが必要」とか考えて作る
頭の中で完成形を構築しながら書いたりもする
高次脳機能障害だとそういう認知機能が必要なことは苦労すると思う
でもまあ仕事ではなく趣味としてするならまずはやってみたらいいんじゃないかな
リハビリにもなるだろうし >>311
レスありがとうございます
よろしければどう勉強をすればよいか教えて頂けますか 無職で暇ならHTMLとCSSに加えてPHP or Rubyを勉強すれば
並レベル以上のアフィリエイターにすぐなれるよ >>306
まず手帳を取得しないと話にならない。手帳がなければ健常者だ
で、htmlだけだとその辺の事務員でもカタテマに出来る
wordpressを覚えると良い >>315
手帳なら身体障害者手帳1級は持ってるよ
ワードプレスか
そっちの方がメリットあるんかね ワイくらいの熟練者になると脳内から直接コードを書き換えたりできるようになる
まあがんばれ bodyにcss当てるとAMP配信でエラーになるからやめとけ どうやって勉強するの?ってのは間違い
まず目的を作る
そのために調べたり学習する
勉強方法は様々だから決まった形はない >>312
本とかは多種多様で人によって合う合わないがあるからこれがいいとは薦めにくい
いろんなサイトを見て、これいいなと思ったところを再現してみたらどうかな
もちろん動的に出力してるのは無視して見えてるまんまを再現する
こういうレイアウトにするにはどうしたらいいのか、とかを調べて作ってみる
答え(というか見本)は見てるサイトのソース
比較的簡単なレイアウトから少しずつ難しいのに挑戦していけばいい >>318
「入門」とか「hello world」ってつけてググればいくらでもサイトがあるから >>306
障害はわからんけど、その年で勉強開始して就職目指してる俺がいるから大丈夫だろ。
まだ無職だけど…。 就職はね…
何が出来るか、ではなく
何が出来ないか、が問題になるから CSSカスタムプロパティ利用時のIE11対策のひとつとして
var関数を使わないバージョンを併記する方法がありますが
この書き方って現時点で何かメリットありますか?
開発過程ではなく最終的に書き出すCSSに両方記述される場合の話です IE11対策なのだからIE11で動くことじゃね?そういうときデメリット聞かないか普通 a要素の中にdisplay:blockを入れると
opacityが効かなくなりました
どうもa要素からblock要素がはみ出ているようなのですが、
これは何故でしょうか?
また、解決方法はありますか?
http://jsfiddle.net/5pz3dhcj/ 素直にaもdisplay: blockにしたら?
firefoxは効いてるからchromeのバグじゃね? >>331
いや、変数部分を残す意味が全く無さそうだと思ったんで a要素はデフォではinlineだから
セマンティック的に問題なくても、書き方としては間違い >>330
> 開発過程ではなく最終的に書き出すCSSに両方記述される場合の話です
書き出すってビルドする話?
var関数ってPostCSSのことかな?
普段Sass使ってるからPostCSSは詳しくないけど、
ビルドしたらIE11対応のコードも
出力する設定とかあるんじゃないの?
ソースコード自体はvar関数だけ書けば良くて
書き出すCSSには両方記述される インライン要素とブロック要素の概念自体がなくなったと思ってる人多いよね 例えばこのサイトとか、HTML5で置き換えられたとか書いてあるし
信用できるの?このサイト
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
> ブロックレベル要素とインライン要素という区分は、
> HTML 4.01 までの仕様で使用されていました。
> HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの
> 組み合わせに置き換えられました。 ここもなくなるとか書いてあるし。ひどい間違いだね。
http://www.htmq.com/html5/007.shtml
> HTML4.01では要素は大きくブロックレベル要素と
> インライン要素のいずれかに分類されていますが、
> HTML5ではブロックレベル要素とインライン要素の分類は無くなります。 >>338
何が言いたいのか知らんが、HTMLからはインライン要素、ブロック要素というものはなくなった。
インラインとブロックの違いは見た目の違いであり、色などと同じように
CSSのdisplayプロパティで指定するものというふうに定義が変わった。
名前をつけるならば、インラインスタイルとかブロックスタイルというべきだろう。
すべての要素はデフォルトのスタイルを持っているが、
CSSのdisplayプロパティで、inlineやblock、さらにはnoneや
tableなどのスタイルに自由に変更できるものとされた。
だから「インラインスタイルのdiv要素」というのもおかしな表現ではない >>335
> a要素はデフォではinlineだから
> セマンティック的に問題なくても、書き方としては間違い
inlineなのはCSSの話で、セマンティック(HTML)とは無関係
HTMLではa要素の中に特定のタグが入れられるかどうかでしか決まっておらず
a要素の中にspanを入れることは可能。(spanのdisplayがinlineでもblockでも関係ない) display:inlineの中にdisplay:blockを入れた時の挙動は
インライン要素にブロック要素を入れた時の挙動と変わってないけどな >>343
そりゃあ、CSSの仕様だから変わらなくて当然 >>332
どっちが正しいのか知らないがバグかな
IE11, Edge, Firefox, Chromeの中でChromeだけがおかしかった。
aやhoverは関係なく、display:inline の中に、display:blockを入れた時
内側の要素のopacityが反応しなくなる(親要素のスタイル継承しなくなる)
http://jsfiddle.net/2sax6tfr/
回避策としては、内側の要素に、opacity:inheritをつければ親要素
(元々の例ではa要素)のスタイルを継承させることができた 補足
> 内側の要素のopacityが反応しなくなる(親要素のスタイル継承しなくなる)
colorなどは親要素のスタイルを継承している。 たまにjsfiddle側の仕様で変になる時あるから素のHTMLで試してみたら inlineにblock入れるのはCSSのルールとして正常なの? CSSでどうやってinlineにblockを入れるっていうんだよw
こういう書き方でも想定してんのか?
.class1 {
display:inline;
.class2 {
display:block;
}
} ここでの質問するべき内容か迷ったのですが
linuxとwindowsからgoogleで確認したときlinuxのときだけ
置という字がくずれます
ブラウザのgoolgeは両方更新おり文字コードはutf-8で書いています
HTML/CSSのほうの原因を疑うべきでしょうか? >>349-350
要素のコンテンツモデルはHTML規定
>>343はレンダリングの話なので、CSS規定
違いを勉強し直せ >>354
つまり、崩れてなくて違う書体の置が表示されてたのか
設定がどこかで変わっているということか? >>343は意味不明じゃね?
HTML5では
display:inlineにした要素のことさしてインライン要素
display:blockにした要素のことをさしてブロック要素
と言ってるのだから
display:inlineの中にdisplay:blockを入れた時の挙動は
= インライン要素の中にブロック要素を入れた時の挙動は
インライン要素にブロック要素を入れた時の挙動と変わってないけどな
と当たり前のことを言ってる。
順番が前後するが、
HTML4の時の特定の種類の要素のことを
インライン要素、ブロック要素と呼ぶ概念はなくなっている
すべての要素はインラインにもブロックにも出来る。 そういうの社会では通用しないぞ
上司にもそう言うの?ww 社会だと、え?刺してほしかったの?ぐさぁって言われるからなw IEがスタンダードを受け入れれば、人類とインターネットの関係はもっと捗ると思うの っていうかもうaの中にdivも入れられるからな?いつの時代の話してんのおまえら >>357
> HTML5では
> display:inlineにした要素のことさしてインライン要素
> display:blockにした要素のことをさしてブロック要素
> と言ってるのだから
そんな定義ないぞ >>366
そりゃないよw
HTML5ではインライン要素やブロック要素というのは廃止された
ただ「インラインにした要素」のことをインライン要素と呼んでいる所があるってだけ
定義じゃなくてたんなる呼称 >>367
それはCSSを理解してない輩が勝手にそう呼んでるだけだろ >>367
それと「HTML5で言ってる」なんていうなよ inlineの中にblockが現れたら
そこでinline側のボックスは強制終了するんじゃなかったっけ? >>370
終了はせず、ブロックは2つの行ボックスに挟まれる
例えばインラインボックスに指定したボーダーは
ブロックで途切れるが、後続の行ボックスにまた現れる
>>357
厳密には、インライン要素というよりインラインボックス(要素が生成するボックスがインラインになる) >>371
そうね
そして、インラインボックスはCSSの用語なので、HTML4やHTML5を取り上げるのは間違い >>374
曖昧というより知った風な事いって俺スゲーしてるだけの白痴 >>371
ああそうかそうだった
pの中にブロックが現れるとそこで終わるのと勘違いしてた
ところで、↓この、空のpが作られるのって仕様でしたっけ?
http://jsfiddle.net/muf1vg7L/ HTML5は正しくないHTMLを与えられた時
どのように解釈するのかも決まってるんでしょ? >>332
です。勉強してきました
○結論 chromeのバグ
・inlineの中にblockを置くと、blockの前後でinline要素が分かれて匿名ブロックボックスに包含される
・opacityは継承されないが、子要素全体に及ぶ。
・更にposition:absoluteを付けた場合。opacityも付くが、前面のa要素が背景まで貫通する
この動作が合ってるかどうかは不明
http://jsfiddle.net/r4g8qm23/1/
・borderとかbackgroundを持ち出すとどんどんややこしくなってきたので、chromeのバグって事で。
○そもそもはと言うと、記述が間違っていたが、意図通りに動いていたのが始まり
そもそも論で言うと>>333さんが最も正しい。
aの中のimgに対してdisplay:block;margin:0 autoを設定し、
「a要素の親要素の中央」に来る事で問題ないと思ってしまった
※この動き自体は完全にcssの仕様通り
aをdisplay:blockにしてmargin:0 autoだけで済んでいた
○mozilla.orgについて
知識付けてから読むと、翻訳ミスも結構ありました。色々と修正しています。 >>339-340,344 サイト内容は合っています。ブロックレベル要素、インライン要素は無くなりました。英語版は信用できますが、日本語版は翻訳が普通に間違っていjます。
>>346 chromeが間違っています。継承では無く、スタイルが適用されなくなる、といったほうが正しいかも
>>349 CSS3にそのルールはありません。入れて良いかどうかはコンテンツカテゴリで決まります。CSS2時代は不明です
>>357,367 aかimg、i(アイコン)をインラインにする時に使いますね。インライン=display:inline。インライン要素と言われてもニュアンスは伝わります。ボックス要素というのは使わないです
>>376
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
解釈の順番はこんな感じ
・元html
<p>foo<div>bar</div>baz</p>
・pの中にdivは不可(フレージングコンテンツのみ)。pはdivの前で終了、p終了タグを一個追加
<p>foo</p><div>bar</div>baz</p>
・pの終了タグが最後に余っているからp開始タグを一個追加
<p>foo</p><div>bar</div>baz<p></p> >>379
> 英語版は信用できますが、日本語版は翻訳が普通に間違っています。
>>339-340にレスしてるけど、http://www.htmq.com/html5/007.shtmlにも英語版があるの?
少なくとも、>>339の引用文に間違いはないと思うけど、具体的にどこの翻訳が間違ってる? だーかーらー、HTML5ではインライン要素とか
ブロック要素はなくなりました。で終わりだろ。
馬鹿だけだよ。まだあるとか言ってるのは 人は見たいものしか見ない。
彼らは永遠になくなったインライン要素とブロック要素を追い求めるのだww >>381
「ブロックレベル要素」ね
彼らはdisplay:blockばかりに目が向いてるけど、table要素はdisplay:tableでHTML4.01ではブロックレベル要素だった
なので、「ブロックレベル要素(HTML4)=ブロックボックス(CSS)」は明らかに間違い >>379
> インライン=display:inline。インライン要素と言われてもニュアンスは伝わります。ボックス要素というのは使わないです
伝わる/伝わらないの問題ではなく、その表現をする人は大抵HTML/CSSのルールをごちゃまぜに覚えてる
<span style="display:inline"><span style="display:block">block</span></span>
「インライン要素の子にブロックレベル要素は持てないので、上のHTMLは文法違反です。」とドヤ顔でいいかねない >>380
書き直してる内に変になりました、すいません
英語版はmozillaの事です
日本語版はみんな好き勝手書いてるのでかなり注意した方がよいですね × 日本語版はみんな好き勝手書いてる
○ お前が好き勝手直さないのがいけない >>385
「みんな好き勝手書いてる」という具体的な部分を書けない時点であなたの情報が無価値なのでは
MDN日本語は完全に英語版と動機が取れてないので、古いバージョンの情報がそのまま残っている事はある
で、日本語訳の誤植は個人的にはあった気が記憶がないが、そんなに多いか?
どちらかというと、原文のMDN英語版でも仕様を明確に説明しきれてない事があるので、細かい記述まで気にするレベルならMDNを読むのを止めて仕様書を読んだ方が良い 言う必要はない。間違いが多いが真なら、
そのページも間違いがある >>390
偽なら「翻訳」には間違いがない事になる
何も言わなかったのと同等のゴミ情報 >>392
じゃあ、>>379の「日本語版は翻訳が普通に間違っています」はどういう意味? https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
> 使用法
> ブロックレベル要素は <body> 要素内にのみ現れます。
これは間違い
HTML4-01 Strictではbody要素直下にはブロックレベル要素しか置けない規定があったが、ブロックレベル要素は他の場所にも置けた
また、Traditionalを宣言すれば、body要素直下にインライン要素を置くことが出来た
では、翻訳ミスかといえばそうではなく、原文(英語)から元々、この記述だった
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
結論「MDNは英語/日本語ともに間違い。仕様書を読みましょう。」 > ブロックレベル要素は <body> 要素内にのみ現れます。
よくよく読むと、要素内だから<body>の子孫要素であっても良いのか
>>394は忘れてくれ あえていうなら、HTML5で追加されたarticle,main,nav...etc要素がブロックレベル要素に分類されているのが違和感あるな
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/sgml/dtd.html#block
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements
「although "block-level" is not technically defined for elements that are new in HTML5」と書いてはあるけど、このページだけ読む初心者には見分けがつかないので意味をなさない(実質、MDNのオレオレ定義だし)
こういう誤った分類が残っているから「article要素はブロックレベル要素だから...」と語る初心者が後を絶たない >>397
ごめん、レス番間違えたわ
>>396は>>393アテネ >>396,399
「どこが間違ってるの?」と何度聞いてもはぐらかしてばかりだね
「他のページ」のURLとか間違っている記述を聞いても答えないんだろうし、君の中では「MDN英語版が正しくて日本語版が正しい」のだろうね、」としかいえないわ 言葉足らずで誤解を広げる>>379が他人の質問によって後出し情報を追加していく様はJSスレのそれに近いな
「日本語勉強しろ」な人が多すぎでないか 延々と間違いを責め合うんじゃなく
みんなで勉強していけばいいじゃん
有意義なスレにしようぜブラザー供 >>398
>article要素はブロックレベル要素だから…
「 article要素はブラウザ環境では HTML UAスタイルシートでブロックレベルにされているから…」
の略記なんです、
という解釈もできなくはないので、まったく誤りというわけでもないがな bootstrap3 と 4
の普及率ってどのくらいなの?
大体の人がブラウザにキャッシュされてると考えていい? >>404
スタイルシートで指定するのはブロックレベルではない div>ul>liのような構造で
liをクリックしたら内包しているul(コンテナ)を閉じる
ということをcssだけでやるにはどうしたらいい?
JSで値を書き換えるのはできるんだけどcssだけでできないかなと >>408
inputを使う
css アコーディオン とかでぐぐると例が出てくる
https://saruwakakun.com/html-css/reference/accordion
そういやこういうcssだけでjsみたいに見せる技術ってなんか名前無いんかね detailやsummaryがedgeやieで使えないから
こういうめんどくさいことになってるのかねえ >>410-411
ありがとう
アコーデオンで調べてみます アコーディオンを実現するためにjs回避したところで他で使いたくなるんだから、そこまで凝らなきゃいけないケースってそんなにあるかなぁ
実装例としては面白いけども >>410
名前つけるほど、大層なことはしてない
疑似クラスで制御してるだけ ↓のコードで2カラムのリンク集合体的なものを作るとき、
.buttonの幅(それぞれ50%)やボタン同士のmarginは.listと.buttonどっちに持たせた方がいいの?
.button自身のデザインは完成してて、liの中いっぱいに広がるという条件で
<ul class="container">
<li class="list"><a class="button">link1</a>
<li class="list"><a class="button">link2</a>
<li class="list"><a class="button">link3</a>
....省略
<li class="list"><a class="button">link20</a>
</ul> >>416
http://jsfiddle.net/h49z7o6u/2/
考え方は、どこをクリック出来るようにすると使いやすいかを中心に考える
まずはaはliと同じサイズにする事が基本
すると、liにpaddingは付けられない、と言った等が見えてくる >>379
>>376だけど
遅くなりましたがありがとー
良いお年をー 年末まで殺気立つとかどんなつまらない人生送ってるの・・・ >>421
お礼言われるの楽しみにワクワクしてたのに散々待たされたんだぞ
その気持ちがお前にわかるのかよ >>423
>>376だけど
せめて文体似せるくらいはしようよw >>423
ってか>>379は俺なんだけど
嘘ばっかり付いてると朝鮮人と思われるよ
もうちょっとちゃんとしよう >>427
俺が>>376だけど違うよー
俺そんなに詳しくない >>426
>>379だけど
めんどくさいことにしかならないので、止めてくれ >>434
客で使ってるとこあったけどその時7.1だったぞ
変えられるはず >>435
ありがとう
連絡来てどうにかしてくれって言われたわ
さすがにwpも動かんとか死ぬと思った
まぁ来年やな、良い音塩! >>436
アルファメール…
事前に確認とって開発開始したのに
納品直前になってPHP4しか動かせないとか言われ、蔵の○塚の営業担当にぶち切れた記憶が蘇ったわ
結局4で動くようにデグレを強要されるハメに。
その当時ですらさすがに4はないだろ…と思ったもんだが…鯖によっては変えられないかもよ…
それ以来、大○の関わるサービスには近寄らないようにしてる >>437
・・・えw
新年早々ヤバイ案件かよ〜〜
転送で対処するかな、さすがにphp4はどうにもできんわ PHPのバージョンはなんでもいい
3とか4でも変わりない
そう、HTMLならね https://codepen.io/infologicmation/pen/KbZoqK
先輩方よろしくお願いします
ちなみにここで使われているMathJaxは見た目上の問題を分かりやすく示すために使われているだけであって、
MathJaxはなんの関係も無いです。 アルファメールはphp4
プラチナも4
プレミアが5.4と7.0(どっちもセキュリティサポート終了)
アルファメールは絶対に使うな >>445
ありがとうございます。
しかし、リスト表記時の「・」はどうしても残しておかなければなりません さすがにそれはその場しのぎすぎてちょっと実用に耐えないです li要素でflexプロパティを使用しても、li要素の点「・」が消えなければいいのですがね… うお、できたwww
すげー時間の無駄だったwww
spanとp両方に
display: list-item;
漬けてるから好きな方外してくれ
あと、(1)とか文字の位置は
text-indent: -100px;
で調節すればok
https://codepen.io/anon/pen/RExEdW >>450
ありがとうございます。
ベストではないですが、現状ではそれがベターなのでそれで使わさせて貰います 自分が考えついた物はベスト
人に教えてもらったいい物はベター
人に教えてもらった物はクソ
これがしったか初心者クオリティ ではベストではない点について言わせて貰いますと
>>450で見た目上、生成されている「・」はliの「・」ではなく、span.insert_stringに対して生成されたlist-itemによる「・」であって
これは本筋ではないと感じました。(HTML上の論理的な構造が変わっている)
僕の中でのベストとしては、HTML内の構造はそのままで、(javascriptで?)insert_stringを適切に移動”だけ”させて、>>450みたいにしたものだったのですが。 リストマーカーってあんまりそのまま使わなくなっちゃったなー 使うとしても一旦消してbeforeで中黒付けるかな
ブラウザでどう表示されるか分からんのは怖い >>458
俺もそれだなあ
list-style周りがあまり発展しないのは
やっぱ使う奴が少ないからなんだろうか >>459
だろうね
そもそもモバイル化に伴って、リスト自体が少なくなったと思う
ulやolはあんまり使わない。メニューぐらいかな?メニューだと絶対にlist-styleは使わない
あとは何かの手続き順序とか、ランキングの表でもあればolを使うかもしれない
とにかくlist-styleは使い勝手が悪い 画面に直接マッキーで点入れたいとこに打てばいんじゃね?
俺って天才かよ >>461
fixedやろ、それは考えてフフッってしてやめた
わざわざ言うもんじゃないんだ ブログで数学の証明を書いてますので箇条書きは使いまくりですね 隣接セレクタが効きません。なんでだめなんだ...?
// HTML ------------------------
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
// CSS ------------------------
.menu li + .menu li {
margin-top: 10px;
} >>466
それでいいのか...!有難う有難う感謝です Twitterウィジェットのtweetswindが使えなくなってしまったので、新しくfeedwindを使って表示させたいのですが、うまくできません
iframeタグでtweetswindを使っていたので、feedwindでiframe用のコードを取得してコピペしたのですが、元のページが文字化けしてしまいます。元のページはUTF-8です 答えてやりなよw
>>468
「iframe 文字コード」で検索すれば色々でてくる
文字コードは実物みないと解決策がわからん 質問です。
たまに画面がグチャってるサイトってありますけど、
こういうのは意図的に、ワザとこうなってるのですか?
http://www.flower-record.com
それとも特定の別ブラウザで見ると、綺麗にレイアウトしてるものなのですか?
自分だけこう見えるってこと?
なぜこうなるのか、意味が分りません >>471
IE11だとまともに見える(デザインセンスは酷いけど)
まぁ、あまり気にしなくていいと思うよ。知り合いなら教えてあげたほうが良いかも <thead>の子でthの代わりにtd使ってもいい? thead,tbody,tfootとth,tdの区別というか意味を理解できてないのかな
thead,tbody,tfootはテーブル全体のヘッダ、本文、フッタでth,tdは各項目のヘッダ、値だからそれによる制約はない こういう構造ってHTML的にOKですか?
二つのリンクはスタイルで間隔開けるんで、ユーザビリティは問題ないです
<p>
<a>Aへのリンク</a>
<a>Bへのリンク</a>
</p> フロントの自動化って何使ってる?
Gulp?webpack?npm script? >>476
そもそもどこに問題があるかもと思ったのか しつもんです。
あなたにとってhtmlってなんですか? flex-wrap:wrapで幅が決まってないアイテムが複数行になった時に
コンテナの右側がガタガタになるのを綺麗に見せるテクってありませんか?
こんなのです
https://jsfiddle.net/uwaoyqc6/ >>486
justify-content: space-between;
入れるとか flex-grow:1でいけました・・・
これ行ごとに効くんですね
知りませんでした ページ全体の<h1>より上にある<section>や<article>ってどういう扱いなの?
HTML5 Outlinerでは意図したアウトラインになるから、位置は関係なし? >>492
なってないよ
デフォのコードの下2行を入れ替えても結果同じ https://codepen.io/infologicmation/pen/KbZoqK
先日「連番リストの先頭文字の高さ位置を揃えたい」として質問したものです。
ここの方のアイデアを用いて実装をしていたのですが、問題が起きました。
上記サンプルで言う所の(iii)項目のリスト構造がおかしくなっています。
display : flex の効果が内側の方のリスト<ul>にも影響してしまっているようです。
親要素のflex の効果を、第1子要素(?)のみに適応させていたらよかったものが、第2子要素以降にも適応されたせいで
<ul>がブロック要素であることが解除されて、インライン要素になったことで、おかしくなったみたいです。 要するに、現在の問題は、
<ul>
<li style="display:flex;align-items:center;">test:
<ul>
<li>a</li>
</ul>
</li>
</ul>
こう書いた時に、内側の<ul>までflexの効果が効いて、内側の<ul>の"改行・字下げ"効果が消えてしまっていることです。 簡単に言うとこう言うことです
<ul>
<li style="display:flex;align-items:center;"><span style="display:list-item;text-indent:-40px;">A</span>←このAの表示位置はここでよいが、
<ul style="display:block;">
<li>ここの<ul>までflexが効いて欲しくない</li>
</ul>
</li>
</ul> 何かあっけないぐらいに自己解決できてしまいました
CSSで
display: inline-block;
text-indent: -70px;
text-align: center;
これだけで十分だったんですね https://codepen.io/infologicmation/pen/KbZoqK
やっぱりまだ問題が解決しませんでした。
(3)の「折り畳み要素」をクリックすると、要素が展開されて「ここがその中身」と表示されます
しかし、その時先頭文字である「(3)」の表示位置が勝手に移動されてしまいます。
原因は、details要素を「display:inline-block;」としているからです。
しかし、これを取り除いてしまうと、今度は、(details要素がブロック要素であるため)「(3)」と「折り畳み要素」の表示位置の関係がズレてしまいます。
二律背反の状況になってしまいました。
どうしたらいいですか? 何度もレスしてしまいましたが
details.det{
display:inline-block;
vertical-align: top;
}
のようにvertical-alignを追記するといけました。 HTML,CSSって複雑化していくほどに、「アッチが立てば、こっちが立たず」っていう状況の連鎖なんですね
Javaのオブジェクト指向やデザインパターンみたいに、HTML+CSSもそういうのってあるんですかね >>502
そもそもプログラムとそうでないものを同等に扱おう
って考えが間違ってんじゃねえか? もしかしてこのスレって、プログラムは一切知らずにHTML、CSSだけしか知らない奴っていんのかな 横に長いコードをインデント入れて整理してたら1ページ2000行を超えてしまったんですが
行数が多いほど読み込みに時間がかかるとか、そういう事ありますか? プログラマーみたいな底辺奴隷にだけはなりたくないな …むかつくがたしかに日本においては90%くらいは底辺奴隷に身をやつしていると認めざるを得ない… おれが小学生の時はそんなもんなかったからな
石を打ち欠いたり磨いたりしてたのはなんとなく覚えてる 一年坊は対局なんてはえーんだよって言われて
先輩に打ち欠いた碁石を砥石で研がされていたのはいい思い出 俺みたいなフロントもバックもやってる孤高のエンジニアからすれば
ものすごく次元の低い喧嘩だな >>512
処理内容やサーバの性能次第としか答えようがない >>523
HTML部分のファイルサイズはあまり関係がないという事ですか? >>522
お前の次元が低いからフロントもバックもやるんだろ
そんなもの土方にやらせる仕事
お前は他人を使う能力がないから自分が働かないと何もできない
本当に優れた人間は自分が何もしなくても他人が勝手に仕事をこなしてくれることだからな 自分より優れた人に雇われた事ないからわからん
すまん理解してあげられなくて >>525
2000行なら2000回\nが入るってことだ わからない人の質問にわかる人が答える
それだけのことなのに
なんで上だの下だのと順位をつけたがるのか >>512
改行1つに1バイト、スペースやタブ1つに1バイト
2000行なので改行で2KB、それプラススペース・タブ分が無駄に転送量増える
まあ気にすることないけど、気になるならgzipすればいい
ってか最近はgzipするのが当たり前になってきてるから、これを期にしてみれば
>>524
いいけどIEやEdgeでは工夫が必要
Flexboxでさくっといかない時に使ってる こういう疑問や不安て
こんだけネットが速くなってもやっぱ経験するんだな
なんかほっこりした >>530
現実世界で底辺だから、せめてネット上だけでも上に上がった気になりたい
そういう惨めな生物なのだ Viewのプレゼンテーションまでは裏方の仕事だから
末端のHTMLだけで全体の読み込みスピードに影響させる方が難しい
JSは最適化すべきだけどね スピード求めてたみた
htmlにscript要素でjs、style要素でcss書いたら爆速になった
切り分けるのが正義って言い出したのは誰だ と書いた瞬間に答えが出た
昔はそもそも回線速度が遅かったので、
個々のファイルを分けて読み込むロスは気にならなかったのだろう こんにちは。
PCのChromeでテキスト選択できないサイトがあったので、詳細設定でこのドメインのjavascriptを無効にして、さらにUser CSSというアドオンもインストールしたのですが、まだテキスト選択できません。
ソースを見たら本文は普通にHTML記述されているのですが、どのようにしたらテキスト選択できるようになるでしょうか?
ご教示お願いいたします。
http://nicomo.org/ <head>内でuser-select:noneされてるから
ユーザーCSSで値をautoに上書き 開発者ツールのコンソールに以下を打ち込んで出てきたテキストをコピー
jQuery("body").text() >>536
リクエスト数減らすのはわりと基本なきがするがなあ
90年台から変わらず >>536
> htmlにscript要素でjs、style要素でcss書いたら爆速になった
> 切り分けるのが正義って言い出したのは誰だ
えとな、今の上級層はな。
切り分けて作成して、ビルドツールを使って埋め込むんや
切り分けるのは今も正義なんだよ >>541
前からそうだったんですね、すいません
>>542
そうですよね
その辺りってFWでは標準で実装されているのでしょうか?
wordpressしか知らないのですが、標準テーマはjsもcssファイルもガッツリ分かれています
>>544
利用中のvalueserverは非対応とのことでした
残念です、使ってみたい >>546
確かにそうですね
速度や最適化は、何か良くない魔力がありますね 圧倒的大多数のサイトで、SNS関連のボタンって不要だよね
大手でなければ需要ないのに、そういうの固定されてる方がイラッとする バズる可能性もあるから、外すに外せないんだよ
俺はあれのおかげで当たったし、否定は出来ないな 多国籍軍に!
勝利をおさめるために!
今!
我々にできることを!
コーーーーーディンンング!!! 検索フォームのマークアップで下のみたいなコードを時々見るけど、
DL要素の使い方として正しいの?
<dl>
<dt>Search</dt>
<dd><input type="search"></dd>
</dl> SNSボタン外したい。外せば爆速。だけど外せない。 >>551
間違っている
dd inputに探したいものが100%入るなら正しいかもしれないが、
入らないので間違っている
>>552
bodyの終了直前にでも置いてみては?
少しは変わると思う >>553
type="search"は探したいキーワードを入れる場所だから合ってるんじゃね?
その文字列を探してるか探してないかはビジターの脳内での話だし >>550
なついなw
「食事は1日1食コーディングしながら食え」とか「病院往く暇あるならコーディングしろ」とかあったな A、B、C(文章)をインラインブロックで横並び、
レスポンシブで、横幅によって縦並びになるやうにしたい
内容が複数行になる場合、文字列を最終行で揃えたい
縦並びになった時、Cの下だけに余白1em分を入れたい(A、Bの下は余白なし)
なんかうまいこと実装可能?
A、B、Cのかたまりをいくつか並べたいんだけど、
横並びになってる時はABCと次のABCの間に余白入れたいんですじゃ
さっきから頑張ってるけど、複数行の要素が入るとCだけ最終行で揃わなかったりしてうまくいかない
無職のおっさんなんだけど、
時間があるからhtmlの勉強をしたい
ドットインストールやプロゲートでも
学習をする上で問題はないかな? >>556
出来る。が、今日は眠たいので明日
htmlはここにでも書いておいて
http://jsfiddle.net/
とりあえず、使うのはインラインブロックじゃなくflex こんなん当たり前にやってることだからちょっとググれば大量に出てくるのに >>561
めんどうだしわからないから正解書いといてくれると助かるんだが? ごちゃごちゃ言わずにとっとと教えろよ
このスレはどんな質問にも答えるんだろ >>565
じゃあ答えてやる、もとのソースがわからないから書いといてね←これも質問なんだからちゃんと答えろよ? >>556
Cではなく親ブロックの下に1emの余白を取ればいい >>569
おおおマジだ!なんで気づかなかったんだろう
サンクス
他の人たちもあざっした!
お仕事行ってたから上の何人かはワイじゃないやで 誰もお前だとか思ってねえよwww
自意識過剰だろwww >>570
本人証明するために次からid出しておけよな 肉体を失ったから自意識しかねえんじゃw
過剰なくらいでちょうどいいんやで id出さなければ、いくらでもやり直すことが出来るんやで preタグの先頭に空白が何個かあっても
<pre>_____文字列1
________文字列2
</per>
表示すると除去されてしまいます。
でも、途中にある空白(文字列2の前にある)は、除去されません。
そう言う仕様ですか? HTML に直接書いても、勝手に除去されない
たぶん、JavaScript か何かの、trim か何かで、
先頭・末尾の連続した空白類が、除去されているのだろう 半角スペースは一個にまとめられる
それこそperタグにでもなっているんじゃないか >>577
質の低い質問にはそれなりの回答しかつかない 実際、まともな回答してもスルーして、丸投げコードの回答が感謝されるだけ
最も、解決済でもスルーしているきらいがあるがな
(忘れたころにレスしてる奴は巡回中に思い出しただけ) 質問です
:hover{ ... }
というふうに書いた時に、最前面の要素にだけスタイルが適用されるようにする方法ってないんでしょうか?
これを書いただけだと、小さい要素にホバーしただけでその背景(親)のノードもすべて...が適用されてしまいます >>584
全称セレクタ状態だから、classなりidで適用範囲を制限しろ
(こんな質問ばっかかよ…) ええ疑似要素って要素書かなくても機能したの!?
ずっと知らなかったわ
:hover{
color: red !important;
}
確かにhoverで全部redになった
ってか疑似要素を単独で使う場面ってある? >>586
:hoverはどう見ても疑似クラスだろ
何で疑似要素になるんだ?
> ってか疑似要素を単独で使う場面ってある?
疑似クラスなら発想次第であるんじゃないのか
:checkedあたりは扱いやすそうだが 「適当にコードを書いてみたら、動きませんでした。基礎勉強? 何それ美味しいの?」な質問が多過ぎ
根本が分かってないから、「〜だと思うんですが」が大抵間違っていてgdgd >>587
すまん、疑似要素のコード書いてて混ざった
確かに:checkedは使えそう :hover{ ... }をa:hover{ ... }
と脳内変換して読んでてずっと意味がわからなかった
まさか質問が本当にそのままだなんて・・・怖い・・・ 中級者が偉そうにできるスレって少ないから
質問者も察してあげて HTML/CSSのチュートリアルサイトを一から読んだら? リファレンス出して終わる質問多いけど、出しても「難しくて分かりません」でスルーされるのが目に見えているという
地道な勉強が嫌いでてっとり早く済まそうとする人が多いよね >>593
勉強の仕方の勉強じゃね?
小中高で習うことだが >>585
いや適用範囲を制限したくはなくて、全要素のhover時のスタイルを指定したいんです。見たまんまです。
ただし、要素が重なってる時に最前面=最子孫要素だけに適用させたいんです
hoverだけの需要でしょうがそれを指定する方法はないんでしょうか >>600
条件は初めに全部書け
JavaScriptでやれ 俺でもマウントとれるレベルのやついないかなあ
↓
初級者質問スレ巡回
↓
お、これいけるな!
↓
こんなこともわからないのかよwwwちょっとは勉強しろよwww
毎日この繰り返しです ある程度レベルが上がるとマウントなんて取ろうと思わない
カブトムシに相撲でケンカ売らないだろう、それと同じ >>599
学校で教えてる勉強の仕方は主に
・雑多な情報から要点を見抜く
・データや原理を整理して限られた時間で覚える
・求められる解答を理解して過不足なく正確に答える
この3つ
俺らのお仕事に当てはめると
・無数の解説サイトから有用なものを見抜く
・日々増える言語、メソッド、アプリを空き時間で覚える
・書くべきコードを理解、エラーなくデプロイ、事故なくランニング
こんな感じ
もしくは
・客や営業の妄言から要点をエスパー
・ツールを駆使して情報を整理共有、打ち合わせ用に要点は記憶
・客の満足するサイトを作るが、予算以上には働かない >>600
>最前面=最子孫要素だけに
こういう指定方法は、有るかな?
条件が難しすぎる
それら全部に、特定のクラスを付ければ? >>600
ない
あと一番深い要素が最前面とは限らん リンゴ出してきて「ねぇ早くミカンにしてよ?え?できないのwww?レベル低ww」とか言ってる質問者だからなぁ スマホで縦長になるページの下の方にあるナビゲーションゾーンに
ページ内のどこからでも1タップで飛ばす仕組みを作りたいんだけど
何か良い方法ない? >>613
position: fixedなボタン表示しといてonclickでナビゲーションゾーンの要素にscrollIntoView()すれば? 飛ばすだけなら<a href="#navi">で十分じゃね scrollInToViewって
ホイホイお勧めできる程度には実装広まりました? >>616
93.45%
https://caniuse.com/#feat=scrollintoview
引数で簡単にトランジション時間設定できるしブラウザヒストリ変わらないしいいんじゃないかな すいません誰か教えてください。
ページ内リンクにジャンプするのではなくて、ページ内リンク部分のテキストを ボックスかなんかで表示するということはできないでしょうか。
例えば5ch掲示板のように >>1 にマウスをかざしたら>>1さんのテキストが表示されるみたいにしたいのです。
これはjsとかの領域になるのでしょうか。
マウスホバーとかツリービューとかでググりましたがいまいちわかりませんでした。ヒントワードだけでも教えてくださればありがたいです。 >>617
IEは11でもオプション使えないから騙されるなよ
あと時間は指定できないから騙されるなよ 対応してるっていっても機能のほとんどが制限されるから、そこまで使い道ないよ WEBデザイナーを副業にすれば月5万は稼げるとプログラミングスクールで言われたんだけどマジ? まじめに副業すれば、何やってもそれくらい稼げるだろ >>618
ツールチップと言う
けどこれモバイル対応できないから、あんまり頑張っても仕方ない部分ではある
>>623
営業努力次第でかなり上下する >>619
ありがとうございます!
>>625
ありがとうございます!
まさに求めていたものです。 下記のようなhtmlのページが何個もある場合で、
全てのhtmlのヘッダーやフッターをちょっと変更したい時に更新が大変なのですが
cssみたいに1つのヘッダーを読み込むみたいなことはできるのでしょうか?
■ ヘッダー (ここを更新したい)
□ 本文1
□ 本文2
■ フッター 質問です
CSSの大きさの単位でvhを使ったときの最大値を決めたいんですが
@mediaで切り分けるしかないですかね
幅・高さはmax-widthやmax-heightでいいんですが
その他のプロパティは >>627
サーバーサイド言語でやればよい
>>629
そゆこと
max-vhとかほしいよな >>630
やっぱそうかー
すべてのプロパティにmax-とmin-ほしいですねー >>627
phpで別ファイルを読み込む
htmlで別ファイルを読み込む方法もあるけど、避けたほうが良い。理由は忘れた
この際だしwordpressでも入れて見たらいいかもね >>627
htmlとcssのみだとできないんでないかな
俺はejsを使ってる あー
おすすめは絶対しないけど
iframeでできないこともないか? PHPはデフォでインストールされてるだろうからSmartyでも使えばいいんじゃね >>627
htmlからヘッダー部分切り出して別ファイル(header.htmlとか)にして、元あったとこ(index.htmlとか)は
<?php include 'header.html'; ?>
とする
そして .htaccess に
<FilesMatch "\.html$">
AddType application/x-httpd-php .html
</FilesMatch>
を追加する
これで実現できる SCSS でも、main.scss に、_a.scss など、各コンポーネントのパーシャルファイルを読み込む
HTML, JavaScript でも、フレームワークを使うと同じ。
各コンポーネント別に作って、index.html, bundle.js みたいなファイルに読み込む
各コンポーネントごと、別々に作って、後でまとめるようにする
>>618
スマホでは無理だけど、ツールチップみたいなイベントで、
jQuery などで、内容を取得するのかも? 画像遅延ロード系のスクリプト使う時、src属性書いてますか? 読み込み中orダミーの画像指定しないとaltに書いた文字列が丸見え 初歩的な質問ですがサイトを作る場合に
一から手打ちorDreamweaverで作るのか
どっかからコードを丸々コピーしてきて中身を入れ替えるのか
どっちが一般的なのでしょうか? >>645
個人で作るなら、今はwordpress等のCMSでテンプレート入れてサクサク作って終わり
コードなんて打たない
もうちょっとこだわりがあるならテンプレート自体を作る
業者の場合は色々分かれる >>646
えー
つまり自分ではデザインしない人の方が多いということ?
どっかでそれ数えてるもの? >>646
派遣コーダーの仕事としてはどうでしょうか?
会社によって違うかもしれませんが、コーダーの仕事と言えばデザイナーがデザインしたものをスライスで切ってDivに当てはめていくみたいのが未だに一般的でしょうか?
テンプレートとは枠組みの事ですか?
つまらない質問でスミマセン。 >>647
サイトの割合は以前どこかで見た
もう一回探してみたけど、ソース出てこなかった。許して
・テンプレートそのまま使ってる人が多い
・テンプレートを使ったサイトを量産している人が多い
のどちらかだろうなぁ、と考えていたのは覚えている
製作者に占める割合は分からない
これは個人を含めると計測は出来ないだろう
>>648
派遣先による
wordpressのテンプレートに画像ポンポン当てはめてハイ終わり、10万円、ってとこもあれば
一からデザイン細かく作って50〜100万円ってとこもある
俺がよくやるのは
・全体デザインをデザイナーと考える。テキストや画像の位置をざっくり
・使う画像はデザイナーが決める。よっぽど変だったら「それ何か変じゃね?」と言って作り直してもらう
・後はパーッとコーディングして終わり
ちなみにdivはもう殆ど使わないよ。section、dl、ulが多い >>649
ありがとうございます
わかりやすいです
それとやっぱりwordpressも覚えといた方が良さそうですね
しかしdivがもう古いとはショック… >>650
いやいや
新しいとか古いとかいう問題じゃねえよ
個人の意見に振り回されちゃいかんw >>650
> divがもう古い
Google「えっ?」
Amazon「えっ?」
Apple「えっ?」 >>650
divが古いとは言ってないんだが・・・
「セマンティック」とか言われてるんだけど、
単になんでもかんでもdivで囲むんじゃなく、
適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている
<ul>はさすがに使っていると思うけど、他にもヘッダーは<header>、グローバルメニューは<nav>などが推奨される
これにより、ちゃんとセマンティックを意識してコーディングしているサイトは検索結果に表示されやすくなる・・・
というはずだったんだけど、ぶっちゃけdivで全部書いても全然変わらんわ。ハハハ
まぁ人間が見た時に見やすい、チームの開発が楽になるという利点はあるので、使いこなせないとマズイ
>>652
googleは何で書いても関係ないからな
全部divと知った時は驚いたけど
amazonとappleはコンテンツが最強すぎる Googleは後方互換性重視で、新しい技術だけを使う事には拘ってないのでは
MSと同じ
Appleとは対照的 >>654
そんなレベルじゃない
数年前はリストすら
<div class="li">
としていた
セマンティックは全く考えてない、というか考える必要がない みなさん、セマンティックって言葉知ってますか?
ちゃんと意識しましょう!! ______
,;i|||||||||||||||||||||||||||||||ii;、 _/
/||||||||||||||||||||||||||||||||||||||ii;、 \
/ ̄ ̄\||||||||||||||||||||||||||||||||||||ii;゙ヽ, /
'" ̄ヽ ヽ!!|||||||||||||||| ||||||||||!!"ヘ < セマンティックageるよ
ヽ ゙!!!|||||||||||| |||||||!! iヽ── /
|||l ゙゙ヽ、ll,,‐''''"" | ヽ|||||||||セマンティックageるよ
|||l ____ ゙l __ \|||||||||
||!' /ヽ、 o゙>┴<"o /\ |'" ̄| ホントの勇気 見せてくれたら
\ / |ミミヽ──‐'"ノ≡- ゙'──''彡| |、 | |
 ̄| |ミミミ/" ̄ 、,,/|l ̄"'''ヽ彡|| |、/ / セマンティックageるよ
ヽ、l| |ミミミ| |、────フヽ |彡l| |/ /_
\/|l |ミミミ| \_/ ̄ ̄フ_/ |彡|l/  ̄/ セマンティックageるよ
\ ノ l|ミミミ| \二二、_/ |彡| フ
 ̄\ l|ミミミ|  ̄ ̄ ̄ |メ/ \トキメク胸に キラキラ光った
| \ ヽ\ミヽ  ̄ ̄"' |/ /
/ \ヽ、ヾ''''ヽ、_____// /_夢をageるよ
/ ヽ ゙ヽ─、──────'/|  ̄/
. / ゙\ \ / / \__
───'''" ̄ ̄ ゙゙̄ヽ、__,,/,-'''" ̄ ゙''─ そもそもデザインが先にあるから、そんな理想論言ってられないのが現実 >>653
>適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている
なんか15年くらい前が懐かしくなるなw >>661
本質的なことは昔から変わってないからな
基礎をわかってるやつが一番強い んで最近のグーグルはHTMLなんて大して重要視してないんじゃないか?
要素ぜんぶ<div>と<a>だけでも
<body>の中空っぽでJSで中身書き出すページでも
なんなら1枚画像びたーんって貼っただけのページでもちゃんと読んでくれるし SEOもセマンティック()も完璧なサイトが見てみたい >>665
すっごいマイナーなことについて書けばいいんだよ! >>665
SEO会社はさすがにちゃんとしてる
:https://www.plan-b.co.jp/
と思ったらdivにhref属性があるんだけど何だこれ? >>663
altも無い画像だけのサイトって検索結果に出てくる? メニューアイコンがアニメーションで
≡ → ×
+ → ×
になるサイト多すぎて見てて恥ずかしい >>651-653
もうあんまり使わないタグなのかと思いました
いまでも使ってますよね
dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか?
divで囲うような配置でないような >>671
マネすることしか出来ないんだなーって思う >>672
× マネ
○ 一般的
奇抜な物を使うとユーザーが使い方分からないんだよ
個人的には、ハンバーガーメニューですらまだ奇抜な内だと思う >>670
divはデザイン的に使わざるを得ない時に、最終的に使うってレベル
>dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか?
そう、今はモバイルが7割ぐらいのアクセスなので、モバイル中心に作る
divなんて基本的に使い所が無い
「モバイルファースト」とかで検索すると良い なんでulとdlはモバイル向けなの??
それこそセマンティックでもなんでもないじゃん >>676
モバイル向けなんて言ってない
単純に使う機会が多いってだけ
引用が多いサイトならblockquoteを多用することになるんじゃないか >>675
モバイルと関係なくね?
単に自分は要素少なくても問題のない簡素なデザインばかりしている、っつー話でしょ
別にそれが悪いとは言わんが divとハンバーガーが悪だと思い始めたら、ひとつ上のコーダーになれるんやでw >>680
あっはい、茶化すなら君が上に上がるためのコーダーの指標をどうぞ >>682
強いて言えば、<strong>愛</strong>っすかね おまえらがいくらがんばっても
結局はコンテンツの中身と被リンクだから 時々でいいからmarqueeの事も思い出してあげてください >>685
そうそう
フロントの要素やらなんやらは本当に意味がない
これ否定する奴は一回全部divでサイト作ってみれば良い >>668
文字化してインデックスしてくれるやつ、類似画像検索では引っかかるやつ、まったく読んでくれないやつ
それぞれあるみたい
試してみてるページそんなに多くないんで何をどうすればよいのかはわからんすまん >>688
divとspan、意味のなさならdivが包括しているので
>>689
前例があれば、ちょっと聞いてみたかったってだけだよ
実際にやることはほとんど無いと思うからね
すごく役に立ったので大丈夫、本当にありがとう divは汎用的なブロック要素って意味がある
存在する意味がないみたいな認識なら、勉強不足じゃないかなぁ htmlのサイズは極力小さくするよう努力した方がいいのでしょうか? >>693
とくには
大アクセスされるようになって
伝送料金を節約したい、とかそういう理由があるなら考えてもいいと思うけど まあでも、サイズが増える→移動中にクソ格安回線で見てる大量のザコ乞食の読み込み時間が延びる→離脱率少し上がる
だから大したことないとは言え確実に離脱率は上がる。 サーバーサイドで華麗に最適化した努力を
糞みたいなJSを埋め込んで邪魔をするフロント やっぱこのスレの奴らはダメだな
バカばっかりだ
俺が取り締まってやらないとな >>693
小さくするというより、見やすくすると良い
変にテクニカルにするのではなく、まとめたほうが見やすいところはまとめておけば良い 全板でワッチョイ強制導入らしい
アホ共が浮き彫りになって面白そうだwww それでたら面白いだろうな
阿鼻叫喚だろうけど、是非やってほしい translateZと言うのはZ方向に移動するそうですが、
Z方向に移動しても変化が確認出来ないのではないですか?
translateXやtranslateYなら動きが分るのですが。 >>704
absoluteで重ね合わせたときなどに、どの要素が一番前に来るかを調整できる
ほとんど使わんけどね >>704
そうでもない
言葉で説明するのも難しいけど
xyzとrotateの値を合わせて変えてみるとわかりやすいと思う
要はmatrixだ >>704
まず705は嘘だからスルーしてね
translateZは奥行きを変化させるんだけど視点がデフォルトのままだとそれ単体ではほぼわからない
translateZの違う要素をいくつか並べて、併せて perspective(500px) を入れてみて お前らろくに言葉で説明もできんのか・・・
>>704
(3次元空間の)Z軸の移動は
遠くのものは小さくなるという効果がある
>>705
CSSの重ね合わせは重なりの順番だけで
2次元空間なのでちょっと違う >>701
他の板に導入されたときは、導入前に立てられたスレは対象外だった
よって、おまえの醜態は晒されずに済むだろう >>708
凄いですね。
translateZの意味が分かりました。
ありがとうございました。 >>649
すみません、これは社内にテンプレートがいくつかあって
それを利用して作成しているという事ですか? いまだにfloatコーディングなんだけど
flexとgridどっち覚えたらいいですか?
このスレだとflex使ってる人が多いみたいだけど
gridの方が欠点があんまりないってのを他のサイトで見たもので... >>712
要するに作らないでテンプレ売りしてるだけの似非ってことだよ >>713
両方
別にfloatがいかんてこともないよ
適材適所だ
とんとfloat書かなくなったけど >>713
flex
gridは対応ブラウザが絶妙で怖い。会社のページには使わない方が良いと思う
スマホゲーのサイトならgridでもいいかもね つーかほんとに導入されるのかな
だとしたら嬉しいかもしれん >>715
>>716
ありがとう!
floatはまだ使っててもいい感じですね
しかしながら、flex、gridのお勉強も必要みたいなんで
ぼちぼちflexからやりたいと思います。
数年に一度コーディングの流れ変わるのなんとかなんないかしら=3 >>720
それは放置して貯めてるからだw
新しい機能やプロパティを
へ〜こういうのができるのね〜程度に
たまーに追ってれば大丈夫だよ floatはレスポンシブでめんどくさい
はっきり言って書いててアホらしくなる 絶対にPC使ってる人しか見ないようなサイトでも
レスポンシブデザインにしたほうが無難でしょうか? 上であったhtmlのサイズについて思ったけど
ソースに改行を入れないってのは少しでも効果あるのかな
brとかじゃなくソース自体の改行コード >>723
もちろんそっちの方が無難
慣れたらそもそもそんなに手間じゃない
横並びの要素をwidth100%にして縦並びに買えるだけ
迷う時間の方がもったいない >>724
ちゃちゃっと計算してみたらいい
文字コードUTF-8・改行コードLFで10,000行のHTMLを書いたとして
改行文字の量は
10,000B = 0.08Mb
ドコモが測った泥LTEの実行速度の中央値が190Mbpsだそうなので
https://www.nttdocomo.co.jp/support/area/effective_speed/
0.08 ÷ 190 ≒ 0.00042秒
改行コードがCR+LFだったとしても0.00084秒
気にするほどのもんでもなかろう AAって最近表示崩れまくるしPC以外だとCSSでどうにかしようとしても崩れる気がする
そこで画像化してサイトに並べようと思うんだけど画像だらけのページって
googleさんからどういう評価受けるんだろう? 途中で投稿してしまった
>>729
べつにどうってことない
インスタグラムのページとかだって普通にヒットするじゃろ? >>729
もうAAは限界かな
一行AAはともかく、複数行はもうスマホでガタガタだ 画像で見て初めて「えっAAってこう見えてるのが正常なの?」ってなるよね AA書体をウェブフォント化して
font-familyに当てても駄目かね? >>727
>>724がまともなやつならインデントも取ってるだろうしもっと膨らむぞ >>736
インデントも削ってみよう
10,000行で、平均4段のインデント(スペース4)があったとして
160,000B = 1.28Mb
0.96 ÷ 190 ≒ 0.00674秒
まあこれも誤差ですな 間違えた
1.28 ÷ 190 ≒ 0.00674秒 そういやipも
255.255.0.1
なら
ff.ff.0.1
で行けるんじゃねって思ったけどディレクトリあるからあかんな ルーティングからビューの出力が始まるまでの時間の方が圧倒的に長い訳で 昔は画像がスクロールするごとに読み込まれるjqなんとかを喜んで使ってたけど
今だと余計な機能なんですかね? >>743
そうでもない
特にモバイル利用が増えたんで
見られるかどうかわからん画面のはるか下方の画像をロードするのは
ユーザにとってもサーバ側にとっても、そんなにいいことない その辺はスマホブラウザが自動的にやってくれるようになったよ chromeだけだしまだexperimentalだろ 質問です
レンタルサーバーで独自SSL化するとアドレスがhttpsになると思うんだけど
独自SSL化した後にも外部からhttpのアドレスでも表示される?
他サイトみるとhttpのリンク踏んでもhttpsのサイトにしっかり表示されてるんだけど。 >>747
どうぞ
.htaccess に追記してください
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule> <div>
あ
</div>
たぶん、DOM に、改行・コメントなどの要素も入るだろ?
要素は「改行・あ・改行」
だから配信前に、ミニファイ必須! >>748
ありがとうございます。
これ追記しないでhttps化するとhttpのリンク踏んだ場合は表示されないのですか? マークアップ言語なのにソースの改行がレンダリングに影響するとか、そもそもの仕様がクソだろ >>752
まぁねぇ
htmlを大幅に改良したマークダウンってのがあるけど、もっと流行るかと思ったけどサッパリだ >>752
もともと英語圏のもんだからねえ
連続する改行とスペースは1つのスペースとみなすってのはわりと合理的なのかもしれん >>751
サーバーの設定による
403になる場合やそのままhttpで表示される場合やhttpsにリダイレクトされる(>>748をサーバー側でしてくれる)場合など videoタグのjsからの再生がviteo mutedにしないとできないらしんですが無理やり再生する方法ってないですか?
Firefoxでは動いてたのにChromeじゃ動かなくてびっくりしました それが出来ると
職場で急にエロ動画が!てことができちゃうので chromeは主にウザイ広告に対してかなり規制をかけるようになった
ってか最初から音出すのはやめてくれ〜 主だった広告CDNのドメインは全部127.0.0.1に振り向けちゃってるから
最近どんなうざい広告があるのかわかんなくなってきた… リンクの文字列に見せかけたやつとか、Googleのも酷いのあるで ありがとうございます!
↓↓のような3つのファイルがあって
1.[ _template.scss ] テンプレート
%template {
.main {
background: $BGColor;…
}
}
2.[ _theme-red.scss ] カラーテーマ
$BGColor: red;…
3.[ _theme-blue.scss ] カラーテーマ
$BGColor: blue;…
↓↓のようにcssを出力したいのですが
.theme-red {
.main {
background: red;…
}
}
.theme-blue {
.main {
background: blue;…
}
}
Sassの機能を使って実現できますでしょうか
目的は後にJSでclassを切り替えて全体の色を変えることなのですが… array
for
でできるんじゃね
知らんけど(鼻ほじ) >>764
どこの平行世界だよ
あぁお前一人しかいない世界かww SASS使えるとか使えないとかで喧嘩する流れやん!! 喧嘩じゃなくsass使用不可の案件が存在する時点で>>764は世間知らずなだけって思ったけどみんながみんな仕事でやってるわけではないんだよな趣味の人だっているもんな >>764
Stylusの人もPostCSSの人もいるんじゃ >>771
mixinで解決しました!ありがとうございます チームでの開発に支障なければ、個人の環境なんて何でもおkでしょ https://jsfiddle.net/p4h5o3gk/
このコードは、どのブラウザでも黄色が正方形、青の幅が10pxで見えてますか? >>776
「どのブラウザ」ってーとIE6やガラケーなども含まれる
まぁ9割ぐらいの人はその見え方で見えていると思うから、大きな問題はないと思う >>775
優しく答えるスレでイキってる無職さんw >>765
そのテンプレートをmixinにして
extends的に使うといいよ 今では海外では、SASS の使用率が100% だから、日本でも避けて通れない
>>765
>$BGColor: blue;…
変数を属性名にできるか?
普通は、変数は値に使うもの。
background: $BGColor
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
本当は、この本に書いてあるように、MindBEMding による、CSS の構造化が良い。
Block__Element--Modifier (BEM) >>782
var(--hoge)知らないの?wwwww >>782
この読点の打ち方は例のキチガイ
おまえ前にもここに来て発作起こしてたよな?早く病院もどったら >>782
>変数を属性名にできるか?
インターポレーションて知らんか?
変数はなんにでも使えるよー
$selector: '.foo .bar. .baz';
$property: 'background-color';
$value: '#ff0000';
#{$selector} {
#{$property}: $value;
}
こんな感じで
一部に使うことも出来るよー
$number: 1;
$prop: 'color';
.hoge-#{$number}{
background-#{$prop}: rgba(red, 0.5);
}
あと
>海外では、SASS の使用率が100% だから
盛るな盛るなw
海外意識しすぎ、大して変わんねーよ
どんな人外魔境だと思ってんだw ちょい間違えた
こう
$number: 1;
$prop: color;
.hoge-#{$number}{
background-#{$prop}: rgba(red, 0.5);
}
クォートいらんかった 単なるテンプレートじゃん。
sassはテンプレート機能も提供してますよって言ってるだけ。くだらない。
単なるテンプレートというのは、
$prop: corer;
.hoge-1 {
background-#{$prop}: rgba(red, 0.5);
}
こう書いたら、
単に置換して
.hoge-1 {
background-corer: rgba(red, 0.5);
}
こうなるんだろってこと。
background-corerのエラーを検出するのは別の機能だろ。
インテリジェンスの欠片もないくだらない機能。
やっぱ許容できるのはPostCSSくらいだな。 corerみたいなタイポはエディタ側のlintの方がいいよ colorとcorerは、エディタに任せっきりだとありえる間違いなんだろうか?
個人的には絶対に間違わないんだけど >>788はタイプミスじゃなくて、エラーを検知しないよって事でしょ
おまえらの理解力の無さが一気に露呈されたな >>765ですがこんな感じでとりあえず解決しました
皆さんありがとうございました
[_theme_black.scss]
@import "./color-template";
$MAIN_BACKGROUND: #202225;
$MAIN_BORDER: #2f3136;...
body.black {
@include template_main(
$MAIN_BACKGROUND,
$MAIN_BORDER,...
)...
}
[_color-template.scss]
@mixin template_main(
$MAIN_BACKGROUND: white,
$MAIN_BORDER: gray,...
) {
.main {
background: $MAIN_BACKGROUND;
border-color: $MAIN_BORDER;...
}...
} な、なんでエラー検知の話になってんの(´・ω・`)
変数がプロパティ名に使えるかどうかの話だった気が… >>797だと変数のスコープがグローバルになって
2つ目以降のテーマを作った時に競合してしまったので{}の中に入れました
[_theme_black.scss]
@import "./color-template";
body.black {
$MAIN_BACKGROUND: #202225;
$MAIN_BORDER: #2f3136;...
@include template_main(
$MAIN_BACKGROUND,
$MAIN_BORDER,...
)...
} stylus のが高機能なのにはやらないな…なんでだろ 一方sassって名前はcssの派生感ある
その内jade→pugみたいに名前変わるかもね >>801
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
この本では、_variables.scss に変数をまとめて定義して、
main.scss に、他のパーシャルファイルよりも前に読み込む
色違いは、MindBEMding では、Block__Element--Modifier (BEM) のModifier >>812
その本まちがいだらけなんでしょw宣伝しても逆効果だよww こんなに、コンポーネント毎に、SCSS ファイルを作って、構造化して本は滅多にない。
SCSS ファイルのフォルダ・ファイル数も、10ぐらいある
クラス名も、MindBEMding で、Block__Element--Modifier (BEM) の方式を使って、
名前が被らないようにしている
漏れは、こういうプロジェクトを構造化する、本を求めていた! BEMの命名規則自体は論理的にはとても美しいけど、文法で構造化されていないものを命名規則だけで補おうという手法だからツールの補助が得られないんだよね…
BEMセントリックな編集ツールがあったら欲しい?
もうあるのかなぁ >>815
本よりもこいつがキチガイ過ぎてマジウザいわ糖質丸出しじゃねーか BEMとか大げさすぎるんだよな
超大規模ウェブサイトでも作る場合のやつだろ
クラス名のルールはこれだけでいいよ
1. prefix-component ・・・ コンポーネント名
2. prefix-component-parts ・・・コンポーネント内のパーツ名
3. prefix-state-name ・・・ 必ず1. or 2.と組み合わせて使う
prefix-は省略可能。他のフレームワークなどと区別したいときに使用する https://i.imgur.com/jZIPe5A.jpg
このdivクラス名とかってつける法則というか決まりとかってあるんですか? ワードプレスのスタイル適用についてはまっています。
サイトの見出しが「AAAA」で<h1>タグで囲まれています。
こんな感じです。
<h1 class="site-title"><a href="https://know-how-tree.com/" rel="home">AAAA</a></h1>
記事の中のh1タグにのみスタイルを適用したいです。
適用したいのは、具体的には「BBB」だけです。
<h1>BBBB</h1>
Custom CSSに
h1
{
color:blue;
}
としたところ、「AAAA」にも適用されてしまっており困っています。
notを使って制御出来る様なのですがちょっと分かりません><。。。詳しい人教えてくださいm(_)m SCSSで変数を利用して
$PATH: "/root/sub";
@import $PATH+"/file.scss"
こんな事は出来ますか?
その結果、
@import "/root/sub/file.scss"
を実行したいのですがダメでした。 >>829
どんなやり方でも良いので
どうにか出来ませんかね? >>820
Block__Element--Modifier
BEM が、2つの_, - を使うのは、その中で、1つの_, - も使えるようにするため >>833
いちいち833 782とか書かなくても読点でわかるからさーキチガイ インターポレーションは、
>>785-786
に書いてある 現場で役立つ実践Sass(3)変数を使いこなす
https://blogs.adobe.com/japan/web-practical-sass-03-using-variables/
インターポレーション( #{} )を使って、@import する例が、ここに載っている
ひょっとしたら、ローカルファイルの書き方が違うのかな?
「sass import local file」で検索して! >>837
情報ありがとうございます。
url()なら上手く行くのですが
ローカルファイルはダメみたいですね。 普通、SASS のimport は、./, ../ で始まる、相対パス
@import "/root/sub/file.scss"
これは、/ で始まる絶対パスだから、そういう機能があるかどうか? >>839
ああ、別に相対バスでも良いのです。
やりたいのは変数を使ってパスを
指定したいだけなのですが。
ローカルファイルでは無理そうですね。 url()とfile:///で絶対パスで参照できないかな >>828
あらかじめ可変部と固定部の文字列くっつけてからimportでもダメですか? >>843
具体的にどんなふうに書けば良いですか? なんだ、偉そうにしてるくせにsassって大したことないんですね。 大したことないってどういう事?
sass使うと大幅な工数削減になるんだけど でも無理なんですよね?
出来たらここの工数も削減できたのになぁ…あーあ 単純に相対パスにすればいいだけでは?
どういう理由で工数削減できないのか書いて Sassが回る前にnodeで外から置き換えちゃえば? SCSSでパスをどうにかするって考えたことなかった 大野みうはなぜ販売しているノウハウで自分のサイトを上位表示させないのですか? ゲームなんてさ、
頂点計算
面計算
基本シェーディング計算
複数の複雑なライティング計算
複雑な各種シェーダー計算
階層アニメーション
アニメーションブレンディング
スキンウエイト
マッピング計算
各ゲームAI
コリジョン計算
物理演算
ラグドール計算
各種判定処理
他にも多くの計算があり、なおかつ上記計算はフィールドやたくさんのキャラクター、膨大なエフェクトにも適用され
最終的に複数の画面エフェクト系、zバッファを使った画像の重ね合わせ、
オクルージョン計算や鏡面反射など重めの処理も入っている
ゲームではこれらを60分の1フレームで計算できるのに、たかだかhtmlごときのレンダリングに何で重くなることがあるんだよ?
ブラウザエンジン作ってる連中は無能だろ >>853
ゲームは汎用プラットフォームじゃなくていくらでも最適化やチューニングができるからそら速くできるよ
規格を守って互換性にも配慮しなきゃいけないブラウザとは束縛する条件が違いすぎる ゲームの処理速度の向上はGPUの進化のお陰
ブラウザの処理はまずはテキスト処理だからCPU中心
計算量だけで比較すな ブラウザは通信も最適化できない
ゲームと違って自前のサーバばかりじゃないからな 相対パス指定なら理解できる。
普通は、プロジェクトフォルダ以下になるから
でも、絶対パス指定だと、プロジェクトフォルダ外を指定する可能性もあるから、やっかい
そりゃ、相対パスでも、
../../../
みたいに、ドンドン上へ遡っていけば、プロジェクトフォルダ外になってしまうけど >>854-856はぜんぶワイのレスなのだけど、
ゲームの技術推し派もブラウザ擁護派も、ツッコミや補足をおくれよ
10年くらい現場離れてるから最先端事情に疎いんだわ >>853
cssアニメーションも普通に60fps出るでしょ cssの重なりについて教えてください
tdの背景が赤でその上にピンクの星を背景に重ねたいですがうまくいきません
親要素{
background:red;
position:relative;
}
親要素:before{
content:"★";
color:pink;
position:absolute;
z-index:1;
}
親要素の背景の赤→ピンクの★→親要素の文字という順番で重ねたいのですがどうすればいいでしょうか?
z-index:-1にするとbefore:が表示されません(´;ω;`) >>858
ここの連中はhtmlごときにヒーヒー言ってるレベルだからゲーム技術聞いてもまったくわからんのだよ
>>853のあげた技術のほとんどを理解できてないし言葉すら知らないカスしかいないから 試してないけど
親要素 {
background: red;
position: relative;
z-index: 1;
}
親要素:before {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
z-index: 0;
}
親要素:after {
content: "★";
position: absolute;
top: 0;
left: 0;
color: pink;
z-index: 0;
} >>858
言うてもウェブは基本的には20年前から変わらず
スクリプト言語でシングルスレッド
部分的な進歩はあるんだけど
なので普通のゲームのようなプログラムと比較すること自体が
あんまりコンピュータのことわかってないんじゃないかな?
って感じはする Webの技術ってほんとたいしたことないよな
Googleがいくら頑張ってもゲームレベルのようにPCの性能を最大限活かせる超高度な技術は一切ない >>865
さすがに韓国人呼ばわりは酷い
プログラム覚えたての中学生なんだからそこまで言ってやるな >>867
おい無能
>>853の一つでも理解してプログラミングしたことあるのか? その内httpに代わるステートフルなプロトコルができて移行とかするんかね
こんだけ普及してると厳しいか? >>873
あぁごめん>>853については使った事ないわ
学生ならゲームプログラミングはマジでやめといた方がいいぞ
労働量に対して給料が安すぎる
趣味でフリゲ作ってるぐらいなら別にいいけどね 適当ぶっこいて悪態ついて訂正ツッコミで答えを得るのが回答者の気分は置いといて最速の質問手段だそうだが、この手法一般的になんて言われてるの? >>876
2chでも大昔からあるね
名前は聞いたことがない わかってないなー
時代はマルチプラットフォームなWebTechなんだよ
アプリでよくね?じゃなくてWebでよくね?の時代になりつつある
乗り遅れちゃだめよ >>875
はい
なにが「もう」なのかはわからんが >>882
それをいうならPWAでしょ
ionicフレームワークを使えばAngularベースで
Webページ、PWA、Androidネイティブアプリ、iOSネイティブアプリの開発ができる
同じ言語、同じソースで開発できて細かくUIの装飾が設定できて融通が利くWebTechがこれからは重宝されるよ >>883
すまん、PWAだった
ionic知らなかったわ、これすげぇな >>883
React Nativeよりマシなの? ReactNativeはFacebook、Skype、Discord、Pinterest、Instagram、Uberに採用されてる実績があるからな 別にどれかひとつを選ばにゃならんわけでもなし
片っ端から試してみりゃいいじゃない
お金がかかるわけでもねえし reactnativeはwebと関係ないが。webviewすら使われてない。
知ったかする前に検索しろよ。
react ってついてるからって引っ張られてんじゃねーぞ >>889
は?
iPhone、Androidのネイティブアプリ生成するんだから関係あるだろ ionicフレームワークってゲームも作れますか?
あんまり向いてない? >>890
webと関係ないってんだが。スレタイ読めるか?幼稚園児。 スレ違いどころか板違いだわ。
大方本当にwebview使ったハイブリッドフレームワークと勘違いしててそれを指摘されて恥ずかしくなって誤魔化してるんだろう。
ミジメw ReactNativeはWebkitのJavaScriptエンジンを採用しているからハイブリッドフレームワークと一緒に話題に上がってきてもおかしくない ReactNativeのコードをブラウザ上で動かせるReactNativeDOMって技術もあるしwebとの繋がりは強いよ 緑の●の中に白色でチェック✔が入った文字をアイコンのように描きたいので、こんな
ふうにしました。
<span style="color:white; border-radius: 8px; border: 1px solid black; background-color: green;">✔</span>
いちおうアイコンぽく表示出来たのですが、縦長の楕円になります。
これをまんまるにして本物のアイコンぽくしたいのですが、どうやればよいでしょうか?
1文字を横に引き延ばすなどは出来ますか?
width設定で広がるかなあと思ったのですが出来ませんでした。 widthとheightを同じ値に指定して
border-radius: 50%;指定で丸くなる 文字の引き伸ばしは文字の要素べつにして
transform: scale( 1.2 , 1 );みたいにすればいいと思う >>898
>>899
>>900
>>901
ありがとうございました。物凄いテクニックが
あるんですね。感心しました。 >>901
pxでカッチリあわせてもズレやがるブラウザがいる 右向き三角を作るときってさ
指南サイトだとwidthとheightが0のボックスにborderの3辺をtransparentにするってのばっかりなんだけど
content:"▲"をtransform:rotateで横にするのってなんか問題あるの? >>908
テキストにするとそれが読み上げ対象外、つまり
area-hidden=”true”
を付けなきゃならんかったり、
各ブラウザで▲がどういう風に表示されるかを考えなきゃならんかったりで色々めんどい
どっちにしろ要素が必要なら、borderだけで済む方が楽 どれ、この板では書けるかな?
実体参照: ▶
コピペ: ▶ >>910
俺も最近これ使うこと多いわー
pugとsassのテンプレで変数化してる >>6
htmlも、bodyも省略してるけど、
なんの害があるの? colとかrowとか使って画像を横並びにしたんですが、画像が1枚だけでかいんですが何で整え
るべきですか?
スマホでも崩れないようにしたいです。 >>915
よーく目を凝らしてもう一度>>6をみてください
心の目をしかと見開いて
百害あって一利なし(ドヤァ
と書いてありますね?
そうつまりこれは、百害あって云々と言いたかっただけなのであって
実際の害の有無とは関係ないし、なんなら言葉自体に意味もないのです >>917
ありがとうございます。
害がないなら、タイプミスのも含めてソースコードは短い方がいいですよね。 >>917
これこそ意味のないレスだな
>>918
そんなところタイプミスするならもう辞めろ >そんなところタイプミスするならもう辞めろ
笑ったw
確かにそれは言える タイプミスも「含めて」と言ったまで。
そんなミスはしないが、
納品するときソースが短いとキレイに見えるだろ? 蔵による
「閉じタグが無いからちゃんとつけろ」等、無駄なクレームに発展する恐れがある
それなら最初から付けておいた方が良い
・・・って思ったら>>917で出てるじゃん
まぁこの辺の線引が自分で出来ないなら、変なことはできるだけ避けたほうが無難だよ、としか言えない tbody「ほんとに?僕のことも省略しない?」
thead「どうせ、最初のヘッダ行のスタイルのために私を使うだけなんでしょ!」 ソースが短いとキレイに見えるとかwww
やべえ笑い過ぎて腹痛いwwwww 蔵「おっ、このページいつもよりキレイに見えるな!ソース短くなったのかな?」 ソースを短くして綺麗に見えるんじゃなく、
ソースが冗長だと汚く見えるだけ
テクニカルに短くしても印象は変わらない
>>923
すいません
>>924
labelは使うよ >>922
終了タグがないとクレームをつけてきた蔵はいないが、
勝手に古いホームページビルダーか何かで弄って、XHTMLにされたことはある。 >>925
あまりムキになって反論するものではないが、
マークアップを推敲や校正するときって、
文章のほうに中心で、タグは関係ない人のほうが多い。
行間が、
</p>
<p>
ってなってるより
<p>
だけのほうが読みやすい。
マークアップは最小文字数のほうが読む人に優しい。
だからidやclassもできるだけ振らず、不要なdivも減らすようにしている。
bodyがあるのに、div id=”container”なんて読み難くなるだけ。
余談だが、色の指定はblackとか、darkredとかの色名で指定している。
プロしか分からない数字の羅列を美しいと思う人は少ないだろう。 >>929
なんか20年前にタイムスリップした気分 >>922
> 「閉じタグが無いからちゃんとつけろ」等、無駄なクレームに発展する恐れがある
> それなら最初から付けておいた方が良い
不要な閉じタグを入れるなってクレームが来ることもあるよ
どっちもどっち >>929
プロしかわからない数字の羅列w
そもそもおまえ素人じゃんwww そんなん自分の客見てりゃわかるんじゃね?
俺は終了タグが不要だって指摘されたことはないなあ
伝送量減らすため色々削ってってお願いされたことは一度あったけど >>929
>色の指定はblackとか、darkredとかの色名で指定している。
コードのためにサイトの品質落とすとか、最悪すぎるわ・・・ $color_blue1: #0000cc; // ヘッダのバック等で使っている一番濃い青
$color_blue2: #003699; // スタンダードな濃さの青
$color_blue4: #C0D9E0; // 背景に使うかなり薄い青
:
みたいなのをSASSの変数集に作っておいて
使うときに「あれ?どれだっけ?」ってなっちゃうことがよくある… なんかこんなのあったよvscode拡張機能だけど
ttps://marketplace.visualstudio.com/items?itemName=Nkzq.sass-variables-helper $blue-base: blue;
$blue-darkest: darken($blue-base: blue, 10%);
$blue-darker: darken($blue-base: blue, 5%);
$blue-lighter: lighten($blue-base, 5%);
$blue-lightest: lighten($blue-base, 10%); なんか変なことなってた
$blue-base: blue;
$blue-darkest: darken($blue-blue, 10%);
$blue-darker: darken($blue-blue, 5%);
$blue-lighter: lighten($blue-base, 5%);
$blue-lightest: lighten($blue-base, 10%); $blue-base: blue;
$blue-darkest-of-the-darkests: darken($blue-blue, 30%);
$blue-second-darkest: darken($blue-blue, 25%);
$blue-third-darkest: darken($blue-blue, 20%);
$blue-darkest: darken($blue-blue, 15%);
$blue-much-darker: darken($blue-blue, 10%);
$blue-darker: darken($blue-blue, 5%);
$blue-lighter: lighten($blue-base, 5%);
$blue-much-lighter: lighten($blue-base, 10%);
$blue-lightest: lighten($blue-base, 15%);
$blue-third-lightest: lighten($blue-base, 20%);
$blue-second-lightest: lighten($blue-base, 25%);
$blue-lightest-of-the-lightests: lighten($blue-base, 30%);
いくらでも増やせるから問題ない。 darkest-of-the-darkestsってかっけえな ちなみにモアベターというのは恥ずかしい和製英語。
正しくはマッチベター。 Numbersで表を作りhtmlで保存をしてウェブページに貼り付けると同じページに異なる表を2つ貼り付けると1つ目の表の色が崩れてしまいます。解決策ありますか?
上の表はヘッダーを青で他は色指定してないですが2つ目の表(下)を貼ると上の表が崩れてしまいます。
https://i.imgur.com/rJ4jqPQ.jpg <br/>って表記を思い出した
これって今も使ってるの? >>959
入りきらないならjsfiddleとか使ってよばか あー
htmlタグごと2つ連ねてるのか
それが原因だろうね 可能ならnumbersで2つの表並べてからhtmlで保存することをおすすめする >>962
無知ですみません、詳しくお願いします。HTMLソースのどこかを修正すれば治る問題ですか?
それとも書き出し自体が間違ってますか? >>960
xmlだと<br />になる
html5でも使えるけど使う理由はない >>939
たぶん君ほど微妙な色加減に頼ったデザインはしていない。 >>936
プロって何だ?
コーディングで料金とってる人って意味なら、オレもプロだが?
入稿してきた記者にも色がの想像がつくように色名で指定している。
プロコーダーと、簡単なマークアップだけの記者と、クラと、
総合的にみて、バランスのいいところでルール作りをするのが仕事だと思う。 >>964
書き出すまえに2つ並べて書き出せるなら
そうしたほうがいい ID:rmflsQHA
こいつの日本語が不安定で草
朝鮮人かな >>966
まぁそのアフリカ人みたいな配色で蔵が納得してるならいいんじゃね?
俺だったら気持ち悪くて仕方ないけど >>966
いや、やっぱりダメだ
俺の目に入る可能性があるんだからお前はもうちょっとデザインセンス磨いてくれ
クソダササイト作って金もらえればそれでいいって、プロ意識の欠片もない。コジキと変わらん >>969
具体的な反論をしてほしい。
わたしが朝鮮人かどうかなど関係ない。
むしろレッテル貼りこそ日本人離れしている。 ttps://www.koyasan.or.jp/
このサイト開いた時の「高野山」ってどういう手法を使ってるんですか? >>970
君はたぶん立派なウェブデザイナーなんだろうけど、
ユーザーのモニタなんてそこまでシビアに調整されていない。 >>971
だったらこの5ちゃんのサイト見てみろ。
気持ち悪くならないか? >>975
日本最高ランクのPV数を誇るサイトと
お前クソサイトを比べるな
中身も歴史も違いすぎるんだよ
どれだけ烏滸がましいんだ >>976
おまえはデザインのことを言ってるのか、
アクセスのことを言ってるのか?
喧嘩するつもりでここにいるわけじゃないが、
程度の低い反論はやめてほしい。 >>967
プロってなんだっておまえがプロって言い出したんだろ?
そもそも入稿時に記者がCSSみるんかよww
そういうの強迫観念って言うんですよ読点さん >>981
乙。こ、これはユーザーの視線移動なんだから変なかんちがいしないでよね! >>978
このpathはどうやって作るんですか? SCSSで閉じ括弧が足りないんですが、どこの行か教えてくれるツールありませんか(´;ω;`) >>993
コンパイラがどのへんでエラってるか吐くでしょ
あとテキストエディタもカッコの対応くらいは >>994
コンパイラはkoala使ってて昔から指してる行が見当違いで…
テキストエディタも今Node.jsのパスが直せなくて使えない状態… テキストエディタが使えないなら
問題の箇所が分かっても直せないような気がする 仕方ないので自力で直しました(´;ω;`)
最後時間があったからlinter入れてみたけど使い方が分からなかった
node.jsも使えるようにしたから月曜からは大丈夫…
お返事ありがとう >>995
先に環境治せwそれはさて置き、そうなったらもう、昔ながらのデバッグ方法でいこう
コード半分削ってコンパイルを繰り返して
エラー消えたときに削ったところが問題箇所だ おおなんだ解決したのか
よかた
これにこりたら、次から閉じカッコは先に書くように(`・ω・´) 環境直してる暇があるなら手を動かせって職場で…
人が作っためちゃくちゃなSCSSだったから焦ってた
1000なら安心して寝る このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 52日 19時間 39分 30秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。