HTMLコーディングのスピードアップ（その１）

コーディングのスピードアップを図ろうと、まずは手順をまとめました。

コーディングの手順

  1. レイアウト作成（手描き・イラレ）
    ブロック分け（手描き）
  2. コーディング
    HTMLマークアップ
    id クラス　命名
    スタイル指定
    スタイルマークアップ

 

上記手順に変更は必要なさそうなので、

今度は具体的に何をどうすれば早くなるかを考えました。

時短の具体的な方法

  1. ひな型フォーマットを作る
    レイアウトパターン
    基本のHTML
    CSSレファレンス
    class名一覧

  2. コーディング自体を早くする
    CodePenの利用
    Emmetの利用
    スニペットの定義
    アセットの利用

ひな型を作る作業は、時間がかかりそうです。

急がば回れ。地道に作ります。

ひな型を作ったら掲載していきたいと思います。

 

 

 

 

 

 

 

 

フレームワークは使わにゃ損ソン。

CSSフレームワークとは

 

HTMLに決められたクラス名を指定することで、

レイアウトや機能を追加することができるもの。

 

コーダーに人気のフレームワークは、Bootstrapやbluma　他多数。

美しいデザインで機能的なレイアウト・タブ・フォームを追加することができる。

 

簡単に追加できるが、カスタマイズしたい場合は少々の手間が必要。

スタイルを指定する要素やクラス名は調べないといけない。

 

フレームワークは使わにゃ損ソン。

セレクタ【用語おさらい】

用語

セレクタとは

 

英：selector

意味：CSSで指定する要素

 

■書き方

　セレクタ{

　　　プロパティ：値；

　}

　※セレクタ＝何を　プロパティ＝どのように

 

■種類

  1. 要素　HTMLの要素
  2. 全称　HTMLページ内全ての要素
  3. id　　idで指定した要素
  4. class　classで指定した要素
  5. 複数　複数指定
  6. 子孫　A B　A以下にあるB（孫も入る）
  7. 子　　A>B　A直下にあるB（孫は入らない）
  8. 隣接　A+B　Aの直後にあるB
  9. 間接　A-B　Aと同階層でA以降にあるB

 

概念を説明すると難しく感じるが、例を見れば分かりやすい。

 

 

 

要素【用語おさらい】

要素とは

英：element

意味：構成するもの

 

■HTML要素

開始タグから終了タグまでを<p>要素という

 <p>今日はいい天気です</p>

 

■親子関係を示す

親要素の中に子要素を入れて、入れ子の関係にある場合

親要素・子要素という

 

 

 

 

Flexboxの使い方【HTML+CSS】

HTML+CSS

英：Flexible Box Layout Module

CSS3のフレキシブルボックスを利用したレイアウト

ただし、IE10以下は非対応なので注意する

 

Flexコンテナ（親要素）の中にFlexアイテム（子要素）を含むイメージ

 

□記述方法

親要素に　display:inline-flex;　を指定する

並びや揃えはプロパティで指定する

 

 

 

CSSの書き方【CSS】

書き方は３つ

 

その１　外部ファイルで読み込む

　.cssにスタイルを記述して、HTMLから<a href="">タグを使って読み込む

 

その２　head内に書く

　</head>の直前に、<style></style>内に記述する

 

その３　HTML要素に追加する

　<p style="color:red">のように記述する

 

HTML4時代は、HTML要素とhead内に記述することが多かった。

現在は外部記述がメイン。