【Luxeritas】デベロッパーツールの使い方【Google Chrome】

2023/07/042024/09/04Luxeritas

ナツメグ

ナツメグです

もうダサくしないカスタマイズ第9回。

他人ひとの書いたコードなんか分かるか！

という訳で今回は
他人の書いたコードも分かってしまう
Google Chromeのデベロッパーツールの
使い方を解説します。

Luxeritas（ルクセリタス）の記事一覧の下線を
デベロッパーツールを使って消します。

っていうかこの下線いる!?

シンプルなデザインのLuxeritasから
さらに要素を引いて行くスタイル。

要素がなければダサくなりようが
ないんですよ。

人間も裸が一番魅力的。

おっぱいを見せ付けたいナツメグです。

Contents

1. 【Luxeritas】デベロッパーツールの使い方
2. CSSで良く使う指示

【Luxeritas】デベロッパーツールの使い方

作業の手順

Google Chromeを起動
検証でclassを調べる
CSSをコピペしてスタイルシートに書き込む
キャッシュの消去とハード再読み込み

Google Chromeを起動

Google Chromeを起動します。

Google Chromeの上の欄に
URLを入力します。

右上の縦の…マークをクリック。

その他のツール＞デベロッパーツール。

デベロッパーツールの画面が表示されます。

消したいのはこのグレーの線です。

検証でclassを調べる

グレーの線を右クリックして
検証をクリック。

classやCSSの指示が表示されます。

classがgridだと分かります。

なので
下の方に表示されている
main div.grid:last-childをいじれば
グレーの線を消せそうです。

CSSをコピペしてスタイルシートに書き込む

スタイルシートに書き込みます。

#main div.grid:last-child{
	margin-bottom: 20px;
	border-bottom: none;
}

border-bottom:1px solid #ddd;を
border-bottom: none;に書き換えました。

キャッシュの消去とハード再読み込み

Google Chromeの左上の
丸い矢印を右クリック。

キャッシュの消去とハード再読み込みをクリック。

グレーの線が消えました。

ブログカスタマイズの記事を書いている人が
何で他人の書いたテーマのclassが分かるのかと言うと
Google Chromeの
デベロッパーツールを使っているからでした。

これで今度からは
ブログの記事の
コピペだけじゃなくて
自分でカスタマイズが出来ますね。

CSSで良く使う指示

margin

要素の外側の余白の指示。

margin: 10px;
要素の外側上下左右に10pxの余白が出来ます。

margin: 10px 0px;
要素の外側上下10px、左右0pxの余白。

margin: 10px 0px 10px;
要素の外側上10px、左右0px、下10pxの余白。

margin: 10px 0px 10px 0px;
要素の外側上10px、右0px、下10px、左0pxの余白。

margin-top: 10px;要素の外側上10pxの余白。

margin-bottom: 10px;要素の外側下10pxの余白。

margin-left: 10px;要素の外側左10pxの余白。

margin-right: 10px;要素の外側右10pxの余白。

padding

要素の内側の余白の指示。

padding: 10px;
要素の内側上下左右に10pxの余白が出来ます。

padding: 10px 0px;
要素の内側上下10px、左右0pxの余白。

padding 10px 0px 10px;
要素の内側上10px、左右0px、下10pxの余白。

padding: 10px 0px 10px 0px;
要素の内側上10px、右0px、下10px、左0pxの余白。

padding-top: 10px;要素の内側上10pxの余白。

padding-bottom: 10px;要素の内側下10pxの余白。

padding-left: 10px;要素の内側左10pxの余白。

padding-right: 10px;要素の内側右10pxの余白。