宣言ブロックのCSS設計｜Web Design KOJIKA17

2017/07/18 682 users CSS設計 セレクタ コンポーネント CSS セレクタ名

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の... 続きを読む

IDを使わないCSSの設計｜Web Design KOJIKA17

2013/09/10 524 users CSS header 設計 clearfix Logo

CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <... 続きを読む

floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17

2013/06/20 898 users clearfix float floatプロパティ CSS

2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行うには、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが... 続きを読む

文章作成やメモ書きにも便利、Markdown記法｜Web Design KOJIKA17

2013/01/23 648 users markdown記法 メモ書き 文章作成 README CMS

HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するた... 続きを読む

CSSのmarginが難しい : Web Design KOJIKA17

2012/08/27 1446 users margin CSS

toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や positi... 続きを読む

今さらだけど、トーンカーブって凄いよね？ : Web Design KOJIKA17

2012/03/16 1752 users トーンカーブ GIMP Fireworks 明度 色調

画像の色調補正する時、何を使いますか？ 私の場合、基本的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPA... 続きを読む

CSSや画像の命名規則について : Web Design KOJIKA17

2012/02/09 721 users CSS 命名規則 上書き コーディング プロパティ

コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ペ... 続きを読む

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 : Web Design KOJIKA17

2011/08/28 870 users パフォーマンス Webデザイナー パフォ 方法 コンバージョン

Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。 Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォ... 続きを読む

デザインの基礎、黄金比から大和比、第2黄金比まで : Web Design KOJIKA17

2011/08/16 1004 users 黄金比 古代ギリシア 基礎 CSS 伝承

よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値　1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから... 続きを読む

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 : Web Design KOJIKA17

2011/06/04 1224 users クロスブラウザ Twitter Opera コーディング 解釈

Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことです... 続きを読む

Webデザイナーが知っておく、DTPの基礎知識 : Web Design KOJIKA17

2011/05/08 664 users DTP Webデザイナー Cyan 基礎知識 Magenta

Webデザイナーであっても、名刺やDMなど作る場合もあると思うので、入稿することを前提として、印刷に関する基礎をまとめてみました。 CMYK RGB(加法混色)で表現される色を、塗料や染料では全ての色を再現できないため、印刷する場合はCMYK(減法混色)ににする必要があります。 CMYKは、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、キー・プレート（Key Plate... 続きを読む

float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17

2011/04/05 953 users clearfix clear float CSS 理論

現在floatを解除する方法として、"clearfix"がよく使用されていると思います。 しかしclearfixが初めて公開されたのが、2004年5月8日。 それ以来、7年間ほとんど形を変えずにclearfixが使用されてきました。 ブラウザもCSS3を多く対応してきている中で、「それで良いのか？」という疑問を新しい形を模索してみました。CSSの理論とかよくわからんので、ソースだけ見る。clear... 続きを読む

Webデザイナーが覚えておく、代表的なライセンスまとめ : Web Design KOJIKA17

2011/01/14 1118 users Webデザイナー

非常に緩いライセンスです。 2次制作物に著作権表示を残すことが条件ですが、この条件は広告的な意味合いが強く、著作権表示を外すと修正BSDライセンス(New BSD License)、または三条項BSDライセンス (3-clause BSD license)と呼ばれるライセンスになります。 BSDライセンスをベースに作成されたBSDスタイルのライセンスも多く存在します。 例として、Apache So... 続きを読む

Webデザイナー必読？！ 著作権について知っておくべき10のこと : Web Design KOJIKA17

2011/01/12 1828 users 著作権 多岐 ディレクター Webデザイナー 文章

Webデザイナー必読？！ 著作権について知っておくべき10のこと January 12 2011 この記事は約9分で読めます。 Webデザインに限らず、制作したものに発生する「著作権」 知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクター... 続きを読む