タグ

codingとhtmlに関するsigのブックマーク (9)

  • HTMLファイルをアップロードすると、使われているclassやidを取り出してcssの雛形にしてくれるWebサービス・Bear CSS - かちびと.net

    日曜日です。如何お過ごしでしょうか。 さて、今日も軽い話題・・HTMLファイル を送信するとそのページで利用している classやidを抽出、cssの雛形としてDL 出来るようにするWebサービスです。 用途が思い浮かばない・・と、思ったんですけど、良く考えたらリニューアル案件なんかで地味に便利かも。

    HTMLファイルをアップロードすると、使われているclassやidを取り出してcssの雛形にしてくれるWebサービス・Bear CSS - かちびと.net
  • [iPad] dPad HTML Editor: Flickr/Twitter/YouTubeと連携して、タグがすばやく挿入できるブログエディタ。3451 | AppBank

    dPad HTML EditorはFlickr/Twitter/YouTubeから写真・ツイート・動画、あるいはリンクをすばやく挿入できるブログエディタです。 例えばYouTubeの動画をブログ記事に追加したい時は、YouTubeにアクセスして目的の動画を表示。あとはボタンを1回タップするだけで記事にタグが挿入されます! 最終的に文章はすべてコピーされるので、内蔵のブラウザでブログの管理画面にアクセスし、記事の作成画面にペーストすることで記事が投稿できます。ですのでFlashを利用するものでない限り、ほとんどのブログに対応していると言えます。 <h1>タグや<a>タグなどのHTMLタグも挟みたい文章を選んでボタン1つで挿入できるので、HTMLを書くためのエディタとしても使えますね! 詳しくご紹介します。 3ステップでHTMLタグが挿入できる 中央に表示されている「HTML」をタップすると、

  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

  • 【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次

  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • ブログ – H2O space

    Webサイトを制作する際、パーツ類に使う色を決める必要があります。色の選択は、ユーザーの印象を大きく左右するため、慎重に行うことが重要です。特におすすめなのが、「ベースカラー」「アクセントカラー」「サブカラー」という3つ […]

    ブログ – H2O space
  • CodaにZen-Codingを入れてみると… | gaspanik weblog

    前回、前々回とTextMateをベースにZen-Codingの話をしたわけですが、一番最初にも書いたようにTextMateは日語の処理がうまくないので、導入したくても導入できない方も多いかもしれません。 でも、Zen-CodingをTextMate以外で使おうとするとグッと選択肢が減ります。Mac使いの皆さんがお使いのエディタといえば、CodaやskEdit、miあたりが有名どころです。良かった!Codaならコマンドの違いはありますが、その恩恵にあずかれますよ(笑)。 (追記)Zen-CodingのDreamweaver用のMXP(ダウンロードはこの辺で)でも、以下の操作と同じショートカットで略語や構造の展開はできるみたいです。 Codaでやるなら「TEA for Coda」をインストール 前々回のエントリーにも書いておきましたが、現在Coda用のプラグインは「TEA for Coda」

    CodaにZen-Codingを入れてみると… | gaspanik weblog
  • Zen-Codingでできるあんなことこんなこと | gaspanik weblog

    先日超速コーディング?としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします(どちらかと言えば、こっちが当のZen-Codingなんでしょう)。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…(はず 笑)。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text

    Zen-Codingでできるあんなことこんなこと | gaspanik weblog
  • TextMate+Zen-Codingで超速コーディング? | gaspanik weblog

    先日の100の質問の答えにもちょっと書いたのですが、世の中には「Zen-Coding」なるものが存在しています。ちょっと前にWebデザイン関係の皆さんのTwitterでも「すげえ」とかってビデオが流れてましたけど、実はこれ相当前からあるんですよ(笑)。 Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます(*1)。 というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁど

    TextMate+Zen-Codingで超速コーディング? | gaspanik weblog
  • 1