WPサイトデザインのコツ(ちょっと知ろうCSS編)

前回、デザインカンプを受け取るコーダーが何を考えてWebサイトを作っているかについて、自分を参考に、お話ししました。今回はコーダーの主なお仕事である、CSSを書くこと、そのCSSについてちょっとだけ知ってみよう、というお話しです。

CSSは「Cascading Style Sheets(カスケーディングスタイルシート)」というもので、スタイルシートとも言ったりします。HTML文書に対して、人間の目に見える部分の「装飾」を一手に担っているデータです。

例えばこの見出しを実現しているCSSとは

この見出しは見出しレベル3<h3>というタグでマークアップされています。これに対しかけられているスタイルは以下のようなものです。


h3 {
font-size: 27px;
font-size: 2.7rem;
line-height: 1.1852;
margin-top: 2.3704em;
margin-bottom: 1.1852em;
}

フォントのサイズや行の高さ、上下のマージン(空白)などが設定されています。ですが、フォントの太さについての情報がありませんね。その記述を探して、CSSのファイルを上の方に遡ると、こんな記述がありました。


h1,h2,h3,h4,h5,h6 {
clear: both;
font-weight: 700;
}

見出しについて、各見出しレベルまとめて設定があります。回り込みを解除することと、フォントの太さについてです。文字の色については、ここにも書かれていませんが、さらに記述を遡ると、この文書全体を表す<body>タグについての指定で書かれています。


body {
color: #333;
font-family: "Noto Serif", serif;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
}

実際には、下記のような順でスタイルが記述されています。


body {
color: #333;
font-family: "Noto Serif", serif;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
}


h1,h2,h3,h4,h5,h6 {
clear: both;
font-weight: 700;
}


h3 {
font-size: 27px;
font-size: 2.7rem;
line-height: 1.1852;
margin-top: 2.3704em;
margin-bottom: 1.1852em;
}

<body>要素では文字の色、フォントの種類(ファミリー)の次に、フォントサイズや行の高さについての指定があります。文字色やフォントの種類についてはこのbodyに対して書かれた設定が反映されていますが、フォントサイズや行の高さについては、最後のh3について書かれた設定が反映されています。これがCSSの特徴と言えるカスケーディングの仕組みです。より詳細な指定で記載してあったり、元のものよりも後に記述することで、設定を上書きしていける一方で、特に指定がなければ親要素・先祖要素に遡って書かれているスタイルの設定が反映されます。

なので、最初の方に基本的な設定を書き、共通しているものはその設定を使い、特別な設定が必要なものを後回しに書いたり、詳細度をあげて記述することで、部分的に上書きしながら、全体のスタイルを書き上げていく、ということをしています。
つまり、レイアウトの中から共通項を見つけ出す作業をし、最初にまとめて書いてしまうということをやっています。なので、パターンを見出したり、共通できるものはまとめておきたい、というのがコーダーの頭の中には常にあるわけです。

カスケーディングの良さと難しさ

共通ものをベースにして、個別の設定をそのあとに書いていく、という基本の構造があり、効率よく書いていくというものの、ひとつのサイトに利用するCSSが3000行以上になることも珍しくありません。それらの構成を把握しながら、順序立てて書いていても、途中でスタイルが変更になったり、追加のレイアウトが増えて行ったり、などが繰り返されると、共通の部分がどこで、そのあとのどこでどう上書きされているかの関係性を見失ってしまう場合もあります。複数人で開発している場合には、ルールが必要にもなるでしょう。

全部それぞれ別々に書けばいいのでは?

身もふたもないですが、そういう風に考えることもできます。共通の部分など考えず、ひとつひとつ全て別々に書けば、思った部分だけを修正できるのではないか?しかし実際そういう風に書いたとするとCSSファイルはとても量の多いものになり、レイアウトに何か共通の修正が入った場合は、それぞれに直す必要もあり、手間がかかります。

これを避けるために、コーダーは共通部分はまとめたいと強く願うのです。

こういうのほんとありえない、、、になるわけですね。

Illustrator で文字のCSSを見てみる

CSSプロパティというウインドウパネルを出して、テキストを選択すると、そのテキストのCSSをみることができます。これらの積み重ねで、Webサイトはその形を成しています。

まとめ

CSSについてもっと詳しく知りたい方、書けるようになりたい方は、そのための教本を探していただくことにして、ここでは詳しく書きません(書ききれません)。以前、HTMLとCSSをちょっと書いてみる連載を書いたので、もっすごい基本的なマークアップやCSSの話をしているのでそちらをご覧ください。

次回からはもっと具体的な、デザインを作る時の考え方について書きます。

[ssba]

WPサイトデザインのコツ(コーダーの頭の中編)

Webサイトを作る時のデザイナの役割について前回書いてみました。今回は、デザインを受け取って実際に起こす作業をしているコーダーについて書きます。DTPもあとの作業である印刷の工程に知識のあることが作るものの質を変えるように、Webデザインも、デザイナのあとの工程にあるコーディングやそれを担う人が何を考えているか知ることで、デザインが変わると思っています。

デザインそれ自体も大事ですが、デザインカンプを受け取り、デザイナの思惑を読み取って、Webサイトとしての最終的な形を作る「コーダー」が何を考えて作業をしているのか、ちょっとのぞいてみたいと思います。

つまりは、私の頭の中か・・・・・。遊ぶことしかないようですけど。悪って何?

デザイナの意図を読み取ってデータにする

コーダーがデザインカンプを受け取って何をしているかというと、写真にもあるように、デザインデータから、CSSを書くためのあらゆる数値や情報を読み取ります。私はそれをデザインカンプをプリントしたものに、とにかく書き込んでおきます。あとから見返すことも結構多いので。WebサイトにするにはHTMLとCSSとでデザイン要素をデータに還元して、ブラウザが解釈して表示できるものに変換しているのです。また、画像データやアイコンなどのデータをデザインカンプから書き出す作業もします。

自動化できないの?

それができたらコーダーの仕事がなくなってしまう・・・・の、ですが、部分的に自動化することはできますし、試みられてもいます。Illustratorでは文字周りのCSSを書き出せるようになっています。それらを活用すると、コーダーの負担が減るかもしれないですね。

効率的にCSSを書きたい!コーダーの思い

Webサイトを仕上げていくとき、コーダーの頭の中には、こんな考えがあります。

  • CSSは後々でも管理しやすいように、わかりやすく簡潔に書くべき(なぜならWebサイトは繰り返し改善する=あとで修正の必要があるから)
  • HTMLに余計な要素を書くべきではない(マークアップにはルールがあり、正しく簡潔に書くことが求められている)
  • なるべく共通のパターンで整えたい、ルール化したい(そうしとかないとあとで分からなくなる)(毎回別々のレイアウトパターンのものを作るとかは手間である)

などです。
そんなコーダーをイラっとさせるのが、以下のようなこと。

こういうことがあると「デザイナーの気まぐれか?」「レイアウトはその時の気分かよ」「余白の取り方に一貫性とかルールとかないわけ?」などと、頭を抱えてしまうことになります。それでも、理由があれば、いいのです。「ここはこれまでの流れとトーンを変えて目立たせる必要があるので、フォントやレイアウトに差をもたせます」など、など。あればね。もしくは、本当に作るときに間違えてずれてしまった、とかならば、仕方ないのですが、問題は、読み取る方には「意図がある」のか「うっかり」なのかはっきりわからないことです。

話し合えばいい話。

デザインカンプだけから意図を探ろうとするのがまず、無理筋です。デザイナは、意志を持ってそのレイアウトを決めているなら、コーダーに向かって「見出しはこういうスタイル、空白は基本Xピクセルで、例外はどこのページのどの部分、本文サイズはどれぐらいで、行間はゆったりさせたいのでフォントサイズのX倍とっています」など、意図を伝えればいい。もしくはコーダーから疑問点を確認すればいい。ただし、社内ならともかく、デザインとコーディングを全く別の組織の人間が受け持つことも少なくないので、それらのコミュニケーションに手間がかかることもあって敬遠されるのかもしれません。
また、デザイナ側に経験やCSSなどの知識が乏しいと、何をどう伝えていいのかわからないこともあると思います。けれど、それを上手にするためには、まず一言伝えてみること以外に、上手くなる方法もないと思っています。

