もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
TeX Tools for mi 3.5.2 : テキストエディタ mi を中心とした LaTeX 統合環境
TeX Tools for mi は、テキストエディタ mi を中心とした LaTeX の統合環境を実現します。mi に付属の TEX モードより高機能な代替を提供し、LaTeX コード入力を協力にサポートします。タイプセットおよびプレビューをスムーズに行えるようにし、LaTeX コードとプレビュー画面間での forward/reverse search を行えるようにします。 「Bounding Box を抽出」でエラーが発生する不具合を修正。 「取り込みファイルを開く」でエラーが発生する不具合を修正。 リファレンスパレットの不具合を修正 %ParentFile が設定されていながら、リファレンスパレットに登録されないファイルが前面にある時にリロードするとエラーが発生する不具合を修正。 文法定義スクリプトの改良
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
プログラマーに特化したタイピング練習サイト『typing.io』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
CodaとZen-Codingのショートカットまとめ。極めると早い。 | codechord
Posted 7月 2nd, 2011 by codechord. 1 Comment Tweet Tweet コーディング時のエディタは何をつかっていますか？最近Vimでのコーディングが気になりだしています。 Vimをプラグインなどでカスタマイズしまくると、かゆいところに手が届くすばらしいエディタになるとのことで。でも覚えるのが大変。。。 コーディングを早くするコツ。 なぜ、Vimが優れているかといわれると。数少ないキータッチのコマンドで、あっと驚くようなことができてしまうということ。ですよね？ つまり、Vimに限らず、エディタの便利なコマンドを頭に叩き込めば、早くコーディングできるという逆転の発想です。 コーディングにかぎらず、PCのアプリケーションを使う作業は、ショートカットを覚えた数が、作業のスピードに比例すると自分は思っています。 ということで、CodaとZen-Codingのシ
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
5分でわかるCSSグラフィック
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件
私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。 ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。 私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。 私自身、NetBeans IDE を使うようになってからサ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
HTML5でコーディングするときに役立つ10のオンラインツール
最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。 Initializr 様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 HTML5 Demos and Examples HTML5の独自機能のDemoを試せるサイトIE、firefox、opera、safari、Chromeとそれぞれのブラウザの対応状況をチェックできます。 HTML5 Canvas Cheat Sheet – Nih
DreamweaverのためのZenCoding 活用編 | Web Developer's Note
「DreamweaverのためのZenCoding インストール編」の続編です。 今回はZenCodingの基本的な使い方について、色々なブログに同じ様なエントリーがた多々あるので、割愛しようとも思ったのですが、Dreamweaverユーザー向けのZenCoding解説エントリーとして外せない要素になりますので、一応書いていきたいと思います。 まず、まだZenCodingのインストールを行っていない方はこちらのエントリーをご覧ください。 DreamweaverのためのZenCoding インストール編 Zen Coding 基本的な使い方 まずは基本！コードの展開方法 色々なブログでCodaやApatanaなどのエディタで「Ctrl」+「E」でコードを展開と書かれていますが、DreamweaverでのZenCodingの展開は「Ctrl」＋「,」の同時押しになります。 下記のソースを
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
KH Coder: 計量テキスト分析・テキストマイニングのためのフリーソフトウェア
概要と特長 KH Coderとは、計量テキスト分析またはテキストマイニングのための自由ソフトウェアです。 アンケートの自由記述・インタビュー記録・新聞記事など、さまざまなテキストの分析にお使いいただけます。 プログラミング不要、マウス操作で本格的な分析 安心の分析プロセス完全公開、研究利用も多数 New! 機能紹介（スクリーンショット） スクリーンショット集 ［旧ページ：言葉・文書・可視化・他］ KH Coder 3 正式版の新機能 New! 機能追加プラグイン「文錦®」シリーズ New! ダウンロードと使い方 KH Coder 3 正式版ダウンロード (Version 3.02) 使い方を知るためのチュートリアル ヘルプ 質問＆エラー報告用の掲示板 ※投稿にはGitHubへの登録が必要（無料）［旧掲示板］ よくある質問（FAQ） 開発者が語る公式セミナー & サポート：㈱SCREEN A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ryosblog.net/6682