サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート 「レスポンシブウェブデザイン」を作る際に

「レスポンシブウェブデザイン」を作る際に

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンお疲れさまでした。

本日は現状のスキルをお伺いし、
現在本を参考に勉強されておられる
「レスポンシブウェブデザイン」について、
疑問点や改善点について解決させていただきました。

実際に本を見ながら
しっかりとレスポンシブウェブデザインができていたので、
とても感心しました。

あとはいかに数をこなしていきながら
デザインにあうマークアップを書いていくかと思います。

マークアップを上達するコツは、
とにかく書いて作っていきながら
ご自身の癖をまずは知りましょう。

そして1つずつ、
改善や改良を行っていきながら
よりシンプルな、より効率的な
HTMLとCSSを書いていきましょう。



【確認用ブラウザについて】

基本的にWebページを作成する際には
GoogleのChromeをベースにしまして、
SafariやFireFoxで確認してください。

もし余裕がありましたら、
BrowserStackなどのオンラインサービスで
WindowsもAndroidもMacも
カバーしておいてくださいね。

また、
Chromeには強力な検証ツールがありますので
ぜひ活用してくださいね。



【コンテンツを幅指定で画面中央にする方法】

こちらは以下のセットで丸覚えてください。
この指定をすると親要素に対して
必ず画面中央に来るようになります。

①widthを指定する

②margin: 0 auto;



【padding border margin】

もともとは英語ですので、
少々日本語にするのは難しいところですが
しいて訳すると以下の感じになります。

・padding
=borderとコンテンツとの間の空白

・margin
=borderの外の空白

・border
=コンテンツの枠線、境界線



【ポジジョンについて】

基本的にポジションは
以下の4つの値があります。

・static(デフォルト)
・relative
・absolute
・fixed

ポジションで動かしたい場合は
基本的に親要素に対してrelativeを指定し、
動かしたい要素にabsoluteを指定します。

relativeを指定すると、
左上が基準点(0.0)になります。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

新着レッスンノート

体験レッスンお疲れさまでした。 本日は現状のスキルをお伺いし、 現在本を参考に勉強されておられる 「レスポンシブウェブデザイン」について、 疑問点や改善点について解決させていただきました。 実際に本を見ながら しっかりとレスポンシブウェブデザインができていたので、 とても...

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta