【2023年】Web制作で使えるVSCodeオススメ拡張機能17選！ - PENGIN BLOG
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！
HTML開発を加速させるテキストエディタ「Visual Studio Code」を使いこなそう - WEBCAMP MEDIA
Visual Studio Code（略してVS Code）とは Visual Studio Codeは、WindowsやOffice製品でおなじみのMicrosoftが提供する無料のテキストエディタで「VS Code」という略称で定着しています。 標準のテキストエディタと比較しても、開発者向けの機能がそろっているため、IDE（統合開発環境）に近い使い方をすることができます。 そのため、プログラミング初心者から上級者まで、広く使われているエディタとなっています。 VS Codeを使うことで、HTMLやCSS、JavaScriptの開発を簡単に進めることができます。 VS Codeのインストール方法 Visual Studio Code は、Microsoftの公式サイトからダウンロードできます。 https://azure.microsoft.com/ja-jp/products/visu
<a href="#top">がHTML5で正式仕様になってた件 - Qiita
これなんだけども: HTML - <a href="#top">Top of the Page</a>は該当するフラグメント（<div id="top">や<a name="name">）がなくても仕様的に正しい - Qiita 文書の先頭へのリンク · terkel.jp 仕様についてあんまり書いてなかったので自分で読んでみたまとめ書く。 href="#top"を指定すると自動的にページの先頭へのリンクになる ……というブラウザーの独自仕様があったわけなんだけども、これが正式に仕様として明記されたとの事。 MDNの説明が一発で分かる。 a 要素 - HTML | MDN これは、ハイパーリンクのソースを定義するアンカー要素で唯一必須の属性です。（中略） 補足: 特別なフラグメントである "top" を使用すると、ページの最上部に戻るリンクを作成できます。例: <a href="#top"
HTMLでaタグのhrefに#を指定するとページ上部に遷移するのは、HTMLの仕様として記述がある - コード日進月歩
HTMLの動作の穴をついた妙技系かと思ったらちゃんとした仕様があった。 出典 シャープの後に記述する文字列を色々なところでアンカーと称する事が多く、そのアンカー名は別名フラグメント識別子といい、その解説に メモ: href="#top" または空のフラグメント href="#" を現在のページの最上部へのリンクとして使用できます。この動作は HTML 仕様書で定義されています。 - <a>: アンカー要素 - HTML: HyperText Markup Language | MDN と記述があり リンク先の文を見ると If the indicated part of the document is the top of the document, then: Set the Document's target element to null. Scroll to the beginnin
livedoor
1たむらけんじさん「週刊誌に書いてあることは絶対に違う。犯罪...オレ的ゲーム速報＠... 2姉という存在の万能説、信じてる下っ端まめきちまめこニー... 3【！？】スカパー、スペースデブリをレーザーで除去する宇宙事...はちま起稿 4【愛媛】自転車の女子高校生６０歳が運転する大型トラックに７...ハムスター速報 5バイデン「決めた。KO☆RO☆SU」米兵三人殺害の親イラン武装組...痛いニュース(ﾉ∀`... 6NPB「野球世界二番目のリーグです」←こいつを日本人しか見て...なんじぇいスタジア... 7【放送事故】泉谷しげるさん、松本人志さんの騒動の意見が的確...アルファルファモザ... 8釘宮理恵さん、お店で釘宮さんですか？と聞かれ違いますと嘘を...不思議.net - 5ch(2... 9忘年会がツラすぎた件【54】ヤゴヴのマンガ劇場 10爆笑した画像を貼るのだ『若い頃のDAIG
超初心者のための Web作成特別講座
第1回 template（テンプレート）を使いましょう ※DownloadはChrom推奨 これから、簡単な方法で、きれいにレイアウトされたWebページを作成する方法を、実際に作業をしながら学びます。 作業はWindowsで行い、ブラウザは、Chrome や IE を利用することを前提にしています。 まず、左のアイコンをクリックし、サーバから教材を自分のＰＣにダウンロードしてください。この作業は、スマホではなく、ＰＣから行ってください。 クリックすると、zip という方法でまとめられたファイル群が、皆さんのＰＣにダウンロードされます。 template1 という名前のフォルダがＰＣの指定場所に出来上がりますので、これを複製して myWeb など適当な名前をつけてください。 Web作成には、このフォルダのファイルを使います。 解凍すると見えるのは、 mihon.html header.ht
Convert Word Documents to Clean HTML
convert to clean html Remove empty paragraphs Convert <b> to <strong>, <i> to <em> Replace non-ascii with HTML entities Replace smart quotes with ascii equivalents Indent with tabs, not spaces Replace non-breaking spaces with ordinary spaces What is Word 2 Clean HTML?Word to Clean HTML is a free converter tool for documents produced by Microsoft Word and similar office software. Word to Clean HTML
サポートページ：HTML＆CSSとWebデザインが 1冊できちんと身につく本
本書のサンプルファイルをダウンロードできます。 サンプルファイルのご利用方法は本書P.7「サンプルファイルのダウンロード」およびP.44「作業フォルダを作成する」をご覧ください。 コード改訂版をアップロードしました。2020年6月8日以前にダウンロードされた方は，再度ダウンロードしていただけますよう，お願いいたします。 ダウンロード ダウンロードサンプルファイル（HTML_CSS_WebDesign.zip） 補足情報 サポート終了に伴うBracketsの入手方法について 2021年9月1日，Adobe社はBracketsのサポートを終了します。本書のP.25で紹介しているオフィシャルサイトから直接，インストーラーのダウンロードはできなくなっていますが，GitHub（開発のオープンソース環境）からBrackets最終版をダウンロードすることが可能です。 以下のURLよりBracketsの入
HTML文書はUTF-8に書き換えないとダメ？ - らいちのヒミツ基地
Introduction こんにちは。阿豆らいち（@AzuLitchi）です。 今回はhtml標準がutf-8に・・・という話について調べてみました。 とうじょうじんぶつ 阿豆らいち： フリーランスのデザイナー。初めて使ったhtml編集ソフトは「クラリスホームページ」。 ミンスクさん： らいちの妻。有能。 HTML文書のエンコーディングはUTF-8に決定？ id:momdo さんのこちらの記事の件を調べてみたのでまとめました。 HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 リンク先のHTML Standard 日本語訳に
超初心者のための Web作成特別講座
第1回 template（テンプレート）を使いましょう ※DownloadはChrom推奨 これから、簡単な方法で、きれいにレイアウトされたWebページを作成する方法を、実際に作業をしながら学びます。 作業はWindowsで行い、ブラウザは、Chrome や IE を利用することを前提にしています。 まず、左のアイコンをクリックし、サーバから教材を自分のＰＣにダウンロードしてください。この作業は、スマホではなく、ＰＣから行ってください。 クリックすると、zip という方法でまとめられたファイル群が、皆さんのＰＣにダウンロードされます。 template1 という名前のフォルダがＰＣの指定場所に出来上がりますので、これを複製して myWeb など適当な名前をつけてください。 Web作成には、このフォルダのファイルを使います。 解凍すると見えるのは、 mihon.html header.ht
リダイレクト設定によるURLの転送方法
2014年12月3日 ホームページのURLを変更した際には、リダイレクト設定をして、古いページから新しいページへアクセスを転送させましょう。 【ケース１：】サイトを引っ越すとき。 URL転送の一番多いパターンはサイトを引越す場合です。無料サービスで運営していたものの、運営元がサービスを終了してしまった場合などは、独自ドメインを取得してレンタルサーバーへ引越すことが多いです。 例えば、「サイトを引っ越しました。新しいアドレスはこちらです。→ ほにゃらら.com」のようなパターンになりますが、このように元サイトに移転先のURLを貼り付けておくだけというのはＮＧです。 人間がみれば「あぁ、引っ越したんだな。」とわかりますが、検索エンジン側では同一のサイトとはみなさず、それぞれを別々のサイトとみなしてしまいます。 これでは長年運営してきた運営歴や参照されているリンクが引き継がれず、一からのやり直し
ほんっとにはじめてのHTML5
はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からサンプルを作りながら解説しています。 サイトの編集ができるようになる手助けになれば…と思っています。 はじめてのHTML INDEX HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO！ CSS3レイアウトも時々登場します。 HTML要素 索引 HTML要素のアルファベット別INDEXです。 特定のHTML要素について調べたいときには、わりと便利です。 はじめてのCSS INDEX CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO！ （はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください） 属性セレクター（attribute selector）の続きです。 今回は、属性値の大文字小文字の区別を「す
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
jagrid - Excel方眼紙をWeb上に再現！ MOONGIFT
これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです（断定）。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの使い方 こんにちは、Excel方眼紙！ うん、まさにExcel方眼紙です。 表はまさにお手の物。 セル3つ分、といった指定も簡単にできます（data-widthで指定）。 従来のWebコンポーネントと合わせることもできます。ちゃんと文字の頭が合っているのに注目。 こんな緻密な画面も簡単に設計できます。 Webデザインにおいてこれほど緻密な画面を設計しようと思うと、かなり苦労するはずです。しかしja
Sendmail - SPFレコードチェック
アプリケーション名： Sendmail IP Info. カテゴリ：ビジネス サイズ：0.3MB 対応言語：英語 概要：SPF レコードチェックツール 動作条件：iPhone、iPod touchおよびiPad互換 iOS3.0以降 Fatal error: Uncaught exception 'Exception' with message 'String could not be parsed as XML' in /var/www/html/sa/i.i:45 Stack trace: #0 /var/www/html/sa/i.i(45): SimpleXMLElement->__construct('') #1 /var/www/html/sa/i.i(32): parse_xreq() #2 {main} thrown in /var/www/html/sa/i.i on l
KDP攻略 @ wiki
【KDP】Kindle Direct Publishingの攻略＠wiki このページはAmazon Kindle ダイレクト・パブリッシングのWiki形式攻略情報サイトです。 富、名声、力。この世の全てを手に入れるベストセラー作家。 AmazonKindleの登場ではじまった個人電子出版の波は人々をKDPへ駆り立てた。 「本を売りたいか？ 売りたければKindleを使え。書け！ ツールの全てがここにある」 著者たちはベストセラーを目指し、夢を追いつづける。世はまさに大個人出版時代！ 編集の仕方が分からない場合は@wikiご利用ガイドなどをご利用下さい。エラーやバグなどまだまだ確認されていない情報をゲーム攻略のように共有し、ひとりでも多くの個人作家が簡単に作品を発行し、売れるようになることを目的としています。 【緩募】まだWikiは制作したばかりで情報が不足しています。あなたの知っている情
Publickey － Enterprise IT × Cloud Computing × Web Technology / Blog
2024-8-14 ガートナージャパンが「日本における未来志向型インフラ・テクノロジのハイプ・サイクル：2024年」発表。Web3やNFTは幻滅期、生成AIは過度な期待、汎用AIは黎明期 2024-8-14 企業にとって、生成AIへの投資を正当化することが課題に。ガートナーが予測。2025年末までに検証プロジェクトの3割が放棄されると 2024-8-13 Excel上でWebAssembly版Pythonを実行可能にするアドオン「Anaconda Code」が登場 2024-8-13 オープンソースとは違う新しい取り組み「Fair Source」登場。ビジネスの持続性とソースコード公開の両立を目指す 2024-8-9 ブラウザテスト自動化のPuppeteerがFirefox正式サポート、新標準のWebDriver BiDi対応で。これでChromeとFirefoxに両方対応に 2024-8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
チーム学習のためのHTML入門コース
https://packetlife.net/library/cheat-sheets/