CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
フロントエンド開発にめっちゃ便利！CodePenライクな爆速Chrome拡張エディター
有名なライブラリーを読み込んだり、リアルタイムでプレビューしたり。サクッとコードを書いて確認できる「Web Maker」はオフラインで使えるCodePenライクな開発環境。フロントエンド開発者におすすめのChrome拡張です。 この記事では、筆者のKushagra Gourが自ら開発したWeb Makerについて紹介します。Web Makerはブラウザーの拡張機能で、フロントエンド開発者向けの爆速のオフライン開発環境です。 フロントエンド開発者なら、CodePen、JSBin、JSFiddleなど既存のコード開発環境を使ったことがあるでしょう。どれもすばらしいもので、必要な機能を備えています。私は主に、直面している問題を解決するときやスニペットについて仲間と議論するときに使っていました。しかし、インターネットを経由する必要があり、立ち上げて使えるようになるまでの遅れを避けられないことに、多
UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
１年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY
Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）
クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
2日間でWebサービスをリリースするまでにやったこと全て - No Web Service No Life
5/8に、最新のWebサービスやアプリの投稿サイト『Service Safari』を、友人と一緒にリリースしました。 海外に参考となるサービスがあり、これは便利！日本版も欲しい！と思ったのが開発のきっかけです。 元となるサービスがあったこともあり、つくりたい！と思ってから2日間でリリースすることができました。 今回は、着想からリリースまでにやった、以下の作業についてまとめてみたいと思います。 企画 UI設計 開発 リリース準備 事前マーケティング 体制 僕とエンジニアの2人体制です。 エンジニアは、学生時代からの付き合いの@eiei19で、全て一人で開発してくれました。 僕：企画、UI設計、マーケティング eiei19：開発 といった役割分担です。 企画 前述の通り、既に参考となるサービスがあったので、基本的には仕様も踏襲させていただきました。 今後の展開も考えて、データはこういう風に持っ
これで完璧！Webサービスの情報設計をカンタンにする設計用テンプレート完全版
はいこんにちは。最近なぜか風邪が治らないナカムラです。何食ったら健康になれるんでしょうか。誰か教えてください。 さて、サイトを作って！とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。 今回は日本ディレクション協会の人気講座「0からのWebディレクション講座：設計編」で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。 以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。 感動設計テンプレート＆講演資料 ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？ 高瀬さんいわく全てのWebサイト、サービスは「ユーザーを感動させるため」に存在しているし、そうあるべ
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！ それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
無料のスマホサイト作成ツール5個｜スマホ対応ホームページの作り方
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる なぜ、スマホ未対応のホームページは時代遅れなの？ その答えは非常にシンプル。 なぜなら、今が「ほとんどの人がPCではなくスマホでホームページを見ている時代」だからです。 この数字が何を表しているかご存知でしょうか？ スマホ： 83.4% パソコン： 69.1% これは、「総務省」が発表した2019年のIT機器の世帯保有率です。（詳しいデータはこちら） なんと、パソコンよりスマホを持つ人のほうがはるかに多いんですね！ こんな世の中ですから、よりたくさんの人にホームページを見てもらいたいなら、スマホサイト
フリーな1262種類のフラットアイコン「COSMO MINI」:phpspot開発日誌
Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons フリーな1262種類のフラットアイコン「COSMO MINI」 次のようなフラットアイコンが配布されていて、WEBの他、色々な場所で使えそうです 40x40サイズのPNG形式で配布されていて、ベクターではありませんが、十分使えそう。 関連エントリ フラットが美しすぎるアイコン24個セット 地図と共に使えそうな２００のフリーベクターアイコン集 シンプルで使えそうな５０のベクターアイコンセット 汎用で使えそうなフリーのアイコンフォント「Genericons」 ピクトグラムアイコンの検索に便利な「IconsDB」 iPhone用のアイコン３００個セット「ICON BEAST」 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
自社サイトをメディア化し、1年で100万PVにして分かった失敗と成功のまとめ。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGの代表、岩上です。 僕達は2012年1月からブログを本格的に書き始めて、自社サイトをメディア化するという事に力を注いできました。おかげさまで1年ちょっと運営して月間140万PVくらいの規模のサイトになってきたので、そろそろこれまで僕達がやってきた事の狙い、施策、効果などをまとめたいと思い、記事を書いてみました。 結論から言うと、「自社メディアを持つ」という事はマーケティングやブランディングの観点からとても効果的なのですが、大変な面も多々ありますので、我々の実体験を元にした本記事をお読みいただき、何かの参考になればいいなと思っています。 それではどうぞ。 ※読了目安、10分くらいです。 目次 LIGブログの規模と現状 メディア化とは 自社サイトをメディア化するメリット 運用コストについて 費用対効果について 記事を書く際に意識している事 失敗した事、大変だった事 今後の展開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ytbdken/Meeting-materials: 打ち合わせで使う用の資料。ヒアリングやアイデア出しなどのフォーマット。汎用性のあるものを目指します。
https://developers.google.com/web/tools/setup/workspace/setup-devtools
ソニック速報
ページ高速化のため .htaccess でキャッシュ設定を絶対やっておこう！
