自分メモです('ω')
まだ触り始めですが、色々苦戦しそうなので記録していきます。
CodePen（今日時点の感想）
すごくお手軽で便利、他の人のPenも公開されていてすごく助かるのですが、触っていて気付いたこと。
圧倒的にHTMLとCSSを分かっていない。
JavaScriptは触り始めとは言え、他言語の経験があるからまだ少しは理解できます。
でも、見様見真似でHTMLとCSSを書こうとしても全然うまく書けない。やっぱりお手軽ツールとは言え、基礎があってナンボのものかなと思いました。CodePenに頼り過ぎるとブラックボックスのまま行きそうな自分がいます。
苦戦状況
とりあえず以下作成ログです。以下記事参考にCodePenを埋め込みます。Qiitaのエディタのプレビューでちゃんと表示されますね。助かります。
Qiitaで記事にCodePenが埋め込めるようになりました
やりたいことは、こんな画面構成のWebアプリです。
- タイトル
- ギャラリー表示（lightgallery.js使用）
- サブタイトル
- 投票ボタン
最初のバージョンがこちら。
See the Pen lightGallery by ranchi1977 (@ranchi1977) on CodePen.
見ての通り、各ブロック要素が横一列に並んでしまっています。
しばしHTMLのお勉強を行い、無理やり以下の形にしました。
See the Pen Voting Gallery by ranchi1977 (@ranchi1977) on CodePen.
全体をリストにして、縦に並ぶようにしています。（ulタグとliタグ）
が、これがお作法的にどうなのかすら分かっていない状況です。
Netlify
こちらは正しいデプロイ用コードが準備できれば操作関係は問題無さそう。
独自ドメインに手を出したく、以下サイトに行ってみたが、Googleアカウントでうまくソーシャルアカウント連携でサインアップできない。一旦見送り。
Freenom - 誰でも利用できる名前
積み残し課題
- lightgalleryのサンプルコードをコピペして使用したつもりが、lightgalleryのライブラリを追加してもエラーとなり、lightghallery.jsのライブラリを追加したらうまく行きました（理解しないと）
- ブロック要素はうまく縦に並ぶようになりましたが、ディスプレイ全体の中央を起点にHTMLが表示されているように思います。大き目のPCモニタだと問題ないですが、スマホで見ると先頭のタイトルも表示されない中央部分しか表示されずスクロールできないので、修正しないと
- HTMLの構造に応じたCSS部分の指定方法、勉強あるのみ
- lightgalleryの操作・コードの勉強、サムネ表示で画像を触ると各画像の拡大表示などできるようだが、制御できていない