実務に役立つ記事集

実務に役立つ参考記事集(2020年6月第3週目)

■今週の取り組み

・コードエラー(閉じタグなし)の修正

・既存サイトにモーダルウィンドウを追加する
(読み込みファイルの競合を避けながら構築)

・transformプロパティを使って、要素を回転させたり、大きくしたり

・LP構築
(レスポンシブをどのように対応させるか?)

■Git

*** Please tell me who you are.
あなたは誰ですか?とエラー表示が出た時の対処法
https://qiita.com/w-tdon/items/24348728c9256e5bf945

ローカルリポジトリをmasterと同期させる
git pull origin master
※同期が取れていてなかったため、ローカル反映画面と異なるソースコードだった

これまでの修正をリセットして、リモートリポジトリとソースを一致させる
・まず既存の修正をコミットします
git add -A
git commit -m “破棄すべき修正”

・masterに戻って、同期取る
git checkout master
git pull origin master

・最後にmasterから新作業ブランチを生やしてそこで作業すればOK
git checkout -b [新作業ブランチ]

作業ブランチでコミットまで持っていけば、masterは無傷な状態なので
その状態からmasterからブランチを生やします。

■HTML

ちゃんと閉じタグがあるかどうかはどうやって調べる?
コーディングチェックサイト
https://crowdworks.jp/articles/6794/

※この中の”その3”
https://www.10bestdesign.com/dirtymarkup/

buttonタグの中にaタグはルール上ダメ
→作るならaタグで作る

■jQuery

既存のモーダルを使って(同仕様)、別サイトにも同じものを作る
今あるものを使って作るというのは難易度が上がる

エラー表示を見ると、smooth scrollと競合していたようだったので
そのjsをコメントアウトするとエラーは消えた

通常のモーダルを作って、その後にtransitionでエフェクトを加える
既存のクラスと被って、モーダル表示ができない

モーダルウィンドウを表示させる
https://webdesignday.jp/inspiration/pickup/4680/

別の記事のソースを使ってみた

JavaScriptでモーダルウィンドウ実装【jQueryなし】
https://shogo-log.com/modal-javascript/

(index):472 Uncaught TypeError: Cannot read property ‘addEventListener’ of null
「addEventListenerのプロパティが読めないよ」

コードを上から読んでいくので、id名が出てきた後でscriptを読ませる順番で記述する
→scriptタグが上過ぎた・・・

そもそも表示されるブロックをliタグで書くのは良いのか?

なぜCSSが効かないのか?
なぜ同じクラスで指定しているのにpタグは消えて、liタグは消えないのか?

class=”js-clickmodal”がjsでコントロールされていて、リンクファイルに飛ばすという指定がされていた
transform: translate(0, -500px);で見えないようにされている指定
縦方向に-500px(上に500px)

■bootstrap

スクラッチ(手書き)で書く
→CDNは使わない(更新されると適用されなくなる可能性がある)

■CSS

Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法
https://h2ham.net/youtube-responsive/

transformを使って、サイズを大きくしたり、回転させたり。

CSSでトランスフォーム:1つの要素に複数の変形処理を適用する
https://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20388628/

モーダルウィンドウを画面の中央に寄せるcss
https://webdesignday.jp/inspiration/pickup/4680/

→もうちょっと詳細な記事
https://webdesignday.jp/inspiration/technique/css/3733/

fixed親要素を起点にする
https://web.runland.co.jp/blog_cate2/post-1839

text-decorationを使って、打ち消し線を作る
https://pata2.jp/127/stylesheets/css_text/text-decoration.html

打ち消し線の色を変える
https://pata2.jp/127/stylesheets/css_text/text-decoration.html

LPのブレイクポイントの切り替え

スマホは375と320?
タブレットが768px
https://qiita.com/pe-ta/items/b3b754bde584abc98f44
https://allabout.co.jp/gm/gc/454493/2/

ただし今回は、フォントサイズがiPhone5だけ切り替わらなかったので、別途BP414pxに追加指定して対応