2019年5月28日の内容『CSSの基礎』

5月28日のブログ勉強会の内容は、『CSS(スタイルシート)』の基礎でした。

下準備

秀丸エディタのインストール

HTML、CSSやプログラムを書いたりするときに便利な『エディタ』をインストールしました。

秀丸エディタのホームページ
https://hide.maruo.co.jp/software/hidemaru.html

メモ帳との違いは、タグや改行の印が色分けされて表示されることです。

メモ帳で見た場合

エディタで見た場合

フォルダーを移動させ、ショートカットを作る

勉強会で使用するフォルダ『CSS練習』を、『ドキュメント』フォルダに移動し、『ショートカット』を作ってデスクトップに移動させました。

ショートカットは、アイコンを右クリックして『ショートカットを作成』を選択すると作れます。

ショートカットとは?

英語で『近道』という意味で、ファイルの実体がが別の場所にあっても、そのアイコンをクリックするだけでたどり着けるものです。

ファイルの実体(画像やドキュメントファイルなど)をデスクトップにたくさんおいて置くと、メモリを消費してパソコンの動作が遅くなる場合があります。

できるだけデスクトップ上にはファイルは置かないようにし、よく使うフォルダなどにはショートカットを作ってそれを使うようにしましょう。

ショートカットのアイコンには、左下に矢印がつきます。

CSSの基礎

CSS(シーエスエス)とは、Cascading Style Sheets、カスケーディング・スタイル・シートの略で、ウェブサイト(ホームページやブログ)の色などのデザインを設定するものです。

スタイルシートという場合もありますが、同じ意味です。
当勉強会ではCSSと呼ぶことにします。

文字の色を変える

ここでは<h1>(見出し1)の色の背景を黒、文字を白色に指定します。

CSS部分を上記のように書くと

h1の見出しがこのようになります。

同じ要素の場合は1度指定すると同時に変化する

h2が二つある場合、1回指定すれば、2か所とも変化します。

細かい指定は class で

難しい話は今回は省きます。class(クラス)というものを指定すると、細かい部分の設定もできます。

※クラスの場合は、前に『.』ピリオドをつけるのを忘れずに!

クラスは、好きな文字をつけることができます(半角英数文字)

色は、redやblueなどのように英語で書く以外でも、数字で指定することができます。『CSS カラーコード』などで検索してみましょう。

数字リストの文字を変えてみる

数字のリストのHTMLは以下のように書きます。

通常ですと、

このように数字になりますが、CSSの部分を

このように指定すると、ひらがなのいろはになります。

他にもいろいろな指定ができますので『CSS list-style-type』で検索してみましょう。

コメント(メモ書き)の方法

公開ページには見えないように編集用のメモを残しておきたい場合、『コメント』というものを利用できます。

コメントの書き方は以下の通りです。

htmlの場合

<!– コメントしたい文字 –>

CSSの場合

/ * コメントしたい文字 */

※半角記号で書いてください。

まとめ

CSSは奥深い世界なので、いきなり全部を知ろうとすると大変難しいです。

よくわからなくていいので、まずは見様見真似でお手本通りやってみて、わかるようになった部分から触っていきましょう。

次回の予定

次回は6月11日。

今回の復習をしながらワードプレスを使ってCSSの設定をしてみましょう。

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