Sassを@importから@useに置き換えるための手引き | Web Design KOJIKA17

2020/05/25 22 users Sass import forward use 手引き

Sassを@importから@useに置き換えるための手引き 2020-05-26 Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から... 続きを読む

Container Queriesという手法 / CSS Advent Calendar 2019 | Web Design KOJIKA17

2019/12/23 9 users Container Queries レイアウト 手法

Container Queriesという手法 / CSS Advent Calendar 2019 2019-12-23 Container Queriesを知っていますか？ Media Queriesに依存せず、コンテンツにあわせてレイアウトを変化させるを手法です。 Container Queriesとは レスポンシブwebデザインを行う時、みなさんはMedia Queriesを使用していると思います。 ブレークポ... 続きを読む

レスポンシブ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 差異 案件

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

Microdataなどの構造化データ マークアップについて | Web Design KOJIKA17

2014/05/22 81 users Microdata RDF microformats 露出

構造化データ　マークアップは、MicrodataやRDFなどを利用して、schema.orgやMicroformatsなどのスキーマを設定する手法です。 構造化データ マークアップを行うことで、Googleのリッチスニペットの露出を高めるなどの効果が挙げられます。 Googleが提供しているツールを利用した構造化データ　マークアップの導入方法を紹介します。 今回の目標 Microdataなどの具体... 続きを読む

ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。｜Web Design KOJIKA17

2014/02/05 93 users published CSS 縦書き about ブラウザ

KOJIKA17 Home - About - RSS ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。 Published: 2014-02-05 Categories: css, 最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheet... 続きを読む

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 は、文書を記述するた... 続きを読む

Sass と Stylus の比較 CSS Preprocessor Advent Calendar 2012｜Web Design KOJIKA17

2012/12/19 36 users Stylus Sass less CSS メタ言語

CSS Preprocessor Advent Calendar 2012　19日目の記事です。 CSS Preprocessorは、CSSに拡張機能を持たせるメタ言語と呼ばれるものです。 CSS Preprocessorでよく耳にするものに、SassやLessがあります。 私も以前からSassを使用していましたが、最近Stylusを使い始めたので、SassとStylusの比較を行ってみます。 拡... 続きを読む

CSS3で、ボールが反射するゲームを作ったよ。 CSS Programming Advent Calendar 2012｜Web Design KOJIKA17

2012/12/10 25 users ボール CSS3 CSS ゲーム 題材

Web Design KOJIKA17 CSS3 CSS3で、ボールが反射するゲームを作ったよ。 CSS Programming Advent Calendar 2012 JavaScriptを使用せずに、HTMLとCSSを駆使して、ゲームやスライドショーなどを作る、CSS Programming Advent Calendar 2012に参加してみることにしました。 私が題材にしたのは、昔よくF... 続きを読む

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

IE8から始めるテーブルレイアウト と IE10からのFlexible Box｜Web Design KOJIKA17

2012/11/08 94 users Flexible Box テーブルレイアウト IE8 IE1

テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display: table; を使用したテーブルレイアウトの話です。 display: table; はCSS2.0からある仕様です。 要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table;... 続きを読む

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