HTML/CSS のどんな質問に必ず優しく答えるスレ 32
文字で書かれると目が滑るし数字の意味が分からん
図で書こうや >>687
使った事無いが、MDN読む限り、gridは基本的にgrid上に配置したい場合で、
大きさがデタラメな物を左上から埋める用途ではない気がするけど。
(gridは自分でレイアウトを細かく指定したい場合向け)
例では分かりやすいように大きさを固定倍にしてるが、
実際はバラバラの大きさのサムネイルを、出来るだけ余白無しで固めて表示して欲しくて (←ここまでは出来てる)
ただ場合によっては右側に大きな余白が残るのが見た目気に入らないだけ。
grid使えば楽勝で出来る!とかなら対象ブラウザを変更する事も検討するけど、実際、grid使っても無理でしょ。
>>688
基本的にはそれ。
ただし、サムネの大きさはデタラメで、綺麗にgridには載らない。
まあ今一応gridも試してるが、やっぱりgridは「グリッドに載せる用」に見える。
(初めてなので使い方間違ってるかもだし、もうちょっとあれこれ試してみるけど) js使わないと無理ゲーじゃないかな
jqueryだけどこういうのとも違う?
https://masonry.desandro.com/ >>689
5chだと無理だろ。罫線書いてもずれるし。
同じ数字は同じサムネイルだと思えば分かりやすいと思うが。
11111111
11111111
は横長の1枚のサムネイル。
11
11
11
11
は縦に細長い1枚のサムネイル。 >>687
ちなみにgrid試したが、
auto-fillでもサムネ幅で勝手に埋めてくれるのではなく、
あくまでこちらが指定した幅のgridに載るだけのように見える。
(まだgrid初心者なので根本的に間違ってるかもだが)
>>688
ちなみにそのサイト確認したが、全部flexで、しかも子にもflex指定で、単なるblock扱いで埋めてるだけだな。
最初からcolspanやrowspanが分かっててそれ専用のHTMLを生成しているように見える。
何か知らんがおそらくフレームワークで吐き出してる感じ。
今回の俺の件にはこの手法は無理だ。 >>691
基本的にそんな感じ。
ただ、その例は4列に綺麗に入る(ように調整されている)が、こちらはデタラメな大きさなのが違う。
実際はニュースリーダーみたいな物を作っていて、
各ニュース記事では写真の枚数も大きさも不定で、
それらを表示する際、原寸だと邪魔なので小型化してサムネとして表示している。
だからサムネの縦横のどちらかはこちらが指定した大きさ(例150px)と一致するが、
もう片方はデタラメになってしまうし、順番もソースが載せてる順なので綺麗に埋まるとは限らない。
そして目標サムネサイズよりも小さい物は拡大しない為、上記「どちらかは150px」も常に成り立つわけではない。
ただ、記事にはこういう写真が付いてますよ、と分かればいいので、
出来るだけ余白を詰めてぐちゃっと表示されてくれて問題ない。
(というか文字を表示する場所を確保する為、出来るだけ余白無しで表示したい)
ただまあ、その例もgrid使いながらJS併用なら、CSSだけではきついのかな?
まあgridがどこまで出来るものか知らないから、
その例見てもどの部分をJSで補完してるのかピンと来ないのだけども、
微妙にrowがズレてるのも綺麗に埋めてるよ!という意味なら、それで当たりだ。 >>691
>>695
つかこれって名前が付くほどの超定番レイアウトなのか?
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
ただこれ(MDN)見る限り、行内で一番大きい物に合わせてるだけで、縦には詰め込んでないので、
{display:inline; vertical-align:top}
で同じ事が出来るはずだけど、何が違うのかよく分からん。
(691のサイトはそれ以上に詰め込んでいるので、違いは分かるが)
俺自身は普通に見かける、例えばtwitter等でも複数のファイルを添付した際、
111111122
111111122
111111133
111111133
111111144
111111144
みたいに表示されるのと同じ事をやろうとしてるだけ。
(ただし大きさはデタラメなので綺麗には埋まらないが、それは仕方ない) すいません696のこの部分撤回します。
> {display:inline; vertical-align:top}
> で同じ事が出来るはずだけど、何が違うのかよく分からん。
こちらの環境の問題のようで、MDNに書いてるとおり、configして見直します。 >>691は配布サイトだよ
配布されてるjsを使ってサイズ違いのものを
感覚的にタイル上に縦横の余白調整してくれるの すいません
スレ違いかもしれませんが…
「CGIの動作が可能なHTTPD」ってどういうことですか? >>698
それは理解している。
ただそういう場合は大体「これを使ったらこんな事が出来ますよ!」と分かるようにしていて、
実際そのページトップのデザインがそうなってる。
masonryレイアウトも確認した。確かに691と同じような事をCSSで出来るようになってた。
出来るだけ詰め込め、というノリは俺が欲しい物と同じ。
ただ、今回はgridに載る必要はなく、詰め込めればいいだけなので、これではない。
gridも再度確認したが、基本的にgridに強制的に載せる為の物で、
逆に、grid関係なくとにかく詰め込めなら、通常のフローレイアウトの方が当たってるように見える。
実際は確かにmasonryレイアウトの方が綺麗に見えるのは分かるが、
今回は単にサムネを出来るだけ固めたいだけだから、やはりfloatが正しいように見える。
ただ、floatの場合は「入るのなら横に、駄目なら下に」でしかないから、
節操なくデタラメに詰め込まれ、綺麗なラインなんて出来ず、
場合によってはおかしな改行や空白が入ったトンデモ配置になるので、嫌われるのも分かる。
しかもfloatでは何も制御出来ない。
この辺考えてmasonryレイアウトなのだろうし、今回それを採用すべきなのかもしれないが。
今目指しているもので、最高に上手く詰め込めた状態なら、688になる。
ただしfloatの場合は688の"GOOSE"のような縦長ブロックが途中で差し込まれたら悲惨な事になるが。
masonryの場合は一応そういう事が発生しにくい分は優れてる。
今のところfloatで左詰のまま妥協するか、
或いはfloatだと実際の所綺麗には埋まらないので、
それがあまりに見にくければ、どうにかしてmasonry的にするか、という感じ。
(とはいえサムネが2枚以下の場合はfloatでもおかしくなりようもなく、大半の記事はそうなので、そんなに目立たない)
皆さん色々ありがとう。 こう書くのが正しいっつってコードの書き方に拘ったところで、見る人からすると
「あぁ、サムネ左に寄ってんな」で終了だけどな >>701
まあ気にしない人はそうね。
俺もそうだが、気にする人は気にするんだよ。
ただ、このスレの連中は気にするべきでは?
なおジョブスは色々と美的にうるさかったらしく、「フォントの話は…」てな事を言った奴は即首にしたらしいが。
https://www.youtube.com/watch?v=cNPZzNHHmkY
682のとおり、JSでの対応は面倒なだけで難しくはないので、
俺もこんなノリだと首にされるのだろうなと思いつつ、どうするかなという感じ。
ただ、全体が中央揃えで、一個だけ左詰めだと、何これ?とはなるんだよね。
それでいちいち「バグですか?」と聞かれてもウザイし。 ごめん、702は書き方が曖昧だった。俺は気にしない派ね。
まあどうでもいい話だとも思うが。 サムネのサイズをcssなり書き出しサイズなりで統一するのが
ソースも視覚的な見栄えも良くなりそうって思いましたこなみかん >>704
その通りだけど、外部ソースを読むのでそこはどうにもならん。
>>684
内部コンテナって、もしかして個別サムネサイズに合わせて<div>で688みたいに段組しろって事か?
それはさすがにHTMLを見た目全振りにしすぎてるし、
今のところ682方式の方がJSも楽なので、やるとしたら682になる。
ちなみによくよく考えれば2枚の時はデフォのinlineで結果的にも全く問題なかったので、
floatじゃないと埋まらないのは3枚以上の時であり、674で :only-child 使ってるのも間違いだったわ。 >>699
CGIが動作可能な状態に設定されたWebサーバ >>707
coverは切り取られるので使い物にならない。
使うとしたらcontainかscale-downなのだけど、object-fitはそもそも外形を維持してしまうので、詰め込みは出来ない。 この板にカキコしていいかわからんけど、昔なつかしホームページを作りたい。
いまは、htmlを頑張って調べながら作っている状況だけど
90年代後半、2000年代前半のホームページあるあるを教えてください!
たとえば、アクセスカウンターみたいな・・・・。
できれば、昔なつかしデザインが残っている老舗ホームページのリンクもほしい。 >>709
ttp://abehiroshi.la.coocan.jp/ >>709
まんまググれば実例がたくさん出てくる
スレの主旨から外れてるので、作る段階での疑問が出てきてからまたどうぞ fieldset をMDNで見ると
>フォーム内のコントロールをグループ化するために使用します。
とありますが、記事本文で吹き出しのような枠の使い方は本来の使い方と反れますか?
<fieldset>
<legend>タイトル</legend>
本文
</fieldset> それだとCSS1行で目的達成できるので
でももうdivにしました >>709
その時代だとフレームやテーブルでレイアウトは基本だなw
アクセスカウンターや掲示板とかMIDIのサウンド鳴らしてうざがられるとか こんなふうに、入力したら動いてくれるタグとかってないでしょうか。
うまく説明することができず、申し訳ないですがリンクのように予め入力した時間に
電車アイコンが動くようにしたいです。
速度がだんだん早くなるとかそういうのはいらないので駅についたら泊まる、駅間は動く
という感じだけで構わないですから、どういう言語またはどのようにググればいいのか教えて下さい
https://loo-ool.com/rail/SI/38/ >>716
アイコン要素にCSS transition仕込んどけば、飛び先の座標を指定すると勝手に動くよ
どの時間にどの座標に居るかはJavaScriptでよきにはからって
必要な知識はCSS Positioning, CSS Transition, JavaScriptでの要素取得かな >>718
こんなのあったのか
未確認だけどiOSの挙動にも対応してるのかな?
してたらいいな CSSについての質問です
例えば
p {
color: red;
}
というのがあったとしますが
p {color: red;}
これではダメなのですか? >>721
すいません、そこについて詳しくお願いします
機能的には問題なく動作するということでok? >>722
721ではないが、そう。文法的には問題ない。
ただ、ネット帯域をケチりたいのなら、適当にググって出てくるminifierを使って限界まで詰めたほうがいい。 >>720
ぜんぜん問題ないよー
記述属性多いとは探しにくくなるけど、行数は節約できて一覧性は上がるね 今の時代にCSSの記述で詰めて帯域ケチるとかあんの? SCSS使ってるから可読性の為にわざわざ余白やコメント残す必要無いし
CSSにコンパイルする時に自動的に余白は削れるようにしてるわ >>725
地味に効くし、技術的にはやらない理由はないし、実際大きいところはほぼやってると思うよ。
自分が参考にしてるサイトを確認してみればいい。 >>727
レギュレーションで決まってたりするしね >>723-729
ありがとうございます
機能的には問題ないのですね。
記述属性が多いと探しにくいとはどんな場合ですか? >>730
こんなん
.p01 { color: red; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 16px; line-height: 1.8; text-align: justify; font-weight: 500; text-decoration: underline; padding: 0 0.5em; margin: 0 0 2em; }
.p02 { position: absolute; left: 0; bottom: 2em; color: black; font-family: 'Noto Serif'', sans-serif; font-size: 14px; line-height: 1.6; text-align: left; font-weight: 600; padding: 0 2em; margin: 0 0 2em; }
.p03 { color: #0005; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 12px; line-height: 1.5; text-align: justify; font-weight: 300; padding: 0; margin: 1em 0; }
最終のミニファイはツールに任せればいいので、見やすさとメンテのしやすさ基準で使い分ければいいんでない <h1>あかさたなはま</h1>
これに外部CSSファイルの
{margin-bottom: 0px;}
を適用させたいのですがどうすればいいですか? >>732
h1{
margin-bottom: 0px;
} >>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。
※stylesheet01.cssにはh1以外にh2などへの記述もしてます。 >>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。
※stylesheet01.cssにはh1以外にh2などへの記述もしてます。 <link rel="stylesheet href="(path to stylesheet)/stylesheet01.css" />
を<head>内に記述 "ページ全体に背景グラデーションを掛ける"方法が参考書に記載されていて
疑問があります(参考書には何故そうなのか理由がなかったので....)
<HTML>
<div class="content">
<h1>主題 主題 主題</h1>
<p>文章 文章 文章 文章 文章 文章</p>
<h2>副題 副題 副題</h2>
<h3>副副題 副副題 副副題</h3>
<ul>
<li>9:30〜</li>
<li>11:30〜</li>
<li>14:30〜</li>
<li>16:30〜</li>
</ul>
以下2回ループ
</div> <CSS>
html{
min-height: 100%;
}
body{
background: linear-gradient(#9ad4fc, #dcffb8);
}
.content{
max-width: 900px;
background: rgba(255, 255, 255, 0.7);
margin: 60px auto 0 auto;
padding: 30px;
border-radius: 15px;
}
ここで疑問です途中でグラデーションが途切れるので
"html"要素に対して高さを指定するのはわかります。
何故、最小値の高さ"min-height: 100%;"なのでしょうか?
"height: 100%;"でも同く途切れずグラデーションが適用されす。
その理由が参考書や調べてもわかりません。 >>739
早速のレス、ありがとうございます。
もう少し具体的に解説して頂けないでしょうか?
自分のブラウザ(chrome)だと、"min-height: 100%;"も"height: 100%;"も
同じ表示結果になります。 >>740
.contentにheight:150vh;を追加してみると違いが分かりやすいよ >>741
あっ!本当だ....
"height: 100%;"だと途切れ、"min-height: 100%;"だと途切れません。
これは何故、"height: 100%;"だと途切れるのでしょうか?
自分の見解ですと、"height: 100%;"だと画面(ブラウザ)の大きさに対して
100%の高さが表示されるからだと思いました。
ずっと考えて眠れず今の時間まで考えました。 「css height min-height 違い」で検索! すごく正しいようで間違ってる答えが量産されるってのはこういうことか ここで聞いてよい内容なのか悩んだのですがHTMLの事なので質問させてください。
自分だけが利用する目的のページに天気予報を貼りたかったので
<img src="https://www3.nhk.or.jp/weather/tenki/tenki_01.jpg(NHKの天気予報)">
と入力しましたが表示されません。
これはimg srcおよびHTMLでは出来ないことなんでしょうか >>748
単なる画像表示をしたいのであれば、src内の最後にある
「(NHKの天気予報)」を削除して
<img src="https://www3.nhk.or.jp/weather/tenki/tenki_01.jpg">
拡張子jpgで終わるURLに変更してみて下さい >>749
あ、(NHKの天気予報)の部分はここで説明するために付け加えたもので実際にはjpg">となってます 稀に外部ドメインからの参照を弾いてるところもあるけど
前提条件として
画像のurlは問題ない?
別窓で画像のurl叩いて表示される? >>751
ちゃんと表示されてるのでURL自体に間違いはないと思います。 一応、外部からでもローカルでも読み込めるけど
https://jsfiddle.net/xr2vjd16/
adblock系の機能拡張とかで弾いてるとか?
自分だけが利用する目的のページってのが、どういうものか分からんから
何とも言えないとこあるけど >>748
> これはimg srcおよびHTMLでは出来ないことなんでしょうか
別人だが普通に出来るよ。
出来ないのならDevToolにエラーが出てるはずだからF12押して確認すればいいだけ。 >>753
拡張機能等はいれてません。
検索エンジン(search.yahooに接続するだけですが)のような感じです。
<html><head>
<meta charset="utf-8">
<title>search</title>
</head>
<body>
<form action="search.yahoo.co.jp/search">
<input size="30" name="p">
<input type="submit" value="検索">
<br>
<br>
<br>
<br>
<img src="〜
以下終了タグのみなので略 >>755
2chの規制でURLを省いてしまい分かりにくくなってしまったので…
jsfiddle.net/zogmhs76/ >>755-756
閉じタグ無いけど、そのjsfiddleで問題なく表示されてるが
そっちで表示されてないなら、完全におま環
機能拡張だけじゃなくセキュリティソフト等でブロックされてる可能性は?
複数ブラウザやスマホ等でも表示されない?
デベロッパーツールで当該部分はどう表示される? >>757
終了タグ省いてすいません。
jsfiddleをRunするのは表示されています。
そこまで厳しいセキュリティ入れてるつもりはないんですけどね…
確認しているブラウザはIE6、Mypal29(firefoxベースのブラウザ)です。
どちらも表示結果は同じでした。
また別のPCでも試しましたが同様でした。
デベロッパーツールは明日確認してみようと思います。 Mypal29はマイナーブラウザ?なのか初めて耳にしたけど
IEは流石に変えようや…… Mypalブラウザはfirefoxベースというかpale monnベースというか
xpでも動作するってのが売りのブラウザ…ってことは、まさかのxp使い?
Mypal - Official Website
https://www.mypal-browser.org/
試しにインスコしてみたけど、普通に表示されるのでブラウザの問題ではなさげ
よく分からんがインターネットオプションいじれば治るんじゃね?(適当) つかさっさとDevTool見ろって。F12押すだけだし。
というかそれは開発手順を間違えてるよ。
お試しならDevTool上でエレメント選択して右クリックかF2でhtmlを改変するのが一番早い。
そんなことせずとも動く自信があるのなら鯖上のhtmlを改変してリロードでいいけど、
実際動いてないんだし。
ちなCSPの場合はおまサイトが原因になる。 www3.nhk.or.jpはTLS1.2/1.3だから自前で処理するFirefox/Pelemoon系なら行けるだろうけど
OS依存のIE6はTLS処理用の串でも通さないと見られないはずだよね >>761
デベロッパー見ようと今日開いてみたら問題なく表示されてしまいました。
質問しといてですが、何が原因なのか分からずモヤモヤしています。 >>759
IE6がインストールできる最上のバージョンなんです。 >>760
作成しているパソコンはメイン利用の2000です。
不具合を確認する際に使った別のパソコンはXPを利用しました。
リンク先の画像が貼ってある
www3.nhk.or.jp/news/
では問題なく表示されてたんですよね >>762
そうですね。
ただMypalで確認した際に画像が読み込めないにしても四角の中に×みたいなのが表示されてもいいと思ってたのでIE6でも確認してみました。
(IE6でも四角の中に×みたいなのは表示されてませんでした) なんかよく分からんが、キャッシュ関係とか再起動すりゃどうにかなる系の不具合だったのかね
今となっては検証のしようもないけども >>767
昨日はどうやっても表示されなかったので不思議です。
沢山のアドバイスをして頂いたのに検証ができずすいません。 >>765
身も蓋もないが環境が古すぎる…
自力でなんとかできないのに使い続けるのはちょっと厳しいよ >>769
まだまだ使えますから^ ^
PCの方は自力で何とかできているので使ってます XPも2000もOSのサポートが切れて10年弱だし使えるとは言い難いね
現におま環の誤動作出てるしここに質問にも来てるし
無理して使ってるだけじゃん >>770
スタンドアロンならともかく、サポート切れたOSをネットに繋ぐのは皆に迷惑かけることもあるからなあ
踏み台にならないよう念入りに警戒しておいてな >>770
使えてもIEは既に多くのサイトサポート対象外ですよ
セキュリティの面でも更新が続いているOS、ブラウザ環境でネットに繋いで頂きたい 特にこのスレには、使えるからといって化石を使い続ける残党のせいで
苦しめられてきた人が多いしなぁ
やっとIEのサポート切れて、たいぶ解放された感あるけど >>770
自分もまだ2000使ってる
8以降のOS嫌いなんだよね こりゃまたとんでもない糞爺が出てきたな。
勝手にしろとしか言えない HTMLの話と言いますかテキストエディタの話といいますか
スレチでしたらスレチとお願いします
便利と言われているVSCODEを使っています
https://i.imgur.com/TRcxf3L.jpg
今回事前にメモに書いてそれをテキストエディタに貼り付けて清書しているのですが、段落の<P>を初めとしたコードの入力が不便すぎて解決方法を知っていたら教えていただきたいです。
1 既存文の行頭や文章間でコードを入れても判断してもらえない
2 コードが勝手に閉じる(任意でオンオフしたい)
という感じです。
ブログサイトの自動変換では余計なコードが多く文字数が超過してしてしまい投稿できないので自分で打つようにしました ショートカットを覚えて駆使してけば良さそうに見えるけど
vscodeの使い方ならvscodeのスレあるよ ショートカットでやってみます
ありがとうございました 【emmetのラップ変換】
タグで囲みたい文字列を選択
→ショートカット「Ctrl + Alt + ,(カンマ)」
→タグ入力(括弧無しで)
※複数行の場合、入力タグの末尾に*アスタリスク付けると各行がタグで囲まれる >>777
Markdown記法覚えてメモの段階から使うようにすると効率いいかもね >>781
特に飾るわけでもないのでこれいいですね 疑問があるのですが、拡張子が.htmlだと何も指定しないと文字化けするんですが、
.phpにすると文字化けしません。なぜなんでしょうか?
どうでもいいことなんですが気になって夜寝むれません。昼寝ています。 iframeをいくつか並べて内部に3dモデルを埋め込んだサイトを作ってます
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だと初心者が全体像を抑えるには仕様が大きすぎる。 読んでおいて損は無いが、それを読む以前の話だわな
初心者に優しい(分かりやすい)かどうかは、また別問題 ウェブ開発とウェブ制作の2つがある
ウェブ制作は、HTML/CSS/JavaScript、
または、PHP のWordpress で、お小遣い稼ぎを目指す
ウェブ開発は、もっと本格的で、Ruby on Rails を使う。
Linux, Docker, AWS Solution Architect、データベース設計も含む
Python は唯一、人余りの言語で、
AI・機械学習だから、8年掛かる。
理系の大学院数学科か、AWS機械学習資格が必要。
文系は採用されない
文系は筑波大学でも使っている、Railsチュートリアルをやれば良い。
少し古いバージョンのRails 5 なら、サイトで無料で読める
KENTA, Runteq、デイトラなど、ほとんどのサロン・学校ではRailsを学ぶ。
すべてのウェブフレームワークの基礎となっている
TIOBE Index 2024/4 では、
PHPは、9位 → 17。
一方、Ruby は、18 → 13
たぶん、Rails の1強
KENTAは、PHPをオワコン認定した。
そして初心者のキャリアパスは、Rails → Go のみと言う WEBなんて言語の本読めばいいだけなのに
なにをそんなたいそうな事いってんだか
それで食ってくのは営業力だし技術関係ない所が重要 流行の言語や新しい言語でたらそれの本か
英語わかるなら言語の元サイトでテキストを読む
それ以上でもそれ以下でもないなんも難しくはない 823はプログラム板では有名なRubyキチガイだ
どこにでも現れ、常に何の関係もないRubyの話をするので無視されてる
内容も常に意味がなく、技術的な話は出来ないし、的外れ
気になるのならプログラム板を漁れば同様の書き込みが大量に見つかる 言語の文法だけなら、2週間ぐらいで学べる。
だから、そういう人を雇わない
特に、Python をできる香具師を雇わない。
文法だけでは何もできないから
ウェブ開発は、システムを作れる人が欲しい。
Rails でフレームワークの知識やデータベース設計、
Linux, Docker, AWS 構築運用などが必要
だから、KENTA のサロン内に、AWS用の部活があって、
皆で、くろかわこうへいのAWSサロンにも入る
Railsでは勉強方法が確率している。
勉強だけで食っていける。
再現性が高い
だから、文系のアホが唯一金持ちになれる、チート職業と言われている。
米国人も言ってる htmlで運転記録を取りたいです
フォームはHTML/CSSでつくりました
それを、GitHubPagesで公開します
運転記録なので行き先が増えるたびに新規追加手で入力欄を増やしたいのですが、
保存先がグーグルスプレッドシートなので1フィールドにカンマ区切りでデータをいれることになりした煩雑になります
迂回作はありますか?