CSS の使い方 – 初心者向けの Web デザインのヒントとコツ

CSS を使用して Web ページのスタイルを設定する方法については、初心者向けの CSS のヒントを参照してください。

コンピュータ コードについて何も知る必要はありません。 知っておく必要があるのは、コピーと貼り付けの方法だけです。

しかし、最初に、CSS とは何ですか?

Cascading Style Sheets (CSS) は、テーマ開発者が HTML ドキュメントのプレゼンテーションや外観を記述および変更するために使用するスタイルシート言語コードです。

CSSは何をしますか？

簡単に言えば、CSS ファイルは HTML ページの見栄えを良くします。

どのブログ プラットフォームを使用していても、CSS プロパティを変更してブログの見栄えを良くすることができます。

使用するブログ プラットフォームは問いません。

カスタム CSSまたは追加 CSSのテーマ設定にオプションがあります。

このオプションを見たことがないかもしれません。

または、コーディング方法を学ぶのは難しすぎると思うかもしれません。

しかし、それは超簡単です。

Web 開発や CSS 構文については何も知りませんが、スタイル属性を数秒で変更できます。

Chrome または Firefox Web ブラウザーの開発者ツールを使用して、いくつかの簡単な CSS のトリックとヒントを学ぶだけです。

それがどれほど簡単か見てみましょう。

ブログの CSS を編集する方法を知りたいのはなぜですか?

ブログのテーマには多くの設定があるでしょう。

しかし、欠けている可能性のある小さな要素がたくさんあります。

WordPress のプレミアムテーマでも、標準オプションでは利用できないオプションがあります。

独自の編集や変更を行うことで、CSS の機能を向上させることができるのはそのためです。

外部スタイル シートを変更することで、すべての HTML ページを参照できます。

1 つのページで HTML 見出しを変更すると、すべてのページの HTML タグが変更されます。

参照は疑似要素と呼ばれます。

H2 見出しの外観を変更すると、サイト上のすべての H2 見出しが変更されることを意味します。

しかし、これらの合併症についてすべてを学ぶ必要はありません。

知っておく必要があるのは、それが機能することと、コーディングについて何も知らなくてもブログの外観を正確にスタイルできることだけです.

初心者向けの簡単な CSS のヒントから始めましょう。

インライン CSS を簡単に変更する方法

最初のステップは、Firefox、Chrome、または Microsoft Edge でブログを開くことです。

以下の例では、Firefox を使用しています。 Chromeより使いやすいと思います。

しかし、どちらも同じように機能します。

新しいタブまたはウィンドウでブログを開きます。 変更したいページに移動できます。

次に、Firefox の [ツール] メニューまたは Chrome の [表示] メニューから、開発者ツール、インスペクターを開きます。

インスペクターをクリックしてツールペインを開きます。

ツール ペインの左上にある選択矢印を使用して、ページ上の任意のインライン スタイル要素を選択できます。

ページ上でカーソルを移動して要素を選択します。 または、リスト内の個々の要素をクリックすることもできます。

Web ページのブラウザー ビューで、選択した各要素が青色で強調表示されます。

これで、ページの外観を変更する準備が整いました。

CSS セレクターの使用

この例では、H2 タイトル要素の外観を変更します。

H1 要素、本文テキスト、または画像キャプションを変更することを選択できます。

フォントサイズを変更することから始めたいと思います。 スタイルタグの font-size をクリックして数値を変更するだけです。

サイズを 33px から 56px に変更しました。 見出しのサイズが大きくなっていることがわかります。

心配しないで。 ライブ ブログ ページを変更していません。 ブラウザ ペインに表示されるのは、変更のプレビューのみです。

どんな HTML 要素でも好きなだけいじることができます。

ブラウザー ペインに表示されるものはすべて、CSS ルールへの変更がどのように表示されるかのプレビューにすぎません。

今度はテキストの色を変更したいと思います。

カラー タグと番号の間のカラー ドットをクリックすると、カラー セレクタが開きます。

あとは使いたい色を選ぶだけ。

HTML 属性の色を変更するのは簡単です。 ここでは、黒から青に変更しました。

見た目は良いですが、行の高さはもっと良いかもしれません。 変更します。

現在の設定は 1.2 で、行間のスペースが大きすぎます。 線を近づけたい。

では、1.0に変更します。

それははるかに良く見えます。

プレビュー モードで H2 見出しがどのように見えるかについて、3 つの変更を加えました。 フォントサイズ、色、行間隔を変更しました。

これらの変更をライブ サイトに追加します。

サイトのコードを取得する方法

変更したコード行をコピーする必要があります。

すべてのコードを選択してコピーします。 最後の括弧を含むすべての行を必ずコピーしてください。

これをテキスト エディタに貼り付けます。 PC ではメモ帳、Mac ではテキスト エディタを使用できます。

私たちが行ったもう一つの変更は色です。 この行もコピーする必要があります。

色の線をコピーするだけです。

上の画像では、H2 要素が太字になっていることがわかります。 これは、最初のコードと同じ疑似要素であることを意味します。 そのため、それらを一緒に使用できます。

行をコピーします。

次に、テキスト エディターに行を追加します。

色の線が同じようにインデントされるように、いくつかのスペースを追加または削除する必要がある場合があります.

これで、これら 3 つの変更を実際のサイトに追加する準備が整いました。

サイトにコードを追加する

テーマ オプションに移動し、CSS オプションを選択します。

WordPress テーマでは、テーマ カスタマイザーにあり、追加 CSS またはカスタム CSS と呼ばれます。

他のブログ プラットフォームでも同様の名前が付けられます。

テキスト エディターからすべてのコードをコピーし、[カスタマイザー] タブに貼り付けます。

コードを貼り付けるとすぐに、プレビューアに加えた変更が表示されます。

[公開] をクリックすると、完了です。

これが変更前と変更後の比較です。

もっと多くのことができます

HTML CSS スタイルを編集するための初心者のための私の CSS のヒントは、ほんの始まりに過ぎません。

実験して他の要素を変更しようとする場合は、さらに多くのことができます。

画像に枠線や影を追加したり、テキストを左右に移動したり、本文のテキスト幅を変更したりするのは簡単です。

マージンを移動したり、パディングを増減したり、配置を変更したりできます。

編集するために選択できるオプションは数百あります。

開発者ツールで作業しているときは、サイトに影響を与えないことに注意してください。

行った変更はプレビューであり、そのブラウザー ウィンドウ内でのみ表示されます。

何を試しても、うまくいくかどうかは問題ではありません。

Web サイトやブログのスタイルを設定するために、さらに多くのことができることを学ぶための遊び場と考えてください。

好奇心を持って、初心者向けの CSS のヒントを参考にして、この新しいスキルを楽しく学んでください。

開発者ツールに関するおまけのヒント

開発者ツールのフレームが開いたので、できることは 1 つあります。

サイトの速度をテストできます。

あなたがする必要があるのは、[ネットワーク] タブをクリックすることだけです。

次に、CTRL + R をクリックします。

矢印でマークされた下部の行に、完全に読み込まれたページの速度時間が赤で表示されます.