HTML&CSS

CSS2.1のセレクタの復習

CSS2.1 セレクタ セレクタのパターンマッチ パターン 名称 例    h1,h2,h3 グループセレクタ セレクタをカンマ(,)で区切ってグループ化 * 全称セレクタ あらゆる要素にマッチする。 p タイプセレクタ  >>続きを読む

ネガティブマージン

ネガティブマージンは設定する方向で違った動きをします。 margin-leftとmargin-topはマージンを設定した要素がその方向へ動きます。 margin-rightとmargin-bottomの場合はマージンを設  >>続きを読む

ナビゲーション作成のポイント

ul要素とli要素は初期状態ではマージンとパディングが設定されていますので、いったん0にリセットします。 li要素のマーカーを消すためlist-style-type:noneとします。 リンクであることがわかりやすいよう  >>続きを読む

floatとpositionを使用したレイアウト

赤、緑、青のdivでできたボックスが通常フローしています。 これにfloatを設定して次のように横並びにしたいのですが、うまくいきません。 通常フローのHTMLは次のようになっています。 [crayon-58d95765  >>続きを読む

textariaのリサイズを無効

フォームを作成する時に使用する複数行のテキストボックスはtextariaタグを使用します。 この複数行のボックスはユーザーが大きくしたり小さくしたりできます。 デザイン上拡大縮小を許したくない場合はCSSで次のように指定  >>続きを読む

imgのフロート〜CSS フロートと回り込み

p要素の中のimgをフロートして右または左に移動させて、次の段落のp要素のテキストを回り込みをさせたい場合です。 imgの親要素にフロートをかける HTMLのコードは次のようにimgを囲むp要素にclass名を付けて対象  >>続きを読む

body要素のマージン〜CSS marginの挙動

body要素のmarginはどのような挙動をするのでしょう。 一見ブラウザの表示領域の外に存在するように思えますが、実際はブラウザの表示領域内に存在します。 下の例ではmargin領域(黄色)が存在してその内側にボーダー  >>続きを読む

単位emの使い方〜CSS

単位のエム(em)の定義は次のようになっています。 ‘em’という相対単位は、それが使われた要素の’font-size’ の算出値を参照する。 例外は’font  >>続きを読む

メモ帳だけでOK〜Markdowonを使ってみよう

Markdowonを使ってみたことがあるでしょうか。 そもそもMarkdowonとは何? WikipediaではMarkdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。と説明されていま  >>続きを読む

フォームの作成

テキストボックス 1行のテキストボックスはinput要素にtype属性をtextと指定することで表示されます。

type属性の値を変更すると次のように変わ  >>続きを読む

Sublime Text3 Mac版 カタカナ変換をF7で行う

Sublime Text3では”command”: “build” に設定されているためF7でカタカナに変換できません。 次の手順でこの設定をなくします。 手順 Prefe  >>続きを読む

画像のフロートとテキストの流し込み

画像のフロートとテキストの流し込みのサンプルです。 サンプル

HTML5 CONFERENCE 2013

11月30日NTT中央研修所で実施されました。 基調講演 村井慶応大学教授 とりとめのない話がありました。中国のインターネット人口がアメリカを抜いた事とか、国家IT戦略の中にHTML5の文字が入るようになった事や、文科省  >>続きを読む

属性セレクタの意味

属性セレクタの意味は以下のとおりです。 E[foo]属性セレクタ(属性名の完全一致) E[foo=”bar”]属性セレクタ(単一属性値の完全一致) E[foo|=”en”]  >>続きを読む

%を使ったマージン指定

マージンを%で指定したたときは、親要素の横幅に対する割合となります。 上下のマージンについても、高さに対する割合ではなく横幅に対する割合となるので注意!

canvasの文字を動かしてみる

大昔に文字を動かしていたあれ(MARQUEEやtextbox内での移動)ではなく、HTML5のcanvasに文字を表示して動かしてみます。 結局同じ事のようですが、canvas内の文字は色々と拡張性があります。 まずここ  >>続きを読む

にわかデザイナーより数字の美

デザインはどうもセンスがなくって。。。 そんなあなたは数学を勉強してみましょう。 タイポグラフィで使えるフィボナッチ数シーケンス 。 これです。 0 1 1 2 3 5 8 13 21 34 55 89 144… たとえ  >>続きを読む

Webサイト制作フロー

Webサイト制作フロー Webサイトがどのように作成されていくのか見ていきましょう。 プランニング サイトの目的やコンセプトの決定 対象ユーザーの選定 コンテンツの検討 サイトマップの作成 使用ソフト:この段階ではWor  >>続きを読む

HTML5 canvasを使用してみる~画像表示

画像表示方法 HTMLCanvasElementオブジェクトは、HTMLページにcanvasタグを配置することで作成されます。 JavaScriptでcanvasを操作する場合はDOM経由で行います。canvas要素への  >>続きを読む

Freeのオーディオエンコーダー

Mac,Win用と用意されているFreeのオーディオエンコーダーにAudacityがあります。 サウンドの編集もできてお薦めです。 Audacityはこちらから ちょっと面倒なのはmp3に変換する場合は「Lame」が必要  >>続きを読む

facebookのロゴ取り扱いについて

最近の制作の時多い問い合わせのひとつにfacebookロゴの取り扱いについてです。 勝手に使用してOKなのかなど。。 Facebookロゴは禁止だがfマークはOKだとかいろいろ細かく規定があります。 以下サイトが詳しいで  >>続きを読む

ローディングアニメーションが簡単に作成できるサイト

ローディングアニメーションはGIF形式のアニメーションで作成しますが、一般的なものでいい場合は以下のサイトで簡単に作成できます。 簡単に出来るものは簡単にやってしまいましょう。 ajaxload.info Generat  >>続きを読む

ブラウザいっぱいに画像を広げたい

HTML側のimgタグで実現する方法 画質とかはあまり気にしないけれども、ブラウザを大きくしても小さくしてもいっぱいに画像を広げておきたい場合の方法です。 html側の設定 [crayon-58d95765ea17a46  >>続きを読む

あるブロック要素の高さをブラウザいっぱいに広げる方法

あるブロック要素の高さをブラウザいっぱいに広げる div要素などのブロック要素の高さをブラウザいっぱいに広げるには、広げたいボックスのheightを100%にしても広がりません。 これは親要素の高さが設定されてないために  >>続きを読む

横幅を固定してpaddingを使用したい

paddingを設定しても横幅を変えない方法 paddingを設定するとwidthで指定した値よりも横幅が大きくなります。 これはボックスモデルのところで説明した内容です。 幅全体を固定したままpaddingを設定したい  >>続きを読む

backgroundプロパティの使い方

backgroundプロパティについて backgroundプロパティはbackground-color, background-image, background-repeat, background-attachme  >>続きを読む

CSSの優先順位

CSS優先順位 CSSの優先順位は以下で決まります。 セレクタの種類・書き方 指定の順番 スタイルシートの種類(ブラウザ側・ユーザー側・制作者側) !important指定 セレクタの種類・書き方について セレクタの種類  >>続きを読む

ネガティブマージンでボックス間マージンを簡単設定

ネガティブマージンとは ネガティブマージンとは、マイナス値が与えられたmarginプロパティのことを言います。 通常フローの場合、topまたはleftにネガティブマージンを指定した際は、その指定した方向に上、または左に引  >>続きを読む

YouTubeやFlashを挿入したHTMLでのz-indexについて

YouTubeの重なり順を変えたい YouTubeを挿入したHTMLではIEなどで position:fixedとしたブロック要素の上を通過してしまいます。z-indexを用いても重ね順は変わりません。 こんな風になりま  >>続きを読む

フォームの中の2種類のlabel要素の指定方法

label要素とは label要素はフォームの入力部品とラベルを関連付ける要素です。 この要素で部品とラベルの関連付けを行なうと、ブラウザ上でラベルをクリックした場合に、その部品をクリックしたのと同じ動作をさせることがで  >>続きを読む