気付いた事やした事を表にまとめています。
普段から 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 文字を重ねる時は画像を |
無題 |
| 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ヶ月になったと思います。
来月も張り切っていきましょー！
