軽量なマークアップ言語 Jade 入門 からの Gulp でコンパイルまで - Gulp で作る Web フロントエンド開発環境 #5 | PSYENCE:MEDIA
軽量なマークアップ言語 Jade 入門 からの Gulp でコンパイルまで - Gulp で作る Web フロントエンド開発環境 #5 wakamsha 2015.04.24 190 12187486 これまでずっと Rails での開発をしていたので軽量マークアップ言語に Slim を使っていましたが、Gulp 環境になっても同じような言語でマークアップしたいので Jade を導入してみたいと思います。 サンプルコードはこちらからどうぞ。 wakamsha/try_gulp Jade とは Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers. For bug reports, feature r
Flashだけじゃない！すごいWeb統合開発環境「FlashDevelop」 - Qiita
FlashDevelopのすすめ Q. FlashDevelopって何？ A. エディタだよ。統合開発環境(IDE)だよ。 ダウンロード http://www.flashdevelop.org/ FlashDevelopをすすめるわけ 軽い インストールや日本語化が簡単 部分一致による入力補完(diobcと入力するとDisplayObjectContainerが補完されるみたいなの) そして… FlashDevelopがサポートしてる言語は以下の通り ブラウザ系 HTML CSS,SCSS,LESS,HSS JavaScript,TypeScript,Haxe ActionScript2,ActionScript3,Haxe サーバーサイド PHP Python Haxe その他いろいろ C++ C# Loom 各言語のサポート状況 AS3 シンタックスハイライトと高度な入力補完 強力なリ
Vertical Timeline | Codrops
A responsive vertical timeline layout with icons and example media queries. This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list. The HTML <ul class="cbp_tmtimeline"> <li> <ti
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
論理的なHTML（文書構造）を意識してつくるWebデザイン（CSS）… とSEO
デザインが先にあって XHTML を書こうとすると、論理的な文章構造殻から見たときにおかしなことになることがあります。 コーディングに慣れないうちはこういう失敗もよくありますねー。 正しい文章構造でマークアップをすれば SEO的にもいいかもしれません。 今更なんですけど、Webサイトって XHTML で書かれていて、スタイルシートで装飾されていますよね。Webデザイナーから見ると、Webサイトってとかく見た目、デザインの部分、スタイルシートばかりに目がいきがちですが、Webサイトで大事な部分ってXHTMLの文章の論理構造だったりします。まずは XHTML があっての Webサイトだと思うんです。 Webサイトを作るときに、多くの Webデザイナーさんがそうしてると思いますが、私もまず Photoshop や Fireworks をつかって Webサイトのデザインを作ります（みんな違うのかな
HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」
デザインが施された内容のメールは、通常のメールよりも目を惹き、内容への注目度を高めてくれる効果があると思います。そこで今回紹介するのは、HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」です。 （100+ free HTML email templates | Campaign Monitor） さまざまなテイストのテンプレートが多数収録されており、好みや目的に合わせて使い分けることができそうです。中でも気になったタイプのテンプレートをピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■HTML Email Templates | MailChimp HTMLメールのレイアウトを多数収録した便利なテンプレート。内容によって組み合わせができるのが魅力ですね。 ■100+ free HTML email templates
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
Less Framework
An adaptive CSS grid system. What It Is Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Default Layout 10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
【ケータイ】tableタグを使って表現力アップ！（初心者向け）
こんにちは。カヤックで携帯サイトのコーディング、運用などをやっているフィリップです。 携帯コーディングでtableを使うと、ページ構成の表現度が結構広がりますので、今回は事例を使って、その基本的な使い方や落とし穴を紹介したいと思います。 tableタグは新しい機種では問題なく使えますが、古い機種の場合では効かないこともあるので、今回は以下の端末を対象とします。また3キャリア向けにxhtmlは1ソースにしています。 【docomo 902以降端末、au WIN端末、softbank 3G端末】 注意：tableの入れ子をすると、表示されない場合があるので（au端末の一部）、tableの入れ子は避けた方がよいでしょう。 【事例1】メニューなどのテキストを綺麗に並べたい時 画面のスクリーンショット html <table width="100%"> <tr> <td width="50%"> <
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
HTML 4.01 Specification (ja)
正規の規定はW3Cサイトにある英語版であり、この日本語版は参考にすぎません。 邦訳の過程で気づいた原規定の誤りについては原著者に報告し、明らかなタイプミス等についてはerrataに掲載される前であっても修正した訳を掲げる場合があります。 この文書には、翻訳上の誤りがあり得ます。当委員会は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。 原著作権をW3Cが保有し、二次著作権をHTML 4仕様書邦訳計画補完委員会が保有します。 HTML 4.01仕様書 1999年12月24日付W3C勧告 この版の原書: http://www.w3.org/TR/1999/REC-html401-19991224 (プレーンテキストファイル [794Kb]、HTMLファイルのtar.gzアーカイブ [371Kb]、HTMLファイルのzipアーカイブ [405Kb]、gzipしたPostScri
誰でも作れる！ “崩れない”HTMLメルマガ作成術（1/4）- ＠IT
誰でも作れる！ “崩れない”HTMLメルマガ作成術：一撃デザインの種明かし（12）（1/4 ページ） キレイなHTMLメールを作るコツ/Tips盛りだくさん！ ECサイトはもちろん、企業サイトのニュースなど、いまなおプッシュ型の情報配信として支持されるメールマガジン。一時のフィードリーダーの盛り上がりもあり、以前に比べると落ち着きましたが、まだまだメールマガジンの効果は侮れません。 今回は、そんなメールマガジンの中でも、表現力豊かなHTMLメルマガの作り方について、徹底解説します！ 「HTML」自体は、それほど難しくないが…… 「HTML」というマークアップ言語自体はプログラム言語に比べると手が出しやすいので、Webを仕事としていない方でも触れた経験をお持ちの方はいらっしゃるのではないでしょうか？ そういう人にとっては、HTML言語自体はそれほど難しくないと思います。 しかし、そのHTML
rockf.es blog » JavaScript でメーラーを作る
送信機能だけの簡単なメーラーをJavaScriptで実装しました。 手持ちのGmailアカウントで送信できたので公開します。 開発/動作環境 Windows XP Home Edition SP3 Internet Explorer 8 テキストエディタ 使用する技術 HTML JavaScript CSS Windows 独自の機能もつかいます。 HTA*1 WSH CDO FSO データの保存にはJSONを使いました。 mail.hta <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>mail.hta</title> <hta:application
Adobe - デベロッパーセンター : 将来を見据えた、新たなHTML内SWF埋め込み用コードの考察
酒井 克幸氏 Resolutions LLC この記事は、Spark projectが主催する勉強会での講演内容を、講演者とSpark projectの協力のもと、Adobe Developer Connection用に再構成したものです。Spark projectの勉強会は、毎月開催されています。詳しくは、「Spark project 勉強会」のページまで。 作成日:2008年8月19日 ユーザレベル:すべて 製品:Flash CS3 レガシーコードでは、SWFが表示できなくなる!? みなさん、HTMLファイル内にSWFファイルを埋め込む際にどのようなコードを記述していますか？ おそらく、多くの方が、Flashオーサリングツールでパブリッシュした時に書き出される以下のようなコード（レガシーコード）を使っていると思います。 <object classid="clsid:D27CDB6E-
プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
『Fluid』とHTMLファイルだけでメニューバーに簡単にスクラッチパッドを追加する方法 | ライフハッカー・ジャパン
Mac OS X に、メニューバーに簡単にアクセスできるスクラッチパッドを追加する方法がありました。必要なのは、Webアプリをデスクトップアプリのようにするフリーウェア『Fluid』と、お好きなテキストエディタのみです。 やり方を説明する前に以下のレクチャービデオを見ていきましょう。英語が理解できなくても、何となくの流れは掴めると思います。 まず最初に、以下のHTMLファイルを作成します。もしくはこちらからダウンロードしてください。 <html> <head> <title>notebox</title> </head> <body> <form> <textarea name="notebox" cols="43" rows="30"></textarea> </form> </body> </html> スクラッチパッドのテキストエリアのサイズはデフォルトのままでももちろんいいですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウノウラボ by Zynga Japan: I love spacer