イメージマッピング(クリティカルマッピング)

イメージマッピング(クリティカルマッピング)

■メリット
・1つの画像の中で別の場所でリンクを設けたいときに使います
・1つ1つ、異なる形状のリンクを作成することが出来ます

■やり方(reanweaverを使った例)
①画像を用意します。

②表示形式を「分割」にし、右の下矢印を押して「デザイン」を選択します。

③imgタグで画像を挿入します

④「ウィンドウ」→「プロパティ」でプロパティを表示します。

⑤対象の画像をクリックすると下のプロパティに情報が出てきます。

通常時は矢印が選択されているのですが、

隣を選択するとそれぞれ

四角形・円・多角形を作成することができます。

例えば四角形を選択し、四角形を書くと自動的にコードを記載してくれます。

⑥hrefを記載できるようになるため、リンクを貼り付けることができます。

完成したものがこれです。
四角形をクリックしてみましょう。

使う場面はたくさんあると思います。

リストの中で画像を横並べ

リストの中でタイトルと画像を並べたいとき

リストタグの中でhタグとulタグを使用し、ulタグの中でリストタグを用いてimgタグを使用します。
また、imgに用いているリストタグをインライン要素にすることで横並びにします。

【特徴】
・リストタグの中でタイトルと画像を区別できる
・ulとliでのシンプルかつキレイなコードが書ける
・スタイルもシンプル

メインビジュアルの背景を動画にする

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

■css

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript

タブ切り替え

簡単なタブによるコンテンツの表示切替を実装するコードです。

◆jQuery

◆HTML

◆Javascript

参考:http://www.finefinefine.jp/jquery/kiji422/

CSS:画像トリミング

画像の一覧を表示するときなどに、画像サイズが統一されていないが為に、
コーディングに苦労した経験はおありではないでしょうか。

今回は、そんなときに便利なCSSプロパティをご紹介します。

その名も「object-fit」

こやつ、画像の縦横比を維持しつつ、トリミングしてくれるすげえ奴です。

たとえば、こんな画像があったとします。

縦長と横長の画像を正方形でトリミングするには、

こうなります。すごい!便利!

で、サポートブラウザですが、いつも通り「Can I Use」を見てみると…

例によってIE系は全滅です。残念でしかない…。

IEの対応策や、詳細については下記のページで解説されています。

参考:http://www.webcreatorbox.com/tech/object-fit/

CSS : selectbox

セレクトボックスの装飾に独自のスタイルを当てる方法です。
まずはブラウザがデフォルトで付けているスタイルを無効化します。

IEの場合には下記のように記述します。
※IE10では有効ですが、IE9,IE11では上手く効かないようです。

近く、WindowsVistaのサポートが切れ、Vistaの標準ブラウザである、
IE9をサポート外とする制作会社も増えてくると思いますが、
IE10、11も癖がありますので、対応にはまだまだ悩まされそうですね。

display:inline-blockでできる隙間を消す方法

■floatの代わりに使う機会が増えてきたdisplay:inline-block

・display:inline-blockは
1.block要素のようにwidthやheight、paddingやmarginの設定ができる。
2.inline要素のように横並びにできる

■display:inline-blockできれいに横並びにならないとき

例えば
display:inline-block;
height:400px;
width:50%;
border:1px solid #000;
box-sizing:border-box;

の要素を2つ並べてもこのままでは段落ちしてしまいます。

■横並びにするには
1.htmlを修正する

上記のようになっていると段落ちしてしまいます。
これを、

このようにくっつけます。
display:inline-blockにすると改行部分の情報が空白になるようです。

2.cssを修正する

親要素のulにletter-spacingを-で設定します。

※このままではliの表示が崩れるので、必ずletter-spacing:normalを追加する事が大切です。

■参考display:inline-block;でできた隙間をなくす4つの方法 | webledge

twitter,facebook,youtube埋め込み

■twitter,facebook,youtube埋め込み方法のリンクまとめ

【1】twitter
・埋め込みタイムラインを使用する
タイムラインを埋め込む方法 | Twitterヘルプセンター

【2】facebook
・下記ページでURLをいれ、タグを取得し貼り付け
ページプラグイン – ソーシャルプラグイン|facebook for developers

【3】YouTube
・埋め込む動画を開き、動画の下にある「共有」から「埋め込みコード」を取得
・タグを貼り付け
動画と再生リストを埋め込む – YouTube ヘルプ

formタグ inputタグ【html】

■formタグ
・action属性とmethod属性を指定する

・action属性
→フォームのデータの送信先(※URI)を指定する
※データを送るサーバーのCGIプログラムのURI

・method属性
→データの転送方法を指定する
→post と getの2種類

■inputタグ

・属性
type=”text”    入力ボックス
type=”password” 入力してテキストが●で表示されるボックス
type=”checkbox” チェックボックス
type=”radio”  ラジオボタン ※複数のラジオボタンを1つのグループにするにはおなじname属性をつける
type=”submit”  送信ボタン

など

参考:
-HTMLタグリファレンス

jQuery: slideMenu

jQueryのslideToggleとtoggleClassを使って、スマホ用スライドメニューを作成します。
ライブラリはここからCDNで読み込みましょう。

[jQuery]