CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
これ知ってる？WEBの人なら押さえておきたいツール＆サービス50選 - 死ぬまでWEB屋
公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得
Web界隈で最近気になるWebサービスとか集めてみた【2016年7月版】 - Brian'z Imagination
2016年もいよいよ下半期突入。 歳を取るごとに1年が過ぎるスピードがますます加速するように感じるけれど、全然悲観的じゃない。むしろ毎日新しくて新鮮なことが向こうからどんどん飛び込んできて、毎日エキサイティングだ。 そんなわけで、今回も先月に引き続き最近気になるWebサービスやアプリケーションなどを紹介していきたい。前回は海外サイトを中心に紹介したけれど、今回は海外編・国内編と2本立てで紹介していく。ほとんどのサービスは無料だけれど、とんでもなく便利なものも多いので、きっとあなたの役に立つはずだ。 ちなみに前回の6月版の記事はこちら。 海外編 Real Time Users Real Time Usersは、1分(60秒)以内にサイトを閲覧しているひとの数を表示するカウンターのjavascriptプラグインだ。CSSで表示部分をカスタマイズすることができる。数行のコードではてなブログにも設
1977年に起業した74歳のオトンに、どんなキャリア人生を歩んできたか息子がインタビューした（後編）｜税金の基礎知識｜経営ハッカー
実家に帰省した際に、40年間一つの会社を経営し続けてきたオトンに「仕事人生を振り返るインタビュー」をさせてもらった前回からの続きです。 どうでもいいですが、写真の奥に立っているのは専業主婦歴46年のオカンです。＠実家の食卓 どんな注文でも「できます。やります」とハッタリをかまし続けたオトン ――ひょんなことって、なにが起きたの？ たまたま飛び込んだ建築会社で、なぜか”事務用品業者”に間違われて、応接室に通されたんだ ――相手が勝手に勘違いしてくれた、と 話をしているうちに、お互い”なんか違うぞ”って気づいて、そこでマンション管理の会社だと説明したんだ ――ふんふん そしたら、会計管理のサービスには興味を示してくれなかった代わりに、”消防設備の法定検査とか、排水管の清掃はやってくれないの？”って訊かれたわけ ――会計サービスを売りにしているんだから、”頼む相手が違う”と答えることもできたけど
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
ど素人でもプロ並みのチラシが作れてしまう…「Picky-Pics」がデザイナー殺しな件｜まだ仮想通貨持ってないの？
これはいいサービス！助かりますねー。 Picky-Pics（ピッキーピックス） チラシを簡単に作れてしまう 「Picky-Pics（ピッキーピックス）」はチラシや名刺をウェブ上でサクサク作れるウェブサービス。これさえあれば、Photoshopは要りません。デザインセンスも要りません。すばらしい！ 使い方は簡単。作りたい資料を選択して、デザインを選びます。 すると編集画面に移動します。あとは文字や背景を加工していくだけ。 素材は5万点近く用意されているそうです。 直感的に素材を追加できます。 各素材はドラッグすると移動します。簡単！ 編集画面の使い勝手もすばらしく、ピクセル数を合わせやすいガイド機能が実装されています。 フォントも豊富！これは嬉しいですねー。 出力は3パターン。ウェブページにもできるというのは嬉しいですね。 有料素材を使っている場合は、出力にあたって費用が発生します。この値段
さらばPhotoshop！ かわりになるフリー画像エディタ5選
さらばPhotoshop！ かわりになるフリー画像エディタ5選2014.06.29 12:0033,326 scheme_a これでアドビの魔の手ともオサラバ？ Photoshopという言葉は、最早｢画像を加工する｣行為と同義語であると言えます。そんな多大な影響力を持つPhotoshopですが、現在最新のヴァージョンを利用するには、毎月980円払う必要があります。それで稼ぐプロならまだしも、アマチュアの懐には少々痛い。でも、ネットにはPhotoshopの替わりとなり得るフリーの画像エディタが無数に存在します。今回は、その中でも特に使えるものをピックアップしてみました。 どうせサブスクリプションを購入するなら、NetflixやSpotifyなどのサーヴィスにお金を使いたい（あとは食費とか）という方のための、厳選されたリストをどうぞ！ Adobe Photoshop Express Photo
ブラウザにやさしいHTML/CSS
Takeharu IgariLei Hau'oli Co., Ltd. ー CTO at Lei Hau'oli Co.,Ltd.
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
BRUTUSの丁寧な仕事っぷりに、一部のWEB編集者の体たらくを嘆きたくなった : 焼きそば生活
BRUTUS最新号「小津の入り口。」にやられた。 今年生誕110週年を迎える、名映画監督、小津安二郎の特集号。 BRUTUSの特集は、「年間の流れ」を意識して作られるらしいが、こういうたま～にピンポイントな特集を持ってくるセンスが小憎らしい。 冒頭は両親が小津監督と家族ぐるみのつきあいだったという、俳優・中井貴一の文章から始まる。 病床の小津監督と、まだ幼い彼が一緒に写ったポートレートは、監督の生前最後の写真として知られているとか。 中井貴一の話から、小津監督がいかに「粋」な人物であるかが伝わってくる。 そしてそこからBRUTUSは監督の世界観に包まれていく。 現代のテレビドラマに脈々と受け継がれる小津イズムを見出してみたり、 監督の代名詞「ローアングル」を写真家ホンマタカシが再現するなかで、いかに監督が「美」を意識した撮り方をしていたかということを解き明かしてみたり、 映画に出てくる「食
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イマドキのコーダー環境構築2016
まるで辞書!探したいWordPressおすすめプラグインがすぐに見つかるページ【厳選39個】
2015年のWebサイトの作り方 at 67ws
800枚以上の無料写真をカテゴリー別にダウンロードできるサイトPexels - Photoshop VIP
お前自分ちのページャUIが本当に速いと思ってんの？
