Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス Flexbox セレクタ コーディング CSS

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) | コムテブログ

2014/01/27 895 users コーディング 一連 入稿データ コムテブログ フロー

前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ... 続きを読む

コーディング規約を作ろう | Webクリエイターボックス

2013/07/29 847 users コーディング規約 Webクリエイターボックス CSS 書式

コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チー... 続きを読む

「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2013/01/24 510 users KAYAC DESIGNER 秒速 オートリロード サツキ

平日は割りと仕事しているんですが、 さっきふとこんな技術相談を、エンジニアに投げてみました。 お題を投げてみた barimi ねえねえ、技術相談なんだけど、秒速で1億PV稼ぐサイト作るなら、技術的にどうする？ 私ならオートリロードとiframeだと思うんだけど。 taiyoh iframeで自分を開くようにするだけで、１回表示しただけで待ってれば相当数のPV数稼げそう。。。 （ブラウザがクラッシュ... 続きを読む

Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/11/27 567 users KAYAC DESIGNER Blog webサービス運営

ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日... 続きを読む

1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/11/12 1368 users KAYAC DESIGNER Paberish Blog

「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現... 続きを読む

ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開 － Publickey

2012/09/24 1519 users Publickey アドビ エントリ フォント 米アドビ

プログラミングやマークアップなど、コーディング作業のときにソースコードを表示する目的で開発されたフォント「Source Code Pro」を米アドビがオープンソースとして無料公開しました。24日（日本時間24日深夜）に開催された同社のイベントCreate the Webで発表されました。 同社のブログにポストされたエントリ「Announcing Source Code Pro « Typblogr... 続きを読む

ゼロからゲームアプリつくった後の大事なメモ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/08/24 625 users KAYAC DESIGNER ゲームアプリ Blog メモ

こんにちは、ゲームチームのキノです。 先週、カジュアルゲームアプリ「なぞダン -なぞるだけダンジョン-」がApp storeで公開されました！！！！ ひとさしゆびだけの超シンプルな（でもムズイ）ダンジョンゲームです！ 過去にキャンペーンの一環などでゲームは何度かつくってきましたが、 今回が初の企画段階からの参加になるので、学んだことや役立ったを書いておきます。 あとは地味にデザイナー向けにアプリ制... 続きを読む

23人のカヤック社員がおすすめする「つくるときに役立つ三種の神器」まとめ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/07/07 1233 users 神器 KAYAC DESIGNER ディレクター エンジニア

面白法人カヤックのイベントである「777☆カヤックフェスティバル」に向けて、 ディレクター、エンジニア、フロントエンジニア、デザイナー、 全職能のブログを、同じテーマの記事でつなぐ「777ブログウェイ」を実施していました。 24人のカヤック社員が、「つくるための3種の神器」をテーマに記事を書きました。 そのまとめ記事になります。 デザイナーまとめ 新しいPCに入れる基本ソフト3つ：Windows版... 続きを読む

縦や横に長いサイト「高級ペライチ」1度は見ておきたい超定番演出のまとめ32個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/06/19 1735 users KAYAC DESIGNER パララックス Blog 愛称

HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介... 続きを読む

インターネットでものづくりするときに役立つサイトまとめ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/06/04 984 users インスピレーション KAYAC DESIGNER 総会 興味

先日、東京学生広告研究団体連盟の総会にて、 「インターネットでつくる人を増やす」というテーマでお話させていただきました！ その時に紹介したサービスをまとめます。 この記事のターゲットは、インターネットでまだ作ったことがない人。 興味があってこれから始めよう！と思っている人向けです。 ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。 アイデア・インスピレーションをストックしよう まずは... 続きを読む

MdN Design Interactiveにて連載した「ゼロからはじめるHTML5でのサイト制作」全12回まとめ | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/05/30 963 users MdN Design Interactive Web制作

以前MdN Design Interactiveに連載させていただいた『HTML5でサイトをつくろう！ゼロからはじめるHTML5でのサイト制作』が12回で完結しました。 この連載ではHTML5でのマークアップが初めての方向けにHTML5で変更になった点や新要素の使い方、使い方がわかりにくいといわれていたsection要素やarticle要素の使い方、ブロックレベルやインラインの変わりとなるカテゴリ... 続きを読む

意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/02/28 815 users シンボル jsdo.it KAYAC DESIGNER 以下

Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボル... 続きを読む

ドット絵描く楽な方法見つけた！気がする | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/02/24 521 users KAYAC DESIGNER KAYAC 嶋田 Blog 余談

kayac 閃光部 クリエイターの嶋田より寄稿です。 「モンスターを集めてまいれ！」というiPhoneアプリを プロデュースしたんですが、イラストレーターのタスクが多く ドット絵を自分で描く事になりました。 初ドット絵だったので このノウハウ共有に何の意味も無いかもしれませんが きっと何処かに需要はある！と、思い込んで記事を書いております。 使用ソフトはPhotoshopです。 余談ですが バイト... 続きを読む

HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌

2012/02/06 724 users JSライブラリ phpspot開発日誌 turn.js

turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単で... 続きを読む

超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/02/01 908 users KAYAC DESIGNER jQueryプラグイン

超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing jquery.easing スマートフォン用フレームワーク jQuery Mobile jsdo.itでも何... 続きを読む

Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと. net

2012/01/21 1308 users net 備忘録 目的 タブ Webサイト

結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るように... 続きを読む

iOSとAndroidに最適化したJavaScriptフレームワーク「jQ.Mobi」登場。jQuery Mobileより小さくて高速 － Publickey

2012/01/17 711 users jQuery Publickey iOS jQ.Mobi 登場

iOSとAndroidに最適化したJavaScriptフレームワーク「jQ.Mobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jQ.Mobi」のβ版が公開されています。 jQ.Mobiのコンセプトは、jQueryとjQuery Mobil... 続きを読む

いままでまとめたHTML5の勉強をしたさいに作成したまとめ　～HTML5の新要素の説明からマークアップの基本まで～ | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2011/12/14 1655 users Webデザインクリップ 勉強 新要素 HTML5 説明

今回は僕がHTML5を勉強するにあたりもう一つのブログ「HTML5でサイトをつくろう」でまとめたページをまとめました。初めて作るならここからやるといいかなとおもったHTML5の新要素、コンテンツモデルやアウトラインについて、xhtmlとHTML5で同じフォーマットをマークアップして違いを比べたりしました。 現在WEB制作で仕事をしながら勉強している人やゼロからやってみようと思う人に仕様書を全部読む... 続きを読む

CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2011/12/13 500 users KAYAC DESIGNER クオリティー spec CSS

jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップし... 続きを読む

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ

2011/10/19 929 users アシアルブログ HTML5+CSS3 導入時 設定 鴨田

こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テ... 続きを読む

いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2011/09/15 2024 users KAYAC DESIGNER htm Blog 超入門 基礎

HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTM... 続きを読む

HTML5は難しくない!?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 | HTML5でサイトをつくろう

2011/09/05 966 users コーディング Category グーグル HTML エントリー

HTML5は難しくない!?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 Category : HTML5でサイトをつくろう | 2011年09月05日 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキー... 続きを読む

どう考えても無茶な「CSSプログラミング」が話題に | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/06/22 973 users カヤック KAYAC DESIGNER Blog 意匠部 無茶

CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます... 続きを読む

HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき） | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/05/31 633 users カヤック KAYAC DESIGNER Blog 意匠部

4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い... 続きを読む