タグ

htmlに関するyokochieのブックマーク (34)

  • Emacsでhtml書いてる人、必見 web-mode.el - Web学び

    2012年 10月 9日 出ましたよ!新しくhtmlに特化したEmacsのメジャーモード。 web-mode.el htmlにごちゃごちゃ書き過ぎるのはあれですが、html中のCSS,PHP,JavaScript,Java/JSP,ASPXを色分け出来きて、インデントを統一できるのは便利です。 PHPフレームワークのテンプレートなどに有用ですね。 良いなと思った機能 web-mode-toggle-folding "C-c C-f" HTMLタグを折り畳む機能です。カーソルの位置のタグ内が省略されアンダーラインでマークされます。戻すときも"C-c C-f"です。 web-mode-rename-element "C-c C-r" タグの開始タグと終了タグの名前を変えてくれます。 web-mode-match-tag "C-c C-n" タグの開始タグと終了タグにカーソルを持っていってくれま

    Emacsでhtml書いてる人、必見 web-mode.el - Web学び
  • kuroigamen.com

    This domain may be for sale!

  • 初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで

    Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。

  • HTML+CSSコーディングが10倍速くなるZen Coding

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 初めに こんにちは。R&D統括部 制作部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 今までZen Codingの基(マークアップ効率化 - zen-codingでコーディングを倍速に)、Zen Codingの応用(Zen-Codingの応用でもっと超速に- 原稿ありきの変換について)と二つの記事を書いてきましたが、今回もまたZen Codingについての記事となります。 Zen Codingしか知らないわけではないのですが......立て続けの内容ご容赦いただければと思います。 今回は今までの記事とは違って、11月26日(金)発売予定の「HTML+CSSコーディングが10倍速くなるZe

    HTML+CSSコーディングが10倍速くなるZen Coding
  • script, styleタグ内のコードの書き方 - os0x.blog

    # 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<!--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし

  • Firebugの使い方 | THE HAM MEDIA

    Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認

    Firebugの使い方 | THE HAM MEDIA
  • Zen-Codingの応用でもっと超速に - 原稿ありきの変換について

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R&D統括部 制作部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 前回の記事(マークアップ効率化 - zen-codingでコーディングを倍速に)ではZen-Codingの基について説明しました。 また、その内容をCSS Nite実行委員会(公式ページ)が主催した、Dreamweaver Town Meeting in TokyoというDreamweaverにフォーカスをあてたイベントで公演させていただきました。 [撮影:飯田昌之] その公演では、Zen-Codingを知らない方向けに、Zen-Codingとは何か・どんなことが出来るのかなど、基に関して実演を行い

    Zen-Codingの応用でもっと超速に - 原稿ありきの変換について
  • 直接お金は受け取れるの?

    キャッシングサービスとは、要するにお金を借りることで、最近はインターネットを活用して業者に融資申請をして、指定の銀行口座へ現金振り込みをしてもらえるという、大変便利なサービスを利用することができます。しかし、キャッシングをしているという事実を家族にばらしたくないという方も多いので、銀行口座への振込は履歴が残ってばれる可能性があるから、望ましくないと考える方も多くいます。そんな時には、キャッシング業者の店舗に足を運んで、直接受け取りの方法を選択することができます。キャッシング業者のほとんどが無人ATM機を導入していて、土日祝日関係なく、いつでも融資申請をすることができます。その場で所定の手続きを進め、審査に通過することができれば現金を手にすることができます。この方法だと、銀行口座を経由することなく、融資金を借り入れすることが可能となります。一度所定の手続きを踏めば、キャッシング専用のカードが

  • 「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏

    HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏 「HTML5の最大の問題は、優先順位を間違ったことだ。機能について議論する前に、セキュリティの扱いについて検討すべきだった」こう語るのは、JSONの発明者として知られ、Yahoo!のシニアJavaScriptアーキテクトでもあるDouglas Crockford氏。5月4日に行われたオライリーのWeb2.0 Expo 2010でのインタビューでのことです。 「もうそれを議論するには遅すぎるという人もいるが、そうは思わない。正しいことをするのに遅すぎることはないのだから」(Crockford氏) Crockford氏はHTML5は機能が重複しすぎていることも指摘しています。「Local StorageとLocal Databaseの両方が

    「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏
  • 日本 Haml の会

    Haml/Sass の普及を目的としたユーザグループです。Rails 勉強会@東京の分科会のような位置付けで活動しています。略称は日ハムです。 活動内容 Haml/Sass に関する情報交換 (Rails 勉強会@東京、または irc.freenode.net の #rails-tokyo チャンネル) 各種イベントにおける Haml/Sass の宣伝 オープンソースプロダクトに Haml 化パッチを投げる

  • Dreamweaver Town Meeting in Tokyoで公演してきました | kzms2 – html,css,javascript

    Dreamweaver Town Meeting in Tokyoって? 2010年5月29日、ベルサール新宿で行われたDreamweaverのパワーユーザー向けのイベントです。 Dreamweaverをこう使うと便利ですよ!とか基的なところから応用まで色々とお話がありました。 自分はこのイベントの7分間セッションの大喜利に出演してきました。 当日の様子はTogetter – まとめ「Dreamweaver Town Meeting in Tokyo」にまとめてあるようです。 詳細は続きから。 自分のセッションについて 自分は「Dreamweaver x Zen-coding」というセッションを行いました。 7分間に収めるというのが当に大変でした。。。 有料イベントということでスライドや動画はまだ公開されていません。 概要とか Zen-codingはDreamweaverの拡張機能

  • マークアップ効率化 - zen-codingでコーディングを倍速に

    HTMLの記法について 基的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ

    マークアップ効率化 - zen-codingでコーディングを倍速に
  • 知らない人は損してる?コーディングが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

  • MacでDreamweaverの変わりになるかもしれないフリーのHTMLエディタ 5本 : 構想雑文

    構想雑文 WEBデザインmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTMLCSSJavaScriptPHPのコーディングのことをあれこれ書いています。 Mac OS Xでウェブサイトを作りろうと考えると、最初からiLifeがインストールされている場合は「iWeb」を使ってウェブサイトを作る方法があります。 でも「iWeb」では、できることが限られています。 実際に「DreamweaverみたいにHTMLを書くことができるソフトウェアで、できれば個人が趣味で使うような場合は、無料で使えるソフトウェアはないですか?」という質問をされたので、リストアップしてみました。 Mac OS Xで使えそうはソフトは だいたい5くらいでしょうか? Kompozer http://www

    MacでDreamweaverの変わりになるかもしれないフリーのHTMLエディタ 5本 : 構想雑文
  • ページレイアウトに使えるCSSプロパティ

    はじめに 連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、ページレイアウトする際に、最低限おさえておきたい代表的なCSSプロパティとして、floatプロパティ、および、positionプロパティを中心に解説します。これらプロパティの使い方をマスターすれば、レイアウトの幅が広がるはずです。 対象読者 XHTMLCSSの基を理解している方。 Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。 必要な環境 クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。稿では、Web標準を比較的よくサポートしているFirefox、およびユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説しています

    ページレイアウトに使えるCSSプロパティ
  • HTML5, きちんと。

    HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 2009年のCSS Nite vol. 40で話したときのスライドです。Read less

    HTML5, きちんと。
  • css-lecture.com

  • HTML::Element と HTML::TreeBuilder で盆栽 - @kyanny's blog

    HTML::Element とか HTML::TreeBuilder で HTML 構文木をいじることを盆栽と呼ぶらしいですが、最近よく盆栽してていろいろ覚えたことがあるのでメモ。 as_HTML() で HTML エンティティに変換させない HTML::Element#as_HTML を呼ぶと HTML 文字列が返るのだけど、これを引数なしで呼ぶと "all unsafe characters" が HTML エンティティに変換(エンコード)される。これは普通あまり望ましくないので(変換などせずそのまま出して欲しいことのほうが多い)、それを回避するには my $html = $elem->as_HTML('');と、空文字列を渡してやる。 HTML::TreeBuilder のインスタンスに対して as_HTML() を呼ぶと タグをつけられてしまう これはサブクラスの HTML::Tr

    HTML::Element と HTML::TreeBuilder で盆栽 - @kyanny's blog
  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
  • ASCII.jpリファレンス

    サービス終了のお知らせ ASCII.jpリファレンスはサービスを終了しました。2009年のサービス開始以来、長きにわたりご利用いただき、ありがとうございました。 2017年10月5日 株式会社KADOKAWA Web Professional編集部