HTML/CSS のどんな質問に必ず優しく答えるスレ 32
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術も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 >>770
スタンドアロンならともかく、サポート切れたOSをネットに繋ぐのは皆に迷惑かけることもあるからなあ
踏み台にならないよう念入りに警戒しておいてな >>770
使えてもIEは既に多くのサイトサポート対象外ですよ
セキュリティの面でも更新が続いているOS、ブラウザ環境でネットに繋いで頂きたい 特にこのスレには、使えるからといって化石を使い続ける残党のせいで
苦しめられてきた人が多いしなぁ
やっとIEのサポート切れて、たいぶ解放された感あるけど >>770
自分もまだ2000使ってる
8以降のOS嫌いなんだよね こりゃまたとんでもない糞爺が出てきたな。
勝手にしろとしか言えない HTMLの話と言いますかテキストエディタの話といいますか
スレチでしたらスレチとお願いします
便利と言われているVSCODEを使っています
https://i.imgur.com/TRcxf3L.jpg
今回事前にメモに書いてそれをテキストエディタに貼り付けて清書しているのですが、段落の<P>を初めとしたコードの入力が不便すぎて解決方法を知っていたら教えていただきたいです。
１ 既存文の行頭や文章間でコードを入れても判断してもらえない
２ コードが勝手に閉じる（任意でオンオフしたい）
という感じです。
ブログサイトの自動変換では余計なコードが多く文字数が超過してしてしまい投稿できないので自分で打つようにしました ショートカットを覚えて駆使してけば良さそうに見えるけど
vscodeの使い方ならvscodeのスレあるよ ショートカットでやってみます
ありがとうございました 【emmetのラップ変換】
タグで囲みたい文字列を選択
→ショートカット「Ctrl + Alt + ,（カンマ）」
→タグ入力（括弧無しで）
※複数行の場合、入力タグの末尾に*アスタリスク付けると各行がタグで囲まれる >>777
Markdown記法覚えてメモの段階から使うようにすると効率いいかもね >>781
特に飾るわけでもないのでこれいいですね 疑問があるのですが、拡張子が.htmlだと何も指定しないと文字化けするんですが、
.phpにすると文字化けしません。なぜなんでしょうか？
どうでもいいことなんですが気になって夜寝むれません。昼寝ています。 iframeをいくつか並べて内部に３ｄモデルを埋め込んだサイトを作ってます
iframeの表示領域をクリックして別の場所へ飛ぶ処理をしたいのですが
iframeに対してa hrefの指定ができません
クリックリスナーで何とかならないかと試行錯誤中ですがifame部分だけリスナーを取得できないです
iframeの表示領域に対してリンクを設定する方法教えてください >>786
iframeにnameつけといてaのtargetで指定すればいけるんでない？
子フレームのイベントはframesかcontentWindow使えば拾える
子フレームから子フレームはめんどいのでググってね 子フレームのイベントは拾おうと思えば拾えます
あくまで表示領域の部分だけ親フレームから親フレームとしてクリックリスナーを拾いたいだけです
自己解決ですが、単数のフレームの場合なんとか取得できましたが
複数のフレーム領域の取得はHTMLの仕様上無理らしいので諦めます >>789
フレーム内でのインタラクションが必要ないなら、フレームのcontentWindowにリスナー設定して遷移すれば複数だろうが単数だろうがいける
透明のボタンレイヤーを上に置くっていう単純な解決法もあるけど その場合ですとフレームの指定にタグ名であるframeを指定する必要があるので
最初の一つしかできません
座標指定系は調整が面倒なのですでに却下しました 全iframe の contentWindow にアクセスしたいなら window.frames でいいんじゃないの
https://developer.mozilla.org/ja/docs/Web/API/Window/frames なるほど
ここの人は根本的に日本語の問題解決が必要ですね > その場合ですとフレームの指定にタグ名であるframeを指定する必要があるので
> 最初の一つしかできません
これがよくわからなかったんだけど、
https://developer.mozilla.org/ja/docs/Web/API/HTMLIFrameElement/contentWindow
このページの例にある
> document.querySelector("iframe").contentWindow;
みたいなことやってる？
querySelectorは最初に見つかった要素しか返さない
複数が必要なら querySelectorAll があるが
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll すみません初心者ですが質問お願いします
文字を上下の中央に配置したいのですが
写真のコマンドだと何が間違っているんでしょうか？
少し上になってしまいます
教えてほしいです
よろしくお願いします
https://i.imgur.com/qpS4s3F.jpg >これがよくわからなかったんだけど、
あなたの日本語の方がよっぽど意味不明です >>799
top-wrapperの上下左右中央にレイアウトしたい場合は
display:flex;
justify-content:center;
align-items:center;
を追加してみてね >>800
横だが>>798が>>786が何をどう勘違いしてると仮定してどう修正しようとしてるかが分からないのはお前の日本語の問題。
まあこの文もががががなのでお前には読めなさそうだが。
(そして798の指摘が当たってるかどうかは別の問題)
あと多分、
> 自己解決ですが、単数のフレームの場合なんとか取得できましたが
> 複数のフレーム領域の取得はHTMLの仕様上無理らしいので諦めます
これも勘違いしてると思うぜ。まあご自由にではあるが。 >>801
ありがとうございます
一応画像のコマンドでも中央にくるはずだと思うんですが、何が理由で駄目なのか教えてもらえると助かります 上下中央合わせのレイアウトのために
line-heightの値をボックスの高さにするのは
使わないほうが良い
テキストが複数行になった際に行間がバカみたいに広がってしまうので >>804
なるほど
確かにそうなるとめんどくさそうですね
801の人が書いてくれたやり方も含め他のやり方を覚えるようにします
ありがとうございます プロゲートやってるものなんですが今日でhtml.cssの講座は全て終わりvscodeというものをインストールし環境構築まで終わりました
明日からは移動中は入門書を読み、家ではどんどんコードを書いていくこと（webサイトを作っていく事）をしたいんですが何かおすすめのアドバイスなどありましたらお願いします
ゆくゆくは違うプログラミング言語の勉強もやりたいんですが、とりあえずまだhtmlとcssの勉強をしようと思っています
今はドットインストールというものをやろうか考えています
お願いします 自分で考えた物でもどこかのサイトと同じようなデザインや機能を調べながらでも書くのが一番早いと思う
多分JavaScriptが必要になる場面に出くわすとおもう >>807
ありがとうございます
それはあるサイトを見て同じように作ってみる模写ってやつでしょうか？
多分やってみてもかなり詰まりまくると思うのですがその都度調べながらやってみるって感じですかね？
javascriptは必要になってくるんですね
どこかのタイミングで並行してprogateで講座やってみます >>806
そのレベルなら何をやってもいいから、問題は続くかどうかだけだよ。
ただ、ドットインストールにしてもプロゲートにしても、実際に働いてる奴は誰も相手にしてないから、過度な期待はしない事だ。
(誰でも○○を2週間やりさえすれば起業出来てウハウハ！なんて事を信じる事自体、ブラックバイトでカモられてる連中と同程度の阿呆。
この意味ではトップページで堂々とこれをやってるプロゲートの方が詐欺っぽいが、中身は見てないし見る気もないので知らん。
ただ、現実を言えば、「ドットインストール」を完了しました！→なら是非うちに入社してくれ！なんて企業は一つもないし、
「プロゲート」さえやれば即戦力！→なら誰でもいいから入社させて
2週間程度研修で朝から晩まで「プロゲート」漬けにすれば済むのだが、勿論こんな企業も一つもない)
とはいえ、やる気が続く何かを散りばめてるのだろうから、そういうのが必要ならありだと思うが。
ただ、やると決めてるのなら、今時は大学も講義資料公開しまくりだから、
大学生に準じる程度の能力があるつもりなら、本来は大学講義の方を参考にした方が効率はいい。
こっちは中身の確認も手伝ってもいい。
(初心者では無理だし。逆に言えばドットインストールやプロゲートは中身を確認するまでもなくゴミだと断定してるわけだが)
で、一応さらっとググって見たが、まあJavaScriptでよさげなのはぱっと見、無いね。
ただ、CS50というのが引っかかった。こちらはハーバード大の人気講義の日本語訳らしい。
> Week0 Scratch
> Week1 C
> Week2 Arrays
> Week3 Algorithms
> Week4 Memory
> Week5 Data Structures
> Week6 Python
> Week7 SQL
> Week8 HTML, CSS, JavaScript
> https://cs50.jp/
あーなるほど、この順で構築するのか、とは思う。
ただこっちはプログラマを育てるのではなく、プログラミングとは何ぞや？という講義のようだが。 >>809
ありがとうございます
単純に前々からプログラミングに興味がありとりあえず入口としてhtmlとプロゲートを選びました
プロゲートはただの初学者向けのサイトなので過度な期待をしてる人は居ないと思います
プログラミングの勉強を始めるきっかけ作りみたいに捉えられてると思います
これからhtmlをもう少し深掘りしてみようかとも思いましたが自分はwebサイトを作りたいというよりプログラミングを勉強したいので、HTMLは入門書を読むだけに留めてjavascriptというのをこれからやることにしました
大学講義はまだ無理だと思うのでとりあえず今はプロゲートからやっていきます
ありがとうございます >>810
> 自分はwebサイトを作りたいというよりプログラミングを勉強したいので、HTMLは入門書を読むだけに留めてjavascriptというのをこれからやることにしました
この判断は正しい。HTML/CSSは所詮見た目であり、プログラミングではない。
CSSで何が出来るかを抑えたら、それで十分。
（後はCSSでなんとでもなる、という範囲を判断出来れば十分)
> 大学講義はまだ無理だと思うので
大学一年＝高卒でしかないので、言うほど難しくも無い。
ただまあ、Cなら以前東工大や長崎大はまあまあよかったと思ったが、
そもそもJavaScriptは簡単ではあるが初学者向きではないので大学講義にもろくなものがなさそうではある。
プロゲートもドットインストールも有名だからそれなりには整備しているのだろうし、そっちに賭けるのもありだろう。
ただ、
> 自分はwebサイトを作りたいというよりプログラミングを勉強したいので
この場合は通常はPython(或いはRuby)が適切だとされる。
JavaScriptはWebサイト特化に近いし、非同期は初学者にはそれなりのハードルになるし。
そしてガチのプログラマを目指すのなら早い段階でCをやったほうがいい。CS50でいきなりCなのもこれ。
(Cは「使いこなす」のが難しいのであって、「使う」だけ、つまり多少バグっててもいいのならどの言語よりも簡単だから) >>811
ありがとうございます
大学講義についても少し調べてみようと思います
どれから始めればいいのか調べても色々な意見があり正直よくわからなかったのでjavascriptはなんとなくで選びました
pythonから始めたほうがいいって意見もよく目にします
他の言語より少し簡単なんでしょうか？
一度決めて取り掛かったらしばらくはその言語の勉強を続けたいのですが、そういうのも踏まえてpythonの方がいいと思いますか？
cについても調べてみます
ありがとうございます >>812
少なくとも各大学がどの順で教えてるかは参考になる。
そしておそらくCS50も、scratch以前はPython->Cの順で教えてたはず。
Cは各種言語の下敷きになってて、動作上も見え隠れするから、
Cを知ってるのと知らないのとでは理解力が全く違ってしまう。
(つまり、その後の実力が伸びる速度が変わってきてしまう)
だからガチ系は今でも必ずCをやってる。
ただし、CはK&Rからして「他の言語を既に学んだ人が、Cやる用」でかなく、最初にCをやるとほぼ全員撃沈する。
だから最初にまず簡単な言語で「プログラミングとは何ぞや」を理解した後で、
早い段階でCをやるのが一般には最速上達法で、ガチ系は多分大体こうなってるはず。
scratchは最近の「小学生にもプログラミングを教えたい」という需要に応えるべく出来た言語で、
当然だが簡単だしパズル程度で行けるが、実用言語ではなくただのステップであり、長々とやる意味はない。
Pythonはおそらく一番簡単だとされている言語で、使用者も一番多い。
ただし言語としてはかなり糞。とはいえ使用者が多いから撲滅される事はない。
JavaScriptはWeb標準だし、実は実力もかなり高いのだが、それ故、初学者には難解な部分も多い。
まず引っかかるポイントは非同期とプロトタイプと動的なthisだが、
この辺はPythonにはないので、Pythonならこの苦労はせずに済む。
(だから全構築を目指すなら、当然Python->JavaScriptの順であって、逆はない)
あと、界隈がWebだというのもあって、馬鹿が情報発信しすぎてて、間違った情報が多すぎる。
「嘘コケ馬鹿タレ」と峻別するのは初心者には現実的に無理。
かといってほぼ信頼出来るMDNはリファレンスであり、初学者にはちと厳しい。
(MDNも頑張って初学者用のドキュメントを整備してはいるが)
この点素晴らしいのはPHPで、php.netという公式サイトのドキュメントがずば抜けて初学者向き。
ただし言語自体が超絶糞なのと、動作形態がまず鯖ありきなので、一般に初学者に勧められる事はない。
RubyはPythonと同様に簡単で、しかもドキュメントのマスタが日本語だという点がよかったが、
そろそろ死にそうなので、今から新しくやる意味はないかも？ というわけで、最初にどの言語を学ぶべきか、については多分、統一見解はない。(多数派はおそらくPython)
ただ、多分だが、ガチ系はかなり早い段階でCを組み込んできてるはず。
独学する気なら、この辺も自分で調べて正しいコースを構築しないといけない。
大学ならこの辺を先生連中がやってくれてる、というだけ。
だからプロゲートやドットインストールを信頼するのもありだが、
一般的にはそれよりいいと思ってるから各大学がそれぞれ「オレオレ最速上達コース」を学生に提供してるわけでね。
(逆に、大学入試はもう予備校の先生に問題作ってもらうか、程度には信頼されてきてるだろ。
プロゲートやドットインストールが本当によければ、
大学や企業からの新人研修依頼が舞い込みまくるはずだが、そんな話聞いた事無いしね。
《最近は知らんが昔の》LECやTACみたいにダブルスクールで、みたいな話も知らんし)
とはいえどの大学の講義がいいかを判断する能力なんて初学者にはないのだから、
割り切って「行きたい大学」の講義に賭けるのもありだと思うぜ。
少なくとも公開されている講義資料の課題をこなせば、同じ実力にはなれる。
「プロゲート」や「ドットインストール」に賭けるよりはましな気もする。
ただ、「プロゲート」や「ドットインストール」はあくまで客商売だから、食いつきよく作ってあるとは思う。
大学のは所詮教授連中だから、面白可笑しく、は期待出来ない。
(モチベーション維持は各学生の責任)
この辺も含めて総合判断でどうするか、だけど、
まあどうせ考えても分からないし、現状のプロゲートのJavaScriptで進んでみるのもありだとは思うよ。
ただJavaScriptを初手で選ぶ奴はかなり少数派で、ぶっちゃけWeb以外では皆無だろうから、
躓いたときにググッてもどうにもならない可能性もある。
この辺をプロゲートやドットインストールがカバーしてくれてればいいが、実際の所は知らんし。
この点については、Javaが一時期超お約束言語で、当然学校でも教えられまくってたから、蓄積はあるだろうよ。
まあ今更Javaか？というのが大問題ではあるが。
(なおCはネット以前の覇権言語であり、実はネット上にはあまり情報がない。
逆にJavaScriptは馬鹿がデタラメ書きまくってて、ネット上に情報はありまくるが、信頼できない) >>813
ありがとうございます
javascriptとpythonをプロゲートで序盤の方だけやってみましたがpythonの方がシンプルで少し分かりやすく感じたのでまずはpythonからやることにしました
プロゲートで全部python終わらせたら色々考えてみます
cは難しく最初にやっても挫折するとよく目にしていたのでとりあえず除外していましたが最初のうちにやった方がいいことも理解しました
とりあえずやってみます
ありがとうございました progateやドットインストールは一通りサラッとやってみたけど
これから学んでいく為の導入としてはアリこれらをずっとやり続けても上達はないから
さっとやってこんな感じかって受け入れられればいいと思う まぁ、初心者は何が分からないかが分からなくて、検索するにしても検索ワードに辿り着くのに一苦労だったりするしな
断片的にネットでつまみ食いするより、段階的に触りだけでもまとめて学べるってのは初心者には悪くないと思うわ
それだけじゃ足りなくて仕事にならないなんてのは、勉強してりゃ初心者でもすぐに気付くだろうし
課金までする価値があるかどうかは個人の価値観によるから、特にオススメはしないが すまん用語間違えてた、まあ分かる範囲だが >>809
× ブラックバイト
○ 闇バイト
>>815
ついでに言っておくと、Cは最近無駄にネガキャンされてる。
Cを学ぶ者(正確にはCが出来る者)が増えて欲しくない、といった感じだ。
ここら辺は例の「文系馬鹿」問題が絡んでくるので根が深いが、Pythonのwikiにも
> ただし、Pythonの言語は，言語自身に組み込まれている型とそれに付随するメソッドの多いことなどから，
> C言語に較べると遙かに多くの憶えなければならない事柄があることになる。
とあるように、Cの方が単純明快で、とっかかりは早い。
実際Pythonやった後にCやれば、あまりにも何も無さ過ぎて逆に驚くだろうよ。
ほぼ全部既に知ってる事柄だろうし。
ただそれだからこそ、計算機の本質が見え、何故JavaScript等がそういう挙動をするのか理解出来るようになる。
Cやってないと、最終的なところはずっとブラックボックスのままだ。
ただそれでも、実務に大して支障ないのも事実だが。 >>817
> それだけじゃ足りなくて仕事にならないなんてのは、勉強してりゃ初心者でもすぐに気付くだろうし
気づかない奴をカモろうとしてるから詐欺なんだよ。
つまりは「カモれる馬鹿が無限供給される」というネットの側面を悪用した詐欺であって、
本質的には、闇バイトや振り込め詐欺や迷惑メール送ってくる連中と変わらんよ。
初心者を手助けするところまでは「正義」、別に金取っても問題なし。
ただ、過剰に期待させたり誤認させるのなら「悪」。
トップページだけで判断するなら、俺はドットインストールは「正義」、プロゲートは「悪」だね。
ついでに言うと競プロも「悪」だ。
ただ初心者にも分かるように言うと、本質的な問題は時間にある。
ドットインストールもプロゲートも競プロも、5-15分で解けるような問題に終始してるはず。(多分)
競プロの場合はゲームとして成立させる為にこれが必要だし、
ドットインストールやプロゲートの場合は間断なく達成感を与える為にある程度は致し方ない。
これを「必要悪」と認識するかどうかの違いだろう。
本質的な方法、つまり大学がやってるように、
「次回までに完成させとけ」で基本的に猶予は1～2週間、
その間色々考え、締め切り前日辺りに数時間かけて実装、という方が実際のプログラミングだし、実力も上がる。
ただこれをやるには、教える側もそれなりに用意する事が必要で、
大学みたいに1コマ1,000円程度の課金が必要となり、現状のネットでは厳しいのは事実。
(年間60万円で30週、1週20コマなら1コマ1,000円)
広く薄く集金するには人数の多い初心者を狙うしかなく、
当然馬鹿げた簡単さで「出来た！俺スゲー」脳汁出させる物ばかりになってしまう。
まあ資本主義の悪い側面が出てる、というわけ。
だから一定水準以上(つまり人数が絞られてくるレベル以上)の難易度の物は、
本であれサイトであれ、成立させるのは難しい。だから本も初心者向けのゴミばかり溢れる事になる。
この辺を打開するには、何処かから別に金が出てる連中に便乗するのが一つの方策で、
今なら大学講義が一番マシに思える。
ドットインストールもプロゲートも競プロも「商業」としては正しいが、「教育」ではないというだけ。
「教育」に見せかけてるのなら詐欺だよ。 この訓垂れ長文はきっと触れちゃいけないあの人だから
あまり相手にしないように >>817
> 断片的にネットでつまみ食いするより、段階的に触りだけでもまとめて学べる
そういえば、MDNは最近？無駄に頑張ってるよ。
以下は全部つながってて相互に飛べるが、
JavaScript ガイド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide
ウェブ入門
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web
JavaScript
https://developer.mozilla.org/ja/docs/Web/JavaScript
網羅的に抑えたければこの辺を全部読んだ方がいいかと。
ドットインストール等でも所詮は断片的でしか無いだろうし。
ただ正直、HTML/CSS/JavaScriptだと初心者が全体像を抑えるには仕様が大きすぎる。 読んでおいて損は無いが、それを読む以前の話だわな
初心者に優しい（分かりやすい）かどうかは、また別問題 
