html実験色々の感想①～③
html実験色々の感想①～③
初めてHTMLにふれてみての感想を
残しておこうと思います
①
- ボタン表示
- ドロップダウンの表示
- 枠の形状変更
<div style="display: inline-block; background: #dddddd; padding: 10px; font-weight: bold; border: 2px dashed #000000; border-radius: 10px 30px 10px 30px;">あいうえお<br />かきくけこ</div>
<p> </p>
超べた書きで とりあえず動くか試してみた感がすごい
この辺は 何もわからずただただコピペ
ちょっと数値を変えて色や形状を試したくらい
②
- ボタン作成
- CSSでスタイル定義
- ボタンのclassに定義したスタイルを使用
- リンク作成
とにかく <a href>が意味が分からなかった
プレビューで ボタンを押すと一番上に行くし
説明読んでも リンクに使うとかなんとか
なんで上に行くん
href = "#"
リンクない？ならクリックしても
何も起こらないんじゃないんかい
CSSのほうも いじってみたけど
エディターが コード保存するたびに
いちいち閉じるのが面倒
ウィンドウ２つ開いてやってたら
HTML編集の方いじるために ウィンドウ変えるだけで
閉じる
一番下でスクロール面倒だし
高度な設定 押した後
画面下に コード書くとこ出るから
さらにスクロールして
エディタ開かないとコード書けない
③
- ボタンをべた書き
- ボタンをcreateElement() と appendChild() で作成
- ボタンをinnerHTMLで作成
- ボタンのクリック処理
ここからScript使用開始かな
JavaScriptもここで初めまして
気になった点を5つ程
(1/5)インデントが大変
関数を使用しだして
コードも長くなってきたから
とにかく不便だったのがこれ
Tabが使えないのがほんとに不便
長々コード書く場所じゃないから
仕方ないか
さらにHTMLのとこだと
左寄せされるのがきつい
<button id="btnA1" class="btn-circle-3d" type="button">15</button> <button id="btnA2" class="btn-circle-3d" type="button">15</button> <button id="btnA3" class="btn-circle-3d" type="button">15</button></div>
これを見やすくインデントで
ボタン毎に揃えたのに…
プレビューして戻ったら
あああああああああああ
(2/5)外部ファイルへの分け方がわからない
ＨＴＭＬ編集にべたべた書いたけど
別のファイルに書くのがいいのよね
script.jsファイルとか作って
どうやって読み込むとか
全くわからんかった
できないのかも
めっちゃ長くなった
(3/5)構文エラーが出ない
実行時のエラーでしか判断できんのが面倒
変なミスするとHTMLぐにゃるし
めっちゃアラート書いた
そのアラートも実行されないし…
(4/5)onclickができない
原因がよくわからんけど
ボタンがクリックされたら
↓
関数呼び出し
という単純なことができなかった
ボタンにonclick書いても
無にされる
おかげで addEventListener
使うことに…
HTMLでちょっとしたボタンとか
レイアウトいじりたかっただけなのに
JavaScriptも調べるはめに
ここでさらに悩んだのが
addEventListener('click', function()){
alert('Hello, World!');
});
これ どゆこと 無名関数って
実行されなかったのよねこれやったとき
理由が全くわからんから
普通の関数も使えるって知るまで
かなり悩んだ
(5/5)Ctrl+fが不便
ページ内検索
のはずだが
これ
HTML と script で
別々にカウントされてる
scriptの方でボタンのid名なんだっけって
Ctrl+f使って検索したら
1/1
HTMLの方見たら 点線で囲われてるだけ
なんでやー
HTMLもJavaScriptも初めてで
③なんてかなり時間かかったけど
やっぱり楽しいね
頭で思い描いたことが
実際に反映されると感動する
ChatGPTにもお世話になった
普段のお礼も込めて
別のページでいつか書こうと思う
教えてもらったよ
「ChatGPT（OpenAIの大規模言語モデル）」
いつもありがとう
無職
