【HTML & CSS】便利な情報まとめ

プログラミング

2019/10/29 更新

・小技追加

プログラミングの勉強中にこれは!と思ったことをまとめていきます。

Web便利情報まとめ

MDN web Docs

言語、タグに関する詳しい説明が見たかったらこの MDN web Docs

Google Chrome

デベロッパーツールが使えるのでよくオススメされます

エディタの便利機能まとめ(管理人は「Visual Studio Code」を使用しています)

1工程戻す

【Mac】Command+z

【windows】Ctrl+z

ファイル保存

【Mac】Command+s

【windows】Ctrl+s

インデント:字下げ、字上げ

適用させたい行を選択して

字下げ:Tab

字上げ:Shift+Tab

ソースコードの移動

適用させたい行を選択して

【Mac】option + 矢印キー

【windows】alt + 矢印キー

ソースコードのコピー

適用させたい行を選択して

【Mac】Shift+option + 矢印キー

【windows】Shift+alt + 矢印キー

コメント化 切り替え

適用させたい行を選択して

【Mac】Command+/

【windows】Ctrl+/

リンク先を表示or作成

urlにカーソルを合わせて

【Mac】Command+クリック

【windows】Ctrl+クリック

小技

コンテンツの自動位置調整

例)左右の余った領域を自動で調整する

margin-left:auto; 

margin-right:auto;

要素直下のタグを指定 >

.works > h1{    /* works直下のh1にだけ適用 */

}

複数のクラス名をつける

class=”base main”

class=”base list”

CSSで属性を選択する

[href=”#”]{

 —;

}

コメント

タイトルとURLをコピーしました