HTML&CSS

ビューポートとは 〜HTML

ビューポートについて スマートフォンのブラウザではViewportという仮想ウインドウサイズが設定されています。 もう少しわかりやすい言葉で説明すると、スマートフォンの画面は本来の解像度で表示するのではなく、仮想の解像度で表示を行います。 つまり、表示画面を指定したサイズ(解像度)が見れるように拡大  >>続きを読む

ドットパターンの作成〜Photoshop

photoshopを新規作成します。 「幅」を「4px」、「高さ」を「4px」とします。カンバスカラーは「透明」を選択し 「描画色」を白にします。カンバスは小さいので最大に拡大します。 鉛筆ツールの直径を1px、硬さを100%にします。 鉛筆ツールでドットを2つ作ります。 メニューの「編集」から「パ  >>続きを読む

ボタンの作成〜Photoshop

「長方形ツール」または「角丸長方形ツール」で矩形を描きます。 その際、線は無し(CS6以上)、塗りは単色(何でもよい)にしておきます。 レイヤースタイル追加ボタンをクリックして「グラデーションオーバーレイ」を選択 グラデーションの色を設定します。カラー分岐点を一つ増やしてその部分を一番濃い色にするこ  >>続きを読む

正規表現の基礎

正規表現とは 正規表現(regular expression)とは文字パターンを表現する方法です。 つまり、文章の中のある文字列を検索したいときなど役に立ちます。 今回はJavaScript(jQuery)で正規表現を活用する説明です。 まずは正規表現で比較する文字を「/」で囲みます。 例  /Ja  >>続きを読む

Topへ戻るボタンの作成〜jQuery

長いページでは必須のTopへ戻るボタンですね。 スクロールするとTopボタンが出現し、クリックすると緩やかにTopに戻ります。 この動きはCSSとjQueryで実現できます。easingなどを好みで脚色してください。 Topへ戻るボタンのサンプル CSSコード div#pagetop { displ  >>続きを読む

ノードの表示と非表示〜CSS

ある要素の表示と非表示の方法をまとめました。 visibilityプロパティ ボックスの表示(visible)と非表示(hidden)を指定するにはvisibilityプロパティを使用します。 visibilityプロパティで非表示にした場合には、ボックス自体が無くなってしまうわけではありません。ボ  >>続きを読む

absoluteで複数の画像を重ねる

p要素の中に複数の画像をimgタグで挿入します。 通常なら横並びに画像が並ぶはずです。 ここでimg要素にposition : absoluteを設定します。 位置は特に指定をしません。 そうするとimgで挿入した画像がきれいに重なります。 後は画像のサイズを少しずつ変えてみるとか、JavaScri  >>続きを読む

要素の追加〜jQuery

jQueryのprepend,append,before,afterのそれぞれのメソッドの違いを確認しておきます。 prependはHTML要素内の先頭に挿入します。 appendはHTML要素内の最後に挿入します。 beforeはHTML要素の前に挿入します。 afterはHTML要素の後ろに挿入  >>続きを読む

jQueryの記述の基本を覚える

マウスクリックした時のイベントの作成の基本形です。 $( );で全体を囲む 1の中に関数を宣言 function(){ } 2の関数の中に$( ’セレクター’).イベント( function(){ } ) 3の関数に中に命令文を書く 命令文は$( ’セレクター’).メソッド( ); $(functi  >>続きを読む

nth-child(n)とnth-of-type(n)の違い〜CSS3

CSS3から追加されたn番目の子要素を指定できるnth-child(n)とnth-of-type(n)の違いです。 nth-child(n)は、ある親要素の全ての子要素の中のn番目の子要素を表します。 nth-of-type(n)はある親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素です。  >>続きを読む