レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
簡単だけど誰も教えてくれない、明快な文章を書くための6つのヒント1. 一度にたくさん運ぼうとしない文章は情報を載せて運ぶ伝達手段ですが、多くの情報を1つの文に詰め込んで、すべてを伝えようとすると、読み手に大きな負担になるものです。荷物を運ぶときのように、何回かに分けて運ぶようにしましょう。2. 主役は早く登場させる主役の登場を待たなければいけない文章は、明快で伝わりやすい、とはいえないものです。書き手と読み手は、少しでも早い段階で文章の主役（主題）を共有しましょう。3. 読点は、意味の切れ目に打つ読点（、
簡単だけど誰も教えてくれない、明快な文章を書くための6つのヒント 1. 一度にたくさん運ぼうとしない 文章は情報を載せて運ぶ伝達手段ですが、多くの情報を1つの文に詰め込んで、すべてを伝えようとすると、読み手に大きな負担になるものです。荷物を運ぶときのように、何回かに分けて運ぶようにしましょう。 2. 主役は早く登場させる 主役の登場を待たなければいけない文章は、明快で伝わりやすい、とはいえないものです。書き手と読み手は、少しでも早い段階で文章の主役（主題）を共有しましょう。 3. 読点は、意味の切れ目に打つ 読点（、）は、息継ぎの記号ではありません。1つの文の中で、意味の固まりを視覚的に示すものです。読点は、意味の切れ目で打つようにしてみましょう。 4. 削れる言葉は徹底的に削る 社歴が長くなるビジネスマンほど、文章にムダな言葉を挟みながら、長く長く書いてしまう傾向があるそうです。文字を削
ウノウラボ Unoh Labs: 名刺作りで学ぶレイアウト（＋α）基礎講座 その２
こんにちは！ yamazakiです。 前回のレイアウト講座、いかがだったでしょうか。 今回は、前回の続きとして、さらにもう少しあれこれと、名刺・書類などを作るときに役に立ちそうなレイアウト回りのコツなどを、やや補足的に書いてみようと思います。 なお、今回も作例はフォントを「HGP創英角ゴシックUB」「HGPゴシックE」、色は黒のみ、でやってみることにしておきます。 安定/不安定 「安定した見た目」「不安定な見た目」というのがあります。実際にいくつかやってみましょう。 上のほうに大きなもの、太いものがあると、どことなく不安定な印象になります。 meishi1 posted by (C)フォト蔵 下のほうに大きなもの、太いものがあると、安定感が出てきます。 meishi2 posted by (C)フォト蔵 左右/上下が線対称、もしくは、点対称であれば安定感が出ます。 meishi
プログラマーがかっこいいWEBサイトを作る5つのコツ - おかねがない(ﾟ∀ﾟ)ｯ!!
「かっこいいサイト作るぞ！」 と意気込んでみたももの、いざ作ってみると 「あれ･･･なんかダサい･･･」 WEBサイトを作成したことのあるプログラマーの方なら、 経験したことがある方も多いのではないでしょうか？ WEB制作は、基本的に、デザインはデザイナー、システムはプログラマー、という 役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、 簡単なようで、なかなか難しいことです。 かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、 自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが･･･ なんていうことを何回も経験してきました。 そこで私が試行錯誤した結果を元に、プログラマーが、シンプルながら ある程度見栄えのするWEBサイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッダーとフッターの横幅をウィンドウいっぱいに広げた固定幅レイアウト | モノリオ
センスがなくてもチラシを組み立てられる電卓式レイアウト法 | 企業ホームページ運営の心得