まとめ

デザインの後にあるコーディングのことに少し興味を持ってもらえたら何よりです。もしくは、効率だのパターン化だの、つまらん話だ、と思われましたかね?もちろん、デザインに素晴らしい意図が読み取れ、それがWebサイトを構成することに欠かせず、その効果を遺憾なく発揮してWebサイトの目的を達成するだろう、と信じられる場合には、こちらもやる気が出ますけど。なんとなくWFから指定された要素を組み込み、なんとなくこんなもんかで形にして、自分にだけわかるルールで整えて、それっぽくなったからOK?クライアントが気に入ればOK?で作ったものは、すぐわかります。コーダーだけじゃなくて、ユーザーも。
デザインデータをもとにせっせとそれを実現するのがコーダーの仕事ですけど、予算には上限が存在し、使える時間も限られている。しかも、一度作ってしまえば終わりではなく、何度も修正繰り返していく前提なのです。どんな細かい無茶振りな指定にも答えます!というわけにはいきませんからね。

わがままデザインにならないようにするには、何をポイントに考えればいいのか、このあとの回で書いていきたいと思います。

[ssba]

メイリオで、文字の下にある「空間」はなんだろう?

フォントファミリー「メイリオ」で文字の下になんだか空間があるように見える問題。

これはメイリオで書いた文字

これは、sans-serif指定をした時(OSによってフォントは違うと思われ)

混ぜてみましょうかメイリオの文字を、英文だとMeiryo Meiryo(sans-serif)ですけれども。

これはメイリオで書いた文字

これは、sans-serif指定をした時(OSによってフォントは違うと思われ)

[ssba]

【第14回】ディレクトリを超えてリンクをしてみる2

始めた時と間があきまくっていて、自分が何をしたかったのか多少どころか全く忘れてしまった管理人です。

前回最後の質問の答えから行きます。こんな質問で締めていました。リンク

正解はこうです。

<a href="../201602/20160229.html">←前の日記:ファイルパスの話</a>

いかがでしょうか?
これで、少なくとも日記をHTMLで書いてみる、ということは出来るようになったと思います!
ウェブサイトを作っていくには、もちろん覚えなければいけないことはまだまだあるのですが、この14回で書いたことは、その基本になると思っています。
また、何よりこれで、HTMLが(ちょっとは)書ける!と思っていただければ、何よりであります。

このシリーズは一旦ここで終わりにさせていただきます(また思いつけば書くかもしれませんが。。。)一覧はここからご覧いただけます。
https://learning.ccc-labo.net/category/html_web/

お付き合い、ありがとうございました。m(_ _)m

[ssba]

結構語れるものです

IMG_4674IMG_4778

恒例にしようと目論んでいる差し入れの飲み物とおやつですが、毎度道の駅やお土産が集まるようなところに買いに行っております。
県外に持って行きたくなるもの、お土産にしたいものが集まるような場所になにがどう置いてあるのかとか、実際に自分の目で見ておくべしと思う一環でもあります。

地元でなにを売り出そうとしているのか。自分はそれにどう関われるのか。自分の関わっていないものや気に食わないものにやいやい言うのはどうでもできるわけで、どう使えるか捉えるか考えるほうが前向きかなと。

モルト麦茶はその前の魚津麦茶に比べてちょっぴり甘さのある感じ。これはこれで美味しかった。

面白かったのは水。
売り場には黒部関連のミネラルウォーターだけで4、5種類並んでいた。ラベルはそれぞれ。のみたいもの買いたいものがどれかを話したり、成分表示に書かれていることをあれこれ言ったり。
勉強会の数日後、あるセミナーでペットボトルの水が用意されていたんですが、その成分表示には「ボトルドウォーター」とあった。調べてみると天然水はナチュラルウォーター、水道水などをボトルに詰めただけのものはボトルドウォーターという表記になるそうだ。へぇ。

http://fpch.net/water-health/genryousui.html

http://www.weblio.jp/content/%E3%83%9C%E3%83%88%E3%83%AB%E3%83%89%E3%82%A6%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%BC

水ひとつでけっこう語れるものですね。

[ssba]