2022年1月度 気づき まとめページ

2022年1月度月間気付きまとめ

気付いた事やした事を表にまとめています。
普段から Notion でメモしている事をそのままコピーしているだけですけど!笑
詳しく聞きたい事や間違い等があればコメント頂ければ幸いです。

💡

2022年1月

タグ 内容 タイトル
Network ファイルの拡張子(.html .php)を URL に含めない方法。.htaccess に RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.php -f RewriteRule ^(.*)$ $1.php 注意としてpublic_html のパーミッションを 755 にしておく。 無題
Worketc 画面に表示しきれない範囲を選択する時に、頭を選択してドラッグして最後の箇所まで持って行っていたが、ドラッグ中のページスクロールの挙動がシビアで上手くいかない。そこで、頭をクリックしたあと最後の箇所を Shift 押しながらクリックで、その間の範囲選択が出来る。 無題
PS Photoshop レイヤーの名前をファイル名にして、一括で書き出す。ファイルごとに書き出した時に名前変更するより一手間少ない。 無題
PS Photoshop 表示 > 表示・非表示 > レイヤーの境界線 これをチェックするとレイヤーの境界線に色がつくので、どのレイヤーを選択中かがわかりやすい。 ほぼ必須の設定だが、Photoshop を起動するたびに設定が必要。 デフォルトではショートカットも設定されていないので、自分で設定してしまおう。 ショートカットの設定は 編集 > キーボードショートカットとメニュー より行う。(Ctrl + Shift + . にした) 無題
PS Photoshop テキストツール選択時に Esc で選択解除 無題
CSS winSCP でローカルとサーバーをミラーリング。そのローカルフォルダを VSCode で開いたら scss 使えるんじゃないか? 無題
CSS パンくずリスト の疑似要素で記号を入れる。 .breadcrumbsArea ul li { display: inherit; } .breadcrumbsArea li+li::before { color: #000; margin: 0 0.5em; content: '>'; } 無題
PS Photoshop で複数の psd ファイルを PDF に変換する方法。 Photoshop で ファイル > 自動処理 > PDFスライドショー > ファイルを追加 > 保存形式:複数ページドキュメント >保存 > ファイル名を指定 > (圧縮 > ダウンサンプルしない > 圧縮: ZIP > 画質: 8bit) > PDFを保存 文字色が違う箇所は画質を劣化させないようにする設定だが、サイズがバカになる。 無題
CSS 画像をフォントアイコンの様に使う方法 .example:before { content: '';/何も入れない/ display: inline-block;/忘れずに!/ width: 50px;/画像の幅/ height: 50px;/画像の高さ/ background-image: url(../img/face.png); background-size: contain; vertical-align: middle; } ::beforeの疑似要素に背景として設定しています。 無題
CSS CSS aタグを親要素いっぱいで正方形のボタンにする display: flex; justify-content: center; align-items: center; width: 100%; line-height: 1; padding: calc(50% - 0.5em) 0; 無題
CSS CSS aタグには display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; で親要素いっぱいに広がって縦横中央に寄る。 無題
HTML HTML 画像上のコピーや見出しの font-size を vw が良いかも。62px = 62px / 1600px * 100 = 3.8vw 無題
HTML HTML 書き始める前に枠組みを考えておく。content_wrap > section.mv > container >inner の各幅を設定する。 無題
CSSHTML HTML 文字を重ねる時は画像を absolute に設定した方が楽。 背景として設定する。 そのままでは高さが無くなる事で次のブロックが上に被って来るので、親要素に min-height を設定する。 幅が可変のブロックはちょっと厳しいかも。 mv などで幅が 100vw の時は比率によって高さを vw の単位で設定。1:2 = 50vw 無題
Work バックアップの略は “bk” 無題
WordPress WordPress メニューにホームを追加する時はカスタムリンクで作成する。 無題
PS Photoshop 移動ツールで選択、グループ化 で複数のレイヤー等を1枚の画像として書き出せる 無題
HTML HTML a タグ自体は中身空でも先に入れておかないと、あとでCSS大変 無題
CSS mediaとscreenの間にonlyをつけることで、メディアクエリに対応していないブラウザにはメディアクエリを読み込ませないようにできます。 無題
CSSHTML 四角の図形は極力画像ではなくCSSで書いた方がレスポンシブがきれいにはまる。 無題
HTML autocomplete属性の書き方 <input type="text" name="name" autocomplete="name" /> input要素にautocomplete属性を設定することで、フォームへの自動入力を有効にできます。この属性を適切に設定することで、ユーザーはブラウザーに登録している情報を自動で入力できます。代表的な項目を以下にまとめました。 name : 姓名 family-name : 姓 given-name : 名 email : メールアドレス postal-code : 郵便番号 address-level1 : 都道府県 address-level2 : 市区町村 address-line1 : 番地・マンション名(1行目) address-line2 : 番地・マンション名(2行目) organization : 会社名 off : 自動入力を無効にする 無題
NetworkWork WinSCP でファイル上書きしてしまった。→ Xサーバーよりバックアップ (WinSCPゴミ箱機能を使う) 無題
HTMLPHP HTML で <form action="mail.php"></form> でPHPファイルの差し込める 無題
CSSXD font-weight Weight値 ISO表記 100 W1 UL (ultra light) 200 W2 EL (extra light) 300 W3 L (light) 400 (normal) W4 SL (semi light) 500 W5 M (medium) 600 W6 SB (Semi bold) 700 (bold) W7 B (bold) 800 W8 EB (extra bold) 900 W9 UB (ultra bold) 無題
Network ワードプレスじゃない素の HTML, CSS の開発はXサーバー内の public_html というフォルダ内で作成する。 無題
CSS CSS position; abusolute: の bottom と top の違い → bottomは親要素の下面から当要素の下面までの幅で、topは親要素の上面から当要素の上面まで。使い分けは一つの親要素に対して2つ以上の子要素がある場合は、上を bottom、下を top で設定すれば子要素同士が重ならない。 無題
Work Yahoo!メール スレッドにまとめられない → Gmail にアカウント追加して対応した。 無題
Network WinSCP ファイル名が文字化けしてファイルを開けない → ファイル名のエンコードをUTF-8に設定する 無題
XD XD Ctrlで拡大縮小 要素選択中 Alt で要素間隔を調べる Spaceでディスプレイ移動 無題
PS Photoshop Altで拡大縮小 要素選択中 Ctrl で要素間隔を調べる Spaceでディスプレイ移動 無題
CSSHTMLWork HTML, CSS のコーディング前は簡単でも設計図を書いてから行う。行き当たりばったりでは後が大変() 無題
Work mv = Main Visual kv=Key Visual どっちもファーストビューの事 無題
PSXD デジハリ・オンラインスクールに入会(2022/1/14) → Adobe CC 1年間ライセンスを39,980円で取得まずは無料期間で使用 無題
PluginWordPress WordPress からのメールが届かない。 →SMTP設定を「WP Mail SMTP」プラグインで行う。設定の仕方はリンク参照。 無題
Worketc ワイヤレスイヤホンはマイクがイマイチなので別で探した方が良い。マイクはShure SM58、インターフェイスはYAMAHA AG03、ケーブルはCANARE EC03-B(XX)、スタンド 無題
etc Bluetooth ペアリング出来ているのに接続出来ずハマる →レシーバーのアンテナを付けてなくて電波が悪すぎただけだった。 無題
Work Zoom + EpocCam でカメラとマイクはiPhoneで代用できたが、スピーカーがiPhoneでは出来ない為ワイヤレスイヤホンをiPhoneと接続しても音は聞こえない。→PCに直接ワイヤレスイヤホンを接続する事にした。 無題
HTMLJavaScript <script>タグの属性 type=”text/javascript はデフォルト値なので書く必要は無い。 無題
JavaScript デバッグ時のconsole.log はPHPファイルの方で書く。コンソールに書いてもデバッグとしては意味薄い。 無題
Work 作業時間管理の方法を模索 無題
Work 講師用にZoom環境を構築(カメラ、マイク、画面共有)の準備。EpocCam pro購入(980円)PCがLANケーブル接続でも接続元のルーターのWiFiとならWiFi接続出来た。 無題

いかがでしたでしょうか?
この月は HTML/CSS 案件をこなしたり、アドビを購入したりとなかなか濃い1ヶ月になったと思います。

来月も張り切っていきましょー!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

2 × 5 =