【CSS】リンクフォーカスを利用したナビゲーションのボタン操作
CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォー...続きを読む
【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法
WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。...続きを読む
WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ（索引）と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。 作り方はjQueryを使用したものや、CSSやJavascriptを使...続きを読む
WEBサイトのデザインでは定番になっているCSS（カスケーディング・スタイル・シート）。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます...続きを読む
【HTML】Bootstrap フレームワークを使い作成するレスポンシブサイト
Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレー...続きを読む
WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。 基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px～1024pxあたりでレイアウトされるのが主流といえます。 最近では、スマートフォンや...続きを読む
Webで最も人気のあるフロントエンド·テンプレート『html5-boilerplate』
『html5-boilerplate』は無償でコピー、加工、再配布が可能なHTML5ベースのテンプレートパッケージです。 このパッケージのコンセプトとして、フロントエンド（初期段階）にかかる作業を短縮して、高速で堅牢、柔軟性のある...続きを読む
HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』
スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォ...続きを読む
HTML5とは？ W3C より2008年1月22日にHTML5のドラフト（草案）が発表、2014年には正式に勧告されるのではないかと言われています。 HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック...続きを読む
WEBサイトの制作において基礎となるのは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）略称をHTML（エイチティーエムエル）と呼ばれる、拡張子が.htmlや.htmなどであらわされる文章フ...続きを読む