初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
ミニマムで場所を取らないCSSメニューの実装例:phpspot開発日誌
CSS3 Minimalistic Navigation Menu | Tutorialzine ミニマムで場所を取らないCSSメニューの実装例。 次のように、アイコンだけ並んでいて、マウスオーバーするとメニューの文字がアニメーションしながら表示されるというナビゲーションの実装方法が解説されています。 邪魔にならないのでサイトをシンプルにしたい場合に役立ちそうです。 デモはこちら アニメーションにはcss3のtransitionを使ってる模様。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 サイトを美しく魅せるゴージャスナビゲーション集 パート２ Windows7風ナビゲーション作成チュートリアル
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
アンカーを:hover状態にすると後続するフロートの一部が消える - CSSバグリスト
以下の条件に該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると最もボックス高が大きいフロートのうち、2番目にボックス高が大きいフロートの高さを超える部分が消える。 （【アンカーを:hover状態にすると親ブロックの高さが変化する】が発生するような入れ子構造があり、バグ対策を施している【アンカーを:hover状態にすると親ブロックの高さが変化する】の「補足」を参照）。 上記の入れ子ブロックの後にフロート化したボックスが複数並んでいる。 それらのフロートの下に何も（clearプロパティがnone値以外のボックスなどが）存在しない。 最も前にあるフロート（左フロート(float:left;)が複数ある場合は最も左上方に置かれるフロート、右フロート(float:right;)が複数ある場合は最も右上方に置かれるフロート）のボックス高が最も大きい。 例示 <div style=
背景画像のちらつきを発生させないロールオーバー｜web bibo
CSSのa:hoverを用いて背景画像を切り替えると、画像がちらついたり砂時計のマークが表示されたりします。 これはインターネットオプションでインターネット一時ファイルの設定を「Webサイトを表示するたびに確認する」としている方に起こりやすい現象なんですが、このような設定をしている方にも画像をちらつかせずロールオーバーを実現する方法を紹介します。 HTML記述 <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> CSS記述 ul#menu { list-style-type: none; margin: 0; padding: 0; width: 360px; } ul#menu li { float: l
Make a Footer Stick to the Bottom of the Page
This CSS footer stylesheet will make a footer stick to the bottom of the page. CSS Sticky Footer Make the Footer Stick to the Bottom of a Page There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they've used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely v
Simple jQuery tabs | Papermashup.com
Projects can take many forms and I enjoy the challenge of both design and development. Designing simple interfaces that can integrate with complex backend infrastructures. I've spent my career in web development, working for a number of leading technology companies in the UK. I joined Myspace as one of the only developers outside the US, working on digital marketing campaigns for large consumer an
jQuery exFixed を動的な位置移動やリサイズ処理に対応させてみた - Cyokodog :: Diary
更新履歴 2010-11-14 exFixed Ver 1.3.0 ベースの記述に変更しました。 2009-10-16 本ページのサンプルソースを jQuery.exFixed.js の Ver 1.2.0 に対応した記述に差し替えました。詳細は以下をご覧下さい。 jQuery.exFixed.js を機能拡張しました - Cyokodog::Diary 一ヶ月以上間のあいた久しぶりの更新ですが、今回もしつこく IE6 の position : fixed ネタです。 最近では HTML でリファレンスマニュアルなどを作る機会もあり、position : fixed で目次一覧を固定表示させたりしてます。そんな時 exFixed の出番となるわけですが、固定表示させた目次エリアに対し、さらにリサイズや位置調整機能などを付加しようとするといろいろと問題が生じます。 今回はそれらの問題を解決し
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
無聊写記：スタイルシートを切り替えて、文字サイズを変える
無聊写記をチェックしてくれている父や義父のために、文字の大きさを変更できるように右上に文字サイズ変更ボタンを設置しました。結構簡単にできます。以下に手順を備忘録として残しておきたいと思います。 まずスタイルシート切り替えJavaScriptを入手 僕は、JavaScriptが全く扱えないのですが、ネット検索してみると解説＆ソース付きのスタイルシート切り替えスクリプトが配布されていました。その中からCookeiを使って前回読み込んだスタイルシートを記憶してくれる "styleswitcher.js" が良さそうなので使わせていただくことにしました。ダウンロードしたら自分のサイトへアップロードします。 JavaScriptの読み込み htmlファイルの<head>~</head>の間に、 <script type="text/javascript" src="styleswitcher.j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]背景画像に関する実用的なスタイルシートのテクニック集
フリーのCSS/HTMLテンプレートいろいろ2010:phpspot開発日誌
NameBright - Coming Soon
http://www.webdesignish.com/top-10-best-free-html-css-website-templates-of-october-2010.html
Creativeoverflow is coming soon
WEBデザイン&ディレクション LALA-ROCKETS