2017
12.07

見出し文字の装飾を全部CSSでコーディングする

CSS, CSS3

Webページの設計

大きい1枚ページのコーディングを丸投げされた場合、フリーランスWebデザイナーはどうするか?

文書にして14ページほどある場合🍭

1. 紙に書き出す
2. Cacooなどの無料サービスを使う

今回は予算が少ないので、紙に書き出す方法にします。

大まかなレイアウトを頭の中でまとめて、小さなレイアウトを分けていきます。

正直なところ、最初の設計って一番めんどうです。誰もやりたくありません。

でもひとつずつ計画を立てて製作しないと、後で困るのは設計者つまりコーダーなのだ。

12ヶ所の見出しのデザイン

今回の課題は、12ヶ所ある大きな見出しであります。

何ヶ所かは同じものを使って、ごちゃごちゃした印象にならない様にしようと思います。

ちなみに目指す仕上がりのイメージは : https://www.theport.jp/

CSSなら軽量でお洒落な今風のデザインに仕上がるので、取り入れたい所です。

以前ご紹介した、押したくなるボタンデザインを知って以来、お気に入りとなった saruwakakun(さん?) から拝借。

 

H1~H6 タグの書き方

h 1 とは

HTMLの最初の方に出て来ました。「見出し」と呼ばれるものですね。

全体のバランスを考えながら、整理していきます。

サンプルページなどを作って、練習しながら全体のバランスを考えて、

そしてやっとコーディングに入ります。

この時の注意点は

まず始めにH1にクラス設定をする。

そしてその大きさは、H1〜H6までであり、

順番を守ってコーディングしなければいけないということ。

それさえ守れば、幅や高さも自由に変更できます。

色や形も背景も全部、クラス設定して、作れます。

 

ただひとつ、気になる点がありました。

基本的には1ページ(1記事)につき一度だけ使うようにしましょう。

これはブロガーさんへのメッセージの様ですね。LP(Landing Page)の場合は関係ありませんね。

参考: https://saruwakakun.com/html-css/basic/h1-h2-h3

サンプルページ

ULタグのスタイル指定

リストタグも今回たくさん使いそうな予感なので、備忘録💧
リストタグ = li でした。

そしてそれには親要素の、olulが存在しました。

ol : Order List
ul : Unordered List

Unordered List は 「・」 でリスト表示。

この 「・」 を消したい時のスタイルシートの書き方は、なんとカンタン、1行のみ♪

ul li {
list-style-type: none;
}

こんな感じで どんどん設計するためのコードを、頭のなかで整理してから マークアップに入ります。



コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。