HTML/CSS のどんな質問にも優しく答えるスレ 32
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html じゃあそっちで好きなだけscssの話ししてろ。絡んでくるな。 ■回答はSass/Scssを前提としないこと
CSSでの回答とし、要望があった場合のみSass/Scssでも可 趣味で個人サイトを運営している者です
CSSの、@importについてなのですが、
(1)
ネット上で、
「読み込み速度が低下するので使わない方がいい」
という記事を見かけます
しかし私の体感では、
読み込み速度にそこまで大きな差はないような気がするので、
どのように理解すればいいのか、戸惑っています
単純に「速度が低下する」ということではなく、より具体的に、
例えば
・閲覧環境（ブラウザ・媒体等）によっては大きな遅延が発生する
・商用サイトでは影響が大きい
など、
どのような問題があるのか、
また、個人で運営するサイトでも考慮すべき問題なのか、
教えていただきたいです
(2)
「@importの弊害」と言われる物について
読み込み速度の低下以外に、
何か別の問題がありましたら、教えていただきたいです 「読み込み速度が低下するので使わない方がいい」のソースは？
そりゃ厳密にいえばＣＳＳをロードしてその中を解読してimportがあったらもう１回別のファイルをリクエストにいくし
import先と元で同じ要素の記述があったらオーバーライドでパーズにも無駄が生じるし
「しないよりは遅くなる」は正しいけど
50msecが100msecになるとかその程度の話
importしてページアクセスしてみて自分で問題を感じなければ無視していい
ただガラケーとか細い回線つかってるスマホとかに対しては
速度よりも容量的な意味でＣＳＳの無駄をなくす配慮は多少あってもいいかもね
まあ馬鹿でかいjQueryとか動画ロードさせるサイトであふれてるしすずめの涙だとおもうけど >>13
ソースはいずれも個人サイトと思われるので、
具体的なURLをさらすことは控えたいと思いますが、
「@import 速度」などで検索した場合に、
検索結果の上位に表示されるようなサイトです
自分で問題を感じなければ大丈夫とのことで、安心しました
容量についてはまったく気配りができていませんでした
大きめの画像に比べればCSSファイルの方がずっと軽量なので、
おそらくガラケー等でも大きな障害にならないと思いますが、
意識して見てみたいと思います
また、import元と先とで記述が衝突しないよう、注意したいと思います
回答ありがとうございました >>13
その辺にプラスして、@importでネックになるのはファイル数に応じてHTTPリクエストが増えることだわな
毎回ハンドシェクからやる、サーバの負荷も増える、クライアントでもファイル待ちの遅延がある、あんまりいいことがない
昔は複数に分けて書いたjsファイルも、最後には１つにマージしてからサーバに置いてたもんだけど、今は違うのかな？ webフォント使う時代に気にするほどのことじゃないな 逆に考えるんだ。
モバイルで遅いので簡単に速くしたい、こういうとき、@importは解消し、日本語Webフォントはやめる。どうしても使いたいならせめてサブセット化 見通しが悪くなるから、HTMLから普通に2個呼んだ方がいい
というのは見かける >>15
> 昔は複数に分けて書いたjsファイルも、最後には１つにマージしてからサーバに置いてたもんだけど、今は違うのかな？
今はそれをsassでやるよ
sassで@importを使うと、そのファイルをマージしてくれる
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる
https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/
更にsassはファイルを結合するだけじゃなく、空白改行などを削って
サイズを小さくしてくれたりする あ、jsファイルのマージの話じゃないからねｗ
CSSファイルのマージの話。 基本的にcssの問題点を解決するものだから、
cssでできないことがあったらsassに手を出すのが良い
文法は互換性があって、すべてのcssはsassとしても使える >それが解決策
この人なんでこんなにずれてるの？
話にならないレベルだね
荒らしが目的なんだろな フォントの英文名の調べ方ってどうやるんですか？
Windows10の「フォント」から調べても
Yu Gothic UI Semilight
とかやたら長く書いてあって、どこからどこまでか分かりません
結局ネットで検索して書いてます >>28
でも
Yu Gothic UI Semilight
と記述すると逆にちゃんと表示されません
Yu Gothic UI
とすると正しく表示されますが。
なので正式名称とは・・？ってなります はいまた土日のsassキチ登場ですね。
毎週毎週ご苦労様ですがそろそろお薬の時間じゃないですか？ >>29
' でくくって
'Yu Gothic UI Semilight'
で、どう？ input type=textで表示されるコンポーネントの、
一般的な、web以外でも通用する名称は何なんでしょう？
とりあえずテキストフォームと呼んでいますが
textareaもテキストフォームに含まれてそうで、あまりぴったりきません HTMLとCSS初心者に使わせるなら
ATOMとSublime Textどっちいがいいかな 使いこなせてるが質問者も使ってるとは限らないから
それが当たり前のように持ち出す輩がうっとうしいから
sassを目の敵にしてるのではなくてsassを前提にしてる輩が目の敵 愉快犯でやってるんだから相手するだけ無駄
ガチでSCSS推しのつもりなら完全に逆効果 scssってならまだわかるけど今さらsassってw プロジェクトの名前がSassなんだよ。
実際に使ってる文法はscssが主流 htmlタグで文字のフォントを変えたいんですが、いわゆる新聞書体？の様なフォントにするには何と指定したら良いですか？ セリフとサンセリフの違いをいつもわすれる
なんかいい覚え方ないかな 覚え方というかそのまま訳すと
セリフ＝飾り
サンセリフ＝ノン飾り＝飾りなし
意味がわかれば思い出しやすいかと >>34
windows apiだとtextbox sans-serifの方がserifよりも後に出てきたということは分かるので
旧来の筆の書体を再現した書体→serif
印刷に最適化した新しい書体→sans-serif >>52,54
おお、なるほど
これなら忘れなさそう sass絶対許さないマンは
なにがそんなにお気に召さないのか…
十数年前にいたcss絶対許さないマンみたいだ スレ違いだからだ。
縄文式土器のスレに弥生式土器の宣伝に来るな。 >>58
許さないマンだけど別にsassOKスレなら喜んでsassの話するよ
「ここはsass無しのスレ」だからな？
どうしてもsass絶対書くマンだとしてもsassで回答したのでこっちへって誘導してくれるなら問題ない
現状単に荒らしにきてるだけじゃん 沢山の回答ありがとうございます
「テキストエリア」と差別化できているので、
「テキストフィールド」が一番よさそうだなと思いました
ありがとうございました sass大好きなんだけど、みんなscss形式で書くからsassのインデント派な自分は肩身が狭い
hamlみたいにすっきり書けるの所がいいのに >>62
なんだかんだでもう数年もすればsasｓが主流になってるだろう flexboxで、flexアイテムにmarginを設定しても
flexコンテナのpaddingや、
他のflexアイテムのmarginと相殺されません
アイテムの並びが固定されている場合は、
スタイル指定を調整することでうまく等間隔に配置できますが
並びがレスポンシブに変わる場合にはそれはできません
コンテナとアイテムの間、アイテムとアイテムの間に
等しくマージンを設定したい場合はどうしたらいいのでしょうか？ 一方にのみ設定してみたり、
擬似クラスを使ってみるとか？
コードがあれば分かりやすいかも >>66
てことは主流でないもので回答してる輩がいるわけか >>67
並びがレスポンシブに変わる場合、ってのがよくわからんが
marginは上下と左右で違うことはＯＫ？ 要はスマホサイズ時にボックスが縦並びになる時に
意図したようなmarginサイズになって並ばないってことでしょ ある要素を浮かせて特定の場所に表示させるのってどうすんでしたっけ
position:absolute
と
float; left
かなんかだったとおもうのですが
できません >>74
前者であってる
それと一緒にleft、right、top、bottomで座標を決める
その要素から親要素を辿っていって
最初にpositionがstatic以外の要素が座標の基準になる
そのような要素がなかったら<body>が基準になる >>75
例えばJSで75のコメントの要素を浮かせてスレ上部に移動させるとするとどうすればいいですか?
前試しにやったらできたのですが。。。
elm = document.getElementById("75")
elm.setAttribute("style", "position:absolute; top:100; left100")
をコンソールで実行しても移動しないのです left の:が抜けてますが脱字です。無視して下さい。 >>76
それは書き方がおかしい
var elem = document.getElementById('75');
elem.style.position = 'absolute';
elem.style.left = '300px';
これでこんな感じにズレる
https://i.imgur.com/WsW5mcZ.jpg >>76
top、leftは単位が必要
100px、100%、100emなど >>67
そもそもmargin設定したかったらflexbox使う必要なくない？
> * を inline-block にして margin つければいいんじゃないの
flex 使うからには space-around か between で任せたいから使うんでしょ <html style="font-famiry:書体;">
とか？ >>81
font-family: serif;
見た目を変えるのはHTMLの仕事ではないので
CSSでやろう >>82
>>85
ありがとうございます試してみます。
全体のフォントをそうしたいのではなく一フレーズだけ変えたいのでhtmlかなと思ったのですがど素人なものですみません。 >>86
それもCSSでやるのだよ
書体を変えたい要素のスタイルをCSSで書く >>86
そういうのはspanのclass指定でいいじゃね？ 回答ありがとうございました
皆様のレスを読んで、根本的にmarginの相殺に関して誤解していたと気づきました
相殺するのは縦marginだけで、しかも縦marginが全て相殺するわげではないのですね
どうしたかについてですが
Mastering Wrapping of Flex Items : Creating gutters between items
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
ここを見ると、アイテムやコンテナの間に自由にマージンを設定するには
現状ではラッパーを使うしかないようです
場合によってはコンテナのpaddingとアイテムのmarginだけでも可能ですが
コンテナ-アイテム間の幅と、コンテナ-コンテナの間の幅を変えるなどしたい場合は
ラッパーを使うしかないようです
見た目のためだけのHTML要素を使うのはなるべくなら避けたいですが、
今の時点では仕方ないですね
row-gapとcolumn-gapというのが将来Flexboxにも追加されるそうなので、
それが実装されれば解決するのかもしれません
ありがとうございました ×コンテナ-アイテム間の幅と、コンテナ-コンテナの間の幅
○コンテナ-アイテム間の幅と、アイテム-アイテムの間の幅
でした >>78
>>79
ああ、単位か
ちょくちょく忘れる
ありがとうございました。 >>87
う～ん面倒…と思ってしまいますがそれが基本中の基本ですよね
css苦手意識が強くて極力弄りたくないと思ってましたがそれじゃダメですね、がんばりますありがとうございます
>>88
そういう答えが欲しかったんです！
でもcssがんばってみますありがとうございます <table cellpadding="10">のようにテーブル内にあるセル全部の余白をcssで設定するには
どうすればいいんですか？
<table style="padding:10px">だとテーブルの外枠だけしか余白が設定されないので >>93
border-collapse:separate;
border-spacing: お好み値;
marginみたいに縦横書けるよ >>94
それセル間のスペースだったで
やりたいのはセル内にスペースをつけたいってこと
<td style="padding10px;">だとそのセルだけにしかスペースが適用されないけど
それをテーブル内にあるセル全体に適用したいんです >>95
<td style="padding10px;">を全部のセルに書く
またはcssで
td {padding10px;} emは、親要素のフォントサイズが基準になると、教則本などには書いています
フォントサイズの指定にこの単位を使った場合は、その通りだと思いますが
この単位をwidthなどに使った場合、
親要素のフォントサイズではなく自要素のフォントサイズが基準になっているように思います
たとえば
#parent {
font-size: 13px;
}
#child {
font-size: 30px;
width: 10em;
}
のようにすると、#parentのfont-sizeを変えても#childの幅は変わりませんが
#childのfont-sizeを変えると#childの幅も変わります
emが親要素基準になるのはフォントサイズ指定に使った場合だけなのでしょうか？ 「プロとして恥ずかしくない 新・CSSデザインの大原則」には
font-sizeは親要素基準、それ以外は自要素基準と書いてありました
このことに触れてもいない本とかオンライン学習とか、結構多くないですか？ あと参考書は出版時期のそれ以前のものが基準だからね remがいい場合もあるし、emがいい場合もありますよね
それにemはかなり以前（CSS2.1あるいはもっと前）からあって、
その時から性格も変わってないと思いますが…。
ともあれ、買ってはいたもののあまり読んでいなかった
「プロとして恥ずかしくない 新・CSSデザインの大原則」が
読んでみると本質に迫っている非常にいい本だと気づいたのは副産物でした それだけ内容が薄い、詳しくないってこと
だから良本や良サイトと呼ばれるものは、何万もある本、サイトの中でほんの一握りもない >>99
そんなことはないよー
cascade（とinherit）についてうやむやなままにしてる人が多いだけだよー >>98
>親要素基準になるのはフォントサイズ指定に使った場合だけ
そのとおり。
仕様にもそう書かれている
継承されるから、何でも親基準であるかのように誤解しやすいだけ Cascading Style Sheetなんだから
あれこれ覚える前に
まず継承についてしっかり知らないといかんですな 表形式のデータを
スプレッドシートにコピペすると
各セルに自動的に分かれる場合と別れない場合がありますが
あれはどういう場合に各セルに分かれるのでしょうか?
↓の形式のデータなら出来るのかと思ったけど
libre office calcなら自動的にセルごとに分かれるのですが
google spreadsheetだと1つのセルにまとまって表示されてしまいます。
<table><tbody><tr><td>1</td><td>2018/3/22</td><td>13:28:49</td><td>7:28:50</td><td>17323</td><td>5529</td></tr><tr> >>110のテーブルデータは例として冒頭部分をコピペしたものです 古い時代でも省略可能だから書かない人多かったと思うけど
自分は<thead>と<tbody>書く派だな
CSSやJSのために >>110です
<br>いれれば行は自動でぶんかつしてくれるようになりましたが
列が自動で分割されてくれません･･･
誰かよろしくお願いします。 たしかJSでtdを追加すると自動でtbodyが追加されて構造が勝手に変えられる記憶があったので
tbodyはつけるようにしてます
cellだったかもしれないけど >>115
innerHTML で追加した場合じゃないか？（パースされるときに自動で追加される）
appendChild などで自動で追加されることはないはず thead,tbodyは通常省略するけど、jsで使う時は付けてるな
例えばAjaxで検索して結果を一覧テーブル更新みたいな時はtheadはそのままでtbodyを空にしてtrで入れていくのでtbodyがあった方が楽だから content:"";
という空のcontentはどういう意味で書いてるんでしょうか？ >>118
そのままだけど、なにも書くことがないって意味だよ
アイコンとかそうすることが多いな俺は >>119
空ならなくてもいいと思うのですがわざわざ書く理由は特にないんですか？
例えば
li:before {
content: "";
display: block;
}
は
li:before {
display: block;
}
と同じということでしょうか >>120
違うよ
試してみ
後者は表示されんじゃろ >>120
「空文字」と「存在しない(プログラムではnullと言います)」は違うのです。
前者のcontentは空文字、後者のcontentは存在しない。
contentが存在しない要素は消える。
なので後者はbefore自体が消える。 ということは後者は
たとえli:beforeと記述しても意味がないってことに？ >>121
>>122
ありがとうございます。
今やってみてようやく分かりました おかしな話だというのはわかっているのですが、
要素をfloat:leftした上で再度中央寄せする方法ってないでしょうか？
jqueryで追加した要素とその下の要素が重なってしまうのを
display: block + float: leftで回避しているのですが、
なんとか中央寄せしたいのです。 キャプって画像あげるか
コード晒してもらわんと正確に何がしたいか分からんけど >>126
display:flex;あとは調べろ flex-flow: row
margin:auto >>126
もうfloatは旧世代のものになりつつあるのでこれを期にflexを勉強してみては？ いや、floatでって質問だろｗ
なんでfloatなんか使ってるかわからんけどfloat 使う理由があるのかもしれんし
そもそもなにがしたいのかわからん状態だから思いもよらない理由があるんじゃないか
理由聞いた上でそれflex使えよってなるかもだけどｗ なにがしたいかわからんのにflexが解とは言えないぞ すいません。
動的に追加した要素と元々その下にあった中央寄せしている要素について以下のサイトのような現象が起きていて、
https://ja.stackoverflow.com/questions/33814/html%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%A8%E6%96%87%E5%AD%97%E3%81%8C%E9%87%8D%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86
提示されている解決策のうち、
display: block + float: left
を適用すれば重なること自体は解決できたのでfloat:leftを使用していました。
みなさんが教えてくださった情報を元に、調べて直してみます。
ありがとうございました。 重なるのをfloatで回避ってのがよくわからないなー
ちなみに重なってるのはfloatが悪いんじゃなくmarginをimgやspanにつけてるから
span(inline要素)には上下marginやpaddingがきかない(ベースライン規準で位置を変化させない)
spanにスタイルつけるときは文字修飾や文字サイズ分の背景をつけるときだけにして
レイアウトの調整は外側にコンテナブロックを作ってそれにつけるのがコーディングマナーだと思う
なのでimgをそのままおくのもよろしくない
外側にdivを作ってその中にimgをおくのがコーディング的にはきれい
あとはdivどうしをどうレイアウトするかはflexなりfloatなりを使えばいいと思う とりあえず解決したのでご報告しておきます
結論から言うと要素の間でclearfixすると要素が重ならなくなり
謎の解決方法？のfloat:leftも使う必要がなくなり再度中央寄せする必要がなくなりました
最初からサンプルを乗せればよかったのですが…すいません。
元々：Prev Nextの真上の6やajaxをクリックするとPrev Nextが重なってしまっていた
http://pilotfarm.uh-oh.jp/gridder/demo/demo.html
floatでなんとかしていたもの：
http://pilotfarm.uh-oh.jp/gridder/demo/demo-float.html
修正後：
http://pilotfarm.uh-oh.jp/gridder/demo/demo-fix.html
大変お騒がせしてすいませんでした。 >>134
spanにIDで属性付けるってとこで？なんだが
こういう風なデザインの場合はflexでやるのがスマートで良いと思う
これを期にflexを導入してみては？ 起こっている現象が同じというだけで
そこのサイトの質問者と同じ条件をしているわけではないです
136ではったURLのソースを見てもらうとわかるかと思います(Gridder.jsのdemoほとんどそのままですが)
混乱させてすいません
何にせよflex勉強してみます <div class="parent">
親の中身
<div class="child">この中身</div>
</div>
の親はブラウザ幅最大上下左右中央ぞろえを
parentは
position: relative;
width:100%;
childは
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
で、対応したんですがIEのみtranslateで移動した分？の余白が右に出来ます
overflow:hiddenを使わずに対処できるでしょうか？ なんどやってもうまくいかなくて
もうええわ！って、次の日にやったら
ちゃんとできてる現象に名前をつけたい ・リフレッシュ
・気持ちの切り換え
・発想の転換
・落ち着く
お好きなのをどうぞ
まあ強いて言えば「明日の俺はすごい」かな 何度やってもうまくいかない！もうええわ！
って時はリフレッシュすればなんとかなるって俺は知ってるい！
よし少し休もう…
…っは！朝！？
って現象はなんていうの？ IEはもう対象から外しても問題ないと思う
今WEBをPCデスクトップで閲覧してるのは全体の10パーセントくらいだから IEユーザーは広告よく踏んでくれるから
無駄とは思えないな
これで子供4人養ってるのに 全体の～みたいな統計持ち出すと
こいつ大雑把だ！って言われない？
代理店とか客の広報とかとか
自サイトを解析して無視できるほど少ないかどうか判断すべきだと思う まあクライアントがIE対応しろと言ってくるか
個人的にずっとIEをフォローしたいとこはしとけばいいんじゃね？としか 未だにIE6なんか使ってるやつおらんやろってバカにしてたけど
フロッピー使ってるPC見て戦慄した そもそもIE6なんてXP時代の産物だから今の時代にそんな環境で
オンラインするようなのを数に入れる必要はないと思う >>157
独自開発のシステムとか開発終わったソフトの関係上古いPCつかう企業はあるよ
でもさすがにネットするのはそこそこ新しい機体だろ
そもそもフロッピー使うようなPCじゃアナログモデムとかで今のネット回線つかえんだろ 古いPC使うのはオンラインでブラウザ使うとは別問題だしな Flashも今年で締め出しで動かなくなる流れだそうだし時代は移り変わってるなあ いまだにIE使ってる奴いるよ。
アクセスの多いサイト運営してるんだが、ブラウザ別の表示を見ると大昔のゲーム機とかのブラウザからのアクセスがあったりして笑える。 セガなんてだっせーよな。プレステの方がかっけーよな そういや任天堂DSでもブラウザあったよなｗ
あれ確かOperaベースだったと思うが解析だとなんて表示されるんだ？
3DSはACCESSだったな 客の社長の嫁さんが
「うちのテレビのインターネットで見れない」と言っている
ってのが一番きつかった
8年くらい前 >>161
それがそうでもないとこけっこうあるんだわ
さすがにFDDは付いてても使ってはいないようだが リスト表示で
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
これの左インデントを狭くしたい場合
<ul style="margin-left:-○○px">というようにマイナスを指定してやるしか
方法はないんですか？ >>169
そういうバカを顧客として見るかだなｗ
顕微鏡で見ないとわからんようなものまでいちいち関わるのはリソースのムダ paddingでもいいし
list-style:noneにして・を文章にいれるなりbeforeにつけるなりしてtext-indentしてもいいし
absoluteでleftを指定してもいい
ただmarginがいちばん自然だと思うけど逆にそれじゃなにがいけないの？ >>171
それがそうも言ってられないことけっこうあるんだわ >>170
デフォルトのスタイルのことだったら、ノー
開発ツールで何のどこにmarginやパディングが指定されてるのか観てみるといいよー >>170
リストでも使用用途によって答え変わるかも
こういう質問の場合はlist-styleを使うのか使わないのかを実装方法も明記してほしい
普通はmarginで調整だがこういうのはclass指定でやろう flex使っても結局marginがある要素の左右づめはマイナスmargin必要ですよね？ >>177
betweenと空要素の方が若干楽な気がする
運用も含めて考えると >>178
？
marginけしたらmarginのある左右づめじゃなくなるよね？
>>179
質問が曖昧でした
両端の要素には左右margin0になるようにする場合です(左端の要素はleftmargin0,右端の要素はrightmargin0)
要素自体の左(右)詰めは空要素でできています。 >>180
まだ曖昧だ
カラム数が固定なのか変動なのか
固定なら右マージンだけにして
nth-child(カラム数n)だけ右マージン0にするのが定石だと思う
変動だったらどのflex-itemが左右端に来ているかどうか判定できんから
flex-itemのマージンではなく、betweenで空けるしかなかろう もう1つのスレが過疎っていたのでここで質問させていただきます
自分はホームページを作り始めてから間もないのですが、
一応トップページだけは公開出来たのですが、第二以降のディレクトリのアップロードの仕方が分かりません。
例えば、http://aaaa.netというトップページがあったとして、
その下層にhttp://aaaa.net/xxxxやhttp://aaaa.net/xxxxxx、xxxxxxxx等と言ったカテゴリがあるじゃないですか。
それの作り方、と言うかアップロードの仕方がどんなに調べても分からないので教えていただけるとありがたいです。
因みにアップロードにはFFFTPを利用しています。 >>182
FFFTPの左ペインに表示されるファイルを
右ペインにドラッグしてアップロードするように
フォルダをドラッグしてアップロードすればいいよ >>182
その1
アップロードしたいフォルダを右クリック
メニューが開くので「アップロード」をクリック
その2
アップロードしたいフォルダを左クリック
上にアイコンがいっぱい並んでいる中の「↑」をクリック >>181
flex-itemのwidthをcalc((100% / n) -10px)とすることで(nはカラム数)両端marginなしでできました 変わった計算だけど
OKならまあそれはそれでよかった >>183-184
ありがとうございます、アップロードの仕方は分かりました
ただ、第二以降のディレクトリの作り方がよく分かりません。
第二以降のディレクトリの拡張子は好きな文字の羅列の後にhtmlを付けてメモ帳で保存すれば良いのですか？ >>187
パソコン自体が初心者なのかな？
フォルダ作って、その中で好きな名前.htmlってすればいいんだよ
URLの
http://example.com/hoge/fuga/hage.html
hoge/ や fuga/ のスラッシュはフォルダって意味
Windowsだとバックスラッシュ（￥マーク）に相当するもの
上のURLだと
ドキュメントルート
├ hoge/
├ fuga/
├ hage.html
ってなる >>188
今ようやく理解しました！ありがとうございました！ リキッドではなくなる
というかリキッドだと狭くなった時に見づらくなるといいたいのではなかろうか
それを打開するためのレスポンシブですな >>190
レスポンシブはブレイクポイントでカラム数変えるので問題ないです 変なところで改行されてしまったので
white-space: nowrap
を入れたら改行がなくなりました
ですが改行されたのはホワイトスペースの入ったテキストではなく
日本語なのです
日本語もホワイトスペースと判断されることがあるのでしょうか？ >>194
改行とは何かというのを理解したほうが良いぞ
本の小説とか読んだこと有るなら思い出すといい。
まずHTMLというのはもともと英語圏で作られたもので
英語圏の文化で成り立ってるということだ
その英語の小説。どこで改行されてると思う？
単語の区切りのスペースだ。単語の途中で改行されることは基本的にない。
また単語の間のスペースはいくつ有っても一つと同じ扱いだろうってのは想像がつくだろう
一方日本語はどうか？ 英語と違って単語の区切りにスペースは存在しない
そして日本語の小説は単語の途中であっても改行されているはずだ
つまりデフォルトでは以下のような違いがあるということだ
英語圏
・単語の途中で改行されない
・各単語はスペースで区切られ、必要な場合にスペースの位置で改行される
日本語
・単語の途中で改行される。
・各単語を区切るスペースはない
・（ただし意図的にスペースを入れた場合は、単語の区切りとみなされ必要な場合に改行される）
じゃあwhite-spaceとは何か？ これを改行するかしないか決めるためのものとか
考えてるから理解できない。white-spaceという言葉の意味を考えろ。
ホワイトスペース、空白。つまり英語圏の単語の間にある、空白のことだ
white-spaceとはこの空白をどう制御するか
white-spaceの初期値のノーマルは、英語の小説と同じような感じの設定
nowrapは、各単語の区切りの空白で改行しないためのもの
preは、preserving space algorithm（空白をそのまま残すアルゴリズム）の略だ >>195
> その英語の小説。どこで改行されてると思う？
> 単語の区切りのスペースだ。単語の途中で改行されることは基本的にない。
嘘つけ音節の切れ目にハイフン挿入して単語途中で改行されとるやんけ！
これが基本じゃなく応用だとでも？ さて日本語の場合はどうなるか？
日本語は基本的に各単語の間にスペースは存在しない。
つまりだ、white-spaceは関係ないということだ
（もちろん日本語であっても間にスペースを入れればそこで改行されることは有る）
日本語が改行されている時、それは存在しないwhite-spaceで改行されているのではなく
単語の途中で改行されているということだ。
日本語は単語の途中で改行しても良い。日本語とはそういうものだ。小説もそうなってるはずだ。
white-spaceは関係ない。じゃあ何が関係するのかと言うと
単語の途中で改行するかどうかを制御するための
word-wrap (overflow-wrap) と word-break だ なお、スペースで改行すると言ったが、
正確にはスペースの種類による。
改行の対象とならないスペースも存在し
(non-breaking space) がそれだ
スペースと言ってもいろんなスペースが有るのだ どうせCSSのhyphensプロパティもしらないんだろう？
さっさと消えろ ん？この間違いCSS以前の問題だよね？ｗ
そんなに恥ずかしかったのかな？
ではリクエストにお応えしてもう一回ｗ
>>195
> その英語の小説。どこで改行されてると思う？
> 単語の区切りのスペースだ。単語の途中で改行されることは基本的にない。
嘘つけ音節の切れ目にハイフン挿入して単語途中で改行されとるやんけ！
これが基本じゃなく応用だとでも？ >>196
長い単語が行末とかにきた時にやるんだよハイフンで改行するやーつ
そのために<br>がある
段落と改行については、日本語はルールが全く違うんで
そんなに厳密に考えてもしゃーないんで適当でいいんだよ
ただし、wovnみたいな翻訳サービス使う時には
わりと影響でかいんで少し気を使った方がいいかも >>203
> これが基本じゃなく応用だとでも？
おまえは知らないようだが、普通に応用だが？
ハイフンはそもそも使わない
（単語そのものにハイフンが含まれているものは除く）
ハイフンは印刷する際にどうしても単語の途中で
改行しないとバランスが悪くなってしまう時に入れる、
強制改行マークだ。
基本は使わず、最後の手段として使うもの。
これが応用じゃないとでも？英文章の常識ですよ？ｗ
知らないなら少しは調べてから反論してくださいね。 お前らスレタイの「HTML/CSS のどんな質問にも優しく答える」の理念がぶっ飛んでるぞｗ >>206
これ好みの問題じゃん。
音節でハイフン入れて改行されることがあるって中学で習ったよね。
中学英語が応用…？ｗ 中学で「ハイフンで改行」とか習わんだろｗ ウソも大概にしろ >>207
仕方ないね。ここは「必ず」が抜け落ちたスレだから。
↓こっちは「必ず」が含まれてる
HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.net/test/read.cgi/hp/1519547237/ >>210
スレタイの日本語おかしいな。
英語どころか日本語も怪しい奴ばかりｗｗｗｗ >>197
ありがとうございます
word-break: keep-all;
としても
white-space: nowrap;
と同様、改行を防げました
こっちの方が適当な指定なのでしょうね
white-space: nowrap;
は、本来の動作というより、偶然そうなってるだけの気がしますし。
ありがとうございました >>213
結果うまくいって満足したならまあ、それでいいんだけど
その解釈はちと間違っているから
時間があるなら調べておくといいよ
word-breakeとwhite-spaceの違いを
例を挙げて比較してくれてるサイトあるから >>210
そこはキチの巣窟で「も」ぬけの空だけどねwwwｷﾞｬﾊﾊ 基本的に日本国内で閲覧するサイトではテキストはブロック単位で
改行は製作側が意図した指定の箇所で改行させるかな 好きにbr入れさせればいい。
邪魔になったらcssでそこのbrまるっと指定してdisplay noneすればいいだけ。 white-space: preline 使えば br も不要。 >>207
sassで荒らしてた奴が、今度は改行ネタで荒らしてるんだろ sass君はテンプレをsassOKに書き換えたパクりスレ立てて乗っ取り企てたのに誰もついて来ず過疎っちゃったからショックで寝込んでるよｗ
↓
HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.net/test/read.cgi/hp/1519547237/ 質問というより、助言が欲しいのだけど、
画像ファイルのサイズ指定について
imgタグにcssでサイズ（width、height）を指定していると、
レイアウトが早く確定できるということで、そうしている
でも今の時代じゃ、高速回線が当たり前だから、
そんなことを気にする必要はない気もして、
サイズ指定を続けるか、やめるか、迷ってる
サイズ指定はレイアウトを確定させる以外にも、
こんないいことがあるよ、というような話とか、
今の流行の話とか、あれば聞かせてもらえるとうれしい
ちなみに、HTMLとCSSしか使えません
Javaスクリプトもさっぱりです
まして、サーバー側でレイアウトを構成して出力するとか、
そういう高度なことはできないです >>224
回線が早くてもわりとガコンガコンするよ
必ずscrollTopが0の状態でロードされるとも限らんしね ガコンガコンしないように
画像以外のブロックの大きさに気を使うと良いかも知れんですな >>224
指定してないとハッシュでアクセスした時やページの途中でリロードした時にずれる
特にハッシュの時は画像が読み込まれる前に位置が確定するので全然違う位置になってユーザーの不満に繋がる
どんなにくっそ速い回線でも
・ドキュメントロード
・ハッシュ処理
・画像読み込み
の順である以上変わりはない
どうしても指定したくなければ>>227の言う通り画像を内包する要素にサイズ指定するとかだね 画像リサイズ機能つきのcmsやcdn使うとき処理をきっちりかっちり最適に自動化できる >>224
画像のサイズは sass(scss) + Compassで取得できるよ
https://stackoverflow.com/questions/9731327/scss-getting-image-dimensions
こんな感じらしい
.folder {
background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
height: image-height("icons/home/folder.png", 'image/png');
width: image-width("icons/home/folder.png", 'image/png');
}
ただ個人的にCompassはあまり好きではない。
せっかくlibsassになってRuby依存から脱却されたのに
CompassでRuby依存してしまう。遅いだろうし。
Compassじゃなくてその他のビルドツールとか使ったほうが良いかもね HTMLとCSSしか使えませんとわざわざ書いておいたのに使えない回答者ですね。
他の方お願いします。 じゃせっかくだからreactでstyled componentにしますわ。
さようならcss Reactで作られたウェブサイトってどんなのがある？
開発元のFacebookは除く、そして実用じゃなくて
勉強のために作ってみました。みたいなサイトも除く え？ HTML/CSS の代わりに使えるものなんでしょう？ >>234
ちゃんと数えてないけど
この一年で自分が担当した案件の中では4件くらいあった気がする
晒せなくて残念だけど 縦横のサイズを指定しないと
高速回線でもガコンガコンしたり、
レイアウトが崩れたまま確定しちゃったりするんだな
サイズ指定はちゃんと役に立ってるんだな
これまでずっと無駄なことをやっていたのかな、
と疑い始めてた所だったので、安心した
これからも指定することにする
相談して良かった
ありがとう >>238
Reactだけど？
>>233が
> じゃせっかくだからreactでstyled componentにしますわ。
> さようならcss
って書いてるじゃん？
CSSからもさよならできるみたい？
Reactってのを使ったらウェブサイト制作が
もっと楽になるのかなと 初心者が作るような規模じゃ楽にならないよ。
まず環境構築で詰まるだろう。
横着しないでメモ帳()でhtmlとcss書いて勉強しな。
何やるにしてもムダにならないよ。 >>234
PeparはReactだな
ChromeのWappalyzerってエクステンションおすすめだよ
そのサイトで使われてる技術やツールがわかる
io3000とかで片っ端から良サイト見て参考にしたらいい >>240
その認識は少しずれてるかも
書くファイルや場所が変わるだけで
CSSがなくなるわけじゃないよ cssの扱いいくつかあるね。
cssまんま書くやつとかjsオブジェクトで書くやつとか。
後者だとケバブケースがキャメルに。
そしてjs式埋め込めたり
どっちにしろreactってjs中心の方法論だよね。このスレには相応しくない気がする。 確かにReactはスレチだね。技術的には覚えておいて損は無いだろうし個人的にも勉強したいけど、別スレで！ 失礼します
見やすい行間ってありますか？
16ｐｘで読みやすいように1.7emにしましたけど、これって広すぎでしょうか？
行間の平均がわからないです。
line-height、サイトによってばらばらで書き方も異なるので迷ってます。
16pxでline-heightってどれくらいなのでしょうか？ >>248
好きにすればいいけど
平均値が知りたいならこんなところで聞かなくても
著名なサイト100個くらい調べて平均値出してみればいいじゃん
出たら報告してくんろ >>248
デザイン上の意図による。
決められないなら俺が決めてあげよう。8pxにしとけ。 >>248
手元の解説本だと、1.5～1.8程度が一般的だとなっているな
うちは1.4だけど >>247
> 確かにReactはスレチだね。技術的には覚えておいて損は無いだろうし個人的にも勉強したいけど、別スレで！
Reactはスレチというのはわかりました。
それではこのスレの内容としては、今後何に置き換わっていくのでしょうか？
ずっと今までのやり方で通じるとは思えません CSSのBEM記法やってる人ってtableの行列それぞれにもクラス定義してんの？
emmetとかでコーディング省力化できるとはいえアウトプットが冗長すぎるだろ あくまで記法のひとつだから気に入らない箇所があれば自分で工夫してカスタマイズすればいい >>260
何か問題あるの？って話だよ
メリット＞デメリットならやってもいいかもしんない >>257
なぜ置き換える前提？
HTML/CSSはなくならない https://lychee-redmine.jp/
このテンプレート作者に仕事を依頼したいのですが、ソースのどこを見たら
作者名が分かりますか？ アメブロやＦＣ２のようなブログサイト複数に
同じコンテンツ（文章）を流し込んだら総合的にヒット数てあがりますか？
お客さんがやりたいと言ってるのですが
なぜ誰もそんなことしてないですか？ >>265
問い合わせフォーム の設置さ
レンタルサービス利用するか、PHP、CGIとか使って自炊するのか教えて下さい 後にURLを入れるためaタグでhref=""をかあらかじめ書いておきたい（必須）
だがバリデでエラーがうざい
href="#"とするとエラーは出ないがクリックで飛んでしまう
そこでreturn falseをする。ポインタはcssでどうにもなるがリンク自体は残ったままで不親切
この場合どうするのがベストでしょう？ >>271
エラーを無視しろ
後々、入力したか分からなくなる対策など要らん >>268
素人が考えることはプロはとっくに考えていて
それがGoogleなどの検索エンジンの利用者＝商売をしている人じゃなくて文章を見たい人
にとって利益にならないどころか、悪い結果にしかならず
利用者が検索エンジンから離れていってしまうことは
Googleにとって客が逃げてしまって商売にならなくなるので
徹底的に防止されてる。Googleも慈善事業でやってるわけじゃないんでね >>272
入力したか分からなくなる？一目瞭然じゃね？
クリックした結果は同じだから#ないよりはあったほうがいい >>271
ベストはaタグからhrefを消しておくこと
必須なのはお前の都合であって、
ベストな条件にとって必須なわけじゃない お前がクライアントの代理してるんだから
そこでお前より先の話なんかする必要はない
クライアントが俺らに聞いてるんじゃない
クライアントがお前に頼んでるんだろ
クライアントに奴隷なのはお前の都合 >>274
後でhref属性値を入れるまでのエラーを解消するために仮の値を入れておく
↓
バリデータでエラーがでなくなる
↓
正規のhref属性値を入れる
↓
バリデータでチェック
↓
エラーなし
↓
実は仮のデータが残ってた
バリデータでエラーが出るのが正なのに、いちいち仮データを入れてわかりにくくするなよ >aタグからhrefを消しておくこと
意味ないな
それならaを消しておくことだろ >実は仮のデータが残ってた
なんか違う
>エラーなし
それでいいんだよ >>276
クライアント持ってる人は お問い合わせフォーム どうしてる？ >>279
はぁ？ じゃあプレースホルダーを作る時どうするんだよ
http://www.html5.jp/tag/elements/a.html
> もし a 要素が href 属性を持たないなら、その要素はプレースホルダーを表し、
> その要素のコンテンツのみから構成されます。もし関連性があったなら、
> そこにはリンクが配置されていたかもしれません。 >>278
別にわかりにくくはならないが？
バリデは構文や文法チェックするだけ >>282
それはお前の都合であって質問者の問題ではない >>284
都合じゃなくてHTML5の仕様なｗ
hrefなしのa要素は認められてる
まったく反論できなくなったからって他人のマネしてごまかすな
ほんと人として恥ずかしいわｗ その場合は勝手に入れればいい
元々認められてるか否かの話ではない 元々認めれているかの話だけど？
だからバリデータという物が出てきてる
HTMLとして認められて無くていいなら
<a ここにあとでいれる>とか書いてればいいだろｗ 271ですが自己解決しました
もうこうれでいいですわｗ
<!--<a href="">--> ちょっと待ってくれよ
お問い合わせフォーム 設置してる人いないのか >>283
その通り
バリデータでエラーになるべきタイミングでエラーを回避しようとしているのが問題 >>291
クラによりけり
自前PHP使う時もあればネットのサービス使う時もある >>292
エラーを回避はどうでもいいんだよ、この例では
リンクをどうしたいかを言っている
それにしても寄ってたかってあれこれ言って結局質問者が一番いい回答してることに草 >>294
エラーがどうでもいいなら、href="" を書いてエラーを無視すればいいだろ
この質問が無駄 質問者の回答って>>290か
コメントアウトしたら後でコメント解除しなきゃならんのだが、これが一番いい回答？ >>295
それ以外にあるかってことだろ
>>296
HTML上はそれが最も正しい
そもそもまだないもののだから >>297
それ以外にする理由がないだろ、って話なんだがな
お前の話ではエラーはどうでもいいわけだから、別に他の手段を探す必要がない エラーがどうでもいいといってるけど、>>271ではエラーを解消したい、というようにしか読めない
最も、エラーが出るなら入力漏れのチェックになっていいじゃん、と思ったけど >>301
普通はそうだがそこのエラーは承知済みで、他の部分にエラーがあればそこを目立たせたいということ
問題はリンクになってるのにfalseするとユーザからしたら通常の挙動ではないこと
よってjsスレでの内容だがHTMLで何か方法ないかということ エラーを解消したいが最優先の目的なら#入れておけば済む話でそれ以降は不要
よってエラーを解消したいではない >>302
> 普通はそうだがそこのエラーは承知済みで、他の部分にエラーがあればそこを目立たせたいということ
結局は「エラーを回避したい」ってことでしょ > 普通はそうだがそこのエラーは承知済みで、他の部分にエラーがあればそこを目立たせたいということ
該当エラーを無視して抽出するスクリプトを書いたら？
デメリットを無視してまで隠す必要性がない > 後にURLを入れるためaタグでhref=""をかあらかじめ書いておきたい（必須）
この時点でinvalidになるのがMUSTなわけで、前提条件がアホ >>304
>結局は「エラーを回避したい」ってことでしょ
違う >>306
だからコメントでいいんだよ
終わってるのにしつこいな >>307
違うってお前は質問者じゃないだろ
勝手に決めるな >>293
HTML とかのサイト制作書物読んでもフォームのタグは乗ってるがPHPが記載されてないからフォーム設置出来ないよな >>311
じゃあ質問者にしかわからないことを言ってみて さて今日は何曜日？日曜日ですね
はい毎週お馴染みのscssキチ改め「も」抜けスレ主さんですwwwwww >>317
なぜhref書くのが必須なのかとか言えばいいじゃん FileZillaを使っていて
リモートサーバにない新しいファイルをアップロードすると
パーミッションが600になっちゃいます
デフォルトはどこで設定すればいいんでしょか？ >>270
>>272
返信遅くなって申し訳ありません
googleではじかれますか
ですよね
客はすごく良いアイデア思いついた気になってるので困りました chromeでaタグをドラッグしたらURLをドラッグした状態になりますが
これを禁止するにはどうしたらいいのでしょうか？ >>322
マウスダウンイベントをごにょごにょすればいいけど
ウェブアプリでなければあんまりやらんほうがいい >>323
electronで作ったネイティブアプリなので
URLがドラッグできるとウェブアプリ以上にダサい感じになるのです
mousedownを防いでデフォルト動作を防げば確かに止められそうですね
ありがとうございました >>318
それが依頼だから
後で簡単に入れられるように
とでも？クダラネ >>325
それなら必須じゃないってことになりますね 君たちやめたまえ(｀・ω・´)
JSで弄るために<a href="">と書いて怒られるのが嫌なら
とりあえず<span>でも書いといて
<a>要素に入れ替えればいいじゃない >>327
<span><!--<a href=""></a>--></span> コメントアウトするのはOKですが、
hrefを消すのはNGなんです。 コメントアウトするのはOKですが、
hrefを消すのはNGなんです。
<span>変更するのもNGなんです。 TODOコメント書いて
それを認識するエディター/IDE/なんらかのツール
でタスク管理するってのはどうか >>334
じゃあもう答え出てるじゃん
<a> → varidatorが怒るからNG
<a href=""> → varidatorが怒るからNG
<a href="#"> → クリック出来るからNG
<a href="#" onclick="return false;"> → リンクが残るからNG
どれか１つ妥協すればいいだけじゃん
varidatorをチューンしちゃうのがいいと思うけど 話進めるのは勝手だが
>>332
>>334
は元の質問者じゃないからな、一応
どうせまた>>313のル－プになりそうだが つまりあれはそういうことなんだと思う
だからこんなことになったのかと flex-wrapして３段になった時に一番下の段にだけマージンつけるとかってできますか？ <div class="hoge1">
<div data-ptn2="hoge2"></div>
</div>
.hoge1 [data-ptn2=hoge2] {～}
上では～になるのですが下ではなりません
何がいけないのでしょうか？
<div data-ptn1="hoge1">
<div data-ptn2="hoge2"></div>
</div>
[data-ptn1=hoge1] [data-ptn2=hoge2] {～} >>342
下のは、<div data-ptn1="hoge1" data-ptn2="hoge2">のセレクタ
この内側の<div>のセレクタは
<div data-ptn1="hoge1">
<div data-ptn2="hoge2"></div>
</div>
こんな感じ
.hoge1[data-ptn1=hoge1]{
div[data-ptn2=hoge2]{
property: value;
}
} 漠然とした質問で申し訳ない。
ブラウザで見ると、そのページには表が表示されているんだけど
ソースを表示させてみると、その表の記述が見つからない。
どういうテクニックなの？ あー
SASS警察がくるー
脳内で
.hoge1[data-ptn1=hoge1] div[data-ptn2=hoge2]
に展開してくれ >>344
JSで差し込んでる
ブラウザの開発ツールで見てみるとわかると思うよ 今webの３D（ブラウザで３ｄゲームとかできる）の最先端って何ですか？
数年前に見た時はWebGLとかcanvasのcontext3dとかを見ていて
あ、flash終わったなと思いましたが >>348
それそのまま進んでflash終わった。 >>343
クラスでなく属性で、cssでお願いします >>348
計算だけでなくレンダリングまでサーバでやって
画像だけ送ってくるやーつはすげーなと思った >>350
なるほど、やはりそんな感じなのですね
>>352
本格的なゲームとなると利用者に比例してコスト増大しそうですが、
テレビ的に一方通行で共通のデータを送信するような用途だと面白そうですね
５G時代が来るみたいですし
ありがとうございました 今の時代にそんな本格3Dのゲームがブラウザゲーレベルで求められてるかという問題もあるな
商売に絡めるなら今スマホを基準に考えないとダメなんでだったらアプリでやればいいになる HTMLとCSSでコンボボックスを作るにはどうすればいいですか？ http://html5.cyberlab.info/elements/forms/input-list.html
HTML5はlist属性を使えばコンボボックスも簡単に作れるということが分かりましたが
一度選択すると選択したワードしか選択肢に現れないという挙動をするようです
この挙動は望まないものですし、意味が分かりません
これを変えることは出来るのでしょうか？ >>356
現在入力中の文字列でフィルタリングしてるんですね >>355
<select size="3">
<option value="値">テキスト</option>
<option value="値">テキスト</option>
：
</select>
って書けばいいよ
sizeの数字は適当に >>356
それはコンボボックスではなく
サジェストしてるんだよ コンボボックスかつサジェストだろ
コンボボックスを否定することはできんはずだ tableの行と行の間に画像（下矢印）を表示したいのですが、cssだけで実現可能でしょうか？
今は偶数行のtdの中にimgで画像を入れています
tableは行選択が可能で、選択行だけ背景色を変える必要があるので矢印の画像はtrの外側？に
配置したいです。うまく説明出来ませんが
────────────────────
<tr>1行目の内容・・・・・・・・・</tr>
↓
<tr>2行目の内容・・・・・・・・・</tr> ←このtrが選択されている場合は背景色変える
↓
<tr>3行目の内容・・・・・・・・・</tr>
こんな感じです after疑似要素とnot疑似クラスとlast-child疑似クラスでできる afterはその要素の後じゃなく要素内の一番最後に作られるんだぞ 例えばこんなhtmlで
＜p＞見出し0＜/p＞
本文・・・・・
＜h2＞見出し1＜/h2＞
本文・・・・・
＜h2＞見出し2＜/h2＞
本文・・・・・
先頭の見出し0のみ＜p＞の場合、その見出しも＜h2＞と同じフォントサイズで表示したいのです。
自分でフォントサイズを指定するとしてもブラウザーがh2を何ポイントで表示するか分からないので
事前に指定する事が出来ません。
良い方法はありますか？ >>365
h2のデフォルトサイズで表示したいので
自分では指定したくないんです。 フォントサイズはremで指定すれば？
あと見出しをPで指定ってのはどうなんだ？ >>366
h2のデフォのスタイルコピペすればいいじゃん
開発ツールで見れるじゃろ フォーカス時のoutlineのデフォルト状態を;focusで設定しました
:focus
は詳細度1のはずなのに、
main textarea
という詳細度2のセレクタよりも優先されてしまい、
outline: none
という設定をデフォルト設定で上書きしてしまいます
http://jsbin.com/toquciyico/edit?html,css,output
何故こうなるのでしょうか？
詳細度はこちらで計算しました
http://specificity.keegan.st/ >>370
正常にoutlineが表示されるぞ
いくつかブラウザためしたか？ chromeで試したのですが
firefoxで見ても、やはりアウトラインが表示されてしまいます
正常ならtextareaがフォーカスされてもアウトラインは表示されないはずだと思うのですが
main textareaでoutline:noneにしているので。
何かを根本的に勘違いしているのでしょうか・・ >>373
すまん、表示されるのが正常と勘違いしていた
たしかに仕様的にはおかしいな
textarea （入力コントロール）だから特別に扱われている可能性はありうそうだが ありがとうございます
何を勘違いしていたのか分かりました
詳細度計算機の各数字を単純に合計するのかと思っていたのですが
各数字は10進数の桁になっていて
:focusは1点ではなく10点でした
そしてmain textareaは2点でした
なので、:focusが優先されるのは正常動作でした
となると、:focusでデフォルトのoutlineを設定するのは良くないということですね > 詳細度計算機の各数字を単純に合計するのかと思っていたのですが
ぜんぜん違う。点数なんてものは存在しない 点数は仕様で決められていたと思いますが・・
決められていないとこんな複雑な処理実装できないですよね 仕様には点数なんてものはない
点数は技術的なことをなにも知らない
文系馬鹿が言い出したでまかせ >>379
この辺がわかりやすいかもしれない
https://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4
詳細度ってポイント制じゃないの？のところを読んでみると良いかも
合計点って考え方は90年代からあるんだけど
足し算しちゃだーめよって話が書いてある 本来は点数なんてものは存在しないからシンプル
点数のせいで複雑に見えてる 優先度を考えなきゃいかんような状況に陥った時点で
設計に問題があるかもしれないね CSSの優先度なんて種類で分岐して数を数えるだけ
IDがありますか？ → Aランクグループへ
クラス等（要素以外）がありますか？ → Bランクグループへ
要素（疑似要素）がありますか？ → Cランクグループへ
*ですか？→ Dランクグループへ
各ランクグループは、そのランクの個数で勝負
（下位ランクのものをいくつ持っていても意味ない）
それだけの話なんだが
例外として、style属性に書いてあれば、ランク関係なしに優先されて
!importantがついていれば、それよりも優先される
（!importantがついている者同士でランキング争いは行う） > （下位ランクのものをいくつ持っていても意味ない）
訂正。同じ個数持っている場合は下位ランクの数で比較 >>381
なるほど
桁が下の数字がいくら積み上がっても上の桁を凌駕することはないのですか
単なる合算よりも分かりやすい、すっきりする挙動ですね
ありがとうございました 17年ほど前の話だが
サイトで足し算しろってドヤ顔で書いた
id1個とclass10個で上回れないからセレクタ10個以上は無視されるとまで書いた
本当に申し訳ないと思う >>390
+はすぐ後ろ、>は直下
<div class="hoge">
<div class="fuga"></div>
</div>
<div class="piyo"></div>
ってあった場合
.hoge + div は .piyo のこと
.hoge > div は .fuga のこと >>389
１つ目がクラスじゃなくなるんだから
１つ目も属性セレクタで書けばいいよ X Y
Y は、X の子孫。
子・孫など、どんな子孫でもよい
X > Y
Y は、X の子。
直接の子だけ。孫以下の子孫は含まない >>392
ありがとう
どうも別に原因があったらしいです
これから検証orz aタグの中にfigcaption入れたらW3Cのチェックでエラーになったんだけどこれって何でですか 示される理由が英語で読めませーんとかなら翻訳板行け ウェブフォントを使ってるサイトは
ページが表示されてから少し間があってフォントが変わりますが
この挙動がいまいちな気がします
フォントをすっかり読み込んでからテキストをフェードインさせるとかした方がいいんじゃないでしょうか？ >>398
入れちゃダメってことになってるからダメ っていうエラーでしたよ
これじゃ合理性に欠ける >>401
使い方を勘違いしていただけですね
ご丁寧にありがとうございます tableタグでdivが効かないのですが
tableタグのtdタグ内で
画像を置いたり位置を調節するには
どうしたらよいのでしょうか？ >>399
FOUTと呼ばれる現象。長い間メリケンweb屋を激怒させてきた。
今ではcssのfont-displayで挙動を指定できたり、
jsならfont loading apiというのもある。
あとはググれ。ポリフィルもあるはず。 俺は宗教上の理由でtableでのレイアウトを禁じられているので答えられないが、このスレに太古より生息するテーブルレイアウトの達人が答えてくれるだろう… >>404
ありがとうございます
あれを気持ち悪いと思っていたのが自分だけじゃないと分かって安心しました
対策もあったんですね まとめブログをやってるんですが、背景設定するとパーツが透けて背景が見えてしまいます
パーツの背景だけを白にするとかどうやればよろしいのでしょうか？
backgroundで指定するとその列全体に適応される（例えば記事と記事の空白に背景が映るようにしたいけどそこも白くなる）
ググってもやり方が見つけられなかったのでぜひとも解決方法を教えてください ヤフオクの商品ページをいつもHTMLで書いてるのですが、
ここで使えるタグは一部だけ公表されていて不透明な部分が多かったりします。
表の編集でセル内の文字のセンタリングを指定したくても
<td style="text-align: center;～のstyle要素がごっそり削られてしまうのでこの手が使えず
かと言って<center>が普通に使えるHTMLエディタは現行のものはないのではないかと。
ということで
1)現行のHTMLエディタで表のソース中に一つ一つ<center>タグを手打ちする
→正直かなり面倒
2)2000年前後に公開された古いHTMLエディタを使う
→探してますが今一つ見当たらず。特に最適化とか
厳密なエラーチェックとかやってくれる奴があるかも分からず。
BlueGriffonやSharepoint Desingner2007とかとりあえず使ってますが
この問題で悩んでます。
何かアドバイスとか頂ければ幸いです。 >>407
もう少し具体的に
出来ればどこかにコード晒して >>403
多分何か勘違いしている
divが効かないってのを
もう少し標準的な用語で説明してちょ >>411
tableタグのtdタグの中で
divタグを使用しても
divタグのwidthやheightが
効かないのです
background-colorで着色しても
領域に色が塗られません >>412
つまり、
<table><tbody><tr><td>
<div style="background-color: red;">何か</div>
</table>
としても「何か」の背景は赤にならないと？
どこかにあるdiv用のスタイル または table用のスタイル
が悪さをしているとしか考えられんが
他の要素の場合は？ >>413
うーん、それができないんですよね
☆事業内容
みたいな
アイコン+文字列をやるために
画像領域と文字列領域を
divで区切りたかったのですが
tdタグの中のdivは効く様子がないです
同僚からはtableタグは使うなみたいに言われまして
結局divに変更することにしました >>412
そんなことはない
heightはtableかtdにもheight与えなきゃいけないけどwidthやbackgroundはちゃんと効く
そのdivを開発者ツールとかで見てみろ
display:inlineとかbackground:#fffとかがimportantされてるとかのオチじゃないか >>415
なるほど
他におかしいところがあるから
おかしくなってるということですね ブラウザの右クリックメニューから、その要素上で、要素の検査をすれば、
F12開発者ツールが起動するから、
CSS を見れば、適用されているスタイルがわかる もしスレチだったらごめんなさい
Android7.1.1でクローム65.0.3325.109を使っているのですが、あるサイトの決まったページのものだけ「新しいタブで開く」で開くと毎回再読込をしないとページが表示されません
地味に不便なのですが、これは何か規則性があるのでしょうか？ えーっと、伝え方が悪かったです。
こんなのになるんですよ
再読込押すと普通に出てきます
https://i.imgur.com/XpIjuXr.jpg 再読込押すと普通にエラーではない画面が出てきます、の間違いです 今試してみると全く同じページがgalaxyの純正ブラウザでは開けました セッション管理をしていて、途中の状態からは、アクセスできないとか
一番最初の状態から始めないと、アクセスできないような作りになっているとか Web製作者から見て、やらおんとかはちまとかの大手アフィサイトの出来っていい方なの？
それとも技術的にみてもゴミクソサイトなの？ まとめサイトで結構いいデザインだなってとこどこがある？ 金儲けサイトは間違えて広告を押してしまいやすいサイトだからなｗ Android Chromeの機能のひとつに、
リンクが密集している部分をタップした場合、タップした周辺がルーペみたいに拡大されるものがあるんですけれど、
iframeタグを使って埋め込んだサイトでこれをやるとルーペの中身が真っ白になってしまいます。
<iframe src="（wikipediaみたいなリンクの密集してるサイト）"></iframe>
確認したのはChromeは53.0.2785.97、Android4.4.2なので相当古いのですが、
ルーペを出さないようにするかルーペの中身をハンドルする方法ってあるんでしょうか。 <dl>
<dt><dd>
<dt><dd>
:
</dl>
ってならんでるHTMLで1つの <dt><dd> はセットでたてならびにして
それの横にならべるのってＣＳＳでできますか？
absoluteやポジション指定すれば当然できるんですが
できればピクセル指定なしで中身の幅に合わせてならぶようにしたいです 出来ないと思う
使いづらいけどみんな好きだよなあ、dl >>435
こういう風にしたいわけ？
このサイトも同じようなことを考えてたけどできないので
1列ごとにdlで囲ってそれをfloatさせる方法でやってるね
http://d.hatena.ne.jp/tamo_hand/20090628/p1
>>436
わかりやすくはあるんだけどね
dtがインラインのみでddはインラインもブロックもOKというのを最初に頭に入れておくと理解しやすい >>436,437
まさにこうしたかったです
システムからの自動出力でＨＴＭＬの構造がいじれなくて
ちょっと短文が多めでたてに並ぶと見栄えが悪いのでよこにならべられないかなと思った次第です
できないようなのであきらめます
できないことがわかるだけでも無駄に悩まずにすむので助かりました
ありがとうございました >>435
>>435
dl{display:grid;
grid-template-columns:repeat(auto-fill,max-content);
grid-template-rows:repeat(2,max-content);
grid-auto-flow:row dense;
}
dt{grid-row:1/2;}
dd{grid-row:2/3;}
dt,dd{jistify-item:center;
align-item:center;
}
※max-contentやgrid layout使用のため最新ブラウザのみ。レスポンシブ非対応。 こういう問題見ると、まだまだ未完成な言語だなあって思うわ >>440
昔と比べれば日々進歩してるな
IEが早く消えてればもっと進歩も早かったはず IEにくらべたらまぁ
IE6がもっともガンだったけど
やっと消えてくれたから ↓A要素のアウトライン
マ ┏━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃AAAAAAAAAAAAAAAAABBBBBBBBBBBBBBBBBBBB┃
ジ ┃AAAAAAAAAAAAAAAA↑BBBBBBBBBBBBBBBBBBB┃
ン ┃AAAAAAAAA[←A要素内のB要素→]BBBBBBBBBBBB┃
マ ┃CCCCCCCCCCCCCC↓CDDDDDDDDDDDDDDDDDDD┃
│ ┃CCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDD┃
ジ ┃CCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDD┃
ン ┗━━━━━━━━━━━━━━━━━━━━━━━┛
こんな感じのA要素内のB要素を、ボタン推すとマージンとか全部無視してぱっと画面いっぱいに拡大表示させたいのですが (それはJSでCSS切り替えしてやります)
widht,heightだけ指定して拡大しても
マ ┏━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ジ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ン ┃AAAAAAAAA[←A要素内のB要素→]AAAAAAAAABB┃
マ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
│ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ジ ┃CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCDD..┃
ン ┗━━━━━━━━━━━━━━━━━━━━━━━┛
こんな感じで、A要素の中でだけ拡大されてしまいます
質問ですが親要素を無視して、特定の要素を拡大して表示する方法はあるでしょうか？
CSS初心者なので、初歩的なやり方をしらないだけだとは思うのですが、どうかよろしくおねがいします <select>で表示されるプルダウンメニューをクリックしたときの一度に表示される要素数を変えるにはどうしたらいいんですか＞
<select size=6>とかだとリストボックス形式になるからプルダウン式で >>445
Aを offset parent にして
Bを position: absoluteにして
margin: auto
top: 0
bottom : 0
left : 0
right : 0 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
1KSSR >>446
すみません、サイトの構成が複雑すぎてjsfiddleに再現しきれなかったです
シンプルに書いたのですが、実際は親要素もいっぱいある感じで、親要素全部はいじるのは難しいです
>>448
ありがとうございます、ですがこれを設定してみてもダメでした。offset parentはもともとAでした
あと追加ですみません、色々やってて気づいたのですがz-indexを1億に設定しても前に出てくる要素があったりします
改めてまとめると「(ほぼ)どんな場合でも親要素を無視して最前面表示できる出来る方法」を知りたいのですが、ないでしょうか？
色んなサイトで使いたいので汎用法があればと思ったのですが >>450
>z-indexを1億に設定しても前に出てくる
他をいじらずにそれを必ず避けることはできない
element が属する stacking context を establish している box が box tree の root でない限り、他の element が前に出てくる可能性は避けられない >>450
複雑なものを複雑なままにしてるからいかんのよ
問題はシンプルにして解決法を考えるもんだ
いらん要素は全部取っ払って
必要なもんだけ書きなされ font sizeをpxで指定することがありますが、この時どこの大きさ（長さ？）を指定しているんでしょうか？
文字サイズ10pxというのは何が10pxなんですか？ >>453
いわゆる em ボックス（ font のグリフをデザインするための基準矩形）の高さ
「em」という名称は文字 M に由来する なるほど、それを元にして1.2emとかを使っていくんですね
スッキリしました
ありがとうございます >>451
なるほど、ある要素だけをいじって最前面にするってのは不可能ということですね
ありがとうございました！
>>452
わたしのサイトではないので・・・すみません 画像クリックで別のリンク先へ飛べるようにしたんですが、クリックできる範囲が画像+横のオレンジ部分まで広くなってしまいました
どうすればクリック出来る範囲を画像の部分だけにできますか？
>>457
マークアップが
<a><img></a>
ならば、 a か img のスタイルをどうにかする
例えば どっちかが display:block になってるせいかもしれない aタグがblockとかになってるかpadding持ってるんじゃ？ >>458
>>459
imgでblockになっていましたありがとうございます
それで更新してIEで見ると画像部分だけになりましたが、Chromeでみると画像じゃない部分もまだクリック出来てしまいます
これは仕様ですかね？ 状況に応じてブレークポイントとかJSで簡単に調整できるのがいいよねremは >>460
これキャッシュ残ってただけでした
アリガトゴザイマシタ 子要素にfont-size:12px !important;
などと設定されている場合、親要素側でコントロールすることは不可能でしょう蚊帳 firefoxの検索バーにflex=1などという指定がされているのですが、このせいかわからないですが、検索バー付近にブックマークをドラッグしたときに（サイドバーから）、検索バーが意図せずに伸び切ってしまうのですが、このflexというのが関係あるでしょうか？
また、cssでは無効にできない部分でしょうか
>>465
やってみます
ありがとうございました お気に入り一覧でお気に入りボタンをクリックするとお気に入りから削除されるようにしたいです。
（#fa8072から#999にボタンマークの色が変わってページが更新されるとリストから消えるようにしたい）
以下の状態だとお気に入りマークをクリックしても色も変わらずリストからも削除されません。
何がいけないのでしょうか？
<div class="favorite-list__fav-items">
<button type="button" class="favorite-button" <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>>
<svg role="img" aria-hidden="true"><use xlink:href="#heart"></use></svg>
</button>
</div> （続き）
.favorite-list__fav-items button {
display: block;
width: 100%;
padding: 5px 0;
cursor: pointer;
transition: .2s;
text-align: center;
color: #fa8072;
border: 0;
outline: none;
background: transparent;
}
.favorite-list__fav-items .fav-items {
color: #999;
}
.favorite-list__fav-items svg {
width: 20px;
height: 20px;
fill: currentColor;
} ランキングサイトのバナーを貼るとこうなってしまう(リンクはできる)のですが、どういった原因が考えられますか？
https://i.imgur.com/VZg4qmH.jpg >>467
まずHTMLじゃないでしょこれ
HTMLとCSSだけで何かを記憶したり削除したり文章構造の変更はできないと思う
ＣＳＳでできるのは「予め」かかれてあるものを「表示」「非表示」にすることだけ
ボタンを押してHTMLの中身を書き換えたり
どこかと通信して削除された後のHTMLを表示したりするのはこのスレの対象外 >>471
Javaスクリプトとか必要になって来るということですか？
>>467は、お気に入りに追加の仕様を削除に出来ないか試してみたものなんですが
元のコードはこれです。
<div class="product-list__fav-items">
<button type="button" class="favorite-button" <{favorite_button_attribute product_id=$productlist[num].id added_class="fav-items"}>>
<svg role="img" aria-hidden="true"><use xlink:href="#heart"></use></svg>
</button>
</div> （続き）
.product-list__fav-items {
margin-top: 10px;
width: 30px;
}
.product-list__fav-items button {
display: block;
width: 100%;
padding: 5px 0;
cursor: pointer;
transition: .2s;
text-align: center;
color: #999;
border: 0;
outline: none;
background: transparent;
}
.product-list__fav-items .fav-items {
color: #ff7373;
}
.product-list__fav-items svg {
width: 20px;
height: 20px;
fill: currentColor;
} （続き）
サンプルサイトです。
ttps://monosample.shop-pro.jp/
これは「お気に入りボタンを商品一覧ページへ設置」なんですが、こんな感じで「お気に入りページ」を作りたいのです。
商品一覧(product-list)をお気に入りリスト（favorite-list）に変更して
ボタンの色を#fa8072→#999（追加済みなので）に変更したのですが、ボタンを押しても動かないんです。
一応スクリプトとか使わなくても出来るらしいので、どこか間違っているだけかもしれないのですが、どこがおかしいのかわからないんです。
上記のコードはサンプルサイトのコードになりますので、色コードが一部違います。
紛らわしくてすみません。 👀
Rock54: Caution(BBR-MD5:fc5433912aa55592f73f2dda4d43bdf8) 要素の削除は、JavaScript のjQuery の、remove
CSS では、要素の削除はできないのでは？
非表示にするとか、マイナス座標に飛ばせるだけで、削除はされていないのでは？
削除されていない場合は、メモリ内には存在する <button <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>>
<<{ }>>
これは、タグの中に、タグがある
{ } 内に、何かのプログラムの命令文がある >>475
サンプルサイトではお気に入りしたものがページ下部にお気に入り一覧として出るんですが
商品詳細や商品一覧でお気に入りを外すと、ページ下部の一覧からも消えます。
この仕様がそのまま使えないのかなと。
Javaスクリプトとか自分は扱えないので、スクリプト必要な場合はあきらめます。
>>476
管理サイトの独自タグというヤツなんですが、お気に入り商品数が25商品までに
自動的になっているので命令文あると思います。
ただお気に入りページをカスタマイズしているショップさんも他にあって
プロの方がスクリプトの話はせずにお気に入りページ作れると言っていたので出来るのではないかと
こちらが元ネタです
ttps://shop-pro.jp/news/20170421-favorite-function/ >>477
結論からいうと無理
ページ遷移後に違うページを表示させることはHTML CSSだけでは無理
JS使っても無理
何らかのＣＧＩ つまりサーバー側の記述が必要 ただサイト側のＣＭＳにそういう仕組みがそなわってて
<{favorite_button_attribute product_id=$productlist[num].id added_class="fav-items"}>>
みたいな記述でできるのかもしれないけど
それはＨＴＭＬやＣＳＳの範疇じゃない独自拡張なのでこのスレの範囲外
この記述でぐぐると カラーミー テンプレート とかでてくるので
カラーミーっていう専用ＣＭＳサイト上の話なんじゃないのかな JSなら無理ではないんじゃね
ＵＲＬにうめこむなりlocalStorage使うなりでページに状態をもたせることはできるよね
まあマーケッティングリサーチに使うならお気に入りって情報は鯖側でもったほうがいいと思うし
いずれにしろスレチ >>478
違うページに移動はしなくてもいいです。お気に入りから外れれば結果的にリストには残らないはずなので
今困っているのは>>467>>468の記述だと、お気に入りマークをクリックしても変わらない（お気に入りのままになっている）のです
>>472>>473を改変しているのですがどこがいけないのでしょうか？
>>479
[num]を少し調べてみます。
カラーミーのテンプレをカスタマイズしているショップさんは克服しているのでサーバーとは関係ないと思います。
カスタマイズに関してカラーミーはノータッチなので。
費用が発生するような質問だったらすみません。
プロに頼めってことですよねorz ページ遷移っていうのは違うページに移動することじゃない
同じＵＲＬを再度表示したときにページ内容を変えることもページ遷移っていう
ページ遷移なしでいいならこういうことをすれば表示だけは消せる
逆にページ遷移すると復活するのでおそらくやりたいことじゃないと思うが
.favorite-list__fav-items input {
display: none;
}
.favorite-list__fav-items input:checked + .fav-items {
display: none;
}
-->
</style>
<div class="favorite-list__fav-items">
<input type="checkbox" id="item1">
<div class="fav-items">
<label for="item1">お気に入り削除</label>
<div>ダミーテキスト</div>
</div>
<input type="checkbox" id="item2">
<div class="fav-items">
<label for="item2">お気に入り削除</label>
<div>ダミーテキスト</div>
</div>
</div>
>お気に入りから外れれば結果的にリストには残らない
この時点で鯖側のＤＢ更新必須なので根本的にHTMLとCSSの範疇じゃない 別スレいってくれ <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
の独自仕様部分でボタンをおしたら何らかのアクションスクリプトで
product_idのアイテムのDOMをfavorite-list__fav-itemsからさ駆除するようになってるんだろう
でいまそれが動いてないだけなんだろうけどそんな独自仕様が動かないのをきかれても答えられるわけない
とりあえずその部分が動かない限り何かが変化することはないよ 有料ＣＭＳ用のコードをapache上で動かそうとしてるだけなんじゃないの だーかーらー
htmlとcssだけでは無理だってみんな何回も言ってるじゃん
最低限JavaScriptがいるの
その上で場合によってはPHPやCGIもいる >>482
labelというのは見たことないのでやれるかどうかわかりませんが調べてみます。
>>483>>485
やっぱスクリプトですかね。お手上げです。
>>484
CMSというのはこちらで初耳です。プロが指南しているサイトではスクリプトとか
特別な何かを使う話はなかったのでHTMLとCSSだけで出来るのかと思ってました。
お気に入り一覧を一つのページにまとめて掲載するだけなので場所が違うだけだと思ったのですが。
失礼致しました&ありがとうございました。 >>482
すみません、ダミーテキストって何のことですか？ ダミーのテキストのことです。
具体的にいうと宮沢賢治です。 もちろんググりましたよ。
でもhtmlにダミーテキストを入れる理由がわかりません。
なぜそんなものを入れるんですか？
あとこんな素人ですが、サイトをレスポンシブに変えるのは無謀でしょうか。
やり方を説明しているサイトがあるので自分で出来ないだろうかと。 入れないと何も表示されずにデモにならないから入れてるだけだろ
HTMLかいたことすらないレベルなのか ダミーテキストの文字自体は意味ないよ
そこを好きにかきかえてお気に入りの内容を表示させるためにいれたんだけど
ラベルの中にいれて全部クリック対象にしてもいいよ
label っていうのは for を input の id と一致させることで
ラベル内をクリックしたときにチェックボックスに判定をもたせることができる
でチェックボックスがチェックされるとそれに隣接する fav-item クラスを「非表示」にしている
決して削除しているわけではない
つーかお気に入りアイテムの内容のどこをクリックしても削除されたら困るだろう
やりたいことがよーわからんけどお気に入り削除の文字だけクリックしたら消えるのかと思ったわ hboxやその子要素にに指定されているflexを無効にする方法はありますか？
テーブルの場合はtable-layout:fixed;などという指定があるようです hboxってなんだろう
flexを無効にするのは別のdisplayを設定すればいいんじゃないかな
display:block;なりdisplay:inline-blockなり
htmlとflexの何が困るかをかいてくれたほうが具体的な回答もらいやすいかも >>493
>お気に入り削除の文字だけクリックしたら消えるのかと思ったわ
その通りです。これがやりたいんですが、サンプルサイトにあるようにハートマークがあるので
ハートーマークをクリックしてピンクからグレーになればお気に入りから消える、という仕様を考えてました。
でも「お気に入りから削除」のボタンがあれば、それをクリックして消えればいいんです
ボタン作ったりとか出来なかったのでハートマークでやるしかありませんでした
>>492
書いたことないです。自分が出来るのはコピペと改変だけ。これで何とかやってますｗｗｗ
見様見真似でやってるので理論みたいなのはわかりません ダミーテキストがわからんっていわれても
こっちはお気に入り商品の中身知らないんだから何かしら別のテキストいれるしかないだろ
商品の中身は自分でいれるしかないんだし
文字のおきかえすらできないならどうせ無理だからあきらめたほうがいいよ >ハートーマークをクリックしてピンクからグレーになればお気に入りから消える
ピンクからグレーに表示を変える → CSSのみで可能
その状態でページを更新すると表示を消す → 不可能（サーバー側の記述が必要）
データがどこにかかれていて何を変化させたいかをきちんと整理したほうがいいよ クッキーなりローカルストレージなりに状態保存すれば出来るんじゃ？ >>500
>>501
そうです。これ、元々ブラウザのクッキーの保存機能を使ったお気に入りなんです。
だからサーバーと全然関係なくて、データも保存されてません。
クッキー削除したら消える簡易的なものです。
まあ今時珍しいですよね。。。でもカラーミーはこれしか用意してないんですよ。
だから自分でカスタマイズしろっていう。
>ピンクからグレーに表示を変える → CSSのみで可能
これが変わらないので見てもらいたかったのです。
>>468のcssのどこかが間違っていると思うんですけど。 >>502
>これ、元々ブラウザのクッキーの保存機能を使ったお気に入りなんです。
だからサーバーと全然関係なくて、データも保存されてません。
それ最初に言えよ >>503
マニュアルのリンク貼ったじゃないですか。
読めばわかるでしょ いずれにしろクッキー使った時点でHTML/CSSじゃ無理なんでスレチ
つーかスレチな内容にレスしすぎ
やさしくはあくまでスレの範疇だけにしてくれ >>502
まあ>>473のCSSだけなら一応このスレの範囲だけど
そのCSSに表示が変化する要素どこにもないからなー
ボタンおしたときの
<{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
が何かしないことには表示がかわることはないんだからまずはそれが動いてるか確認しなよ >>504
初めの質問(>>467)ではCookieに全く触れていないし、マニュアルも出してないよね？
情報は始めにまとめて出して >>502
<style>
<!--
.favorite-list__fav-items input {
display: none;
}
.favorite-list__fav-items .fav-items {
margin:1em;
padding:1em;
background-color:#fdd;
}
.favorite-list__fav-items input:checked + .fav-items {
background-color:#eee;
}
.favorite-list__fav-items label {
border:outset 1px #ccc;
padding:0.5em;
}
-->
</style>
<div class="favorite-list__fav-items">
<input type="checkbox" id="item1">
<div class="fav-items">
<span>商品１</span>
<label for="item1">お気に入り削除</label>
</div>
<input type="checkbox" id="item2">
<div class="fav-items">
<span>商品２</span>
<label for="item2">お気に入り削除</label>
</div>
</div> 質問です
ol要素のlist-style-positionをoutsideにして
margin-leftで余白を設ける場合、
何か指標となる数字みたいなものはありますか？
あくまで目分量でこれくらい、というふうに決めるしかないのでしょうか？
とりあえず1.5emほど余白をとっているのですが…… >>509
ちゃんとレスを追いかけて全部に目を通しておけばそれぐらいわかりはずです。
もっと頭を使ってください。 >>512
あなたが>>467時点でCookieを何とかしようとする事に思い至っていないことは分かったよ
マニュアル見ても根本的な原因が分からないんだね > >508
><{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
>が何かしないことには表示がかわることはないんだからまずはそれが動いてるか確認しなよ
実はこれ、addをdeleteに変えてみたヤツなんですが動かないです（オリジナルはaddになってます）
やっぱりこの部分がネックですよね
どうしたらいいかわからなくて
>>510
回答ありがとうございます。ちょっとまだ取りかかれないので、確認してからまた来ます。
>>509
マニュアル（元ネタ）は>>477のリンク先です。
>>512
誰ですかあなたｗｗｗ
ありがとうございますｗ http://jsbin.com/mufefaneli/edit?html,css,output
min-heightによって高さが決まった親要素に対して
子要素のheightを％指定すると、高さが有効になりません
minやmaxを使ってサイズ指定した親を持つ子要素に
％でサイズ指定したい場合はどうすればいいのでしょうか？ 結論からいうと無理
% 指定は明示的に高さの指定された包含ブロックに対しての高さになる
なのでこの場合 50% は body の高さに対して50%になる
逆に言うとparentの高さをなぜ決定できないの？ ありがとうございます
http://jsbin.com/kepeqoyuse/edit?html,css,output
bodyに対しての%になると言いますが
bodyのheightを明示的に100pxにしても、heightは0pxのままのようですが・・ http://jsbin.com/xabarusote/edit?html,css,output
子をabsoluteにして、その子を持てるように親もrelativeにしたら
望み通りのサイズになりました
何故absoluteにしたら、%指定していても親の実サイズを元に計算されるのか、よく分かりませんが
これはCSSの仕様通りなのでしょうか？ >>520
原則として、% は包含ブロックを元に計算される。
relative にした親は absolute にした子孫の包含ブロックになるので、そのサイズを元に計算される。
この場合、親の height は指定されていないが min-height は指定されているので、それが親の「仮の height 」とみなされ、子の height の元になるんじゃないかな。
実際の決まり方は複雑多岐に渡るんだが
https://drafts.csswg.org/css-sizing-3/ widthを声に出して言わなきゃいけないとき、
普段はウィドスって言ってるくせにウィスって言うんですか？ ｳｨﾄﾞｩｽって言ってる
なんか恥ずかしい時は幅とか言っちゃう charsetをキャラセットと読む恥ずかしい人もいるからね
ウィドスとかワイズはまだましな方じゃね ウィズで通じない人と話すときはワイドとか「幅」と言ってる（ウィドゥスでも通じないことが多い）
heightはハイトではなく「高さ」
>>528
じゃあ何と読めばいいの？ ｳｨﾄﾞｩｽワロタｗ
catchはｷｬﾄｩﾁかな？ｗ
watchはｳｫﾄｩﾁ？
bridgeはﾌﾞﾘﾄﾞｩｼﾞ！ アンカーリンクいっても通じない時あるしね
発音難しいよね うぃずす、って言う
英語として間違ってるのはわかってる めんどくせーからもう
だぶりゅーあいでぃーてぃーえいち
にしようぜ ファースト、セカンド、サード、フォース、ファイブス、シックスス カラミー懐かしいな
あれってさ外部jsファイルを新規で追加できないんだぜ？
jQueryの本体もコピペして書き写した記憶があるわｗｗｗ ティーエイチである
テーエイチではない
ティーをテーと発音するのは昭和 工場だといまでも聞き取り間違い防ぐため一部ドイツ読みdはデー、pはペー、だっけ 聞き取り間違いを防ぐためというのなら
なんで本場の人は正確な発音をするのだろうか？ 英語？
たとえば向こうの人はvとb聞き分けられるだろ。
そういうこと。 まあ言うても極端にs/n比悪い環境での音声通話とかではあいつらもフォニックコード表使ったりするが >>549
その理屈だと最近の（若い）人も、外国人と同じように
ティーとテーを聞き分けられるようになったんだろ？
ティッシュをテッシュといわないのと同じように
聞き取り間違いを防ぐためと言うより
聞き分けられないっていうのが正解な気がする 工場は機械音でうるさいって前提では？そういう場合英語でもフォニックコード使うし。フォーマルな電話口とか管制とか。 画像を画面中央に配置してまわりの背景とシームレスにグラデーションするのってどうかけばいいですか？
画像側の４すみを透明にグラデーションするでもいいし
上に背景色をradial-gradientするのでもいいんですけど
画像が正方形じゃないのでうまくいかないんですよね
http://fast-uploader.com/file/7081868847119/
こんな感じにしたいです >>550
フォネティックコードっとおっしゃりたい？
使うと以外に通じないよね
特にあまり使わない単語だと
ブラボーのB、タンゴのT、ヴィクターのVとか言っても通りが悪い
ABCのB、STUのT、UVWのVみたいに
アルファベットの連続する３つの方がまだ通る、気がする
ていうか、団塊老人より今の子の方が
ネイティブな英語に接するのは楽なはずなのに、英語力は逆なのは何故なんだ
やっぱ海外に行く機会が少ななってるからなのか 俺「ビクターのビーですね。かしこまりました！」
俺「BikutaaのB、と。これでよし！」 >>553
画像自体には一切グラデを使わず、透過させる
背景のグラデを透けさせて完了 フリーのテンプレートですが、このデモサイトをiOSのSafariから開いた時に
下にスクロールしても上部のアドレスバーが縮小されず全表示のままになってしまいます。
何が作用してしまっているのでしょうか？
アドレスバーダブルクリックで最上部に移動できるSafariの挙動等も利用できず不便なので解除したいです。
よろしくお願いします
https://gatsby-starter-personal-blog.greglobinski.com/ >>557
スマホでしか見てないけど
windowというかviewportが動いてないんじゃない？ >>557
スクロールバーがブラウザのスクロールバーではなく、jsで生成されたものであり
一見ページをスクロールしているようだがブラウザ側ではスクロールしているという認識がされていない様子。
つーかページのソース見た？
jsで生成されててとても改変する気が起きないわ pwaなどという技術はない。
マイナスイオンガーみたいな乱用をやめろ。 PWAなんて言葉初めて知ったわ。
ナニコレ
もうますますデザイナーやフロントエンドの仕事が無くなりそうな時代の流れじゃね？ サイトをアプリ化してインストールで出来上り
出来上る結果は素人目線でWordPressと何が違うかと言われると
何も違わない気がしなくもないけど、この業界の仕事に危機を感じたわ がっつりフロントエンドなんだがなんでフロントエンドの仕事がなくなるんだ？ｗ
いかに自分がバカなこと言ってるのか分からないんだろうなｗ >>567
そうかな？
素人がそのまま使おうとして使えるレベルのデザインが出来上ってると思うけど。
あとはWPのテーマのようにデザインバリエーションを増やすだけで
WPよりも気軽にサイト持てると思ったんだが。 がっつりフロントエンドなんだがなんでフロントエンドの仕事がなくなるんだ？ｗ
いかに自分がバカなこと言ってるのか分からないんだろうなｗ ありがとうございました
JavaScriptのせいだったんですね
流石にJavaScriptをいじる知識はないので調べつついけそうなら頑張ってみようかと思います がっつりフロントエンドなんだがなんでフロントエンドの仕事がなくなるんだ？ｗ
いかに自分がバカなこと言ってるのか分からないんだろうなｗ > あと変数はできるだけ名前を短くして寿命（スコープ）を短くするのが良いと個人的には思うよ
こんなアホなことをいうフロントエンジニアなら知ってる >>569,>>571
そうかな？
素人がそのまま使おうとして使えるレベルのデザインが出来上ってると思うけど。
あとはWPのテーマのようにデザインバリエーションを増やすだけで
WPよりも気軽にサイト持てると思ったんだが。
バーカ。おまえは自分の状況すら理解出来ないまま職を失えばいいｗ まあ普通に考えて、
ディレクター、デザイナー、フロントエンド、バックエンドで
一番最初に無くなる可能性が高いのはフロントエンドだろうな。
認めたくないからって俺にしつこく絡むなアホ。
冷静に現実を見て認めろよ。 >>567のしつこさからいって荒れるだろうなこれは。
昔からここ住みついてるキモイやつにまた絡まれた可能性 >>574のような引用の仕方を知らない奴って世にあふれてるの？
初めてこういう文章を読んだときには？？？だった 無知が酷い勘違いで恥晒してんなｗ
自分でどこがおかしいのか分からず噛みついてるのが何ともｗ
再掲してやろうｗｗｗ恥ずかしｗｗｗｗ
565 Name_Not_Found sage 2018/05/16(水) 17:51:28.45 ID:???
PWAなんて言葉初めて知ったわ。
ナニコレ
もうますますデザイナーやフロントエンドの仕事が無くなりそうな時代の流れじゃね？ >>580
おう。PWAを知らなかった事は書いた通り認める。
で？フロントエンドが無くならないと言い張れる根拠は？
無くなる可能性の根拠は俺は書いたから、お前は無くならない根拠を書いて。
それ以外のレスはするなよ。本質から話そらすなよ？ やっぱめんどくせーから無視する
こいつのしつこさから言ったらさらに荒れるのが目に見えてるな
以降スルーするわ
俺が大人にならないとな 「PWAなんてはじめて知った！これはフロントエンドの仕事がなくなる時代の流れだ！」
→PWAは “フロントエンドの” 新技術群にマーケティング用に都合のよい名前を付けたものです
「フロントエンドが無くならないと言い張れる根拠を出せ！無くなる可能性の根拠は俺は書いた！」
→書いてない。どうしてフロントエンドでやることが増えるPWAが流行るとフロントエンドの仕事がなくなるのかｗｗ
頭弱すぎワロタｗｗｗｗ 勘違いして偉そうなこと言っちゃったから引っ込みつかなくなった
なんて誰でもあることじゃん
そう追いつめんなよ フレームワーク沢山ありすぎて選び方分かりません。
そんな中、何故Bootstrapが人気あるんですか？ >>587
カスタマイズが比較的簡単だから今のバージョンはかなり良くなってるよ そんなのBulmaとかセマンティックULだって同じだしな 例えば、Ruby on Rails なら、bootstrap-sass という、gem がある。
有名なフレームワークは、gem を作る人も多いから
手軽に導入できる！Ruby on RailsでBootStrapを使う方法【初心者向け】
https://techacademy.jp/magazine/7663 web開発では当初はsassが使われていたもののrubyが遅すぎる、sassだけnpmのバージョン管理に乗れず別管理になるしかもwin/mac両対応環境の構築が(rubyのせいで)不可能などというデメリットがありnode-sassモジュールに取って変わられてしまった。
sassはよいプロダクトだったが、rubyが糞だった。
いまやそのsass自身もpostcssに取って変わられつつある(機能ごとに個別にプラグイン入れる方式) sass のような CSS の生成って何でそんなに性能が影響するものなの？ node sassやlib sassが出来てだいぶ経つし
そんなに困ることねえけどなあ 画像を縦横比を維持したままボックス内に収めるためにobject-fitてのを使って
img {width:500px; height:500px; object-fit:contain;}
とか指定して期待通りの表示にはなったんだけど、この拡大・縮小表示された画像の幅高さの両方をを取得する方法はある？
取得するのはJavaScriptだからCSSしか知らない人にはわからないかな？ >>599
アクセス数を集めるためにやってるからね
名前が多ければそれだけ検索にヒットしやすい
SEOとかいうゴミ技術だよ
役に立たないと言うのにね
役に立たないというのはヒットした所で
ゴミ情報だって気づくからまともに読まれやしない 何も使わないのが一番軽くてソースもシンプルで見やすい 分母によるんじゃない？
40個のうち38個だとばかだけど500個のうち38個だと厳選と呼べるかと
実際世の中に何個あるのか知らないけど ruby sassは非推奨になっただかなるだかだよ CSSフレームワークとして知ってるもの全部あげたような38個 ゲーム系の複雑なフローツールを資料出力したいんですが、mermaid.js使ったらはみ出たり横幅固定だったりで微妙な資料になってしまいました
より適したライブラリややり方はありませんでしょうか、Cで他のcsv読み取って書き込むプログラムでの作成なのでツールやソフトが使用できないといった形です 質問です
画面の下半分に
あるワードに対するグーグルの検索結果を表示することは出来るでしょうか？
とりあえずiframeでは駄目でした PHPとかのバックエンド使わないと無理じゃね？
sameoriginにしてると思うぞ 始まりあるものには必ず終わりがあるから。
終わりたくないなら生まれる前に消し去るしかない。 >>614
答えになってないのはわかるかな？
お前の人生はもう終わりってことかな
だって>>614 >>612
終わらないよ
そのソフトウェアと実行環境が手元にある限り
未来永劫使うことが出来るよ
たとえ自分以外誰も使わなくなったとしても それでも、といい続けろオルステッドー！ってやつか。 外国では、SCSS の使用率は、100%！
日本でも、50% は有りそう >>620
>>614が屁理屈こねてるから、そういう返しなんじゃない？ >>620
どの辺が屁理屈なん？
最終的に吐かれるCSSの仕様が大きく変わらない限り
ずっと使ってても問題なくね？ 知識をつけるためにまず参考になるサイトのソースを真似て
そこからアレンジを加える
↑のやり方を実施しようとしたんだけど
全く同じソースで真似をしても同じ
形にならない原因が分からない
知識ゼロなのが悪いのか、考えが甘いのか
真似をする際にどこか抜けている場所があるのかな？ >>623
diffとってみたら？
同じソースを書こうとしなくていいと思うよ
丸コピーして、わかりそうなところを書き換えて
どこが変わったのか見てみる
ってのを繰り返すといいよ、最初は 質問です
「ルート相対パス」という用語の初出はどこかご存知の方いますか？
個人的にはDreamWeaverかAdobe GoLiveのマニュアルあたりではないかと踏んでいるのですが
../../foo/var ← 相対パス
/foo/var ← 絶対パス
http://foo.com/var/hoge ← URL
と説明してたら、Web界隈の人に袋叩きにされました… すみません追加で
勉強してみた結果、Web界隈では
../../foo/var ← 相対パス
/foo/var ← ルート相対パス
http://foo.com/var/hoge ← 絶対パス
と呼ぶことは学んだのですが
この場合、絶対パスの
http ← スキーム
foo.com ← ホスト名
/var/hoge ← この部分はなんと呼ぶのでしょうか？ なんどもすみません
目的は、なんでルート「相対」パスになったのか、を調べたかっただけです
（ドキュメント）ルート（を起点にした）絶対パス
なら理解できるんですが
この呼び方が気に入らねえ！とかそういうあれではないです
よろしくお願いします >>627
俺はjserなのでpathnameと呼ぶ。
理由はlocation.pathnameで取れるから。 >>628
（ドキュメント）ルート（を起点にした）相対パス
だからでしょ >>626
ドリームウィーバーMLで当時
ルート相対って呼び方キモいって話題になったような思い出
00年代初頭だと思う
初出がマクロメディアかアドビかはわからんすまん >>630
それはおかしいんじゃ？
2ファイル間のrelativeなパスだから相対パス
absoluteな起点からファイルへのパスだから絶対パス
なんだし 考え方はCSSの
positionのrelative、absoluteと同じだよ 「ルート相対パス」なんて用語はないよ
現在のファイルの位置を起点にするなら相対パス
そうでないなら絶対パス 「起点からの相対的な場所を示すパス」が相対パス
「起点がなくそれだけで場所が特定される絶対的なパス」が絶対パス
http://example.com/foo/var
を現実世界に例えると
http://example.com が家だとすると /foo/var がその玄関からの相対的な場所(部屋)を示してる
/foo/var だけじゃWeb上のどこにあるかわからないでしょ あるんだなそれが
ルート相対パスでもroot relative pathでもググるとヒットしまくる
俺も変なの！って思ってる
ウェブ制作業界以外で通じるんだろうか？ >>635
起点から相対ってw
それ絶対パスじゃんwww ルートからの相対パスを略してルート相対パスって言ってるだけだぞ
別に用語でもなんでもない >>635
>http://example.com/foo/var
>Web上のどこにあるか
いいことを教えてあげよう
通信スキーマ、ホスト名、ドキュメントルート起点の絶対パス
この３つを組み合わせたそれはURLって言うのだよ https://tools.ietf.org/html/rfc3986#section-3
ここになんて名前か書いてある
foo://example.com:8042/over/there?name=ferret#nose
の場合
foo ・・・ scheme
example.com:8042 ・・・ authority (= userinfo@host:port、userinfoとportは省略可能）
/over/there ・・・ path
name=ferret ・・・ query
nose ・・・ fragment 絶対パスだろうが相対パスだろうが、
パスという単語が含まれていることから、
これはパスに対する用語
URLで言えば /over/there の部分がパス >>640
難しく考えすぎ
相対は二点間の相対的なパスを表すものだから
必ず./か../から始まる、ただし./は省略可能
つまり、/から始まる相対パスなんてないんだよ >>628
> 目的は、なんでルート「相対」パスになったのか、を調べたかっただけです
Adobeが提唱した言葉だから、DreamWeaver使いの間で広まっただけ(非正式用語)
https://teratail.com/questions/17299 DreamWeaverだけの人間を
Web界隈の人と呼んでほしくないね
素人に毛が生えた程度の人間じゃん。ハゲのほうがまだまし >>649
DW使いでなくても二次情報を信じる人によって伝播していくんだよ
皆が一次情報だけを読むなら、こんな言葉は広まらない
Web界隈の人は皆、仕様書を人間だと思うかね？ × Web界隈の人は皆、仕様書を人間だと思うかね？
○ Web界隈の人は皆、仕様書を読む人間だと思うかね？ >>651
仕様書を読むかどうかは論点にしていない
DreamWeaverだけの人間をWeb界隈の人と呼ぶなと言ってる
ハゲ未満なんだから DreamWeaverだけの人間をWeb界隈の人と呼ぶなと俺が言ってる こいつ話わかってないのか
Web界隈の人なんて言ってるから
そいつはWeb界隈の人じゃないって
いってんだろうが >>656
君こそ話を読めてるの？
ルート相対パスと呼ぶ人が「DreamWeaverだけの人」とは限らないと否定されてるでしょ DreamWeaverだけの人間っていうのは
フォトショとかイラレとか昔印刷物を扱っていたやつを
ウェブサイトづくりに再利用できるようにしただけだからな
道具の力でウェブサイトが作れるだけで基本的にウェブ界隈とは関係ない人間 ルート相対パスなんてDreamWeaverだけでしか使われていない
Web界隈からすれば、間違った用語 >>648
当時もうAdobeだったっけ？
まだMacromediaじゃなかった？ >>631
>>634
こういう自分らが基準ってバカがいるからこの業界は駄目なんだわｗ >>659
界隈だとさｗ
この世界はコロコロ変わるのに何を今更ｗ だが、ルート相対パスが使われる世界に変わったことはない >>662
DreamWeaverが基準なんですね。だからお前は駄目なんだわｗ >>665
じゃあお前は何を基準に仕事してるんだと？
道具を笑う前に自分の道具を晒せやｗ >>661
ごめん、そこまでは分からない
Dreameweaver 8当時もヘルプに「サイトルート相対パス」が使われていたなら、Macromedia提唱だと思うけど
https://helpx.adobe.com/jp/dreamweaver/using/linking-navigation.html >>666
今ってDW人口って業界のどれくらいなんだろう？
IDE派の人
エディタとSASSなどのツール派の人
とか色々いると思うけど >>669
CC時代になってからは手軽に導入できるしかなりいると思う
ていうかCC時代になるとDreameweaver8とかの時代とはまるで違うから
批判してる人は現状を見てない方なんでしょう 昔はDW使いでなければ人に非ずみたいな感じだったのにほんの10数年でジジイしか知らないくらい落ちぶれたのは何故？
バカにしてるんじゃなくて、理由を知りたい。
だって少なくともエディタで手打ちとかより明らかに楽じゃん。 > 昔はDW使いでなければ人に非ずみたいな感じだったのにほんの10数年でジジイしか知らないくらい落ちぶれたのは何故？
有料ツールだから Dreameweaverはウェブページを管理する作業がめんどくさいて聞いたなぁ >>675
今や他の方が使いにくくなった
CCになってからバージョンアップが早い >>676
じゃあワードプレスのテンプレートを作る方法を教えて >>672
>エディタで手打ちとかより明らかに楽
そうでもなかったからじゃない？
スタイルを入力するUIはハックに対応できなかったし
レンダリングされる画面も完璧ではなかった >>677
index.phpってつければできますよ >>678
DWは一昔前とまるで違ってて今はもうUIからしてまるで違ってるね
CCになってから更新修正が随時行えるようになったのが大きいんだろうな
体験版でタダでお試しで使えるし試しに視察でもしてみては？ > スタイルを入力するUIはハックに対応できなかったし
> レンダリングされる画面も完璧ではなかった
今のバージョンはそんなこともない こういう話題は自分らが使ってるのこそが1番だと思い込んでるから堂々巡りよ 日本だけじゃなく世界規模でこんだけ利用者激減したんだから万民大納得の理由があったはずなんだよ！
これだれか説明してよ。
下手にオーサリングツール全盛期の頃を知りかじってる人が客だとなぜツールではなくエディタ使ってるのか説明しなきゃならないときがある。
けど俺は分からないので「エヘヘ…何ででしょうね…」 >>688
DW全盛期だった00年台と
今はウェブ制作に関わる層が変わっちゃったからじゃない？
10年台に入ってからはバックエンド、アプリ開発する人達が台頭してきて
フロントエンド屋もそっちに引っ張られてる感があるじゃん？ ウェブサイトに求められているものが変わったからでしょ？
昔はポスター、新聞広告、チラシの延長で、見た目だけ気にしていればよかったのが
SEOとかで正しいタグを使うことが求められ、HTML/CSSの知識が必須となり
オーサリングツールを使っても結局テキストエディタとしてしか使ってないのだから
お金だけかかってメリットがないものが使われないのは当たり前 >>688
あなたが使わない理由を説明すればいいのでは？ >>688
単純に使いにくくなったからだよ
ブラウザごとに異なった対応を山程しなきゃならなかったっつー黒歴史があって
DWはそれに向いてなかった __ ,,rｭ
, ィ´r'´ ｲ }｀丶、
∠､_ｲ / j ヽ ヽ
／ ￣｀ ` 丶 、 l ｀､
/ ｀`ヽ､j
{ '''''' '''''' }
l. j
!、 l、
（ ,} （●）, ､（●）､ {. ）
ﾞl ,ﾉ(､_, )ヽ､ !´
l ｀-=ﾆ=- ' ,!
ゝ、 ｀ﾆﾆ´ ノ
｀丶､＿ ＿ - '´
￣
http://twitter.com/creditcardmiu/status/997554544769822720
みうの新note >>694
あんまり干渉はしないんじゃないかなあ
VSCodeがよりGit使いやすくなるだけで > ブラウザごとに異なった対応を山程しなきゃならなかったっつー黒歴史があって
IEの呪縛からようやく逃れたから多少は楽できる VScode以外のエディタがますます衰退していくな ねえ、ドリームウーバーつかってるときって一つ一つ手打ちしてるんですか？ 使ったこと無いのにヘタなこと言うと失笑買うだけだぞｗ
DW8で時間止まってる人はCCになってからは別物だからここ参照
https://www.adobe.com/jp/products/dreamweaver/features.html こういう風にやたら人の道具を貶してるような奴は大した仕事してなさそうｗ エディタ論争は結局自分が使ってるのが１番って結論になるから無駄だな 世の鄒勢がオーサリングツールからエディタに退化した合理的な理由を聞いているのであって、
どのエディタが好きかという話ではない。 だからがオーサリングツールの開発効率が悪くなり
テストエディタの開発効率が良くなったからだと オーサリングツールのメチャクチャなコード見て保守したいと思うかってところじゃないの DW突然落ちるし重いし、さりとてフォトショやイラレとの連携が取れるかとったらたいしてとれないし
エディタ使った方がいい エディタがデファクトのせいでHTMLやCSS覚えなきゃならん。ほんまクソ。 > CCに親でも殺されたか？ｗ
luckerと同じ発想だなあ
ひょっとして、ご本人様ですか？ CSSでbrと同じ分だけのスペースになるようにmargin-bottomで指定する方法はありませんか？ >>699
落ち着かれよ
今のDWがどうのこうのの話ではなかろう
10年くらい前の話だ htmlとcssとjavascriptのファイルやフォルダの保存名についてなのですが、
通常はフォルダやファイルの名前は全て小文字で保存・管理するのでしょうか？
他にも、頭文字だけ大文字か、全て大文字とかあると思うのですが・・・ >>717
OS／ファイルシステムによっては大文字小文字を区別したりしなかったりするので
どちらかで統一したほうが無難 >>718
>>719
ありがとうございます！
全て小文字が無難そうですか
すみません、もう1つお聞きしたいのですが、
2単語以上からなる場合、例えば、
about me というファイルやフォルダを作りたい場合の命名は、
スペースを入れてabout me なのか、アンダーバーを入れてabout_me
どちらの方が無難でしょうか？ >>720
>スペースを入れてabout me
現場でやられたら
真空波動拳くらいは許されるレベル Ruby on Rails では、クラス名は、Upper Camel case (ラクダ) / Pascal case。
例えば、CatFood
ファイル名は、Snake case (蛇)
cat_food
Linux では、A・a は異なるファイルになるけど、
Windows では、同一のファイルになるから、大文字を使うと危険！
小文字・アンダーバーだけを使うべき >>721-724
スペースは使わずに、アンダーバーだけが良いのですね
大文字小文字の区別がない場合は大変ですね・・・
とても助かりました
教えて頂きどうもありがとうございました！ オッカムの剃刀について、伊勢田哲治は次のように説明した。
例えば、等速直線運動に対する次のような説明があったとする。
外から力がかからない物体は、神が等速でまっすぐに動かし続けている。
この場合、「神が」という部分が説明に不要である、として切り落としてしまうのがオッカムの剃刀だとし、すると次のような説明が得られるとした。
外から力がかからない物体は、等速で直進する。
>>724の場合、Ruby on Railsが説明に不要である。 一部のスマホで縦スクロールできる画面を全力で一番下まで持っていくと
下の部分だけタップ出来なくなりますが皆さんはどのように対策してますか？ >>720
URLはアンスコじゃなくハイフンを使うのがSEO的にはいい
というのも、ハイフンは単語の句切りとして扱うけどアンスコは単語の一部としてひとまとまりにされるから
「about-me」は「about me」と認識されるけど「about_me」は「about_me」という一つの単語として認定される
と、Google自身が説明してる Rails で例えたのは、Rails をまねたフレームワークが多いから。
たぶん、名前規約も同じ
クラス名が、CatFood なら、
ファイル名は、cat_food
機械的に置き換えられる Rails真似てるってまじで？
そんな最近の話なん？
蛇、駱駝、鎖、ハンガリー人のバトルはもっと古くからあったじゃん？
自分がC言語を齧りかけてた90年台には、パソ通のボードでよく見た
BASICにハマってた80年台は、通信手段持ってなかったのでよくわからんけど ruby信者のウリジナル発言は今に始まったことじゃないから。 ハイフナイズという言葉は初出から200年もたってないから、歴史的には最近の話 スペースをおすすめしないもっとちゃんとした理由を知っとけよ。
URIで使って良い文字の中に含まれてないからな。
半角スペースはURIでは%20になるんだよ。
だから、about%20meになってしまう。 読みづらいし文字数が増えるからダメなんだよ。
ハイフンやアンスコの方が読みやすい。 about 100 yearsとかだと数字が混ざる。 制作中もめんどくさいぞ
cd about me
→そんなディレクトリはないと怒られる
cd about\ me
→こうしていちいちエスケープする必要がある 世の中にはアンダースコア打つのにも
いちいちShift押さなきゃ行けない人がまだ沢山いるんですよ！
すこしは気を使って！ 何をくだらんことでじじいがマウント取ろうとしてるんだがｗ Shiftが不要ってどんな環境？
スマホとかのことを言ってる？？
おじいちゃんだからマジでわからないw macOSはシフトなしでアンダースコア出るな
0x5Aと0x5C両方のキーを用意しないってことが出来たのは
ハードまで作ってるアップルの強みだわな microsoft forms のiflameを埋め込んだページのiflame部分をクロームで見るとすぐ読み込むのですが、ie11だとローディング状態から進みません。どのようなことが原因と考えられるでしょうか？ >>749
仕事で必要でf12モードからヒントなど調査できますでしょうか？ >>750
コンソールと、ネットワークのところ見てみれば？
ていうかMSの開発者もやっぱ
IEは後回しにしてんのかね IEはもうセキュリティアップデートだけじゃないの？ >>752
Mcrosoft FormsってのはMSのサービスで
Webベースのアンケートフォームを手軽に作れちゃうやーつ
それがChromeで問題ないのにIEでコケるってことは
開発時にIEをないがしろにしてるのかなーって >>755
あるね
うちの会社たまに使われてるわ
総務から「給茶機のお茶の種類どれがいいですか？」とか
そんなレベルだけど >>747
> macOSはシフトなしでアンダースコア出るな
アンダースコアはSHIFT+-だけど
もしかしてJISキーボードなんか使ってるの？
USキーボードが世界標準だよ 時々、いままでどうやって生息してたんだろってくらい
頭のおかしいデザとかディレクターいるよな まあ自分と異なる人を
頭がおかしいと表現するのもいささか 今のトレンドです！とか言って4,5年前流行ったデザイン出してくるデザイナーはいるな
現実見ろよと言いたくなる 4～5年前ならまだいいけど
それいつの？！ってサイトあるからなぁ
企業のサイトに多いけど
大手ですらおまそれ10年前やろってままのあるし IT企業やサービス業でなければ、見えれば良いって思ってるから。
XHTMLの一部上場企業を探すのも苦労しない。 >>767
えとな。企業っていうのはサイトを公開するのが仕事じゃないんだ
ケーキ屋だったらケーキを作る
花屋だったら花を売るのが仕事なんやで それは工場の仕事であり、企業の仕事はもっと広いのです PDFの裏にあるPostScriptなんか誰も気にしないのと同じ。 >>753
未だにそんなものをビジネス用途で使うとこは会社の体制を疑うわ >>767
その位年数経てば一回りして逆にいいかもしれんｗ ウェブサイトなんて目的を達成できてればそれでいいからな 阿部さんのほ～むペ～じは
1996～8年の最新トレンドだからな
でも最近、また横にメニューフレームおくデザイン流行ってるから
20年たって一回りしたのかも sassの教科書買おうか迷ってるんだけど買わなくても身につく？どうしよう。 >>779
タイトルしか知らないけど
特に困ることはないな ネットで入門って検索してたら大抵のことは身につかないかね… >>781
そう？
95年に始めて以来、本なんて
おじさんほとんど買ったことないよ
わからんことは作った人に聞くのが一番だよ 昔はネットの情報も少ないし通信費もあったしで
本とかかったけど今はネットで検索する方が早いからなぁ ブラウザ間での改行幅の扱いで困ってます
Chromeでpreで囲まれた範囲をマウス右ドラッグすると次の画像のようになります
https://i.imgur.com/XkPkMkF.jpg
改行幅の指定がおかしいのかとline-heightやfont-sizeなど関連するCSSを
いじっても一向に変化しません
もちろんFirefoxではそうならずに改行幅とフォントサイズは一致しており、
上の画像のように重なった部分は現れずドラッグした範囲は一色で塗りつぶされます
これを解消するには改行幅を充分に（150%など）とるしかありません
何が困るかと言うとこのpreの内部で特定文字にだけbackground-colorした場合に
塗られる範囲が上下行にかぶってしまい、上下行の文字が見えなくなるのです
確か過去バージョンのChromeではこんな重なりは無かったように思います
この塗りの範囲を改行幅（行の高さ）を維持したままでCSSでどうにかする方法はあるのでしょうか？
また何かヒントがあれば教えていただけるとありがたいです >>786
今書いているコードを見せないとはどう言う了見だい？ >>786
ならない
preだけじゃなくなんかタグがある or cssでなんかやってる >>786
そんだけ長文かく元気があるなら
HTMLとCSSを晒せよこのマゾ野郎！
http://jsfiddle.net/ まあ長文読む気なんかないよね
要するにフォントサイズの縦幅と改行幅をぴたっと揃えたいって話なんだけど
リセットCSSでもだめ
ここには分かる人が居ないってことがわかりました
どうもありがとうございました そ、そんなこと言っても答えだけ書いてあげたりしないんだからね！ >>791
ちゃんと読んでコード書いて試して答えてあげたのにこれだよ
正確には「必要な情報を出さない質問に答えられる人はいない」だな
今出てる情報ではそんな症状にはならないから
まずは質問できるレベルになれるように勉強してね コードも見せずに質問するやつなんてまじめに答えるだけ無駄やで UIを作るのに、
CSSのグラデーションやCanvasを使用することは多いですか？
それとも自分でイラレやフォトショを使って画像を用意することの方が多いですか？
もし後者の場合、イラレとフォトショはどちらの方が使えると今後に良いでしょうか？
両方使用するのが一番だとは思うのですが、毎月の出費が痛くて・・・
宜しくお願いします UIというかサイトにもよるけど
・CSS+アイコンフォント
・CSS+SVG
がほとんどかな
画像でごちゃごちゃすることあんまりない
イラストや装飾多いサイトなら画像もありだけどそうでなかったらわざわざ画像にする必要ないし
イラレかフォトショかだけど、アイコンフォントやSVG作るにはイラレ、イラスト描くにはフォトショが向いてる
とだけ言っとく イラレ使えなくてもWEBの仕事はできるがフォトショ使えないのは話にならんからな >>796 そうそう、イラレで制作しない
データ送られてきた場合は編集するからイラレの基本は知ってるけど
以前のAdobeは購入したら終わり＝毎月の経費が掛からん
でも、最新verで送ってくる人の開けないaiファイルが多いんだよね・・・ >>793
いやいや
＞もちろんFirefoxではそうならずに改行幅とフォントサイズは一致しており、
って書いてるし
ブラウザ依存のバグの可能性があるから聞いただけですよ
知らないなら絡む必要なし >>802
だからChromeでもならないって書いただろ
preだけならならないの
他のタグやcssが原因でChromeだけがなってるんだからコード見せろって言ってんだよ webでのイラレ使いをもうみんなで追い出そうぜ
そうすればアドビとの無駄な契約が1つ減らせる。
イラレなんてデータ開く為だけに契約してるわ Flashが消されたように
フォトショ、イラレも消されればいいのに
あんなの標準じゃない、標準にしてはいけない XD便利だよ
win10の最新版じゃないと使えないゴミだけど XD便利だよ
win10の最新版じゃないと、使えなくてゴミになるけど CSSでのセレクタ(？)の指定方法について質問なんですが
.header > .article-text > a { font-size: 18px;}
クラス→クラス→aタグの指定方法がわかりません。上記のように書いたのですがどこがおかしいのでしょうか？
（article-textクラスは複数あります。） >>810
おかしくないぞ
> の意味を勘違いしてるんじゃ？
htmlも出して >>811
<div class="header">
<div class="article-text">
<script type="text/javascript">
○○○○〇〇〇〇
</script>
</div>
</div>
中途半端な小出しで申し訳ありません。
JavaScriptで外部サイトから得たaタグへの編集を行なおうとしていました。
クラス→クラス→タグの場合の指定方法が分からなかったので質問させてもらいました。（＞の後はドットが必要なのか等）
HTMLを見直してみます。
問題点を絞ることができ大変参考になりました。ありがとうございます。 >>804
>>806
おま環が標準だと世界中が困るｗ div.header > div.article-text > a
だろ イラレが要らないって意見フロントエンジニアなら理解できるけどデザイナーで言ってんなら機械音痴のジジイかな？って思っちゃうね 他人のサイトのソースをコピーして自分のサイトで使うのは
権利・倫理面で問題ないのでしょうか？
HTML,CSS共に参考にすることあるんですけど
「パクってんじゃねーよ」的なお叱り受けるのかなと。 ケース・バイ・ケースだよ。
現実してはみんな多かれ少なかれやってる。
バレたくないなら少し改変するとか。 比率の問題でしょ
あるサイトのコードが1千行あるとして
そこから10行コピーしてもコピーしたとは思われないないけど
数百行コピーすればコピーしたと思われる 要素一つだけ使ってそのbackground-colorを一部分だけ表示させたいんだけど無理だっけ？
（一部以外は透明でも不透明でもかまわない） >>819
>>820
ありがとうございます。
大層なものは作れるレベルじゃないので問題なさそうですね。
少しずつ参考にする形でやります。 >>823 ㌧
beforeが使えるかもしれない
やりたいのはこんな感じ
http://jsfiddle.net/ba93sc1h/
これでmargin-topのautoが効いて中央に表示できれば・・
みたいな 企業サイトを作るのにwordpressって利点多い？
テンプレート作成の手間か、プラグインによる機能の後付の利便さか、で迷ってる >>825
素人がガンガン更新するなら良いかも知れないけど
そうでないならそれほどでも >>827
クライアント側の素人さんが自分で告知のニュースとかを更新したいという要望に応えるならかな レアケースかも知れんが
普通にデザインしてコーディングして必要ならJSで動きもつけて…
って普通に作ったサイトをポコっとWPに当てはめ
字面とか、コード複製でなんとかなる部分は客が更新
難しいところはこっちに振ってもらって都度請求
ってスタイルで運用してるサイトがいくつかあるな 運用してる会社がなく、やめるとなるともれなく死亡するスタイルな いや、俺が知る限りだが、それやってるの数社ある
望みは捨ててはいけない >>829
いやいや地方じゃ結構需要あるスタイル
毎月更新料は払いたくないがちょっとした更新は自分らで簡単にやりたいとか
個人経営の小口案件でははわりとある。あとトラブル対処は案外そういうとこの方がチマチマ取れるもんだ 大手代理店とそこそこ大企業案件でもそういうのやるよー
このHTMLをコピペするとこういうレイアウトになります
っていうコンポーネント集を一緒に作って渡して
お客さんが自分で更新していくスタイル dreamweaverCCでコードビューのソース自動改行を「無し」にすると
ソースの右端が切れるんだけどなにこのクソ仕様・・・
事故るわこれ <span style="font-family:'Times New Roman'; font-size:15pt">あ</span>
<span style="font-family:'Times New Roman'; font-size:15pt">い</span>
<span style="font-family:'Times New Roman'; font-size:15pt">う</span>
<span style="font-family:'Times New Roman'; font-size:15pt">え</span>
<span style="font-family:'Times New Roman'; font-size:15pt">お</span>
見たいなHTMLを
<span style="font-family:'Times New Roman'; font-size:15pt">あいうえお</span>
に修正してくれるソフトはありますか？ `<span style="font-family:'Times New Roman'; font-size:15pt">` +
`<span style="font-family:'Times New Roman'; font-size:15pt">あ</span>
<span style="font-family:'Times New Roman'; font-size:15pt">い</span>
<span style="font-family:'Times New Roman'; font-size:15pt">う</span>
<span style="font-family:'Times New Roman'; font-size:15pt">え</span>
<span style="font-family:'Times New Roman'; font-size:15pt">お</span>
`.replace(/<span style="font-family:'Times New Roman'; font-size:15pt">(.*)<\/span>\n?/gu, '$1') +
`</span>` 正規表現だけでやるのは俺は無理だなあ…
俺ならperlでもphpでもいいから、
1行ずつマッチしたものを変数に結合していって最後に取り出しかな。 正規表現は面倒くさいので､なにか自動的にやってくれるソフトないですかね？
HTML整形ソフトにそんな機能は無いのでしょうか？ >>841
単なる､｢あいうえお｣じゃなくて長文なんですよ。 ピンポイントすぎるw
そんな機能を持つソフトは知らん。
スクリプト書くスキルは必要だよ。
こういう機会に覚えていくもんだよ。
役に立たないレスですまんが… >>843
htmlは初めて触ったもんで､なにも知らんです。
PDF→HTML→某ソフト取込をした後にレイアウト修正が上手くいかないのでHTMLをいじろうと思ったら､このような無意味なコードが沢山ありまして､困っています。
こんな馬鹿なコードはあまりないんですかね？ 例えばだけど、
Wordなんかで原本を作って変換すると、人間ならしないバカなコードは出るよ。
その話からして変換してるから仕方ない。
ブラウザに表示された文章をコピーした方が早くない？（笑） 電子書籍をHTML化しているので､コピペは物理的に無理ですね。 HTMLでどうこうするスレだから、ここでは難しい気がする。
アプリかスクリプトのスレじゃないかなあ？
お題を具体的に言わないと冷たくされて終わりそうだけど。 PDF（Wordなんかもそうだが）からHTMLに変換する方法には
大きく二種類ある
一つは、PDFのデータを解析して出力する方法
もう一つは、PDFを（仮想的に）印刷して、その印刷データを解析する方法
基本的に前者が取られるがこの場合、PDFをどうやって作成しているかが重要になる
ただしく作成しているのなら、>>836のようなことにはならなが
オーサリングソフトなどを使って、GUIで作成していると、
見た目とデータがめちゃくちゃになることがある。
例えば、文書の一部を黒塗りしたけど、データとしては残ってたなんて話があるだろ？
あれは、文章の上に黒い矩形をおいただけだから。見た目には消えててもデータ的には消えてない
他にも、第一版として作成された文章を誤字をなおすために、上から書き加えると
データ的には変わってなくて、修正済み文字が最後の方に登場したりする
図形（文字が含まれる）を後から追加したため、そのページの最後の方でいきなり図形の文字が登場する
見た目には段落になってるが、文字を大きくしただけ
とか、まあめちゃくちゃ。見た目とデータの位置が正しくなかったりする
PDFを（仮想的に）印刷して、その印刷データを解析する方法を使えば
そういったことは起こらないだろうが、今度はただ単にもっと処理が難しいだろうな Googleドキュメントで画像から文字化してくれるからこれ使えば？ 文字ごとを括ってるタグ一緒なら一括置換で消せばよくね？ そういえば､Acrobat DCからだと一括で出来なくて面倒くさいので､バッチ処理できるアプリを探したんですが､見つからなくてしかたなくRTF化してからHTML化したのが原因かもしれませんね。
へんてこりんなmsoなんちゃらというコードがあって調べたらマイクロソフトオフィスと関連があるらしいので､RTF化したのが悪いようですね。
パラグラフとパラグラフの間に何十行分の空白があってGUIだとどうしても消せないのも一旦RTF化したのが原因のようでした。Acrobatからだとちゃんとレイアウトが維持されていました。
それにしてもPDFをHTML変換するソフトはあるんですけど､ロクなのがない。Acrobat DCでバッチ処理する方法を探します。
いろいろとありがとうございました。HTMLは初めて触りましたが､面白いですね。 俺メモ
HTMLテンプレート
BootStrapテーマ >>849
レスさんくす
3日ぶりに開いたら何故か普通になってた。
環境設定いじった後に再起動してなかったからなのかもしれない。
デフォのフォントは半角英数と全角英数の区別がつきづらからそこでミス起こってMSPゴシックにしたし
色々機能ついてるせいかいちいちもっさりしてる印象。
スクロールバーの明度差が無さ過ぎて見えないし
遣い慣れたのが変わるとミスや事故に繋がるからコロコロ変えるのやめてほしいわ。 >>855
DWに限らんがAdobe関連は公式のCC道場とか
動画で解説やってるとこを見た方がわかりやすいね
Adobeといえば先日Museの開発終了がアナウンスされたな
まあ流石に需要無しってとこなのかな AIが奪うのはデザイナーの仕事のうち
時間をかければ誰でもできるつまらない作業
クリエイティブなことをしていれば、職を奪われたりなどしない
ということは、大半のやつは職を奪われるということだなｗ AIが仕事してくれるんだから何もしなくていいじゃん ベッドに寝てるだけで、ゲームも飯も糞も全部自動でやってくれんだよ。
憧れの生活すぎるだろ。 >>859
理想・・・ロボットがすべてやってくれて、人間は働かなくても食っていける
現実・・・ロボットがすべてやってくれて、儲けはすべて社長のもの。金を入手する方法がない AIが仕事してくれるのにそのAIを使いこなせる専門職が必要とかになるんでしょう 15年くらい前からイキった素人が無料のhtmlテンプレートあればデザイナーやコーダーなんていらねえ
MTあればデザイナーやコーダーいらねえ、WPあれば、BootStrap（略
なお現状は >>861
そんな人生が楽しいのか？という問題だなｗ
部屋に籠ってベットの回りに何でも手が届くような生活してると老け込むのも加速するんだとさ >>864
Googleなどの簡単無料サービスやSNSにかなり顧客を奪われたから
イキったプロが自分らの専売特許にしてるエリアはかなり切り崩されてるじゃんｗ
サイトの制作体制もスマホが中心の今はレスポンシブへの移行を余儀なくされてるし
何だかんだで振り回されてるわけだから自分らだけ特別とか思わず謙虚に行かなアカンよ >>866
ウェブ制作とSNSやグーグルが食い合っているかー？
むしろ彼らのおかげで仕事増えているような… 仕事は増えてるよなぁ
しかもデザイン外な事が増えてる
ツイッターや FBのアイコンまで作らされる
んなのテメェでやれってレベルの雑務が増えてる 情報発信はSNS主体に自前でやるってとこは多くなったな
まあスマホが生活の中心になった今はその方が自然な流れではあるが 質問です
htmlのtableタグで書かれた表があり、レコード数400くらい、カラム数は5列です
現在、1列目に「通し番号」が入っており、その昇順になっています
2列目には一意な別の番号が入っています。現状では完全にランダムな順です
この表を、2列目の値で昇順に並べ替えて欲しいと要望があったのですが、
何か良い方法ないでしょうか？
ソートできるように作り変えるということではなく、ソースコードそのものを書き換えたいのですが、
<tr>～</tr>をちまちまコピペして並べ替えるのではあまりに骨が折れるので… >>870
ブラウザでコピってテキストエディタに貼ればタブ区切りになるじゃろ >>870
もしくは
二列目でソートするJSをチャチャっと書いて
開発ツールで実行して
描き変わったDOMを開発ツールでouterHTMLコピーすればよかろう エクセルにコピペしてフィルターかければいいだけじゃないのか そんだけの行数を手書きしたやつがいるだと？DBか何かのデータじゃねーの タブ区切りにしたものなり、直接なりをエクセルに貼ってソートまでは思いついたのですが
そこからhtmlに戻す方法が浮かばなくて…
コツコツと追記されてきたデータ表なのです >>875
ソースがどなってるかわからんから検証めんどくさい
2行ぐらい書けないの？ >>875
エクセルでソートしたら、そこを範囲選択して右クリックしてコピー、
ブラウザ開いて、
`ここに貼り付け`.trim().split`\n`.map(row => {
var cells = row.split`\t`;
return `<tr><td>${cells[0]}</td><td>${cells[1]}</td><td>${cells[2]}</td><td>${cells[3]}</td><td>${cells[4]}</td></tr>`;
}).join``;
スマホなので確認できないけどこんな感じでどうだ × ブラウザ開いて
○ ブラウザのデベロッパーツール開いて pcで確認できた。多少冗長だったので修正
`ここに貼り付け`.trim().split`\n`.map(row => `<tr><td>` + row.split`\t`.join`</td><td>` + `</td></tr>`).join``; Dreamweaver CS6アカデミック版をメルカリなどのフリマアプリに出品しようと思ってるんだが 2万位で買う奴が居るかな？ Dreamweaver CS6アカデミック版をメルカリなどのフリマアプリに出品しようと思ってるんだが 2万位で買う奴が居るかな？ >>878
よくスマホでそれを書く気になれたなw
わりとマジで尊敬する >>881
スレ違いも甚だしいけど
アカデミックて転売・譲渡できんの？
出来るなら俺お金持ちになれる！ 皆さんありがとうございます
確かにソースないとわかりにくいですよね、すみません
<table>
<tr>
<td>Clm_1_通し番号</td>
<td>Clm_2_別の番号</td>
<td>Clm_3_項目名</td>
<td>Clm_4_ファイルへのリンク1</td>
<td>Clm_5_ファイルへのリンク2</td>
</tr>
<tr>
<td> 1</td>
<td> 54</td>
<td>○○</td>
<td><a>リンク1</a></td>
<td><a>リンク2</a></td>
</tr>
<tr>
<td> 2</td>
<td> 263</td>
～～～～～～～～～～～～～～～～～
上記のような繰り返しで、表としては単純な感じです
ごめんなさい、書いていて気づいたのですが
4列目・5列目にファイルへのリンクが<a>タグで貼ってあるので
エクセルに貼ってソートじゃダメですね… //要素選択の簡便ため<table>にidをふって<table id="odai">となっている前提
var tracks = [...document.querySelectorAll`table#odai tr`].map(track => [...track.querySelectorAll`td`].map(col => col.innerHTML)); //操作しやすいよう二次元配列に変換
tracks
.filter((track, index) => index !== 0) //一行目はヘッダのようなので除く
.sort((a, b) => a[1] > b[1]) //二列目の数値でソート
.map(track => `<tr><td>${track.join`</td><td>`}</td></tr>`) //マークアップを復元
.join``; >>883
自分も思った。スマホで多彩な半角の記号たくさん打てるとか信じられない。
自分にはストレスすぎて3行目で発狂だわ （横ながら）>>890
もしも>>888の通りだと「 54」スペース入ってるぽいから
a[1] > b[1]のところ数値変換しないとだめ？だった まちがってたらすまん >>893
スペース関係なくね？
"10" < "2" が期待通りとは思えん >>894
そういうことだわ
スペース関係なく文字列だと自分の環境では（不等号の向きによって）全部trueかfalseになってしまった .sort((a, b) => +a[1] > +b[1])にすればいいってこと？ 名前・郵便番号・住所（郵便番号から一部自動入力される）・電子メール の入力フォームのテンプレどっかにないかな どうせ他人に見せるわけでもなし
どんどん使っていこうや >>902
ちゃんとコントロール出来てるなら問題なかろう
今は開発ツールが整ってるから
そんなに混乱することもないし コントロールできてないからimportantを乱発するんやで 見出し箇所を均等割り付けしたいんだけど、
最後の文字以外なんかのスタイルを適用するやつしかないのかな？
…おや、文字をそれぞれiで囲ってflexしたら解決か？ >>905
自分の場合はdisplayプロパティ関連でimportantを乱発するわ
だってさ、displayプロパティって表示/非表示の側面と、レイアウト（改行される/されない）の2つの側面を持ってしまっていて
代替がきかない糞仕様じゃん。
visibirityだと見え方違うし >>906
自分だったら正規表現使ってjsでやるかな。 と思ったら質問の意味が良くわかんねｗ
text-justifyの事言ってるのかな？ >>911
それそれ
効かないブラウザあるから困ったなと >>908
意味がわからん。
displayは元からblockとしてあつかうかinlineとして扱うか
なにもないものとして扱うかのレイアウトの機能でしかないんだが？
なにもないから見えなくなるのであって、
単に見えなくなるだけの意味しかないなら、レイアウトは変わらん
それとimportantを乱発することに何も関係ないんだが、
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。
すべては1.が根本原因なんだよ？ >>906
その方法はアクセシビリティ的にはどうなんだろう… https://dotup.org/uploda/dotup.org1576039.jpg
細かいことなんですがお願いします。
縦方向の中央揃えをしたいのですが若干上方向へ寄ってしまいます。
categoryとh3を分けたらline-heightを調整して何とかできるのですが
.category h3のなかで調整できないかなと。 >>913
たぶんあなたはレスポンシブの経験浅いでしょ？
jQueryでいうhide();に該当するものがcssにあるか？
あるなら答えてみてよ。 https://codepen.io/brenden/pen/RNZXqx
最近javascriptからcssを勉強し始めたものです。
上記のページに記載されているコード（scssではなくcssにコンパイルされたもの)について質問があります。
また、記載のコードは私自身が書いたものではなく、ほかの方が書いたもの、
を自分が勝手に勉強用として使わせていただいているだけです。
bottomとtopでスクロールされる画像が左右にずれていると思うのですが、
これはどこにプロパティーを追加することで解消できますか？
上下で別の画像を使用する手も考えたのですが、コードで解消してみたい次第です。
また、スクロールのスピードを操作することはできたのですが、上下で画像を一致させるには、
どのような手を打つのが妥当でしょうか。
ご回答お待ちしています。 >>916
>913ではないが、display:none >>918
やっぱそうなるでしょ？笑
ちなみにその話を>>908でしたら意味ワカランとか言われたから
この質問をしているところ 円形の線を描くアニメーションを考えているんですけど、1つの要素だと難しいですか？
CSSで頑張るよりsvgつかったほうが早いですかね >>919
noneするのに書き出す必要ないんとちゃうか >>919
意味わからんのは、jQueryでhideするわけでもないのに、
cssでimportantを使うことなんだが。
そもそもhideでimportantは使われてないからなｗ displayは糞仕様でも何でもないし、
正しく理解していれば、
importantを多用することもない >>920
JavaScriptかCanvasかな。
JSなら、そのぐらいのライブラリはいっぱいありそう。 displayでimportant使うことなんてまずないしレスポンシブならなおさらないぞ
それこそレスポンシブ組んだことないんじゃないか？
さらにそこにhideが出てくる意味がわからん
支離滅裂 >>924
一本の線ごときで…と思ってしまいますがそれが一番簡単そうですね
円の上にマスクの要素を置いてそれを回転させるって方法も思いつきましたが、背景ベタ塗りじゃないと使えないから汎用性低そうですね
どうもありがとうございます >>914
見た目が最優先のサイトだからそういうのは置いとく…
でも、めんどくさいからただのテキストにしたよ… >>923,>>923
試しにさ、これcssでどう書くか言ってみて。
<span class="hoge">hoge<span>
.hogeは、スマートフォン用のレイアウト時のみ表示するようにする。
もちろんインライン要素のままで。 >>930
お前も書いてみて。
important使わなきゃできない理由が知りたい >>930
はい
@media (min-width: 600px) {
.hoge {
display: none;
}
}
PC優先のmax指定派ならこっち
.hoge {
display: none;
}
@media (max-width: 600px) {
.hoge {
display: inline;
}
}
ってかこれを書かされる意味がわからないんだけど…
今の話の流れからなんでこれ？ >>930
それは特に困らないんじゃ…
ああもしかして
PC用に書いたスタイルがSPでも反映するようにして
必要なとこだけ上書きする方式なのか？ >>934
いや、それは普通だろ
そのためのメディアクエリだ
それで困るとかならこの仕事向いてない display:inlienじゃnoneを上書き出来ないとでもおもってんじゃねーのw >>908
インライアンってプライベートライアンの親戚か何か？ 便乗質問だけど
@media only screen and (max-width: 576px)
と
@media (max-width: 578px)
ってどうちがうの？ displayするのにimportantって
結局何が言いたかったんだ？
結局これが的中か
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。 git push -f すればいい。
自分が管理するブランチの歴史を書き換えて
強制pushするのはよくやること >>933
ごめん質問間違った
PCの時は非表示、スマホの時は表示を
汎用クラスのみで制御する場合だった
もちろん場所によってはinlineであったりblockであったりのケース >>938
質問は only screen のこと？
だと思って回答します
メディアクエリを適用する対象デバイスを指定するんだけど指定できるデバイスが3つあって
screen:通常の画面
print:印刷
speech:音声読み上げ
それぞれにonly、notをつけれる
何も指定しないとデフォルトであるallになってすべてに適用する >>942
同じ
2つ目のやつのnoneとinlineを逆にするだけ >>942
だからお前が書けって言ったよね？
importantをクソな使い方を
見てやろうって言ってるんだよ。
ほらはやく importantなんてJavaScriptライブラリがつけたスタイルを上書きする時ぐらいしか使わないだろ
あとは破綻したクソなコードを引き継いでどうしようもなくなった時
自分でコーディングしててimportant使う必要があるとかよっぽどクソのコードしか書けないっていう証拠かと importantニキは新しい仕事探せ
それが世の中のため かなり大掛かりなサイトになるが
まずサイトの基本となるスタイル、コンポーネントがあって
その上で、各サブサイト毎に特有のスタイルが重なって
さらにそこに各スタイルをガン無視したLPを作ることになって…
みたいな時に使うことはあるし問題もないと思ってる
ただそこまで大掛かりなサイトは少ないし
それの制作に携わる人もそんなにいないだろうな >>950
その場合は高い優先順位で
スタイルを定義すればいいだけなので
importantを使うっていうのは、その優先順位を
正しく理解できてないだけ >>950
ああそれはあるかも
大がかりじゃなくてもWordPressで既存テーマを基に子テーマを作った時はそんな感じになる
いずれにしてもちょっと特殊なパターンで、>>930のようなこと言ってくるってことはそんなパターンでもなくそもそも理解してないんだろね >>951
ライブラリとかだとこいつには勝てねえってぐらいのセレクタ使ってる時があってそれにはimportant使う時ある >>951
必ずしも全てをコントロールで来るとは限らんのよその手の仕事だと
たまにあるじゃん、メーカーとかインフラ系で
ハウスエージェンシーが最上流を仕切ってて
基本スタイルの時点で頑張りすぎてるやーつ
もちろんそれ作ってる人達もそれが良くないことはわかってて
それでも仕事のしがらみでガッチリやらざるを得なかった感が溢れてる、的な
そういうの
理想的じゃないの >>953
その場合でもライブラリで使ってるセレクタ + 任意のセレクタにすれば絶対勝てるだろ >>955
へー、理想的じゃないのの例が
さっきのレスポンシブの簡単な例なんですか？ｗ
無知な人が偉そうに、できないことだってあるんだよ！と
言われましてもね。お前がわかってなかっただけじゃんで
終わってるんですよ >>944
へ～～～～なるほど
ありがとうございました。 固定高さのdiv内にadsence（レスポンシブ）を配置
毎回広告サイズが変わるがdiv内トップに位置されて下が空いてしまう
高さを中央配置にできないものでしょうか？
ダメ元で
padding: auto auto;
vertical-align: middle;
をしたがやはり変わらずです
そもそもスクリプトがらみでcssだけで対処できるかですが >>960
importantは>>908=>>919=>>930=>>942が頭悪かったっことで無事決着がついた >>960
959ですが付けても付けなくても変わらずです ピクセル数とかってさ、8の倍数文化は意味あるのかな？
なんかコンピュータカッコイイ！にしか見えない。 devicePixelRatio
=> 3
orz... >959
1. 親要素にdisplay: table-cell を指定する
vertical-align は基本的に displayが inline 系の要素にしか効かない
(元々文字の縦位置を指定するスタイルのため)
ただし、例外的に display: table-cell の子要素には効く
tableもtable-row もなくても機能するので便利だが、それでいいのか？と使うときはいつも思う
2. 親要素に display: flex と align-items: center を指定する
未対応ブラウザを気にしないならこれでいい >>955
あるなーそういうの
今やってるのもまさにそうだわ
アホみたいなページ数のマニュアルがある 頼むからもうやめて、オレが悪かったよ・・・
サーバー代ケチる為にライブドアブログ使ったの。
で、独自タグからの展開で訳わかんなくなって乱発したの。 >>965
共に全く表示されなくなります
ちなみに子要素は
ins class="adsbygoogle" style="display: block; height: 90px;"～です
読み込まれる（広告が変わる）度にheightも変わります
その後にもheightやwidh含むパラメータがずらずら並んでいます >>970
親要素にjustify-content: center;align-content: center;は？
https://jsfiddle.net/Lxtb4201/
（要素クリックで広告のサイズ変わるアクション） hrで水平線を作ったんですが、その上に文字や画像が重なってしまいます。
ロゴ、水平線、文字の順に上からならべたいのですがどうすればいいですか？ >>972
何もしなければ重ならずに並ぶ
重なるのはcssでそうなってるから
cssがどうなってるのかはあなたしか知らない
なのでアドバイスしようがない line-heightがおかしいんじゃね？
ともかく先に言われてるようにコード晒してくれるとわかりやすい
あと使わない手もある <body>
<h1><a href=""><img src=""></a></h1>
<hr/>
<svg id"レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 100 100">
<defs>
<style>.cls-1{fill:#ccc;}</style>
</defs>
<circle class="cls-1" cx="50" cy="50" r="50"/>
</svg>
<div style="position:absolute; top:120px; left:200px;">
<h2></h2>
長くてすみません
h1がロゴの画像(svg)、h2が文字です
その中間のやつはよくわからないんですが、それがあると円ができるので残してあります >>976
cssもあったほうがいいでしょうか...?
本当に情弱ですみません >>971
広告は表示されるが上下位置は変わらずです
>>976
h1 { border-bottom: ～ } でhr失くすはダメ？ ごめん
h2 { border-top: ～ } か >>977
人に質問してコードを見せる時は
同じことを再現できるコードを渡すんだよ
ほんで答える人がコピペとかで手を煩わさずに済むように
jsfiddleとかに上げるといいと思うよ >>980取ったら次スレ立てんだよ。
あくしろや。 >>1をコピペしてURL変えただけなのにNGワード言われる
なにがいかんの(´；ω；｀) てすと
以下自スレのテンプレ
―
HTML/CSS のどんな質問にも優しく答えるスレ 33
―
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう すみません
上の２つ繋げてスレ立てようとするとNGになる(´；ω；｀)
誰か立ててください(´；ω；｀) ここまでやっときゃあとは立てれるひとが立てるからそんな安心すんな >>979
解決しました、ありがとうございます
>>980
分かりました。また質問することがあると思うので気をつけます! しょっちゅう、NG ワードになる
よく、MANGO 板でテストしてるけど、さっぱりわからん。
2, 3 文字でも、NG ワードになることもあるし >>978
jsfiddleリンク先の要素の上下位置が変わらないのか
それとも
独自に実装してみた後の広告要素の上下位置が変わらないのか
がわからん >>991
つまり
(a)前者は大丈夫で後者はダメなのか
(b)前者も後者もダメ
(c)前者は試してない、後者はダメ
ということが聞きたかった
レスから察するに(a),(c)の可能性が高いと思うけど
もしも(a)なら、意外なところでハマってるだけで簡単に解決するかも https://jsfiddle.net/wha62x80/#&;togetherjs=bPcdrH8FKT
これのbodyの中身を画面の真ん中(円の縦の中心軸)に合わせたいのですが、どうすれば良いでしょうか。
body｛text-align:center｝と、やってみたのですができませんでした。 >>993
そもそもソースがいろいろと崩れてるので動くかわからないが
https://jsfiddle.net/1zahrk7s/
外接させたい場合（円の中にテキスト全部収まる様にする）はちょいめんどい grid-areaって大昔CSSがない時代に
テーブルでレイアウトしてたようなもの？ >>994
理想の形になりましたすごいです
本当にありがとうございます このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 118日 13時間 29分 0秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
