Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装です。 アイテム時を例に紹介します。 HTML 各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。 <ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>見出し</h3> <p>パラグラフ <a href="http://">リンク</a></p> </d
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
CSSを早く書くことが出来るLESSに入門しました！ | tagamidaiki.com
みなさんはCSSの拡張メタ言語であるLESSを知っていますか？ 拡張メタ言語というのは、普通の言語とは違って、ある言語をより簡単に書くために作られた言語です。 例えば最近だと、CoffeeScriptとかTypeScriptとかが話題になっていますね。 これらは全てJavaScriptの拡張メタ言語であり、CoffeeScriptやTypeScriptで書いたファイルをコンパイルするとJavaScriptを生成することが出来ます。 今回入門してみたLESSはCSSの拡張メタ言語です。つまりLESSで書いたファイルをコンパイルすると、CSSが生成されるわけですね。 それでは早速入門してみましょう！！ LESSのメリット・デメリット ▶メリット ・導入が簡単 実際僕も軽く書いてみましたがほとんどLESSを意識することがないです。 CSSを書いていて、変数があればいいなぁとかネスト出来ればいいな
CSS3単体で動く垂直アコーディオンを:targetで実装チュートリアル:phpspot開発日誌
How to Create a CSS3-Only Vertical Accordion Using the :target Selector SitePoint CSS3単体で動く垂直アコーディオンを:targetで実装チュートリアル。 次のようなアコーディオンをCSS3単体で動かすためのチュートリアルが公開されています。 なんと、ブラウザの戻るボタンで戻ってもページ移動できちゃうというものになっています。 ちょっと勉強しないといつの間にこんなことになってるの、と絶叫してしまいますね。 CSS3さん、まだまだ本気出してないですね。 関連エントリ CSS3で画像レスなソーシャルサイト連携ボタンサンプル集「Zocial」 CSS3で画像を分割スライドする超クールなパネル実装例 CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」
CSS3でクールな角丸テーブルを作る例:phpspot開発日誌
Practical CSS3 tables with rounded corners - RedTeamDesign CSS3でクールな角丸テーブルを作る例。 ヘッダーにグラデーションをかけつつ角丸なテーブルを作る例です。カーソルを乗せるとハイライトする機能もtransitionによって組み込んであって良い感じです。 HTMLとしては普通のテーブルなのでCSSでここまでカスタマイズできるというのはいいですね 背景をzebraにするデザインも紹介されています。素材として覚えておくと素早く綺麗なテーブルを構築できそうですね 関連エントリ CSS3で実装された画像スライドショーサンプル CSS3のアニメーションサンプル４７ ピュアCSS3のコンテンツスライダー ピュアCSS3でタイピングアニメーションするデモ
コンテンツをアニメーションさせつつ切り替えるタブを実装するCSS3チュートリアル:phpspot開発日誌
Animated Content Tabs with CSS3 | Codrops コンテンツをアニメーションさせつつ切り替えるタブを実装するCSS3チュートリアル。 タブをクリックするとコンテンツをアニメーションしながら切り替えつつ、タブ自体も小気味よくアニメーションさせることができます CSS3だけでやっちゃうところがいいですね。 タブ部分のデザインも微妙にグラデーションがかかっており、良い感じです。 横バージョンのタブのサンプルもあります 関連エントリ タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 jQueryベースのタブUI１５種まとめ 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 & The Web Platform
垂直なタイムラインをデザインするHTML＋CSSチュートリアル:phpspot開発日誌
シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル:phpspot開発日誌