タグ「Web Design KOJIKA17」

タグ Web Design KOJIKA17

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

(1 - 25 / 34件)

レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17

2018/12/28 113 users コーディング Normalize.css CSS 差異案件

今年、携わった案件のほとんどがレスポンシブwebデザインでした。今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む

レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17

2018/12/28 113 users コーディング Normalize.css CSS 差異案件

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

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

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

リモートWeb開発者ツール「Vorlon.JS」｜Web Design KOJIKA17

2015/11/18 104 users Vorlon.JS Dragonfly Firebug

Web開発者ツールといえば、ブラウザに付属されている開発ツールやFirebug、Dragonflyなどを思い浮かべる方が多いでしょう。これらの開発ツールはブラウザに大きく依存しています。今回紹介するのは、プラットフォームに依存しないリモートWeb開発者ツール「Vorlon.JS」です。 Vorlon.JSについて Vorlon.JSは、Microsoftが開発しているオープンソースプロジェクトで... 続きを読む

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

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

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

Autoprefixerによる、CSS3の管理｜Web Design KOJIKA17

2014/01/08 165 users Autoprefixer Tools プレフィックスツール

KOJIKA17 Home - About - RSS Autoprefixerによる、CSS3の管理 Published: 2014-01-08 Categories: tools, css3, CSS3を使用する時に、ベンダープレフィックスを付けていますか？自分でプレフィックスをつけたり、Sassなどの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> <... 続きを読む

イラレのアピアランスで作れたアイコンが凄かったので、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つのオブ... 続きを読む

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制作で面倒な作業を自動化するビルドツール、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は、サーバーサ... 続きを読む

CSSの変態向き - id, classを顔文字でコーディングする方法｜Web Design KOJIKA17

2013/03/05 130 users CSS DOCTYPE html HTML idとclass

HTMLのidとclassに顔文字記述しても、CSSではスタイルが適用されません。ただCSSをごにょごにょするだけで、id, classを顔文字、日本語でもコーディングすることができます。誰が得をするのか全くわからないけど、紹介します。 HTMLのid, classを顔文字にする HTMLのid, classを顔文字、または日本語で書きます。下準備はこれでおｋ。 <!DOCTYPE html... 続きを読む

ベンダープレフィックスの順序｜Web Design KOJIKA17

2013/02/22 105 users ベンダープレフィックス順序プロパティ実装先行

CSS3を扱う上でベンダープレフィックスの話題は外せません。そのベンダープレフィックスの順序について書いてみます。ベンダープレフィックスとはベンダープレフィックス(vendor prefix)は、ブラウザが独自の拡張機能を実装、勧告候補前の仕様を先行実装する場合に、将来的に仕様が変更されるリスクに備えて、プロパティや値につけられる識別子のことです。その識別子は、ベンダー識別子(vendo... 続きを読む

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

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

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

コーディングと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の違いについ... 続きを読む

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

2012/09/05 152 users デブリセットCSS 間隔 HTML 留意点

デフォルトスタイルシートから考える、リセットCSSの留意点 : Web Design KOJIKA17 Web Design KOJIKA17 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。しかしWebサイトを制作する上では、このデフ... 続きを読む

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

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

WordPress vs MovableType という疑問 : Web Design KOJIKA17

2012/05/31 161 users 疑問

Web Design KOJIKA17 Archives MovableType WordPress vs MovableType という疑問 WordPress vs MovableType という疑問 2012-05-31 4月16日と1ヶ月以上前の記事ですが、上位100ブログの半数がWordPress～「TypePadとMovable Typeは消滅」予測もという記事がありました。 Mova... 続きを読む

今さらだけど、トーンカーブって凄いよね？ : 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名や画像名などの命名規則が挙げられます。特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。カテゴリに分類して、つなげる。ペ... 続きを読む

HTML5の新要素「data要素」に繋がる Microdataのプロパティについて : Web Design KOJIKA17

2011/10/31 112 users Microdata プロパティ time要素廃止仕様

time要素の廃止、そしてdata要素の登場により、Microdataを扱う機会が増えてくると予想されます。またHTML5 の Microdata が主にGoogleなどで取り入れられているケースが出てきているので、 Microdataで利用できるプロパティを紹介致します。 Microdata とは HTML5の独立した仕様です。 HTML文章に、コンピュータが可読できるデータにすることができ、... 続きを読む

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で黄金比を見る伝承では古代ギリシアから... 続きを読む

(1 - 25 / 34件)

次の25件 »