簡単なのにかっこいい！ポートフォリオサイトが作成できる、HTMLベースのテンプレート -Dev Portfolio Template
自分の職歴や関わったプロジェクト、スキルなどをプレゼンするポートフォリオを0から作ろうとすると面倒かもしれません。ポートフォリオに必要なコンテンツをコンポーネント化し、追加や削除も簡単に行えるHTMLベースのテンプレートを紹介します。 Dev Portfolio Template -GitHub Dev Portfolio Templateの特徴 Dev Portfolio Templateのデモ Dev Portfolio Templateの特徴 Gulp対応 Sass対応 レスポンシブ対応 グリッドシステムはBootstrap カスタマイズも簡単 デザインは縦長ページで、ポートフォリオとしてうるさくない程度の気持ちいいインタラクションが備えられています。
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
iOSのブラウザで数字のみのキーボードを出す | 5000164 here.
iOSのブラウザにおいて数字のみのキーボードを出したいときがあります。 しかし、input type=”number”ってやっても数字以外のキーがでてきてしまう。 そうだ、input type=”tel”ってやれば数字のみになる、しかしセマンティックではない。 そこで、input type=”text” pattern=”\d*” HTML5からは入力文字をpatternで正規表現を利用して制御できるようになりました。 そこで入力可能文字を数字のみにするとiOSで数字のみのキーボードを出してくれるというものです。 賢いですね。 というわけで、実演 <input type="number"> <input type="tel"> <input type="text" pattern="\d*"> 以下、参考 少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボ
Safari @iPhoneで、meta viewportを動的に生成。いつでも横幅ピッタリに収める。
<!DOCTYPE html> <html> <head> <meta name="viewport" id="viewport" /> <script type="text/javascript"> ( function(){ var contentWidth = 700; var min_scale = Math.round( ( screen.width / contentWidth ) * 10000 , 5 ) / 10000; var max_scale = Math.round( ( screen.height / contentWidth ) * 10000 , 5 ) / 10000; document.getElementById( 'viewport' ).content = 'width=' + contentWidth + ' , ' + 'minimum-sca
Learn to code HTML, CSS, and JavaScript with Dash
You have been redirected to Dash because we've sunset Scratchpad. Read more. Learn to code awesome websites in HTML, CSS, and JavaScript Dash is a fun and free online course that teaches you the basics of web development through projects you can do in your browser. Start Learning HTML5 Learn the right way to code HTML, the building block of the web. Design beautifully modern sites and learn how to
HTMLメールのコーディング、デザインで気をつけるポイント ｜ MIFURU
01/18/2015 / Programming HTMLメールのコーディング、デザインで気をつけるポイント 先日、業務でHTMLメールのコーディングを行ったんだがこれがかなりのくせ者で知らない世界を見た気がした…笑 社長からは全部tableタグで書けばなんとかなるって言われたから参考になるサイト何個も見て進めたんだけど全くなんともならなかったので重要なところをまとめる。 まずは基本 【メーラーの依存】 HTMLメールはメーラーの性能によって全く違う崩れ方をする。 有名どころでいうと Outlook gmail Yahoo! mail Apple mail Thunderbird かな ブラウザ系はこれにIE Firefox chromeなどの依存も若干出てくるようだ。 【HTMLは避けよう】 先に書いたメーラーの問題でHTML5で書くとうまくいかないらしい。どうなるかは
SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ
Brick
What is Brick? Brick is a bundle of reusable UI components created to enable rapid development of HTML5 apps. Brick adds new HTML tags- allowing developers to express the structure of an application in a clearer, more concise manner. What are Web Components? Web Components is a series of emerging W3C standards that allow developers to define custom HTML elements, and interact with them using the n
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
Cactus for Mac - A better workflow for hand coding websites
There's a range of exciting tools available to make building websites more enjoyable and efficient. But they can be challenging to set up. Cactus integrates these, so you can build better websites, faster. Start in seconds Cactus makes setting up a website look easy. Choose a template for a blog, portfolio or single page and Cactus generates all files and folders to get you on your way. Focus on e
middlemanを使ったフロントエンド開発 - 病みつきエンジニアブログ
middlemanというものが、静的なサイト(html/css/jsだけのサイト)を作るのに、かなーり便利です (これを使って性的なサイトを作りました) 何が便利かというと 開発用サーバーになる テンプレートエンジン(erb) coffee scriptやscssなどを自動で変換 もちろんコンパイルもできる 画像の圧縮とかもできるみたい などなど。イメージとしては、Ruby on Railsから、ウェブアプリ的機能を抜いたものというか、 静的なサイト用の機能を抜き出したものというか、ざっくりとテンプレートエンジンみたいな感じ(正確にはSinatraと言ったほうがいいのだけど)。 ようするに、coffee scriptとかsass使うなら超便利よ！みたいな感じ。 静的なサイトを対象としているので、基本的にはRubyのプログラマーである必要はないです。 基本的には 404 Not Found
グーグル、レンダリングエンジン「Blink」からアドビ「CSS Regions」技術の削除を検討
何らかのメリットがあるアイデアに対してノーというのは容易ではない。既にイエスと言っていた場合にはなおさらだ。 しかし、GoogleはAdobe Systemsの技術に関してまさにこういった境地に立たされている。この技術は、「CSS Regions」と呼ばれる技術を用いることで、より洗練された、雑誌風のレイアウトをウェブパブリッシングにもたらすというものだ。「Google Chrome」の開発に携わるプログラマーEric Seidel氏によると、同技術は複雑すぎ、Googleの2014年における最優先事項の1つである、モバイル機器向けChromeの高速化を妨げるとの判断に達したため、その方針が変更されることになったという。 Adobeは何年も前からCSS Regionsに取り組んできており、「Adobe Flash Player」の持つ能力をネイティブなウェブ標準として再びよみがえらせるため
8design.
デザインで、無限につながる笑顔を作る デザインとはこの世に当たり前に存在しているものですが、 そのデザインによって人が安心な生活を過ごせたり 当たり前のことを当たり前に出来るということは それだけ生活や人に馴染めているということです。 8design.では、そんなみなさんの生活に寄り添ったデザインをご提案し 企画・制作・運用、そして使い手のみなさんが ハッピーな笑顔で繋がっていけるようなデザインを目指しています。 DesignerHacchi 東京都豊島区在住のデザイナー Webデザイン・紙媒体・動画媒体デザインなどをメインに、いろいろなデザインやらせていただいています。 苦手なジャンルデザインはとくになく、EC・コーポレート・システム管理画面デザインなど様々。 まずは一緒にお酒でも呑みましょう！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20160326pugbegin
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
http://responsiveemailpatterns.com/
HTML5 Boilerplate: The web’s most popular front-end template
WebStorm: The JavaScript and TypeScript IDE, by JetBrains
Create a new fiddle - JSFiddle
JS Bin
