デザインのしたじきコ・デザインのためのシンキングシート
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。
2019年1月24日 CSS, HTML, Webサイト制作 HTMLやCSSの書き方を勉強してみたという初心者さんから、いざ自分でWebページを作っていくとなると、何から始めればいいのやら…？という声をよく耳にします。きちんと構成を考えてコーディングを始めないとレイアウト崩壊の危機…！今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。 ↑私が10年以上利用している会計ソフト！ 今回作るWebサイト例 こんな感じの、よくあるヘッダー・メイン・サイド・フッターで構成されたWebサイトを作っていく手順を考えていきましょう！ 1. ファイル、フォルダーを作る まずは必要なファイルとフォルダーを用意します。必要なファイルやフォルダーはそのWebサイトによって変わりますが、基本的にはプロジェクトフォルダーの中に index.html、CSSを入れる「css」フ
全ての人が知っておくべき 見やすい資料をつくるための9つの黄金テクニック - ひつじの雑記帳
スライドやポスターなどの資料作成において一番重要なものは「内容」です。しかし、それに並ぶくらい「デザイン・レイアウト」も重要となります。見づらいデザインのせいで、せっかく長時間かけて仕上げた資料が台無し...なんてことも十分にあり得ます。 あなたは読み手に優しい「見やすい資料」を作れているでしょうか？ 今回は、全ての人が知っておくべき見やすい資料をつくるための9つの黄金テクニックを紹介します。これから紹介することは資料作成だけでなく、Webデザインにも応用できるはずです。ブログやサイトを運営している方もぜひ参考にしてみてください。 スポンサードリンク 目線の動きを意識したZNの法則 矢印や番号を使うと尚良し 強弱をつけて読みやすくする 適度な余白・行間を持たせる 見えない線を常に意識する 彩度の高すぎる色彩は使わない 色が持つ意味を考えて使う 色が持つイメージの例 極端な大きさの文字を使っ
サイトのメインビジュアルに悩んだときに参考にしたい！11個のレイアウト手法 - Hatsuka
最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN｜美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
