HTML/CSS のどんな質問にも優しく答えるスレ 32
レス数が900を超えています。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 要素一つだけ使ってその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つかったほうが早いですかね レス数が900を超えています。1000を超えると表示できなくなるよ。
