まだまだなくならないIE10以前・・・ Windowsに最初からインストールされているInternet ExplorerことIE 今では最新バージョンの11以前はサポートが終了していますね。 サポートの切れたインターネッ […]
HTMLとCSSについて
コンテンツの高さを揃える「fixheight.js」
コンテンツの高さを揃えたい時に便利! Webページを作成していて3カラム、2カラムなどの複数列にコンテンツを配置する事がありますよね。 1行であればそこまで問題になりませんが、2行3行と複数行になっていくとコンテンツの高 […]
スマホにも対応する便利な画像拡大Script
「photoswipe.js」を使って画像を拡大表示させよう ホームページにはクリックで画像を拡大するページがありますよね。 新規でタブが開いて、ブラウザ内に大きく表示されたり、ページが暗転してその上に画像が表示されたり […]
リンクエリアを拡大させるbiggerリンク
biggerlink.jsでクリックできる領域を拡大させる ホームページを作っていて、a要素でリンクを設定します。その時にa要素で囲んだ範囲しか、リンクができません。 あまり問題が無いように思えますが、実際にWebページ […]
301リダイレクトを正しく設定しよう
URLが恒久的に変更された事を伝える「301リダイレクト」 301リダイレクトはURLが恒久的に変えた場合に使われる転送処理のステータスコードです。 「ページをリニューアルして、フォルダ構造が変わった」「移転してドメイン […]
クリックで展開するコンテンツを作ろう
クリック(タップ)で展開するコンテンツ ページメニューなどが時々クリックすると中身が展開するコンテンツがありますよね。 スマートフォンページのページメニューはほぼその形です。 少ない表示エリアでも一部を隠しておくことで広 […]
見落としがちな404エラーページ
404エラーとは 突然ですが「404エラー」とはなんだかわかりますか? ホームページを見ていると時々出てくるアレ・・・画面に大きく「Not Found」とか「Webページがありません」と表示されるアレです。 404エラー […]
ページスクロールについてくるコンテンツの作り方~実装~
ページスクロールについてくるコンテンツを作るには ページスクロールについてくるコンテンツについて、前回紹介しました。 では実際にどうやって作り込んでいくのか・・・ 今回は実装方法についてお話していきましょう。 一番簡単な […]
jQuery1.X系と2.X系の違いと3.X系の登場
IE8以前をサポートする1.X系、IE9以降をサポートする2.X系 jQueryを使った画像スライダーを入れたり、クリックで画像を拡大させたり・・・ホームページに動きを付けたい時に必須となる「jQuery.js」 1.6 […]
CSSはパーツ別にclass名を分けよう!
CSSはデザインやレイアウトを統一するために使われる CSSでホームページを装飾するとき、class名を付けてそれぞれ記述していきます。 写真一覧用のCSS、お知らせ表示のCSSといった具合にたくさんのCSSが必要になっ […]
アナタは大丈夫?JavaScriptとjQueryの違いについて
jQueryとJavaScriptは似ているようで別の物 ホームページを作っていくと、JavaScriptとかjQueryとかって聞いたことありませんか? 実際にHTMLに書いたり、ファイルを扱っていくと違いがよくわから […]
写真が2枚ある時は2列に、1枚の時には中央に寄せる方法
画像をいつでも中央配置にするには ホームページを制作していて、コンテンツへ入る画像の枚数がまちまちになる事はありませんか? その都度、HTMLを書き換えていますよね?連続して更新出来るときは困りませんが、少しでも間が空く […]
レスポンシブWEBデザインに対応させるtableレイアウトCSS
表組みはレスポンシブWEBデザインでは難しい ホームページの制作でよく使われる表組み。価格表やお問い合わせフォームなど、表を使って配置したほうが見やすく、わかりやすいレイアウトにできる場面はよくありますよね?私もホームペ […]
新着一覧などに使えるul・li要素を使ったリストデザインテンプレート
ul要素を使ったスタイリング 新着情報一覧を組むときにどのHTML要素を使うかを考えてみると、リスト状になるのでdl要素かul要素か迷うところですね。 dl要素にすればdt要素で日付を入れ、dd要素へ内容を入れられます。 […]
dl dt ddを使ったホームページレイアウト作成
dl要素を使ったスタイリング dl・dt・dd要素を使ってデザインをする時、tabel要素の様に表組みにしたいと思う事はありませんか? 私も実際にホームページを作成していると、レスポンシブWEBデザインで作る関係上tab […]
ホームページ構築に使える便利な「結合子」4つ
結合子はとても便利 ある要素の子要素を指定する事ができる「結合子」 ホームページを構築する時にかなりの頻度で使う場面がでてきます。 覚えておくとHTMLへのclass・idの指定を減らす事ができ、CSSの記述もシンプルに […]
CSS3を使ってグラデーションをつくる方法
グラデーションはCSSで作れる グラデーションの付いたボタンや背景など、ホームページにはグラデーションを付けて装飾したい部分がありますよね。 特にボタンはグラデーションをうまく付ける事で盛り上がって見えるので、ボタンらし […]
CSS3を使って角丸を表現する方法
四隅にRを付けて丸くするデザインは大変? 普通にHTMLとCSSだけで装飾をしていくと、要素は四角になって角が直角になりますよね。 角ばったデザインが作っているホームページの雰囲気やイメージにピッタリ合うこともありますが […]