「サンプルあり」に関する記事一覧

公開しているソースでサンプル表示があるもの。
2013.05.03
css

CSSでポラロイド写真みたいなエフェクト

CSSだけでできる面白いエフェクトです。 ボーダーをうまく使ってフォトショップのようなポラロイド写真風の枠を作成する方法です。 borderのサイズを変えるひと工夫で簡単にできてしまうのが ...
続きを読む
2013.04.21
css

CSSだけで背景を画面全体にする方法

フルスクリーンで画像を背景として配置する方法です。 backgroundで背景全体が写真になるだけでオシャレなサイトになりますよね。 いろいろ方法はあるようですが、2つ紹介します。 CS ...
続きを読む
2013.04.14
css

CSS3でできる色々なエフェクトの影 2

こちらのつづきです。 CSS3でフォトショップのエフェクトみたいな影をつける方法のソースの紹介です。 以下に5~8までのエフェクトのソースを紹介します。( 1~4はこちら ) ...
続きを読む
2013.04.14
css

CSS3でできる色々なエフェクトの影

CSS3でフォトショップのエフェクトみたいな影をつけることができます。 デフォルトの影でも十分デザインを引き立てますが、CSS3のbox-shadowでは他にも色々とできます。 色々なボックス ...
続きを読む
2013.03.29
javascript

マウスオーバーで吹き出しを出す jQuery プラグインなし

メニューやサムネイルなどをマウスオーバーしたときに吹き出しを出す方法です。 Attention!! この記事はソースを大幅に改良してこちらへ書き直しました。 以前書いたクリックしてタ ...
続きを読む
2013.03.16
css

CSSで三角形を作る方法

こちら(CSSだけでリボン・アニメーション・メニュー)で書いたようにCSSで三角形を作る方法は、使い方次第でデザインの幅が広がりますね。 一体どういった仕組みなのか説明します。 HTM ...
続きを読む
2013.03.15
css

CSSだけでアニメーション リボン メニュー

CSS3のtransitonsとCSS2の疑似クラスを使って作るリボンの形をしたアニメーションのメニューです。 Attention!! 対応ブラウザについて: IE8,IE9はCSS3のt ...
続きを読む
2013.03.07
javascript

マウスオーバーでタブの表示切り替え jQuery プラグインなし

タブみたいなメニューで、マウスオーバーすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。 Attention!! この記事はソースを大幅に改良してこちらへ書き直しました。 ...
続きを読む
2013.01.19
javascript

タブで表示切り替え jQuery プラグインなし

タブみたいなメニューで、クリックすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。 Attention!! 追記(2013年7月20日): この記事のソースの改良版をこちらに ...
続きを読む
2012.11.18
css

メニューのサンプル

ウェブ制作において必ず作るメニューやナビゲーションなどのグローバルメニュー。 Memo: グロバールメニューとは、ウェブサイト上でどのページにも共通で表示されるメニューのことです。 スタ ...
続きを読む
2012.10.15
php

メールフォーム

PHPを使った簡単なメールフォームを作ってみました。 せっかくなのでソースを紹介します。 今回はmailform01.htmlとcomplete01.phpという名前 ...
続きを読む
2012.10.07
css

Webフォントで好きなフォントをブラウザに表示させる

CSS3のWebフォントを使う方法です。 好きなフォントをブラウザに文字として表示させるので、その都度画像として作る必要もないし便利ですね。 そして何よりSEO対策としても良いです。 ...
続きを読む
2012.09.29
css

ホバー時に画像が一瞬消える

マウスオーバーした際に配置した画像をCSSで変えることができます。 a:hover という疑似クラスを使って変えるのですが、ブラウザで読み込んだ直後にマウスオーバーした際に、ホバーで設定し ...
続きを読む
おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP