Jekyll • Simple, blog-aware, static sites
No more databases, comment moderation, or pesky updates to install—just your content. How Jekyll works → Static Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide → Blog-aware Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here. Migrate your blog →
AMP(Accelerated Mobile Pages) HTMLしてみたという話 / masuP.net
Googleさんが発表したモバイル端末での表示高速化のAMP HTMLに対応してみたよ、という話です。 Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web 概要などは上記見てもらえれば感じはつかめると思いますし、日本語で紹介してる記事だとKenichi Suzukiさんの紹介記事を見ると分かるかと思います。 なぜやってみようかと思ったかというと、「javascriptが無い静的なHTMLとCSSのページは爆速で表示したるで！」というGoogleさんの粋な計らいかと勘違いし、ほとんどが静的なページであるこのブログもサクーっと対応できたりするんじゃね、と思ったからですが、ちょっと苦労しました。 なおブログを完全に対応させたのではなく、記事ページのみ別にAMP HTML用の記事を出力してい
Trix: A rich text editor for everyday writing
A rich text editor for everyday writing. Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML. View on GitHub ❤️ Made by 37signals.
AjaxアプリケーションのSEOについて調べてみた | keisuke tsukayoshi
Backbone.jsやEmber.js、AngularJSなどの流行りのMVCフレームワークを用いたAjaxアプリケーションのSEOについて少ししらべてみました。SEOというかクローラー対策っぽいですが。ブログ的には始めての開発系の記事。 AjaxアプリケーションのSEO的な問題 そもそもどうしてAjaxアプリケーションがSEO的にやばいかというと、一旦空のHTMLを読み込んだあとJavaScriptを使ってクライアントサイドでコンテンツをレンダリングする仕組み上、Googleのクローラーのような特殊な環境だと内容を正常に読めないというのが現状らしい。というわけでこれを如何にして読み込ませるかが本件のゴールになります。 STEP1:Ajaxアプリであることをクローラーに伝える #!(ハッシュフラグメント)をURLにつける URLに#!(ハッシュフラグメント)が含まれているとクローラーはそ
まちづくりデザインなら包むデザイン｜地域の魅力を広げるデザイン事務所
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
Handlebars
Semantic templates Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache-compatible Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Fast execution Handlebars compiles templates into JavaScript functions. This makes th
PSDデザインカンプからのコーディングに超便利！Extract for Brackets
Bracketsがメジャーバージョンアップ 昨日、これまで小刻みなマイナーバージョンアップを繰り返し0.44までバージョンを重ねていたBracketsが1.0と、正式なバージョンアップを行いました。わーい！！確か私は0.14くらいから（2年近く経ってる？）使っているはずですが、開発には既に3年ほどかかっているそうです。 Brackets – A modern, open source code editor that understands web design. 今回はこれについてではなく（別途記事を書きます書きました→Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて）、この1.0と同時にリリースされたBrackets制作チーム肝いりの拡張機能、「Extarct for Brackets」の紹介をしたいと思います。これはまだまだ多いPSDカンプからのHTM
優れたWebサービスを作るために知っておきたい、UIを構成する5つの基礎的な要素 | Tokyo Otaku Mode Blog
悩み多きディレクターの皆様。 こんにちは。Tokyo Otaku Mode （以下TOM）ディレクターの青芝です。 Webサービスを考えるうえで、誰もが一度は頭を悩ませる UI （User Interface）。 User Interface（ユーザーインターフェイス）とは、ユーザーがWebサービスを利用するうえで直接操作する画面のことを指しますが、ひと言で「UI」と言っても、そこには文字や画像の見せ方、マウスのクリックや指のタッチに反応したときの動き、画面全体のレイアウトなど、さまざまな構成要素がかかわってきます。 それら一つひとつの性格や特徴を考慮し、しっかりと設計しておかなければ、使いやすいWebサービスを作ることはできません。今回は、WebサービスのUIを考える際に知っていると役立つ知識のなかから、基礎的な５つの要素を紹介していきます。 正しい文章構造について 人の感情を動かす色に
Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited
補足説明 セル内改行、セル結合には対応していません。 ※&、<、> 記号は、&、<、> に変換されます。
Bootsnipp
Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework What is this? Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft. Stay updated, Subscribe to Bootsnipp mailing list (only important updates will be sent, your email is never shared or sold to anyone else)
Convert Word Documents to Clean HTML
convert to clean html Remove empty paragraphs Convert <b> to <strong>, <i> to <em> Replace non-ascii with HTML entities Replace smart quotes with ascii equivalents Indent with tabs, not spaces Replace non-breaking spaces with ordinary spaces What is Word 2 Clean HTML?Word to Clean HTML is a free converter tool for documents produced by Microsoft Word and similar office software. Word to Clean HTML
Coherent Labs - Advanced Game UI Solutions
One Vision. Many Perspectives. Create stunning and high-performance game user interface based on the modern web technologies – HTML5, CSS3, JavaScript. Gameface lets you create a game user interface with the world's most popular UI system - HTML5. Write modern JavaScript and enjoy shorter development time and lower costs without creative limitations. Integrate it in a few days and start running yo
Project Parfait、公開！ | fenomas.com
デザイナーがPhotoshopでカンプを作る。そしてエンジニアに渡し、HTML化やアプリ化が始まる。だがカンプ通りのデザインを実現するためには、フォントサイズ、グラデーションのRGB値、オブジェクトの高さと幅、XY座標などを、Photoshopからコードに写す手作業が必要だ。まるでコピペ大会になる。 こんな経験ない？ あるあるの方に、ちょっと面白い発表がございます。Project Parfait （プロジェクトパフェ）は、PSDから簡単にデザインの詳細を取り出す目的のWebサービスである。ブラウザベースなので、Photoshopを開く必要すらない。 絵で言うと、こんな感じ。 触ってみたら大体伝わると思うが、軽く機能紹介をしたいと。 初め方 projectparfait.adobe.com を開く。 参考用のデザインが出て来るが、自分のPSDで試す方が面白いので手元にあれば… 「Upload
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Brackets - Web デザインを認識する最新のオープンソースコードエディター
JS Bin
CodePen - Front End Developer Playground & Code Editor in the Browser
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
BEITELとは - アウトラインエディタ BEITEL(バイト)