メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
Хостинг VPS аренда сервера | Интернет Хостинг Центр
Хостинг сайта не существует или отключён. Для владельца сайта: Свяжитесь с отделом технической поддержки Интернет Хостинг Центра Для работы с хостингом по FTP используйте любой ftp-клиент. Например, FileZilla. Сервер: Пользователь: Пароль: высылался в письме об активации. Для работы с MySQL используйте phpMyAdmin. Личный кабинет хостинга Сделать заказ Виртуальный хостинг сайтов VPS хостинг Мощные
素のPHPをテンプレートエンジンとして使うときのコーディング規約
プログラムとしてPHPを書くときのコーディング規約は、PEARやZendなど代表的なものがたくさんありますが、テンプレートエンジンとしてPHPを使う場合にはそのまま適用しにくいものです。 テンプレートエンジンのコーディング規約って、検索してもあまり見つからなかったので、個人的に採用しているものを晒してみます。あんまり語る人を見たことがないので、「俺はこうしてるよ」とか「ここキモくね？」とかご意見いただけるとうれしいです。 目指すところ 複雑なロジックをテンプレートに書かない / 書けないように規約で縛る 少しでも読みやすさを追求する できあがりのHTMLの美しさも追及する <%= $this->doctype() %> <html> <head> <%= $this->headMeta() %> <%= $this->headLink() %> <%= $this->headTitle()
WEBデザイナーでもできちゃう！phpを使ったHTMLのテンプレート化 | WEBデザインファクトリー
テンプレート化する方法 テンプレート化する方法としては、もっとも簡単な方法はDreamweaverのテンプレートかなと思います。ただ、余計なコメントアウトされたタグが入ってしまって、邪魔になることが多いんですよね。 ...中、大規模のサイトを制作するときにどうしても必要になってくるのがテープレート化かなと思います。修正をしたり更新の時に、できる限り作業を効率よく間違いが少ないようにしたいですよね。今回は、プログラムが苦手なWEBデザイナーでもできるPHPを使ったテンプレート化をご紹介します。 テンプレート化する方法 テンプレート化する方法としては、もっとも簡単な方法はDreamweaverのテンプレートかなと思います。ただ、余計なコメントアウトされたタグが入ってしまって、邪魔になることが多いんですよね。 そこでPHPを使ったテンプレート化なら余計なタグが出力されることもないですし、ちょっ
Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」:phpspot開発日誌
Summernote - Super Simple WYSIWYG editor on Bootstrap Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 次のようなシンプルなフラットデザインのWYSIYGエディタ。ブラウザ幅に応じてツールバーが折り返し表示されてレスポンシブ対応 BootstrapベースのサイトでWYSIWYGエディタを使いたい際の選択肢として。 関連エントリ Bootstrapなサイトで使える星形レーティングプラグイン BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 アイコン入力の際に使える「Bootstrap Iconpicker」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 Bootstrap3のテーマをWYSIWYGでカスタマイズ可
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
