タグ : CSS

シンプルなHTMLの雛形を公開します。ちょっとした動作確認にどうぞ。

フロントサイドの人はHTMLの雛形なんて当たり前のように持っていると思うのですが、エンジニアがCSSやJavaScriptの確認をしようとすると、HTMLを用意するところから始めるという人が多いと思います。

そんな人のため(自分のため)にコピペで動くHTMLテンプレートを公開していきます。
続きを読む

FlexBoxの基本的な使い方

css
ボタンなどのレイアウトを横並びにさせる方法で以前でしたらfloatの方がよく使われていたと思うのですが、最近ではfloatの代わりにflexboxを使っているところも大分増えてきましたよね。

レイアウトの幅を自在に変えたり、右寄せしたりと比較的floatよりも簡単に扱える印象もあります。ただ古いIEには対応していなかったりと多少の懸念材料はあるものの、将来的にはflexboxのほうが主流になるのではないかと思います。

今回はそんなflexboxの基本的な使い方をソースコードを使って紹介していきます。

続きを読む

Font Awesomeの導入方法を紹介します!

css

最近よくみかけるようになったFont Awesomeの導入方法を紹介します。

このページでは、Font Awesomeをダウンロードして導入する方法と、CDN上にあるFont Awesomeを使う方法の2種類について書いていきます。

続きを読む

Font AwesomeをCSS内に定義して使う方法

css

最近ではすっかりメジャーになったFont Awesomeを使っているサイトも増えたのではないでしょうか。

今回は、Font AwesomeをHTMLで直接指定して使う方法ではなく、CSS内でFont Awesomeを定義する方法を紹介します。

続きを読む

LESS入門!LESSの変数の使い方

less

CSSのコーディングが楽に作成できるLESSの変数の基本的な使い方を紹介します。
LESSにはSassと同様に単純な変数を持つ方法と、クラス自体を変数のように扱って拡張してクラスを作る方法があります。
今回はこの2つのやり方を今回は解説していきます。
続きを読む

LESS入門!LESSの使い方と導入方法を解説

less

LESSの開発スタイルは大きく3種類の方法があります。1つ目はnode.jsを使ってサーバサイドでビルドする方法。2つ目はless.jsを使ってブラウザでビルドする方法。3つ目はツールを使ってローカルでビルドする方法

今回は2つ目と3つ目をピックアップして解説していきます!

続きを読む

【CSSフレームワーク】FoundationでレスポンシブWebデザインを無効にする方法

css

レスポンシブWebデザインって最近の流行りだし、使い勝手もよくて個人的には非常に好きなのですが、業務系アプリだとレスポンシブWebはやめてほしいという声をクラインとから意外とよく聞きます。

スマホやタブレットを使わないことを前提とした業務系アプリでは、確かに画面サイズによってUIが変わるとなるとあまりよろしくないようにも思えます。

今回はそんな要望に応えるべく、FoundationのレスポンシブWebデザインを無効にする方法を紹介します。
続きを読む

【CSSフレームワーク】FoundationのGridの使い方で参考になるページを紹介

css

CSSフレームワークFoundationとBootStrapのような他CSSと比較した時の一番の強みは、Gridの多種多様な使い方ではないでしょうか。

わたしはFoundationのGridの魅力にはまって、簡単なツールを作る時はFoundationを使うようにしています。

ただFoundationのGridって色々な表現が出来てとても魅力的なのですが、どうしても複雑なGridを作ろうとすると思い通りにならなくてアレとなったことも多々あります。。

今回はそんなGridを作るうえで、とても役立つ参考ページを紹介します。
続きを読む