VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
次世代Web認証「パスキー」 / mo-zatsudan-passkey
モニクル社内3分LTで発表しました。技術職以外の人向けに話したので、抽象度高めにしてあります。
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ
この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ CSSコピペで完成！押したくなるWebボタンデザインまとめ Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 画
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
サイトマップの作り方！デザイナーのアレンジ技5選 | 株式会社LIG
こんにちは、株式会社LIG Webディレクターのイナッチです。 Webディレクターといえば、サイト制作プロジェクトの提案や要件定義のフェーズにおいて「サイトマップ」を作る機会が多くあります。 とてもシンプルなフォーマットなので、誰でも作れるように思いがちですが、実は奥深く、取り組み甲斐のある作業の一つだと思っています。このシンプルな図のクオリティによって、その後のプロジェクトが円滑に進むかどうかを左右することさえあると感じています。 そこで今回は、私がサイトマップを作るときに意識していることと、サイトマップの能力を拡張するためのアレンジ技5選についてご紹介いたします。 ※ この記事でご紹介する「サイトマップ」とは、サイト全体の構造を図示した資料のことであり、XMLサイトマップ（sitemap.xml）の作り方については含んでおりません。 サイトマップの基本的な体裁 まずはサイトマップの基本
納品ファイルをまとめるのが簡単に！更新分の抽出、ファイルリストの生成もできるWin, Mac対応の国産無料アプリ
まさに、Web制作者のためのアプリです。 納品ファイルをまとめる際に、更新した差分のファイルだけをディレクトリ構造を保持したまま抽出し、ファイルリストと共に納品ファイルセットを作成できるWin, Mac対応のアプリを紹介します。 ディレクトリの枝葉に点在する更新ファイルでも、1クリックでまとめることができます。 バージョン管理のないプロジェクトでは、特に重宝すると思います。 Scone Diff Scone Diffの特徴 Scone Diffのダウンロード・インストール Scone Diffの使い方 Scone Diffの高度な使い方 Scone Diffの特徴 Scone DiffはWindows、macOS対応の国産アプリで、無料版と有料版がリリースされています。無料版でも十分な機能が備わっています。 Web制作のファイル納品時、必要なファイルだけをまとめて納品できます。 必要なファ
2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP
Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。 今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度 コンテンツ目次 1. ブログコンテンツ用レイアウト 2. 名刺型レイアウト 3. グリ
知識ゼロから Illustrator をしっかり学ぶ！デザインの作り方、チュートリアルまとめ
「もっと楽な方法は？」「イラストレーターの効率的な使い方を知りたい。」 そんな悩みを解決してくれる Illustrator の基本操作から各ツールの実践テクニックまで、これからをはじめようというひとにもオススメの機能を網羅した、新作デザインチュートリアルをまとめてご紹介します。 ステップごとに進めていくので迷うこともなく、各種ツールのより実践的な使い方まで詳しく知ることができるチュートリアルを中心に揃えています。Illutrator の可能性を広げる万能テクニックを学んでみてはいかがでしょう。 詳細は以下から。 知識ゼロから Illustrator をしっかり学ぶデザインの作り方、チュートリアルまとめ カラフルな花がらの水墨画をデザインする方法 グラデーションメッシュ機能を利用し、Illustrator ではむずかしい淡い色合いを表現できるチュートリアル。 幾何学模様を利用した雪の結晶の作
Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0
Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール Bootcompの使い方 Bootcompの特徴 先日当ブログで紹介したBootcompが昨日、CC2015.5にも対応してアップデートされました。1.0でも便利でしたが、2.0で更に便利になっています！ OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。
PHP/jQuery製オープンソース・チャットフレームワーク『ArrowChat』が最高 | Ledge.ai
はい。てなところでようやく本題です。 上記みたいなライトなチャット実装を（簡単に）叶えてくれる！かも知れないツール、見つけておきました。 PHPで動く！カンタン実装オープンソースチャットフレームワークArrowChat https://www.arrowchat.com/ というわけでこちらです。 Webであれこれ作ってきた我々にとっては非常に馴染み深い、我らがPHP＆jQueryで動いてくれるというオープンソースなチャットフレームワーク『ArrowChat』です。 ライセンスはこんな感じで、もちろん商用可能。初回ダウンロード時に45ドル（大体5,000円くらい）払うとzipでダウンロードでき、その後はもう好きにしてーっという素敵仕様です。 プランは色々あるけど廉価版で全然OK 料金プランはいくつかあるんですが、違いは単に『サポートどれくらいいる？』てだけなので、そもそもコードは読めるけど
Web・アプリデザイナーがチェックしておくべき企業ブログ10選
Webやアプリに携わるデザイナーにおすすめの企業ブログを厳選しました。各社が提供しているサービスの事例や、ノウハウ、最新トレンドなどあらゆる情報が公開されているので、ぜひチェックしてみてはいかかでしょうか。 dwango creators’ blog http://creator.dwango.co.jp/ 株式会社ドワンゴのデザイナーが運営している、2015年11月にできたばかりのブログです。ニコニコのサービスに関連した記事や、現場で活躍しているデザイナーが実践している便利なTipsが紹介されています。 1pixel http://ameblo.jp/ca-1pixel/ 株式会社サイバーエージェントが運営しているクリエイターズブログです。サイバーエージェントのゲームやWebサービスで使用されている技術や、話題の音楽配信アプリ「AWA」の開発秘話などが掲載されています。 DeNA Cre
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
翻訳: WebAPI 設計のベストプラクティス - Qiita
これは Enchant の開発者である Vinay Sahni さんが書いた記事「Best Practices for Designing a Pragmatic RESTful API」1を、ご本人の許可を得て翻訳したものです。 RESTful な WebAPI を設計しようとすると、細かなところで長考したり議論したりすると思います。また、他の API に倣ってやってはみたものの、本当にそれでいいのか、どうしてそうしているのか分からない、何てことも少なくはないと思います。 この記事では、そのようなハマリどころについて Vinay さんなりの答えを提示し、簡潔かつ明快に解説してくれています。 今後 WebAPI を設計される方は、是非参考にしてみてください。 なお、誤訳がありましたら編集リクエストを頂けると幸いです。 まえがき アプリケーションの開発が進むにつれて、その WebAPI を公
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
守護天使占い-あなたの守護天使を占います。相性占い
http://career-panda.com/design-website-2017
GitHub - hiloki/flocss: CSS organization methodology.
