Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204…

なんでもネイティブアプリのUIデザインが1080x1920pxだからと。 えーまじで、と。iPhone6+なら1242x2208pxでないの?と。 Webでそんな数字聞いた事ないんだけど今ってどうなの?と思ってググってみたんだけども iPhone/iPad解像度(画面サイズ)早見表 デザインアセットをiPhone6に対応するワークフロー iPhone6の時代のviewport設定について やっぱりWebだと1080なんてのはないなあと思い知らされた。 とはいえ時間もないし強引にやってみることにした。 デザインをみたら画像しかなかったので、1080x1920pxの等倍で画像切り出したりマークアップしたりして普通にサイト作った後に、CSSとJSで拡大縮小のおまじないかけて強制的に画面にフィットさせるという古典的手法を取った。 iPhoneを含めて大体の最新端末にはviewportを操作すれば何
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード(カーソルキー以外)だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での
作成:2016/01/4 更新:2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
フロントエンドエンジニアとして生きていくための戦略 @cssradar Frontend Weekly | Facebook リッチメディア アイディアと情熱で夢を叶える コラボレーション メンテナンスは欠かせない要素。 HTML CSS JavaScriptは言語の仕様的にもメンテしやすい言語ではない。 Learnablity(専門的な知識がなくても書けてしまう手軽さ) シンプルさと寛容さが重要。 メンテナンス性ではなくどのようにコラボレーションをするかが重要。 問題は人と人の間にある。 code style guideline 最終的に一人の人間がコードを書いたように見えるべき。 Rick Waldron (あまり新しいものではない) rwaldron/idiomatic.js · GitHub airbnb/javascript · GitHub CSS Guidelines (2.
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日(日本語版は11月2日)にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ(親要素 > 子要素 ) 隣接セレクタ(要素1 + 要素2) 間接セレクタ(要素1 ~ 要素2) 属性セレクタ([属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]) a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 や、や、やっとリリースされましたぁぁ〜〜!!! 長かった。いやぁなんか長かった。。。 と、言うわけで今回、UI設計、フロントエンド全般 その他etc…を担当させて頂いたプロジェクト 「連撃のブレイブハーツ」がついにリリースされたのです!!! パチパチパチぃ!! 「連撃のブレイブハーツ」 詳細 http://prtimes.jp/main/html/rd/p/000000014.000006973.html ダウンロードページ https://itunes.apple.com/jp/app/id665019202?mt=8 今回のゲームの内容は、擬人化した女の子を仲間と連携して鎧を剥いで行く。 と、なんともグレーなところを進んでいるゲームなんですがw UI制作に関しても色々
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Any non-trivial site or application on the Web today will contain a large amount of HTML, CSS, and JavaScript. As the use of the Internet evolves and our dependence on it increases, having a plan for organizing and maintaining your front-end code is an absolute must. In today’s large Web companies, an increasing number of people are touching an increasingly large percentage of the front-end code.
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 週一でメールマガジンを配信するニュースレターサイトをよく見かけるようになったのでいくつか登録してみました。その週のダイジェスト的な内容なので割と分かりやすいし、毎日見る必要が無いので色々楽です。 中にはアレな内容の事もありますけど最近はほとんどWebを見ないので週一で大まかな出来事が分かるメルマガがちょっと助かってます。ふと思ったときに探したら結構あったので備忘録として。それぞれアーカイブもあるので中身をチェックしてから登録するかしないかを決められます。 HTML5 Weekly HTML5やWebGLなどの話題を中心に扱うメルマガ。 HTML5 Weekly JavaScript Weekly JSのメルマガです。Yahoo! YSlowを作ったスティーブ氏もオス
スマートフォン(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
2012年12月15日(土) 、ベルサール神田で開催したCSS Nite LP25(Shift 6)のすべてのセッションのフォローアップ(スライド、音声)を公開しました。 (1)『基調講演:未来をプロトタイプしよう』(長谷川 恭久さん) (2)『2013年に向けて押さえておきたいマークアップ・トレンド20』(益子 貴寛さん、小山田 晃浩さん) (3)『CodeGrid総集編2012「2012年の必読記事&2013年の注目記事」』(中村 享介さん、山田 順久さん、外村 奈津子さん) (4)『アクセシビリティ:AccSellポッドキャストLIVE収録』(植木 真さん、中根 雅文さん、山本 和泉さん) (5)『ツールと制作環境、電子書籍2012-2013』(鷹野 雅弘) (6)『ソーシャルメディア:2012年のトピック振り返りと2013年に向けた活用の押さえどころ』(大月 茂樹さん、井出 一誠さ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Coding style is how your code looks and it is an important part of writing code as a professional. Whether you’re writing JavaScript or CSS or any other language, deciding how your code should look is an important part of overall code quality. When I was studying computer science in college, I had one extremely tough professor. His name was Dr. Maxey and he taught the more complicated courses like
A well-functioning pattern library is a powerful resource that you and your entire team can use to efficiently create consistent user experiences for your website or service. Kris Niles outlines how you can use Evernote and Fireworks to easily build your own pattern library and reap the benefits of it. A well-functioning pattern library is a beautiful thing. It is a powerful resource that you and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く