HTML&CSS

Sublime Text3でSassとCompassを使えるようにする

SassとCompassの導入がすでに行われており、Sublime Text3でscssファイルを保存すると自動でコンパイルするための方法です。 そうするとKoalaなどを使用する必用もなく手軽にSassが使えます。 S  >>続きを読む

FlexBoxの使い方(6)〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の0以上の整数を入れてください。 数値入力後に「CS  >>続きを読む

FlexBoxの使い方(5)〜flexプロパティについて

DogRoboの寝床は汚いアパートメントの部屋の一角にある。そこには3台のロボットが置かれている。少し前まではもう一台「Kuma5rou」ロボットが居た。 「Kuma5rou」はコンピュータを持たない前近代型ロボットだっ  >>続きを読む

FlexBoxの使い方(4)〜display:inline-flexについて

紆余曲折の上、華々しくデビューしたdisplay:flexは脚光をあびている。ところが、inline-flexときたらほとんど語られることがない。 なんということだろうか。これではinline-flexの立場がない。 D  >>続きを読む

FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え

順番を入れ替えるにはorderを使う。 「わしは、王(order)だ! 言うとおりに並びなさい」 こうやって覚えればよいのさ。。 グルグル、グルグル!DogRoboはブリキ製のおそまつな出来具合のため、正確にワンワンと発  >>続きを読む

FlexBoxの使い方(2)〜整列の方法とfloatレイアウトとの違い

DogRoboの住む世界は仮想空間なのだから、物理の法則も好きに作ればよいことになる。幸いW3Cなる機関が全国のロボットの住人に許可を得ながらそれらしい物理の法則を作ってくれる。利権がらみの論争も多くってね、正直すこし待  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて

DogRoboの毎日の仕事といえばブロック積みをすること。ブリキ製のロボットにとって単純作業はお手のものだ。けれども、困った案件もある。ブロックを横並びにすることは簡単ではなかった。そのためには、ブロックを浮遊状態にして  >>続きを読む

可変レイアウト(Fluid Layout)作成のポイント

DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7  >>続きを読む

ボーダーに画像を使う方法〜CSS3

画像が使えないボーダーなんてジャムを入れない紅茶のようなものだ。 ボーダーに画像を適用するには border-image-sourceプロパティで画像を読み込んで、border-image-sliceで幅を指定すればよい  >>続きを読む

マルチカラムレイアウト 段組の作成〜CSS3

一般的にWebで読みやすい行の長さは、約30文字から45文字前後くらいといわれています。具体的な文字数の根拠は不明ですが、あまり長すぎる行は読みにくい傾向になります。 *「ブログデザインを考える:1行の字数とWEB幅」に  >>続きを読む

Koalaの使い方〜Sass

KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。 ここではKoalaの使い方を学習します。 Koalaのインストール(Windo  >>続きを読む

SVG〜フィルターを使ってスライムのような効果

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。 応用するとモバイルのハンバーガーボタンの変わりにもなります。 元ネタはCSS-TRICKSのサイトです。 サンプル *このサンプルはSafari9.  >>続きを読む

SVGとアニメーション2〜pathを描くようなアニメーション

CSS3を使用したアニメーションの例です。 ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。 サンプル SVGコード ハー  >>続きを読む

SVGとアニメーション1〜pathに沿って移動するアニメーション

今回ははSVGのpathに沿ってDOM要素をアニメーションさせる方法です。 SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。(有料ですがフロントエンドの方にはお勧めのサイトです。) シン  >>続きを読む

SVG〜Illustratorで作成

SVGの基本的な描き方は「SVG入門」で書きましたが、四角や丸などを描くならまだしもちょっとしたイラストを描くだけでもコードで描写するのは現実的ではありません。 今回はIllustratorであらかじめイラストを作成して  >>続きを読む

SVG入門

SVGとは SVG(Scalable Vector Graphics)とはベクター形式で描画することができる画像形式です。一般的な画像はラスタ形式のもので拡大すると画像が劣化しますが、SVGはベクター形式ですから劣化しな  >>続きを読む

Webサイトの縦書き

2015年には主力ブラウザでは縦書きに対応してきています。縦書きの需要も高くなることが考えられます。まだまだ細かいところでは課題が多いですが、基本的な事はマスターしておきましょう。 横書きを縦書きに変更するCSS3プロパ  >>続きを読む

レスポンシブイメージについて

2015年ではレスポンシブサイトに対応させるために無駄にサイズの大きい画像を用意していました。 それぞれのデバイスの画面幅サイズで画像を切り分けられると都合がよくなります。そのような要望に対応した画像表示の仕組みがレスポ  >>続きを読む

display:flexの基本的な使い方〜脱フロートレイアウト

Flexboxを使うとfloatでの面倒なレイアウト作成から解放されます。概ねのブラウザも対応していますし、問題のIE8以下のバージョンも急速にその終焉を迎えました。Flexboxレイアウトを積極的に採用する時が来たよう  >>続きを読む

CSSでカラムの作成方法〜floatとdisplay:tableの活用

CSSを使ってカラムを作成する復習です。 自分なりにいろいろなカラムを作るパターンを作成しておくとよいです。 フロートを使った固定レイアウトのカラム 固定レイアウトのカラムはPC用のレイアウトでかつて多く使用されたパター  >>続きを読む

CompassをインストールするMac OS X El Capitan編 〜Sass(7)

CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。 Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡  >>続きを読む

Sassのミックスイン 〜Sass(6)

Sassのミックスインは関数的な働きをするもので、引数で指定した値を利用しながらスタイルを柔軟に定義できます。 ミックスインは「@mixin」で定義をして、「@include」で呼び出しをします。 ミックスインの書き方   >>続きを読む

Sassの演算と関数 〜Sass(5)

演算 Sassでは四則演算を行うことができます。それぞれ次の記号を使います。 加算 + 減算 - 乗算 * 除算 / 除算だけは計算式を丸括弧()で囲みます。fontプロパティで使用する記号がバッティングするための処置の  >>続きを読む

Sassの@import 〜Sass(4)

SassではCSSと同様に複数のscssファイルを@importを使ってインポートすることができます。 更に便利な機能としてパーシャルという機能があります。これは複数のscssファイルをインポートして、余計なCSSを作成  >>続きを読む

Sassの変数 〜Sass(3)

Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です ) 変数の宣言は$の後に変数名を書き  >>続きを読む

Sassのネスト 〜Sass(2)

子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が  >>続きを読む

Sassの導入 〜Sass(1)

Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。 機能を拡張してより効率的にCSSを書けるようにするものです。 具体的には、変数や関数をはじめ、演算、条件分岐  >>続きを読む

CSS3の新しい単位〜vhとvw

CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。 例えば次の例のように各セクションをブラウザいっぱいに広げること  >>続きを読む

スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編

スマートフォン用のドロワーメニューの簡単な例は前回紹介しましたが、少し複雑な動きに対応させるには多少問題があります。 今回は起こり得る問題点と解決方法について考えてみます。サンプルとして前回使用したドロワーメニューを使用  >>続きを読む

スマートフォン用開閉メニューの作成方法

スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉(ドロワーメニュー)の基本的な仕組みの解説です。 jQueryとCSS3を使用した作成方法です  >>続きを読む