文字を整える

文字の色などを変えよう

文字を準備する

飯田いいとこ
a11.zip へのリンク
フォントは、何も指定しないとパソコンに使われているフォントを利用します。
使用されているフォントによっては画面デザインが崩れます。
そこで、こんなフォントを使用してほしいと指定します。
さらに、ｗｅｂフォントといって、インターネット上のフォントも利用できます。
フォントは、こんなフォントを使ってほしいという順番に書きます。
2019年おすすめのフォントと書いてあったページから借用しました。
これをbodyに適用すると、ボディの中、つまり表示される全部がこのフォントになります。

body{
    background-image: url(g1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;   
}
でも、黒くて分からない

<h1>見出しの色をcsswで変える

そこで、見出しの色を変えてみましょう。
ここでは白にしてみます。好きな色をどうぞ、

h1{
/* 全部コメントアウトするか削って */
/*    background-color: palevioletred;  */
/*    padding: 20px 30px 40px 50px; */
/*    border: 10px solid blue;*/
/*    margin: 10px;    */
/*    width: 300px;      */
/*    text-align: center;*/

/* 色を白くする   */
    color: white;
}
whiteの代わりに、#ffffffの16進数でも白です。。
0123456789abcdefの16進で白す。
000000は黒です。
　　ffffffとは
　　最初のffの2つの数字が赤で000000は、赤色が無し、ff0000は真っ赤。
　　次のffの２桁は緑　00ff00は緑。
　　次のffの2桁は青　0000ffは青です。
　　#ffffffとwhite は同じで白を表します。

<p>の色cssで変える

coler を指定すると白になります。 やってみて下さい。

p{
    color: #ffffff; 
}
次は位置をかえたいですね。

表示位置を変える


HTMLで、class="cont"とコンテンツをクラス指定してありますので、これを移動しましょう。
もう少し真ん中にした方が良いかな。
間が開くように高さも指定しました。 

.cont{
    margin: 20px 0px 80px 30px;
    height: 320px;
}
下の方にすきまがありますので、 フッターに、height: 150px;の指定を入れました。
これでトップページの完成です。
飯田いいとこ
１カラムページ