HTMLとCSSについて

クリック（タップ）で展開するコンテンツ ページメニューなどが時々クリックすると中身が展開するコンテンツがありますよね。 スマートフォンページのページメニューはほぼその形です。 少ない表示エリアでも一部を隠しておくことで広 […]

404エラーとは 突然ですが「404エラー」とはなんだかわかりますか？ ホームページを見ていると時々出てくるアレ・・・画面に大きく「Not Found」とか「Webページがありません」と表示されるアレです。 404エラー […]

ページスクロールについてくるコンテンツを作るには ページスクロールについてくるコンテンツについて、前回紹介しました。 では実際にどうやって作り込んでいくのか・・・ 今回は実装方法についてお話していきましょう。 一番簡単な […]

IE8以前をサポートする1.X系、IE9以降をサポートする2.X系 jQueryを使った画像スライダーを入れたり、クリックで画像を拡大させたり・・・ホームページに動きを付けたい時に必須となる「jQuery.js」 1.6 […]

CSSはデザインやレイアウトを統一するために使われる CSSでホームページを装飾するとき、class名を付けてそれぞれ記述していきます。 写真一覧用のCSS、お知らせ表示のCSSといった具合にたくさんのCSSが必要になっ […]

jQueryとJavaScriptは似ているようで別の物 ホームページを作っていくと、JavaScriptとかjQueryとかって聞いたことありませんか？ 実際にHTMLに書いたり、ファイルを扱っていくと違いがよくわから […]

画像をいつでも中央配置にするには ホームページを制作していて、コンテンツへ入る画像の枚数がまちまちになる事はありませんか？ その都度、HTMLを書き換えていますよね？連続して更新出来るときは困りませんが、少しでも間が空く […]

ul要素を使ったスタイリング 新着情報一覧を組むときにどのHTML要素を使うかを考えてみると、リスト状になるのでdl要素かul要素か迷うところですね。 dl要素にすればdt要素で日付を入れ、dd要素へ内容を入れられます。 […]

dl要素を使ったスタイリング dl・dt・dd要素を使ってデザインをする時、tabel要素の様に表組みにしたいと思う事はありませんか？ 私も実際にホームページを作成していると、レスポンシブWEBデザインで作る関係上tab […]

結合子はとても便利 ある要素の子要素を指定する事ができる「結合子」 ホームページを構築する時にかなりの頻度で使う場面がでてきます。 覚えておくとHTMLへのclass・idの指定を減らす事ができ、CSSの記述もシンプルに […]

グラデーションはCSSで作れる グラデーションの付いたボタンや背景など、ホームページにはグラデーションを付けて装飾したい部分がありますよね。 特にボタンはグラデーションをうまく付ける事で盛り上がって見えるので、ボタンらし […]

四隅にRを付けて丸くするデザインは大変？ 普通にHTMLとCSSだけで装飾をしていくと、要素は四角になって角が直角になりますよね。 角ばったデザインが作っているホームページの雰囲気やイメージにピッタリ合うこともありますが […]

字下げして、整った文章を成形する 段落が何文字分か下げることを「インデント」といいます。 文章の先頭に「・」や「①」など、記号があるとき、その段落は全て先頭を1文字分インデントして先頭をそろえたいですよね。 […]

ボックスに影をつけるには ボックスに影を付ける事で少し浮いたような表現をすることができます。 特にリンクボタンに付けると押し込める様に見えたり、他と差別化できるので目立たせることができます。 こういった影の事をドロップシ […]

文字に影を付けるには 文字に影を付ける事で読みやすくしたり、見出しのような文字を目立たせたりできるので、付けたいと思う場面はありませんか？ 特に背景に写真を配置して、その上の文字を載せると文字が読みにくくなってしまいます […]

inline-blockにした要素同士を並べると隙間が生まれる inline-blockを使うと、全体を中央や右へ寄せる事ができるのでとても便利です！ 例えばul・li要素を使ってリストを作成して、中央寄せにする場合 & […]

アニメーションはCSSで作れる ボタンにマウスを載せた時に背景色を変える、文字色を変えるなどの変化を加える際、普通に作りこむとパッ！っと一瞬で色が変わりますよね。 例えばこんな感じ・・・ リンクボタン CSS a{ ba […]