カテゴリ0の固定表示スペース

カテゴリ0の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

カテゴリ1の固定表示スペース

カテゴリ1の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

カテゴリ2の固定表示スペース

カテゴリ2の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

「Web学習 」カテゴリ記事一覧


CSS3 transition

CSS3について勉強中です。今回も備忘録として書いています。

今回は「transition」を勉強しました。

JavaScriptを使わずに動的な演出ができるので、活用できるのではないかと期待しています。

「マウスホバーで文字が変化します」

覚えるべきは下記4つのプロパティ

「transition-timing-function」については下記の6つの値を覚えておく。

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier

マウスホバーで変化させるのが典型的なので、リンクタグと合わせて活用すると良い感じになる。

samplefish.jpg

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

CSS3 border-radius box-shadow

備忘用に記事を書いておきます。

他人のWebサイトの制作をたのまれてしまい、HTML5とCSS3を再勉強中です。

今のWebサイトのデザインはCSS3の知識が必須です。私の知識はCSS2.1で止まっているのでいろいろ試行錯誤しながらデザインしている段階です。

CSS3の中でも「bordar-radius」と「box-shadow」については使いこなせて当然というぐらい、必須のようです。

samplefish.jpg

画像のボーダーを丸や楕円にし、影をつけるだけで印象が変わってきます。

ちなみにテキストに影をつけるtext-shadow」というものもあります。

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

レディファントム SEボタン

ふと、こんなものを作ってみました。

レディファントム SEボタン

LP_SE.png

マウスオーバーで音が鳴るしくみと、マウスクリックで音が鳴るしくみを合わせたWebページです。

音の素材とレイアウトはPCエンジンのゲーム「レディファントム」をパクオマージュしてます。

音の鳴るサイトは簡単に作れるのかと思っていたら、けっこう手間がかかるんですね。ブラウザによって複数の音源(ファイル形式)を用意するそうですが、面倒だったのでmp3形式しか用意していません。

HTML5でaudioタグが追加されましたが、JavaScriptも記述できないといけません。JavaScriptは分からないので、ソースコードはコピペです。

しばらくコード書いてなかったら、リンクメニューの書き方も忘れていたという体たらくでした。また1から勉強し直さないといけませんorz

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

CSS3 transform

ちょっと調べたことを備忘用に書き残します。

CSS3でtransformというプロパティがあります。対象を移動・回転・拡大・縮小等できます。

HTMLクイックリファレンス
CSS3リファレンス
transform
⇒http://www.htmq.com/css3/transform.shtml

このブログテンプレートのCSSに下記を付け足しました。※後日やめました

a img:hover {transform:scale(1.1)}

こうすると、画像リンクにマウスオーバーすると画像が1.1倍に拡大されます。

サンプル画像※変化ありません
Windows 10 を入手する_14o-00

FC2ブログの機能にある、サムネイル画像を利用して記事を書く場合、簡単で面白い効果になると思います。

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

Webクリエイター能力認定試験 エキスパート HTML5対応版

「Webクリエイター能力認定試験 エキスパート HTML5対応版」受験します。たぶん…

サーティファイ
Webクリエイター能力認定試験
⇒http://www.sikaku.gr.jp/web/wc/

XHTML版に合格しているので、資格証明の必要性に乏しいのですが、自分の学力維持のために受けてみます。というのも、基本的なタグはブログ書いていれば忘れにくいのですが、フォーム関連タグに関しては全く使わないのでガンガン忘れてしまいます。なのでフォーム関連タグのおさらいのつもりで勉強しておきます。

とりあえず、公式テキストと公式サンプル問題はやっておきました。

公式テキストは公式サンプル問題の解説書になっているので、問題パターンは一つしか対策できないのが残念です。

JavaScriptとかレスポンシブWebデザインは知識がなくても解けるので、出題レベルはXHTML版とそんなに変わりません。

CSSで重要なのが、外部のCSSを読み込むコード @import url(xxx.css); を知らないと、全てのレイアウトが台無しになるので、そこは確実に覚えておきましょう。

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

Webクリエイター能力認定試験エキスパート HTML5対応へ

更新
2015年01月06日(火)

本文を追記欄に移動

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ウェブデザイン技能検定2級 合格しました

更新
2015年01月06日(火)

本文を追記欄に移動

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ウェブデザイン技能検定2級 受検体験記

更新
2015年01月06日(火)

本文を追記欄に移動

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

Web学習 【38】 ウェブデザイン技能検定3級 結果通知

更新
2015年01月06日(火)

本文を追記欄に移動

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

Web学習【37】 Webクリエイター能力認定試験エキスパート 結果発表

更新
2015年01月06日(火)

本文を追記欄に移動

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m
ページ下部までご覧いただきありがとうございました。
プロフィール

Deka-E

Author:Deka-E

ブログ4年目のブロガーです。
HTML/CSSが理解できる程度で成長が止まってます。
JavaScriptはサッパリ分からんです。

カウンター
総閲覧者数:
現閲覧者数:
検索フォーム
ジャンル別リンク
★は相互リンクさせていただいています

RSSリンクの表示
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Twitter
管理人Deka-Eのツイート
サイドバー2下の追尾スペース