JavaScriptでリキッドレイアウトの幅に合わせて画像サイズを変える | とりさんのソフト屋さん
福井のソフトウェア会社です。AccessやExcel、.NETソフトウェア開発、WordPress等を使用したホームページのシステム化、PCサポート・メンテナンス、コンサルなどを行っています。 投稿日 2009 年 10 月 24 日 – 2:54 AM カテゴリ: JavaScript JavaScriptでリキッドレイアウトのレイアウト幅に合わせて画像サイズを自動的に変える方法です。 リキッドレイアウトでまず困るのがレイアウト幅が可変な部分に画像などを使用するとはみ出て表示されてしまうことだ。そのためJavaScriptで画像サイズを自動的に変えるものを簡単に作ってみた。 デモ ダウンロード(v0.5.0) 特徴？ JQueryを利用しています。 IE6、7、8、Firefox最新、Safari最新、Opera最新、Chrome最新でテストしています。 基準とする幅を持った要素を元に画
lovelog || Loveness×Zeroless
This blog is a blog for the study of hirou that aims at an independent web creator. The knowledge such as Flash actionscirpt3, CSS2, CSS3, Javascript, jQuery, microformats, and SEO is being studied evenly now. This blog is customized fast as a proving ground of the design. This blog is a blog for the study of hirou that aims at an independent web creator. The knowledge such as Flash actionscirpt3,
一緒につくろう！ XHTML+CSSガイドライン (pdf)
The Days of Web Standards 2007［Web標準の日々］ July 16, 2007 1/120 一緒につくろう！ XHTML+CSSガイドライン 株式会社サイバーガーデン 益子貴寛 2007年7月16日 月曜日 東京・秋葉原 ダイビル7F The Days of Web Standards 2007［Web標準の日々］ July 16, 2007 2/120 全米が泣いた！ The Days of Web Standards 2007［Web標準の日々］ July 16, 2007 3/120 XHTML+CSS ガイドライン The Days of Web Standards 2007［Web標準の日々］ July 16, 2007 4/120 みたび... ※ 2006年4月の CSS Nite Vol.7 でかなり、
制作ガイドラインを作るためのチェックリスト | check*pad.jp
/* ---- ユーザーの想定環境 ---- */ 必須動作環境（ブラウザ/OS）は？（例：IE5.5/Firefox2/Safari2 など） 推奨動作環境（ブラウザ/OS）は？（例：IE6,7,8/Firefox3/Safari3/Chrome1 など） 最低ウィンドウサイズは？（例：1024×768 など） /* ---- ファイルの取扱いについて ---- */ フォルダの構成は？ サイト内で汎用的に使用する共有ファイルをまとめるフォルダは？（例：commonフォルダ など） 各ファイル（HTML/CSS/JS）の命名規則は？（例：英文字は英単語なのかローマ字読みなのか、拡張子はhtmlなのかhtmなのか など） 画像ファイルの命名規則は？（例：分類_使用場所_名称_連番.拡張子 など） /* ---- 使用フォント ---- */ 画像内のテキストへ使用するフォント（和文/英文）
HTML CSS ガイドライン – Kangaroonote
ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にし、読み込み順とスタイルの優先度に整合性がとれるように心がける root/ ├── dist/ └──index.html └──assets/ └──css/ └──images/ └──js/ └──lib/ └── src/ └──sass/ └──style.scss └──foundation （基本的となるスタイル） └──_global_var.scss └──_mixin.scss └──_reset.scss └──_font.scss └──layout （ヘッダ、フッタ、共通ナビ、カラム構造） └──_flex.scss └──_float.scss └──_nav-ma
CSS関連ルール | HTML & CSS コーディングガイドライン ver.0.9
基本ルール head要素内での記述やstyle属性では使用しない。 CSSファイルはモジュール化し、一枚のCSSファイルから全てを読み込む。 書式 セレクタは原則1行に記述し、複数のセレクタを指定する場合は"," 区切りで改行をする。 最後のセレクタの後にスペース、その後ろに "{" を記述する。 "{"、"} " の後で改行する。 プロパティの前にはタブ1つでインデントを挿入する。 プロパティと値の間にスペースを挿入する。 backgroundや、marginなど、まとめられるプロパティはまとめる。 値の後ろには必ず ";" と改行を挿入する。 marginやpaddingは、bottomで取るようにし、topには基本指定しない。 単位の省略 プロパティの値が0の場合は省略する。 line-heightは省略する。 ショートハンド 以下のプロパティはショートハンドで行う。 backgr
上場企業トップ50のHTMLコーディングルールまとめ - 名古屋のWebシステム屋さん
企業Webサイトをつくるさいに、HTMLコーディングルールを設定しますが、このコーディングルールが世間一般にはどのようになっているのか調査してみました。 調査対象は2009年11月10日時点で上場企業のうち株式時価総額トップ50の企業について調査しています。（Yahooファイナンスより引用しています。） 調査方法は、企業のサイトのトップページをみて、私の判断でまとめています。間違っていたらごめんなさい。 下記のように調査データを定義しています。 DOCTYPEはソースコードのDOCTYPE宣言です。 文字コードはcharsetの文字コード 幅はサイトのドキュメントエリアの横幅のピクセル数 FlashはトップページにFlash素材が配置されているかどうか JavascriptはJavascriptをオフした場合に、どのように表示されるか 警告というのはJavascriptを使用しているのでJ
CSS/CodingStd - Deathmarch Wiki
Programing プログラミング入門 Java JavaFX Python JavaScript Scala Ruby PHP Database Web Design CSSコーディング規約 Fireworks Dreamweaver Illustrator ボタン画像 Development Eclipse Subversion Maven2 Trac Enterprise Architect Linux & Mac Linux Mac はじめに 目的 この規約は、HTMLの構造化とCSSの適用方法に関してのコーディング規約である。 文字コード HTMLの文字コードはUTF-8、CSSに関してはマルチバイト文字を含めない事とする。 ただし、フォントの設定用CSSは例外とし、UTF-8で記述する。 HTML HTMLの構造とid/classに関する規約。 インデントと改行
CSSコーディング規約 - Python 情報wiki｜エスキュービズム ラボ
★命名ルール 一意の要素にはidを、汎用的な要素にはclassを使う ○ class="important" ○ id="company_detail" 全て半角英数小文字とし、日本語のローマ字表記は極力避ける × taitoru ○ title 単語の連結には _ を使う × companyList ○ company_list 修飾語は英文とは違い、後置する × left_menu, right_menu ○ menu_left, menu_right レイアウトに使用する「枠組み」は、接頭に wrap_ を付ける 例 wrap_header wrap_main wrap_navi_left wrap_navi_right wrap_menu wrap_footer id、class名に属性や値を表す表記は使わない 例えば、class名を "red" のようにすると、後で色の変更をしづ
CSSコーディング規約 - 株式会社アイシーズ webコンサルティングcompany
東京都渋谷区千駄ヶ谷5-21-12 代々木リビン5階 TEL:03-6457-4772 info@i-seeds.jp XHTML+CSSコーディングのプロフェッショナル webコンサルティング SEO対策設計＋ホームページ制作 導入実績 お問い合わせ 会社概要 CSSコーディング規約 コーディングルール 冒頭で概要を説明する スタイルシートの1行目には、charsetを必ず記述する。 CSSハックを使用している場合、冒頭部分で使用しているハックを説明する。 同じ要素でいくつかのデザインパターンを持ち、そららをclassで使い分ける場合など、説明が必要な場合は説明を加える。 セレクタセットルール セレクタには下記ルールを適用する。 セレクタ名の後には、半角スペース1文字分空け、{を書く プロパティ名は、半角スペース2文字分インデントする プロパティ名の後には、スペースを空けずにコロ
HTMLコーディング規約
コンピュータ入門 コンピュータの基礎知識 コンピュータ用語辞典 Java 入門 実践 Java Java リファレンス Java コーディング規約 Java Tips Java 開発環境 オープンソース入門 Eclipse 使いへの道 JBoss で J2EE サーバ CVS でチーム開発 OpenOffice.org を使ってみよう セキュリティ入門 暗号化の基礎 PGP で安心メール オブジェクト指向入門 オブジェクト指向用語辞典 オブジェクト指向の基礎 Web サイトデザイン入門 HTML コーディング規約 SEO で見られるサイト オカピ・プロジェクト サイト設計 サブプロジェクト MOMONGA KAME プロセス10 リッチクライアント入門 リッチクライアントの基礎知識 Flash でリッチクライアント開発 リッチクライアント EclipseRCP 履歴 変更履歴 バックナンバ
共同作業コーディングルール：minicpress*
コーディング（HTML制作）は、制作者やHTML作成ソフトによって癖があるのは、タグを触ってる方なら意識したことがあるかと思います。 コーディングルールがなく、揃っていない場合、タグ修正や置換がしにくかったり、思わぬエラーがおきた場合の原因が制作者以外だとつかみにくかったりと悩みの種が尽きません。 それぞれのサイトのガイドラインがあればそれに従うべきですが、ガイドラインがあっても記述がないものや、ガイドライン自体がない場合は、管理している範囲だけでも、揃えておいた方が、いいに越したことはありません。 そこで、共同作業するチーム（≒制作会社、制作グループ、運用チーム）ごとでローカルなルールをまとめて、閲覧できるようにしておくと便利です。 参考に私のローカルルール初期稿を追記しておきます。 HTMLのローカルルール クライアント様の共通ルールに従いますが、指定のない場合は以下のローカルル
コーディングガイドライン - coding lab (コーディング・ラボ)
当コーディングガイドラインはcoding lab（コーディング・ラボ）で現在採用している仕様全般について、制作物の品質（アクセシビリティ・ユーザビリティ・互換性・更新性など）を維持する為に規定したものです。
コーディングガイドラインを作るときに定めておきたい項目｜クロノドライブ
コーディングガイドラインの必要性 私もはじめはガイドラインの必要性を感じずにいました。しかし、コーディングを続けていくうちにじょじょに必要性を感じてくるようになりました。 なぜなら、コーディングガイドラインを定めないままコーディングした結果、自分で作ったものですらどういう構造になっているか分からなくなったからです。そのため、更新に手間取ってしまいました。 一人のときですらこの有様ですから、二人以上で作業を行うことを考えるとコーディングガイドラインの必要性は明らかでした。 その後、何度もコーディングガイドラインを改善してきました。 項目1 データを編集した人が誰か分かるようにする HTMLファイル・CSSファイルともに、作成者と更新者の名前と日付をセットにした署名を入れるようにしましょう。 そのデータを編集した人が誰で・いつ編集したのかをわかるようにすることで、ミスが起きたときに責任の所在が
HTML/XHTMLマークアップ・CSSコーディングガイドライン | enoq(エノーク)
HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie（シクリエ）では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。 案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。 ディレクトリ構成 命名規則 HTMLマークアップ CSSコーディング アクセシビリティ ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイ
CSS(Cascading Style Sheets) コーディングガイドライン
分割した場合の CSS の種類 default.css 全ての文書に読み込ませる CSS。ブラウザごとに違うスタイルをリセットして要素別に見栄えを再定義します。汎用的なクラススタイルも含みます。 font.css フォントファミリを定義するための CSS です。 layout.css レイアウトの種類を定義するための CSS です。この CSS の中身で @import 規則を使い、個々のレイアウトを読み込みます。このファイル内では、読み込むファイル名の行のコメントを外して希望のレイアウトを読み込むようにします。 layout.css 内で @import 規則を使って読み込むスタイルの種類の例 fixed_2column_left_menu.css fixed_2column_right_menu.css liquid_2column_left_menu.css liquid_2colu
都心地下25ｍの大ジャングルジム
先日、新橋の「環状2号線」建設現場にお邪魔する機会を得た。 すごかった。ちょうかっこよかった！ 今回は、それがいかにかっこよかったかをレポートしたい。 ほんとにちょうかっこよかった！
デザインの勉強にもなる、高品質なウェブページのPSD素材 -Artfan Design | コリス
ウェブデザインに役立つリソースやチュートリアルを掲載している「Artfan Design」から、個人ブログやポートフォリオ、ビジネスサイトですぐに使えるウェブページのPSD素材を紹介します。
tsudaさんによる「東日本大震災と新旧メディアの役割 〜日独における地震報道に関する比較の視座」実況
3月11日に発生した東日本大震災は、地震・津波被害の甚大さに加え、原子力発電所事故も併発し、未曾有の大震災である。短期的には地震津波警報が市民の安全に直接の影響を与え、また安否確認にテレビや電話などの既存メディアに加え、携帯電話やインターネットを利用した災害伝言板など新たなツールが使用される局面もあった。その後、募金の呼びかけや放射能情報がツイッターやフェイスブックで大きなうねりとなって人々を動かすなど、情報伝達は新しい局面を見せた。さらに、海外と日本では報道ぶりの違いがあった。本シンポジウムは、各種メディアが災害時に果たした役割、また現在果たしている役割を検証し、海外と日本での報道の差異を概観した上で、今後、情報の送り手と受け手にはどのような課題があるかを日欧の実務家、専門家が議論し今後の展望を探るものである。 プログラム（予定） セッション1：基調講演、メディアの役割と日独における現状
おいしいお ｜ 【節電レシピ】チキン南蛮の作り方
【簡単・手軽でしかも美味しい！節電エコレシピ】 －チキン南蛮－ 材料の切り方の工夫や電子レンジの活用で、調理時間を短縮 【調理時間】 調理時間：20分（漬け時間は除く） 加熱時間：5分 【材料・2人分】 ※作り方は動画でチェック！ 鶏もも肉：240g （塩：小さじ1/8、こしょう：少々） ・衣 薄力粉：大さじ1 卵：1/4個 水：大さじ1 サラダ油：大さじ2 ・南蛮酢 酢：20cc 砂糖：大さじ1 しょうゆ：大さじ1 輪切り赤唐辛子：4切れ ・タルタルソース （溶き卵：1/2個、水：小さじ1、塩・こしょう：各少々） a （ピクルス（みじん切り）：10g、パセリ（みじん切り）：2g、マヨネーズ：30g） サニーレタス：適量 プチトマト：適量 レモン（くし形切り）：2つ
デザインと技術のフェンリル - フリーソフトでユーザーにハピネスを
フェンリルのプロダクトSleipnir タブの切り替えさえも1フリックで片付く。 最速タブのモバイルブラウザ。 株式会社大丸松坂屋百貨店 株式会社JFR情報センター大丸・松坂屋アプリ 全国14店舗の「大丸」「松坂屋」の 便利でお得なアプリ。 フェンリルのプロダクトNILTO 磨き込まれたインターフェースで、 チームの理想を実現するヘッドレスCMS。 日本放送協会NHK ニュース・防災 ニュースや災害情報、防災に役立つ 情報などをいち早く届ける、NHKの公式アプリ。 株式会社クボタKubota-PAD4.0 株式会社クボタがグローバルで展開する 農業機械、建設機械、エンジンの部品カタログシステム。 フェンリルのプロダクトBrushup イラスト・写真・動画などのレビューを効率化。 高速コミュニケーションツール。 西日本旅客鉄道株式会社 株式会社JR西日本ITソリューションズJR 西日本列車走
デザインブログ :: SPGRA -プロダクトデザインからウェブデザインまで-
フェンリルのプロダクトSleipnir タブの切り替えさえも1フリックで片付く。 最速タブのモバイルブラウザ。 東海旅客鉄道株式会社EX アプリ 新幹線の指定席予約、変更等が行える 「エクスプレス予約」「スマート EX」の公式アプリ フェンリルのプロダクトNILTO 磨き込まれたインターフェースで、 チームの理想を実現するヘッドレスCMS。 株式会社クボタKubota-PAD4.0 株式会社クボタがグローバルで展開する 農業機械、建設機械、エンジンの部品カタログシステム。 GROOVE X 株式会社LOVOT 世界に1体、あなただけのLOVOTと 楽しく過ごせるアプリ フェンリルのプロダクトBrushup イラスト・写真・動画などのレビューを効率化。 高速コミュニケーションツール。 九州旅客鉄道株式会社 JR九州コンサルタンツ株式会社トンネル検査支援アプリ トンネル検査の省力化と 精度向上
タブブラウザ Sleipnir - Windows / Mac の先端的ウェブブラウザ
今日、あなたが読んだ何千という文字も本当はすべて美しくできました あなたが日頃からウェブブラウズするなら、どんなページでもテキストを目にしない日はありません。それらを表示するウェブブラウザは、実は「文字を読むための道具」だとわかります。そこで、いつでももっとも長く目に触れる文字を美しく描き出すことに、フェンリルのデザイナーは取り組みました。あらゆるページのテキストを美しくすることは、これからあなたが目にするウェブの世界すべてを美しくすることです。 美しい文字を見る ギザギザした文字を PC と古いゲーム機以外で 見たことがありますか？ PC で見る文字がギザギザしているのは当たり前のことでしょうか。表示性能の進化で、PC の文字が粗いドットでなくてはならなかった時代はずいぶん前に過ぎ去りました。にも関わらず、一般的なブラウザの文字はいまだにレトロなゲーム機のようです。Sleipnir の登
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML & CSS コーディングガイドライン ver.0.9
クロノドライブのコーディングガイドライン
JACK THREE FIVE | articles
With-D
http://www.makinokobo.com/rule/
404 Not Found.
http://rule.html-coding.co.jp/
moag コーディングガイドライン
コーディング ガイドライン
http://carnival.elephant-com.co.jp/
PC
tumblrの更新をポストする為のWordpressプラグイン？ | SHOW5
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net
