6/6 表示効果のないタグのレイアウト
表示効果のないタグ
表示効果のないビジュアルエディタでの操作は難しい
ID属性の使用
- classは再出可能だがIDは一度しか出現しないので場所を特定できる
- DWではこれを用いて挿入箇所などを特定している
表示効果のないタグの挿入
挿入のダイアログより位置を指定して挿入する
| 開始タグの後 | 対象ID内の最前部に挿入 |
|---|---|
| 終了タグの前 | 対象ID内の最後部に挿入 |
今日の一言
インターンで全然ついていけ無いです。
6/13 ボックスモデルとフロート
ボックスモデル
ブロックレベル要素は以下の設定を持つボックスから成り立つ
- content
- padding
- border
- margin
CSSパネルでの入力
- 上部は四辺一括またはショートハンド
- 四辺分割指定する場合は下部
Floatによるレイアウト
float
- ボックス幅いっぱいだった要素が浮き上がり光景要素が回り込む
- widthでサイズ指定、カラム落ち対策にbox-sizing:border-box
clear
- floatをclear:bothで解除
きょうのひとこと
久しぶりにインターンから戻ってきてこの授業を受けられたけどやっぱり何回か受け無いだけでだいぶわからなくなるから辛い。。。。もっと理解できるように頑張ります。
6/20 フロートナビゲーション
CSSを使用したナビゲーション
メンテナンス性に優れるため主流
グローバルナビゲーション
トップ第一段階にいつでもいけるナビゲーション
ローカルナビゲーション
その項目内のナビゲーション
floatのナビ
- 分割数分の幅をwidthで指定
- float:left
- ulのパディングマージンを取る
新村セレクタ
- ナビゲーション内のリストのように特定の親要素内の子要素だけを指定可能
- 半角スペースで区切る
きょうのひとこと
なんだかんだで自分で全部打ってたほうが楽しかった気がします。
6/27 擬似クラスと絶対配置
インライン要素のブロックレベル化
表示効果のないビジュアルエディタでの操作は難しい
| インライン要素 | 段落内の一部 | span,a |
|---|---|---|
ブロックレベル要素 |
ボックスにできる（改行伴う） | div,p,h |
aはインライン要素なので文字数に大きさが依存し操作しづらい。
displayプロパティ
要素のもともと持つ特性を変更できる
| :block | ブロックレベル要素にできる |
|---|---|
| :inline | インライン要素にできる |
| :none | 不可視にできる。 |
擬似クラス（：コロン）
文書構成で示せない招待などのセレクタにできる
| :link | 未訪問リンク |
|---|---|
| :visited | 訪問済み |
| :active | クリック時 |
| :hover | マウスカーソルがオーバーした時 |
:hoverはカーソルの状態が変化するのでその領域がリンク可能なことが分かり易い。
今日の一言
インターンで全然ついていけ無いです。
絶対配置
positionプロパティ
| 値 | 和訳 | 解説 |
|---|---|---|
| absolute | 絶対配置 | 絶対的な位置の指定 |
| renlative | 相対配置 | 基準位置からの絶対的な配置 |
posution:absolute
Dwではでサインビューからドラックしながら位置指定が行える
位置指定の基準位置を指定
無指定ではブラウザの左上が基準となり、センタリングなどずれてしまう
posution:relative
- 基準としたいボックスにrelative指定する
- 絶対配置したいボックスはこのボックス内の（中に入れる）子要素にする。
きょうのひとこと
最近授業とインターンが被らないのでついていけますが、またインターンとwebの時間がかぶるのが怖いです。。。。頑張りたいと思います。