今週から新しい会社での実務がスタート。
今週取り組んだ作業の中で、検索して役立った記事をピックアップしました。
具体的な取り組み内容は【今週の取り組み】に、役立った記事は分野別にまとめました。
今週の取り組み
・自社サイトのフォームの入力で、アルファベット以外は受け付けない仕様に変更
(メールアドレスやURLなどの文字入力を規制するscriptを追加)
・webサイトを更新していくにあたってGitを導入(初心者向け)
(これまで使っていたSourceTreeではなく、まっさらのGitで)
・レスポンシブ化する際に要素の上下を入れ替える更新
・youtubeをサイトに埋め込み、レスポンシブにも対応させる
・ローカルサーバーを立てる、docker環境を構築
■jQuery
validateメソッドで、formにおける、正の整数以外の入力は不可にする
・基本の記述
https://qiita.com/uedatakeshi/items/8b46bf7da1b81aad5650
・独自ルールを追加する
https://symfoware.blog.fc2.com/blog-entry-2354.html
■Git
・Bitbucketからリポジトリをクローンする
https://www.sejuku.net/blog/71436
・Gitブランチ作成・移動
https://qiita.com/ayakix/items/55dc4a324a49ff200c2d
・分かりやすい方
https://qiita.com/yukiyoshimura/items/7aa4a8f8db493ab97c2b
・Git addについて
https://eng-entrance.com/git-add
・【ファイル更新後プッシュまでの流れ】
git addでファイルをステージ
↓
git commitでコミット
↓
git push originでプッシュ
・無視したいファイルがある場合、.gitignoreファイル
※DS_Storeファイルなど
https://techacademy.jp/magazine/10179
touchコマンドで指定
vimエディタを起動
個人ブランチからdev機にマージするときは、元ブランチは閉鎖する
■コマンドライン
・Macのターミナルコマンド一覧(基本編)
https://qiita.com/ryouzi/items/f9dee1540a04a0bfb9a3
■CSS
・レスポンシブ化の際に要素を入れ替える
https://www.misallychan.com/entry/2018/05/25/200000
・テキストを折り返さない指定(white-space: nowrap)
https://uxmilk.jp/14958
・要素を垂直方向に中央に持ってくる(align-items: center)
※display: flex;も追加する
https://developer.mozilla.org/ja/docs/Web/CSS/align-items
・youtubeを横幅目一杯にする
https://www.gravity-works.jp/css_blog/2015/10/youtube100css.html
・画像のキャッシュを残さない記述方法
https://nabewakashi.com/solve-image-cache-problem
■docker
※順番を間違えないよう注意(起動時にファイルを見に行く)
・duckerを削除
docker-compose rm -f
↓
・ymlのパス書き換える
volumes:
– ./sites/XXXXXXX.com/public:/usr/local/apache2/htdocs/
↓
・起動させる
docker-compose up -d
↓
・ページをリロード