2021-08

WEB基礎

Adobe XD

動作が軽いのが特徴。WEBサイトのプロトタイプを作るソフト。基本的にXDでは、 デザインプロトタイプ共有(クラウドを介してつながる) の3つを行う。 ローカルドキュメントとして保存選択ツールにして、パス上でWクリック→ア...
WEB基礎

CSSのコーディング(sampleサイト1)

サンプルサイトのCSS。解説はコードの中にコメントアウトで記入した。 @charset "utf-8"; /* font -------------------------------------------------...
WEB基礎

コーディング

サーバにアップするファイル名が基本同じなので、更新と更新前を分けるために、「index.html+backup+日付」という風にファイル名を変えて、上書きしないようにしてサーバに取っておく。(保証)style.cssは「style+日付_...
WEB基礎

デザインラフ

デザインには必ず意味がある。2提案するのは、そこをお客さんに気づかせてあげる。例えば、 ロゴ(画像)をH1にしてもaltとtitleで入れればSEO少しだけ弱まるけど十分OK 文字サイズ違うときはクラス使うもしくはlistの内...
WEB基礎

ワイヤーフレーム

ワイヤーフレーム(デザインカンプ)とは WEBサイトのレイアウトデザインのこと。まず、何をしたいのか?を明らかにして、パーツを決める。時間をかけずにすり合わせることが大切。※イラスト・ピクトグラム・アクセスMAPなどはまだ作らない。...
WEB基礎

CSS基礎6(リスト,表,疑似要素)

list-style-type リストの頭の装飾を決める。「none」で使って横並びにして、項目やメニューを作ったりすることが多い。 listはもともとblock。これをdisplay: inlineに指定することで、文字幅の...
WEB基礎

CSS基礎5(position,display,overflow)

position 効果は「座標をかえる」。コーディングをするときに、最後に書くといい。移動させたときは、元居たエリアは、詰められずに空いてしまうことに注意! ブロックレベル要素でも、position使うと座標の概念が発生するの...
WEB基礎

CSS基礎4(float,clear:回り込み)

前提として、、、floatとclearは古のタグですが、知らないと過去のファイルを直せないので学ぶ。ボックスを横並びにさせるためのもの。 万が一、書いてるのに効かない場合は、横幅計算ミスが原因なことが多い! はじめに r...
WEB基礎

CSS基礎3(BOX-model)

CSSのバージョンは「レベル」と呼ぶ。使えるようになると言えるのはW3Cの「勧告候補」になった段階から。 UI/UXから考えるWEBサイト 最近は利き手と反対の手で方手持ち。よって、ボタンは下の方がよい。 更にスマホは縦...
WEB基礎

CSS基礎2(font,背景,コメントアウト)

font-family フォントファミリー名は引用符で囲い、総称フォント名は引用符では囲わない各フォントファミリー名をカンマ(,)で区切って記述font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用...
タイトルとURLをコピーしました