忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(3) サイトの基本構造

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

序章(3) サイトの基本構造

趣味のところにリンクをつけてみよう

自分の趣味をグーグルで調べて、飛ばしたいページのURLをコピー
<a>でリンクしたい文字を囲う

<li><a>趣味2</a></li>

<ul>の子要素は<li>しか入れない約束なので、この順を逆にはできない
つまり、<a><li>趣味2</li></a>という記述はしない

これだけではリンク先が設定されていない
よって、<a>のタグに属性を入れてやる

<a href="https://www.kyoto-station-building.co.jp/events/657.html">趣味2</a>

 

教科書(『HTML+CSS3の新しい教科書』

ヘッダー/フッター

ナビをおくこともあるし
コピーライトを書いたりSNSへのリンクをおいたりする

グローバルナビゲーション

サイト全体を通して共通で表示するナビゲーションのこと

基本構造は、ひろいブロックをつくっていくという形
絶対この形にしないといけないということではない。
ただほとんどのWebサイトはこういう形になっている


ワイヤーフレームサイトマップ

お客さんにこの2つを提示して、
OKだったら作り始めるということが多い
まずワイヤーフレームを描くらしい

ワイヤーフレーム

ざっくりとしたレイアウト(マークアップ)
手書きで書くこともある
サイトの設計図面

サイトマップ

HTMLが何枚必要かみたいな

レイアウトの種類

1カラム(ワンカラム)
スマホにも使いやすい人気のレイアウト
横幅を最大まで使う

2カラム
縦のおびが2つある形
細いほうで補足や広告があったりする

3カラム
yahooとか。ニュースサイトやポータルサイトでよく使われる

デザインの領域に入ってくるので授業では深くやらない
ただスマホに対応しやすいので1カラムがきょうび多い

レスポンシブデザイン

PCとスマホで見え方が違うサイトがある
デバイスによって(横幅によって)見え方が変わる、
それに応じた見やすさに変えていく、という手法をするのを
レスポンシブWEBデザインという

セクショニング

ヘッダー部分を<heder>という要素でマークアップし、
フッター部分を<footer>という要素で、などというのがセクショニング

<nav>(ナブ)

ナビゲーションのこと
セクショニングする要素も覚えていくこと
PR

コメント

ただいまコメントを受けつけておりません。