CSS+jQueryで左右別々の背景にする
Posted: 2012.01.12 / Category: HTML&CSS, javascript / Tag: jQuery センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。 そこでcss+jQueryでなんとかしてみます。 中心で分かれた背景 とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。 デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。 html <div id="wrap"> <div id="left-bg"></div> </div> css html, body, #wrap, #left-bg { height: 100%; } #wrap { back
Git練習帳(ローカルリポジトリ編)
「非エンジニア向けGitの使い方」などと簡単にまとめたものの、実際に使うのはまた少し難しいようなので、1歩ずつ説明していきます。 実際にターミナルソフトウェアを立ち上げて、打ち込みながら読んでください。 「vi(vim)の使い方が分からない」という方は、まず「viを終了することができない人のためのviの使い方」からどうぞ。 まずは練習用のリポジトリを作る お好きな場所にテキトーな名前のディレクトリを作成して、そこに移動します。 [cc lang=”bash”]$ mkdir practice.git $ cd practice.git/[/cc] git initでただのディレクトリをgitリポジトリとして初期化します。git initというコマンドを打つと、「空のGitリポジトリができました」というメッセージが出ます。これで、作成したpractice.gitというディレクトリがGitリポ
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
CSS3だけで作るプログレスバー·CSS3 Progress Bars MOONGIFT
CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。 最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。 表示例です。角丸や複数の組み合わせ表示ができます。 さらに細めのタイプもあります。 コードです。styleのwidthでバーの長さを指定します。 色の指定もclass名でできます。 組み合わせの場合はこんな感じです。 細いタイプは_tinyをつければOKです。 CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。 CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
『node.js + okuyama について』
はじめまして ブログDivでアプリエンジニアをしている川田です。 今回はV8エンジン上で動作するサーバサイドJavaScriptのnode.jsと 日本製の分散キーバリューストアであるokuyamaについての記事を書かせていただきます。 ■ node.jsとokuyamaの主な特徴 ▼ okuyama ・タグ機能 … データにタグ情報を付加することが可能で、タグに紐づいたデータの検索・取得が可能 ・javaで実装されている … 100% javaで実装されているのでクロスプラットフォームで実行可能 ・データの永続化をサポート … データの永続化・非永続化を選択可能で、永続化は特性を選ぶことも可能。 ・構成要素はすべて冗長化可能 … okuyamaを構成※1するマスターノード、データノード共に冗長化可能。またデータノードはレプリケーション機能も有している。 など。 ※1 okuyamaの構成
jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT
ちょっとお洒落なプリローダーを探してた という方の参考になるかな・・と思ったの と、自分でも使いたかったので備忘録です。 アニメーションエフェクトが素敵なプリ ローダー・CUSTOM PRELOADER EFFECTの ご紹介です。 エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいいんじゃないかと思います。 動きがなかなか素敵なんでｓ・・と言われても動き見ないとですよね。以下、公式サイトのサンプルです。 Sample ドットはcss3でサークル上を形成、位置はランダムとなっています。 コード<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javas
「JavaScriptの配列は参照渡し(call-by-reference)」は間違い - rarilogger
「JavaScriptの配列は『参照渡し(call-by-reference)』」というネット上に大量に存在する間違った記述を訂正するエントリ。 結論から先に言うと JavaScriptにおいて、関数の引数として配列を与えた場合、『参照の値渡し』になります。『参照の値渡し』は、『参照渡し(call-by-reference)』ではなく『値渡し(call-by-value)』に分類されます。 参考エントリ 以下の解説が非常にわかりやすいです。G-chan Square - [javascript] javascriptの関数で引数に配列を渡すと、それは本当に参照渡しか？ G-chan Square - じゃ、「参照渡し」ってなんだ？簡単に端折ると、関数の引数として変数を与える場合、 値の値渡し(プリミティブ型変数の値をそのまま渡す) 値の参照渡し(プリミティブ型変数の参照を渡す) 参照の値
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最強のPocket（旧Read It Later）用Chromeクライアント拡張機能「Readmine」 | フリーソフトラボ.com
[CSS]コンテンツの見せ方にも工夫が必要、CSS3を使ったかっこいいフィルタリングのチュートリアル