VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に マイクロソフトは、コードエディタのVisual Studio Code（以下VS Code）とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。 Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Mic
この記事は移行しました！最新の内容はこちらをご覧ください😀 API開発時にPOSTでメソッド渡さなければいけなくてその度にHTML書いて送信して〜ってのをやってたのですが、 いい加減毎回作るの面倒なので汎用的なのを作りました！ 画面こんな感じ ポイント！ APIのURLが書き換えられる Methodも切り替えできる パラメータ名と値が書き換えられる パラメータが足りなければ add で追加できる パラメータは [] で配列にも対応 ソース <html> <head> </head> <body> <h1>JSONでデータを送信する</h1> <p>Url: <input type="text" id="url" name="url" size="100" value="https://example.com/api/hoge"></p> <p>Method: <input type="t
ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr
プロローグ 先日にあった、あるサイトの更新の話 クライアント：「期間限定キャンペーンの部分、もういらないから消してください」 私：（消すのはいいけど、絶対にまた同じ様なキャンペーン内容を表示させるよな...） 問題：非表示にする最適解は？ クライアントは「消せ」というが、サイト管理者として完全に消したくない場合に（該当部を非表示で留めておきたい場合に）、どの手段を取るのが最適か？ なお、htmlファイル単体で更新を行うものとします。 選択肢 A）該当部にstyle="display:none"を追加 B）該当部にstyle="visibility:hidden"を追加 C）該当部をコメントアウト <!-- --> 上記はいずれもコンテンツを見た目上では非表示にすることができます（ソースコード上には残っています） 検討 参考サイト１） display:none と visibility:hi
WYSIWYGのエディタSummernoteではファイルアップロード機能を実装できる Data URI schemeとFile Upload Bootstrap3でデザインされたWYSIWYGのエディタSummernoteに画像アップロード機能を実装する。 SummernoteをCakePHPで利用する SummernoteにはデフォルトでData URI schemeで画像ファイルをエディタに貼り付けることが可能。実際に画像を貼り付けて、HTMLのソースコードを確認してみたのが下の画像の状態になる。 Data URI schemeの方法を用いると画像をサーバ側にアップロードすることなく、画像をすべてエンコードしてテキスト状態にして貼り付けるため、画像を参照するためのHTTPリクエストが発生しないというメリットがある。 File Upload方式にて画像を管理したい場合には、Summern
「xxxxx…」はBase64化されたデータの文字列を示しています。 上記の例はPNG画像の場合ですが、JPEGを埋め込む場合は「data:image/png」の部分を「data:image/jpeg」としてください。 ※書式について、「png;base64」の部分の記述について「;」が「:」になっているミスがありましたので修正しました。ご指摘いただいたAC様、ありがとうございます。 Base64への変換 Macの場合はデスクトップにエンコードしたい画像を保存し、「ターミナル」で以下のコマンドを実行すればOKです（hoge.pngは任意のファイル名）。かなり長い文字列が生成されるはずですので、まるまるコピーします。 とはいえ、個人的にはコマンドラインに少々拒絶感があるのでさらに調べてみると、ChromeのDeveloper Toolsを使ってカンタンにエンコードできることがわかりました。
この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter
最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。 ソーシャルログインとは？ ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログイ
表中のテキストの揃えの基本 まずデザインを見ていく前に、表中のテキストの一般的なルールをおさらいしたいと思います。 何気なく作成してた人はここを見直すだけでグンと見やすい表に変わりますよ 内容によっては変える必要もありますが、基本はこの3点です。 また、タイトルや、強調する値などは、太文字にしたり背景に色を入れたりと、他と差別化する事で見やすい表になります。 綺麗で見やすい表のデザインいろいろ それでは早速表のデザインを見ていきましょう！ なお、今回はプラン表をイメージし、見出しが縦と横に入っているパターンの表をベースで作成しています。 それに合わせ、レスポンシブ時ではdata-labelの値をcontent:attr()で取得し、表示させる方法で実装しています。 また基本的に比較表以外のパターンは全てhtml共通(行を増やしているものはありますが)にし、CSSのみ変えています。 <tab
![レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS] | SEO対策なら株式会社ペコプラ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b67cceed1a4a3323357c90e6d43ed0caddd0c93f/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fpecopla.net%2Fwp-content%2Fuploads%2F2019%2F04%2Ftable-design_main.jpg)
この方針により、次のようなことができるようになります。 いつでも安全にリリースできるベースラインが欲しい。 trunkはいつでも安全にリリース可能。 作業中に緊急バグ対応など割り込み作業に対応したい。 branches/xxxに開発中ソースコードを格納して、新たにbranches/yyyを分岐することで安全に切り替えることができる。 作業中ソースコードを複数チームでキャッチボールしたい。 業務チームで開発 -> 品質管理チームでレビュー -> 構成管理チームでマージ -> ビルドチームでリリース、といったキャッチボール。 branches/xxxに開発中ソースコードを格納して、各チームで共有することができる。 作業完了まで自PCの中にしかソースコードがないのはツライので、作業中でもコミットしたい。 branches/xxxに頻繁にコミットしても良い。 次に、これらのフォルダの運用手順を説明
<input type="file" name="example" accept="image/jpeg, image/png">
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>WYSIWYGエディターサンプル</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link href="http://netdna.bo
CSS HTML Web デザイン スマホ対応サイトのデザインを、クライアントに確認してもらう際に使えるiPhone画面をイメージしたHTMLモックアップをダウンロードできます。 レスポンシブWebデザインも主流になり、Webサイトのスマホ対応が急速に進んでいる昨今、クライアントや代理店などに画像ベースでスマホ版のデザインを確認してもらう機会も多いと思います。 スマホサイトというからには実機で確認してもらうことがベストだとは思いますが、忙しいクライアントにサッと見てもらいたい場合などに便利なHTMLをダウンロードできるようにしました。 JPEGやPNGの画像を1枚ペタッと貼付ければ、iPhoneでの表示イメージを確認することができます。使えそうでしたらご自由にご利用ください。 Windows/MacのChrome39、Firefox35、WindowsのIE7〜11、MacのSafari6
Aceとは ブラウザ上で使えるJavaScript製のテキストエディタです。貧弱なテキストエリアの代替として使うと便利です。特徴として、 100言語以上のシンタックスハイライト Sublime風、Chrome DevTools風など、自由に選べる多数のテーマ マルチカーソル リアルタイム構文チェック などなど、スタンドアロンのエディタと比べても決して引けをとらない高機能なエディタです。 公式サイト 詳しい使い方を知りたいならばAPI Referenceから。 サンプルサイト 各種パラメータの効果を見た目で確認することが出来ます。 インストール 今回のサンプルでは全てCDNを使用しますので何もインストールする必要はありません。 ダウンロードして使いたい場合は https://github.com/ajaxorg/ace-builds/ ←こちらから。 最小のサンプル <!DOCTYPE ht
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
今回はJavascriptを使ってhtml作成をある程度楽にする簡易エディタをつくりたいと思います。 似たようなhtmlファイルを大量につくりたいならいいかも 内容をゴリゴリ書くなら然程労力は変わらないと思う… プレビュー 必要最低限の機能しか実装してないけどちょっと工夫すれば そこそこ実用的なものが作れるかと思います。そして楽！ クリックでデモページのzipファイルダウンロード Win,MacのChromeでのみ動作確認済みです 10/17 リンク間違ってました…ごめんなさい ソースコード <html> <head> <title>qiita_js003</title> <meta charset="utf-8"> <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=2.0"> <style
“標準的なHTMLメール”は存在しない 世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが（※）、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。 ※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。 HTMLメールを受け取る環境の組み合わせは100万以上存在する スマートフォンが浸透したことにより、あらゆる環境でHT
便利なツールがどんどんリリースされています。 一から作成するとなかなか面倒なレスポンシブ対応のHTMLメールを簡単に作成できる無料のオンラインツールを紹介します。 デザインもさまざまなテンプレートが用意されており、主要なメールクライアントすべてをサポートしています。 Topol.io Topol.ioはHTMLメールのフレームワーク「MJML」をベースに作成されており、さまざまなメールクライアントで見栄えがよいHTMLメールを簡単に作成できます。 さまざまなデザインのHTMLメールを作成できる Topol.ioの使い方は簡単です。 登録など面倒なことは不要で、HTMLメールを作成し、ダウンロードできます。 まずは、サイトにアクセスし、「Start Designing」ボタンをクリックします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
