2019年7月の記事一覧
「canvas」タグについて（HTML）
久しぶりにWebまわりを実装してみたら
HTML5から利用できるようになったという「canvas」タグに
大苦戦。（解決まで３日かかった…）
＜やりたかったこと＞
ウィンドウサイズに合わせて、画像の縮小・拡大を
縦横比率を保ったままページに表示したい。
＜実装方針＞
①HTMLに「canvas」タグを埋込む。
②onLoad( )処理で、ウィンドウサイズに合わせて「canvas」の
heig
Visual Studio Code ナレッジ
（１）インデントの見える化
ファイル→基本設定→設定 を選択すると「settings.json」ファイルが開くため、下記のとおり設定。
settings.json
// Place your settings in this file to overwrite the default settings{ // エディターでインデントのガイドを表示する必要があるかどうかを制御します "
画像＋文字の組み込み（CSS）
文章の行頭記号を任意のアイコンにする時の見た目を整えるCSSの記載方法（以下）
（アイコンと文章の見た目のガタガタを整えようとしたらドボンして、
結構 時間がかかった）
CSSの疑似クラス「before」を利用し記載した所からスタート。
-------------------【Before】-------------------
（HTML）
<p class="timeline-tit
ソース中の記号（CSS)
「#」「.」「>」の使い分け
「#」は【 ID名 】をセレクタする時に利用
「.」は【 クラス名 】をセレクタする時に利用
「>」は子セレクタ（直下セレクタ）で、
直下の要素に対してのみスタイルを適用
【出典】
https://uxmilk.jp/8077
TABLEタグに関するメモ（HTML）
（１）文字数に関係なくセル幅を固定する
「table-layout」プロパティに「fixed」を指定 ＋
配下の要素の幅を指定する。
（tableの列幅を固定レイアウト化して、幅を設定可能。
fixedを指定してセルごとの幅を指定しない場合、
全体の横幅からそれぞれ均等にセルへと幅が振り分けられる。）
tableタグへのこの設定＋tdタグへの「width」設定が必要。
【例（
Aタグに関するメモ（HTML／CSS）
（１）リンク先ページはないが、マウスオーバー時のアイコンをリンクっぽくする
Aタグのhref属性に「href = ”#!”」を設定する。
（どこにも遷移させない場合に指定）
idとして「!」を指定しない、という前提ので
「#!」と設定するのが慣例。
「!」のid部分は、ページ内に存在しないidであれば、OK。
（２）ページのリロード
Aタグのhref属性に「href = ””」を設
マウスオーバー時の処理（CSS)
（１）マウスオーバー時の透過処理
「opacity」プロパティを「要素：hover」内に追記
（例）
a:hover {opacity: 0.5 ;}
（２）透過時間の指定 「transition」プロパティを要素タグ内に追記
（例）
a{transition: 1.0s ;}
------------------------------------------------
コマンド備忘録（Git）
【手元で作業する時】
cd [ローカルリポジトリのパス]
-------------------------------------------------------------------------------
git clone [リモートリポジトリパス]
(例： https://github.com/jquery/jquery.git)
※カレントの下にリポジトリ名のフォルダ
ボーダー／ストライプ背景の作成（CSS)
「繰り返したい色と、その幅」と「角度」を指定するイメージ。
【基本形（文法）】
background:repeating-linear-gradient(角度, カラー1 開始位置, カラー1 終了位置, カラー2 開始位置, カラー2 終了位置,…);
【横ストライプ例】
角度は「0」指定なので省略。
background:repeating-linear-gradient(#e7990
フォント指定（CSS）
どのOSにもある程度万能なフォント指定
セレクタ {font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic' ;}
（出典）
OSフォント対応リスト
htt