株式会社 LITTLE JAPANはそれぞれの地域の資源を活かしたまちづくりをお手伝いする会社です。 空き家を活用したゲストハウス、カフェ/バー、シェアハウス、コワーキングスペース、 ショップ等の場・コミュニティづくり、移住促進・関係人口創出に係る事業を行っています。
cssで枠線や見出しを作る
以前は画像で作るのが一般的でしたが、現在では多くの物をCSSのみで表現出来るようになったので、積極的に使って見ましょう。
https://www.nxworld.net/tips/css-scroll-down-button.html
CSSで変数が使えるカスタムプロパティ
cssで変数というとSASSやLESSといったcssを拡張したメタ言語が一般的ですが、最近ではcssのみでも変数を使う事が出来ます。
SASSやLESSと比べると、出来る事は少ないですが、cssファイルに直接記述する事が出来、非常に簡単なので、まずはcssカスタムプロパティを使って、css内で変数を使う事に馴れて見ましょう。
カスタムプロパティ
カスタムプロパティで変数化出来るのはcssの数値で指定出来る値です。css animationと同じような感じです。
CSS変数の定義
まずはjsと同じように最初に変数宣言します。その際に「:root」を用います。
:root {
--box_w:100%;
--box_h:100vh;
--bg_color: #333;
--m10:10px;
}
次に変数を呼び出したい場所で「var(--変数名);」と呼び出します。
.box {
width: var(--box_w);
height: var(--box_h);
background: var(--bg_color);
}
calc()関数と一緒に使うことで、より便利になります。
.box {
margin-bottom:calc(var(--m10)*50);
}
https://caniuse.com/#feat=css-variables
配色の基本
メインカラー
その名の通りサイトの印象を決定づける主役の色です。
ベースカラー
最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。
アクセントカラー
全体の5％と少ない使用量ながら一番目立つ色で、全体を引き締める、ユーザーの目を引く役割があります。
色数はできるだけ少ない方がいい
色が難しくなるのは、たくさんの色を同時に使おうとするからです。例えば、白と黒、白と赤だけの配色を見て、バランスが悪い、まとまりがないと思うことはほとんどありません。しかし、そこに青や黄などが混ざってくることで、配色は一気に難しくなります。裏返せば、色をできるだけ使わないようにすれば、誰でもそこそこまとまりのある配色にすることができるということです。
カラースキーム
カラースキーム【color scheme】 色彩計画。 色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」｜テクニカルブログ｜株式会社エムハンド
ワイヤーフレーム の作成
ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。
架空サイトのワイヤーフレーム を実際に作ってみましょう。
入れるコンテンツ
- ロゴ
- ナビゲーション
-トップ
- menu
-info
-access
-wedding
-Reservation
- キービジュアル
- ギャラリー（サムネイルが６〜8個）
- menuコンテンツ（ランチメニューのバナー、ディナーメニューのバナー、メニューの詳細ボタン）
- infoコンテンツ（お店の情報、SNSのタイムライン）
- weddingコンテンツ（式の様子をyoutube動画、googleカレンダー）
- 予約フォーム
- フッター
デザインルール
- ワイヤーの段階で色を入れない
- ファーストビューの中（高さ700px前後）にh1、ナビゲーション、キービジュアル、h1直下のp（可能であれば）
- 複数ページの場合、ヘッダー、ナビゲーションは基本的に全ページ共通
- 揃えるコンテンツは幅960pxで
VisBugはChromeの機能拡張で、ブラウザに表示した既存のページのデザインなどをその場で検証・編集できます。色を変えたりマージン・パディングの値を変えたり、テキストを編集したりと、様々な事がこの拡張機能を入れるだけでchrome上で出来る様になります。
デザイナー向けの検証モードといった感じです。とても便利なので、ぜひ導入してみましょう。
不用品回収を杉並区でお困りならくりりあ
不用品回収を杉並区でお困りなら、くりりあにお任せください。杉並区をはじめとする、東京都・埼玉県・神奈川県でのご予約を承っております。
「丁寧な作業」をご希望の方に好評いただいております。
親切なスタッフがあなたのお悩みを解決します。
cssでの色々な指定方法
授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。
また、細かい要素の指定方法が必要になるので、
「~」で同じ階層の後ろに並ぶ要素に適用
<p>適用されない</p> <p class="example">適用されない</p> <p>適用される</p> <p>適用される</p>
example ~ p { color: red; }
「+」で同じ階層のすぐ後の要素にのみ適用
<p>適用されない</p> <p class="example">適用されない</p> <p>適用される</p> <p>適用されない</p>
.example + p { color: red; }
