タグ「Web Design KOJIKA17」

タグ Web Design KOJIKA17

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 47件)

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

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

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

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

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

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

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... 続きを読む

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デザイナーが覚えておく、代表的なライセンスまとめ : Web Design KOJIKA17

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

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

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

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

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

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... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 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... 続きを読む

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

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

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

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> <... 続きを読む

その画像形式でいいですか？ : Web Design KOJIKA17

2011/07/26 493 users 画像形式 PNG jpg gif 特性

デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？画像形式についてまとめてみます。画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。ブロック単位で圧縮変換を行うため、圧縮率を上げる... 続きを読む

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17

2013/03/14 478 users gzip ビルドツール minify 備忘録 CSS

Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。さらにメタ言語などを使用すると、複数のツールを使用しなければならないケースも出てきます。それらの作業をまとめて自動化してしまう、Grunt.jsが面白かったので備忘録もかねて紹介します。 Grunt.jsとは？ Grunt.jsは、サーバーサ... 続きを読む

コーディングとSEOの概念が変わるかもしれない、Microdataについての概要｜Web Design KOJIKA17

2012/11/14 478 users Microdata コーディング Microsoft SEO

6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。以前にも「MicrodataとMicroformatsの違いについ... 続きを読む

コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 : Web Design KOJIKA17

2011/06/05 478 users Microdata コーディング Microsoft SEO

idとclassを使わないで、HTML5とCSS3でコーディングしてみた。 : Web Design KOJIKA17

2011/05/01 451 users idとclass id, class JavaScript

Webサイトをコーディングする時に、idとclassを考えるのが面倒臭くなったので、idとclassを使わないでコーディングしてみました。シンプルなサイトなら簡単につまらないので、idとclassを使っても難しそうなデザインにしています。今回もJavaScriptは一切、使用していません。完成したサイト id, classなしで組んだサイトを見る。サイトでやってみたHTML5 HTML5で... 続きを読む

CSSで2カラムを作ってみる｜Web Design KOJIKA17

2014/07/03 362 users CSS 2カラム overflow clearfix 灰色

CSSで2カラムといっても、その作成方法は様々です。多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する基本的な方法です。子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。これらの問題を解決するには、clearfix か overflowを利用する必要が... 続きを読む

Zen-Coding、0.7のすすめ : Web Design KOJIKA17

2012/06/30 314 users Zen-Coding Haml Abbreviation

Zen-Coding、0.7のすすめ Headlines Zen-Codingとは公式サポートサードパーティー非公式Zen-Codingの使い方Expand Abbreviation (略語の展開)フィルターコメントアウト (c)エンコード (e)Haml (haml)ショートコードHTMLCSSWrap with Abbreviation (略称の包括処理)Next/Previous Edit ... 続きを読む

CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17

2012/10/18 288 users Emmet Zen-Coding 真価プロパティ CSS

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの... 続きを読む

Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17

2012/09/19 208 users Emmet Zen-Coding htm GitHub IDE

Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17 Web Design KOJIKA17 Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTM... 続きを読む

ブラウザデフォルトCSSのチートシートを作ってみた。(力尽きた) : Web Design KOJIKA17

2011/03/09 174 users チートシート normal ブラウザ font-weight

ブラウザデフォルトCSSのチートシートを作ってみた。(力尽きた)March 9 2011 この記事は約2分で読めます。CSSリセットを改変している時に、「CSSリセットは本当に必要か？」ということを疑問に思うようになってきました。例を挙げるとh1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}h1.title {font-weight:b... 続きを読む

イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。｜Web Design KOJIKA17

2013/08/07 166 users アピアランスイラレ suzuki published CSS

Web Design KOJIKA17 Home > CSS イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 Published: 2013-08-07 数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブ... 続きを読む

(1 - 25 / 47件)

次の25件 »