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

今週から新しい会社での実務がスタート。
今週取り組んだ作業の中で、検索して役立った記事をピックアップしました。

具体的な取り組み内容は【今週の取り組み】に、役立った記事は分野別にまとめました。

今週の取り組み

・自社サイトのフォームの入力で、アルファベット以外は受け付けない仕様に変更
(メールアドレスや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

・ページをリロード