画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。 MockupSlideshow

Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

久しぶりに仕事で Web 側の view を作っていて web のフロントエンドの技術からだいぶ遅れてしまっていたことを実感したので、キャッチアップするために以下の本を読みました。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 作者: 谷拓樹出版社/メーカー: インプレス発売日: 2014/07/24メディア: 単行本（ソフトカバー）この商品を含むブログ (3件) を見る 例によって PDF が欲しかったので達人出版会で買いましたが、ちょうどポチった翌日から kindle 版が半額以下になるという悲しい現実。(いや、でもどうせ PDF が欲しかったのできっとどちらにせよ達人出版会で買ったと思いますが...。) 以下感想です。 どんな本？ CSS の "設計" について書かれた本です。 フロントエンドの "設計" というと JavaSc

divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。

ページのデザインだけでなく、使用されているエフェクトも面白いものが揃っているレスポンシブ対応のHTML5/CSS3のテンプレートを紹介します。 単に使うだけでなく、HTML5/CSS3の勉強、デザインの勉強にもいいですね。 “HALCYON DAYS” ONE PAGE WEBSITE TEMPLATE デモページ 大きな写真画像を使った背景とそれを使ったパララックスエフェクトが美しいポートフォリオやランディングページ用のテンプレート。 個人・商用利用無料。

知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■　XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）

TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ

Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）

2014.10.15 HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較 最近MBA 買ったんですけど、ずっとドザーだったので全然慣れないshibuso です。トラックパッド使うと指が痛くなって泣ける…。 さて、今回は無料で公開されているdatetimepicker についてまとめたいと思います。datetimepicker と聞いてピンと来ない人は、フォームをクリックするとカレンダーが表示されて、そこで日時を選ぶ機能と思ってもらえば大体合ってます。少し前までプルダウンで年月日を選ぶのが普通だったのに、色々と便利になってきています。 とはいえdatetimepicker はまだあまり選択肢が無いように感じます。私の検索の仕方が悪いのかもしれませんが、日付のみを選択できるdatepicker の方が多いかと。そんな中、今回はdatetime

こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。 英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色

投稿日：2014年8月8日　　　ソフトウェア：- このチュートリアルではプロアマ問わず使える10個の最新無料CSSツールを紹介します。 Step1 ： はじめに Step2 ： CSSの主なメリット Step3 ： 無料のCSSツール10個 Step4 ： 関連記事 CSSはずいぶん前からウェブデザインに必要不可欠な存在になっています。 CSSがここ最近すっかりウェブの標準技術になっているということは、どのウェブデザイナーも認めることでしょう。 ウェブデザイナーでない人なら、CSSとは何か、なぜそんなに利用されているのか、と疑問に思うかもしれません。 ウィキペディアによると、CSSはマークアップ言語（HTMLなど）で書かれた文書の表示を指定するために使うスタイルシート言語です。 このウェブデザインツールにより、時間やお金をかけることなく、サイトへの訪問者の体験を向上させることができるように

今この状態だと思います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>レイアウトに関して</title> <style> body{width:980px;height:auto;} div{} #left,#right{float:left;position:relative;} #left{width:710px;height:500px;background:#ffc;} #right{width:270px;height:300px;background:#fcc;} #making{width:980px;height:100px;background:#ccf;clear:both;margin-top:50px;} </style> <body> <div id="left"></

作成：2014/08/4 更新：2014/11/01 Web制作 > 今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ドメイン＋サーバ １．独自ドメインでHPとgmail を運用させるまで ２．コマンド ３．IP制限 CSS ４．画像の回り込み ５．marginの相殺 ６．ショートハンド ７．ビューポート設定 ８．IEでCSS3を再現 IE対策 ９．filter属性 １０．条件付きコメント WordPress 効率化 １１．keywordsとdescriptionを自動出力させる １２．記事中の最初の画像を自動検出して、表示 １３．タイトルの文字数を自動でカットして、語尾に「…」をつける １４．管理画面 ドメイ

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント