「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ
免責事項 当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトの情報によるいかなる損失に関して、免責とさせて頂きます。ご利用の際はあらかじめご了承ください。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。予めご了承下さい。
ログインをもっと快適に オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」
ログインをもっと快適に オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」 会員登録ページや管理画面へのアクセスに使用するログインページ。シンプルなものが一般的ですが、こだわりを見せることでサイトのクオリティは高まります。今回はそんな時に参考にしたい、オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」を紹介したいと思います。 Sign in 10種類の、それぞれ個性をもったログインフォームがピックアップされています。 詳しくは以下 Login Form ログインフィールドにドロップシャドウがかかった、フォームやボタンのエッジが丸い、柔らかい印象のフォーム。フラットテイストなトレンド感を感じさせるデザインですね。
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
HTML5 Canvasで角丸四角を描いて、グラーデーションで塗り潰してみた
Canvasでチャートを作成していた時に、背景やらグラフの帯やらで角丸四角をたくさん描画する必要があったので、共通化して１つの関数にまとめましたので紹介していきます。 サンプル 作ろうとしているものがこちらになります。 「サイズ」「色」等のパラメータを変更すると、角丸四角が生成されるので試してみてください。 これより、このサンプルの実装方法について紹介していきます。 各種ファイルを準備 以下のようにファイルを準備します。 ┣ index.html ┗ js ┗ main.js index.htmlの記述 index.htmlは以下のように記述しておきます。 【index.html】 <html> <head> <meta charset="utf-8"> <script src="js/main.js"></script> </head> <body> <div> <canvas id="
お問い合わせ、支払い、サインアップなど、フォームを実装するためのHTMLとCSSのテンプレート -Boilerform
フォームを実装するのが苦手、という人は少なくないと思います。 お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。 Boilerform Boilerform -GitHub Boilerformのデモ Boilerformの使い方 Boilerformのデモ デモではフォームに利用するさまざまな要素のパターン、それらを組み合わせて実装されたお問い合わせや支払いフォームを確認できます。 まずは、フォームのパターン ライブラリから。 「Input Field」では、サイズ、プレースホルダー、バリデーションのステータスのさまざまなバリエーションを持つ一般的な入力フィールドが揃っています。ユーザーがデータをできるだけ効率的に入力するのに役立つ属性が追加されています。
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
手を動かして学習しよう！コードチャレンジ HTML/CSS 初級編
2020年2月13日 CSS, HTML, Webサイト制作 Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、本を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。 ↑私が10年以上利用している会計ソフト！ コードチャレンジの進め方 私が教える際によく使うツールはCodePen。実際に書いたコードがその場で表示されるので、生徒側も「これを書いたらこう変化する」というのが実感しやすいようです。 この記事に埋め込まれているCodePenの画面の右上「EDIT ON CODEPEN」をクリックすると
Create a New Pen
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
