コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
ソースコードの装飾表示方法 SyntaxHighlighter
HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。 NetyaSun ソースコード表示 ホームページ 作成、運営、管理ガイド 行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア SyntaxHighlighter SyntaxHighlighter:Download ソース上にオンマウスで の操作タブがソースの右上に表示されるようになった。 ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。 <?xml ve
CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
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ファイルを変換する
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
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 を使うようになってからサ
MacでコーディングするならCoda2！DreamWeaverから切り替えた使用感などをレビュー！ | PLUS
福岡を拠点にWebサイト制作・iPhoneアプリ制作を行うフリーランス 入江慎吾のWebサイト。 PLUSはワクワクするWebサービスやiPhoneアプリを制作しています。 Macでは有名なエディタCodaがメジャーアップデートされ、Coda2が出ました！あわせてiPadアプリのDiet Codaも出ていて、iPadでもコーディングができる時代に。DreamWeaverを使っていましたが、前から気になっていたCodaをこの機会に使ってみようと思い、購入しましたので使い勝手などをご紹介します。 Coda2で何ができる！？ ほぼDreamWeaverと同じことができます。 ・HTML、CSS、JS、PHP、Rubyなど言語を問わずコーディングができる ・MySQLのかんたんな管理ができる(簡易版phpMyAdminみたいなもの) ・FTP機能もついている ・SSHも使える 動作が軽
[iPad] Diet Coda: iPadでHTMLコードが書ける！コード補完や言語カラーもサポート。超使いやすい！ | AppBank
iPadで快適にHTMLやCSSがコーディングできるアプリDiet Codaの登場です！ iPadでHTMLコーディングができる時代がやってきました！ コードの言語カラーリングは、もちろん入力補完や専用ショートカットメニューなど、快適にコーディングできる環境がそろっています。サーバーが対応していればSSHターミナルの操作も可能です。 高機能、高性能なWebオーサリングツールを詳しくチェックしていきます。 サーバーの設定を行う まずは編集するサーバの設定を行います。透明なノートの中心に書かれた【＋】をタップします。 サイト設定を行います。プロトコルはSFTP以外にFTP、FTP with lmplicit SSL、FTP with TLS/SSLが選べます。 サイトの情報が正しく読み込めると、サイト内ファイルからイメージアイコンが作成されます。 ファイル編集を開始するために、サイトアイコンを
![[iPad] Diet Coda: iPadでHTMLコードが書ける！コード補完や言語カラーもサポート。超使いやすい！ | AppBank](https://cdn-ak-scissors.b.st-hatena.com/image/square/7a8cd602546e57fee8dbc33313cb8fed20541de2/height=288;version=1;width=512/https%3A%2F%2Fwww.appbank.net%2Fwp-content%2Fuploads%2F2012%2F05%2Ficon17.png)
CodaがバージョンアップしてCoda 2に！発売日の5/24限定で半額！ | delaymania
5年ほど前に焼き鳥屋からWEBデザイナーにジョブチェンジした@delaymaniaです。 人気のあるMac用HTMLエディタ「Coda」が「Coda 2」にバージョンアップされます。 リリースされる5/24限定で、半額の4,000円になるそうです！ 以前から欲しいなと思ってたので、発売日にぽちります！ Coda 2 CodaはHTMLエディタです。AdobeのDreamweaverみたいなソフト。 Codaを知ったのがWEBクリエイターボックスのこの記事。 DreamweaverからCodaに変えました | Webクリエイターボックス この記事を読んで良さそうだなとは思ったものの購入しませんでした。 だって、Dreamweaverに不満がないから(^_^;) いまでもDreamweaver大好きで、あまり乗り換えるつもりはありません。 でも4000円なら買っておこうかなと思いました。
[Fireworks] HTMLコーディングに便利な、スライス画像のスニペットを書き出すFireworks拡張機能を作りました « きんくまデザイン
フォーマットはタブを切り替えることで、６つまで設定することが可能です。 例2) CSSを書いているときに、画像のwidth,heightを目視で調べて、 またエディタに戻って打ち込んで、、、という作業は続けているとすごく疲れます。 そんなときに、こんなフォーマットを書いておきます。 width:%wpx; height:%hpx; left:%xpx; top:%ypx; それで、またスライスを選択して、挿入ボタンを押すとこんなコードが吐き出されます。 width:99px; height:95px; left:47px; top:60px; あとは、挿入ボタンのとなりのクリップボードボタンを押して、クリップボードに転送して、 好きなエディタに戻ってコピペすれば楽ちんです。 フォーマットには好きな文字列をいれることが可能なので、案件や普段使っている書き方を 書いておくと良いと思います。 ま
せっかく購入したCodaをちゃんと使うために準備したものと覚えておきたいショートカットキー21個のメモ
去年MacBookAIRを購入してから、念願だったMac専用のwebオーサリングツール『Coda』をインストールしたんですが、 DWとの違いにかなり戸惑ってしまいあまり使いこなせていなかった霙（@xxmiz0rexx）です。 使い方さえ覚えてしまえばさらに快適なコーディングライフを送れると思うので、機会を作ってちゃんと覚えてみようと思い記事にしました。 プラグインを入れて快適に使う まずはCodaの環境を整えます。DWではpタグやhタグなどはショートカットキーで挿入していたので、 まったく同じキーではないにしても同じような事ができないかと思い探したところ、Zen-CodingのCoda版プラグインである『TEA for Coda | One Crayon 』を入れれば良いという結論に達しました。 このプラグインを入れておけば、例えばpタグやhタグ、strongタグなどを素早く挿入することが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CODING FACTORY - コーディング専門サービス
403 Forbidden
HTML・CSS・Sassのコーディング環境 2012 | Webデザインのタネ
SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript - 道すがら講堂
re-dzine.net situs togel online toto 2023 -
