Visual Studio Code(VsCode)本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン(コーダー・マークアップ・フロントエンドエンジニア視点) 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
My current HTML boilerplate posted on 09.04.2021 Every element I use for the basic structure of a HTML document, with explanations why. Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート(最終形) HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト! 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
はじめに 資産運用で 99 点をとる方法とその考え方について説明します。この記事の対象はいわゆる「普通の人」です。 資産運用は趣味ではない。 資産運用を始めてみたいが何をしてよいのかわからない。 資産運用をすでに行っているが毎年ころころと方針を変えてしまっている。 資産運用に無駄に時間ばかり費やしている。 今のところ資産はすべて銀行の普通口座や定期預金にいれている。このまますべて現金でおいておくのも何か損しているみたいでモヤモヤする。だけど難しいことは勉強したくないし時間も使いたくない。 といった人たちです。 記事では最初に結論、すなわち「やるべきこと」を述べます。資産運用で 99 点の投資効率を達成するためにはこの結論部分だけを実行するだけでよいです。 次に、それだけでどうして 99 点といえるのか、その裏付けとなる考え方や理論を中心に説明します。 99 点をとるにあたってこれらの知識を
WordPress ブロックエディター Gutenberg に対応 WordPress 5.0 から導入されたブロックエディター(Gutenberg)を使った場合に、作成したテーマを対応させるための覚え書きです。 テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについての個人的なメモです。 テーマにブロックエディターのスタイルを適用 ブロックエディター(Gutenberg)を使ってコンテンツを作成すると、使用したブロックにより特定のクラス(wp-block-xxxx や has-text-color 等)やインラインのスタイルなどが追加されます。 また、add_theme_support() などを使用してオプションのスタイルや機能を有効にすると、それに伴い追加のスタイルが読み込まれたりもします。 デフォルト(初期状態)では、
未組立プラモ写真家。稀に組む。山登る。からぱたへのお問い合わせ、文章・写真・DJ・飲酒のオファーはTwitter @kalapattar からどうぞ
自衛艦の花形である護衛艦。現在、最大の護衛艦は基準排水量19500トンのヘリコプター搭載護衛艦(DDH)「いずも」型で、形状から「ヘリ空母」とも呼ばれている。同型艦で2017年に就役した新鋭艦は「かが」。ミリタリーファンなら、すぐ思い出すのが帝国海軍の空母「加賀」だろう。主力空母として真珠湾攻撃にも参加。最後はミッドウェー海戦で沈没している。 同じDDHに、2009年に就役した「ひゅうが」と同型艦「いせ」がある。これも帝国海軍の戦艦「伊勢」「日向」の名前を継いだもの。この二艦はもともと戦艦であったが、後部の主砲を取り払い、飛行甲板を設置したため、航空戦艦と呼ばれた。「いせ」「ひゅうが」は、海上自衛隊としては初めて全通甲板を備えたため、空母にしか見えない。そんな艦艇に命名するに当って、戦前の二艦を意識しなかったといえばウソだろう。
こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです(2019年2月現在)。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア
VScodeのテキスト比較(diff)する3つの方法の紹介を紹介します。 1つ目はVSCodeで標準に備わっているテキスト比較の使い方で実用的ではないかもしれませんが、操作方法だけでも覚えておくと後から役立つかもしれません。 2つ目と3つ目は実際の仕事でも使えそうな実用的な方法です。ぜひ、実際に導入してみて使い勝手を試してもらえたらと思います! VSCodeのテキスト比較する3つの方法 VSCodeのテキスト比較する3つの方法です。VSCodeの標準機能として備わっているテキスト比較から紹介して、それらを応用して作られた(であろう)拡張機能を使った比較を紹介していきます。 2つのファイルを単純に比較 存在するファイルを2つ比較するには「選択項目の比較」というVSCodeの標準機能を使うことで実現できます。 ファイルをCtrlを押しながら2つ選択して、右クリックから「選択項目の比較」を選択し
設計サンプルで学ぶ、AWS構築の原則 - Webアプリ アーキテクチャのベストプラクティスを理解する AWS入門者に向け、同サービスのエキスパートである、クラスメソッドの八幡豊さんが、Webアプリケーション開発のためのAWS構築の基本を解説します。広範な領域をフォローするAWSですが、広範ゆえに、なにをどのように選ぶべきか……。こんなお悩みを持つ方はぜひご一読を。 クラウドコンピューティングサービス・Amazon Web Services(以下、AWS)は、数多くの高機能なクラウドサービスを簡単に利用できることから、多くの企業が導入しています。AWSの知識を身につけることは、いまやエンジニアにとっての必修科目です。 そのサービス範囲は広範にわたることから、「なにを」「どうやって」使うかのかが重要な知識になってきます。AWSの各サービスのポテンシャルを引き出すためには、それぞれの長所・短所を
Vue.js入門を@kazu_ponさんより頂きました。ありがとうございます。 遅くなりましたが、読んだ感想を残しておきたいと思います。 Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本(ソフトカバー)この商品を含むブログを見る 感想の前に 自分は専業のフロントエンドエンジニアです。Vue.jsの使用歴は4年ほど。個人・案件を問わず多くのプロジェクトでVue.jsを採用した経験があるので、正直に言うと本書の対象からは少し外れてるかなと思います。 それでも本書からは得られるものがありました。 入門だけじゃない内容 タイトルこそ「入門」とついていますが、ページ数(460P)から想像できるように、カバーしている範囲がすさまじいです。 入門して終わりではなく
WordPress5.0では新しいエディタ「ブロックエディタ」が搭載されます。 公開画面では「ブロックエディタ」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。 【ブロックエディタ 公開画面】 管理画面(編集画面)では、テーマ のデザイン(公開画面) と同じデザインで編集できるようにする事で ユーザーは簡単にイメージ通りのコンテンツを作成する事ができます。 しかし デフォルト(ブロックエディタ非対応テーマ) では 管理画面(編集画面)では テーマのデザイン(公開画面)と だいぶん違う状態になっていますので それぞれテーマ側で対応しなくてはなりません。 【ブロックエディタ 編集画面(非対応)】 ※基本表示幅は 580px になっています。「Gutenberg を試してみよう」画像が大きいのは「幅広」設定になっているためです。 【ブロックエディタ 編集画
それがはてな 「音楽に政治を持ち込むな」といってたネトウヨそっくりですよ。 フジロックSEALDs問題の2年前の自分のブクマコメント読み返してください。ダブスタになってませんか? HINOMARU叩いてるの、おっさんしかいないっすよ。 若者は「SEALDsもHINOMARUもUSAも好きにすればいいんじゃね」ですよ。これがあるべきリベラルですよ。 <追記> 『日本死ねと言われた程度で死ぬほど日本は脆弱ではない。が 「日本を愛しているだけの普通の日本人」を自称しつづけた結果 排外主義者になってしまう程度には日本人の良心は脆弱ではないかと過去の歴史に照らして思う』 というブコメにスターがついてて頭がくらくらしたが こんなロジックで「日本死ね」を称揚し「日本好き」と言うのは叩いてるんすか笑 こんなパターナリズムと言論弾圧と自分の思想派閥のみを称揚する態度は はてな左翼仲間にしか通じないロジックで
こんにちは。BASE で Design Group に所属している三佐和です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングのルールの統一をコードレビューや個人の裁量に任せていたり、マークアップからリリースするまでに時間がかかってしまうことが問題になってきていました。 そこで、新しいスタイルガイドでは、デザイナーやエンジニアの作業工数を短縮し、より効率よく開発を進めるために、コーディングルールの整備とリグレッションテストを導入することにしました! やったこと stylelint を使ってコーディングルールを管理 BackstopJS でテストを
どんなカレーだってこれさえ入れれば絶対にうまくなる カレーを作るのが好きだ。 カレーやスパイスに関する本をたくさん読んで勉強もした。 「あの有名店の主人が教えるレシピ」などと書かれたページそのままに、ネットで買いそろえたスパイスを使って挑戦したことは数えきれない。 だが、自分的に微妙だった。 何となくそれっぽい味にはなるが、理想とは違う。 お店と同じような味には決してならない。 同様の経験を持つカレー好きは多いことだろう。 ▲スパイスもこんなにある 何かが足りない。 新しいスパイスを追加でそろえても、思ったような味にならない。 新しい本を買っても、どこか味がもの足りない。 私はずっと悩んできた。 だが、ある時、その悩みは霧散(むさん)した。 ある食材をカレーに入れるようになってから、味がぐっと深まり、抜群にうまくなったのだ。 人に提供しても、好評を得ることが多くなった。 「おいしいね」から
どうも、ソルティーです。 アクセス解析って面倒じゃありませんか? 「いや、Webマーケティングする以上、面倒とか言ってられないでしょ。」 そんな声も聞こえてきそうですが、やっぱり小難しいものが苦手なソルティーとしては Googleアナリティクスでさえも難しいよなぁと思うワケです。 分析はやっぱりシンプルがいい!! そんな「アクセス解析だって難しくなければ、やっぱり調べておきたいとは思うんだよなぁ…。」 と思っている方にとっても使えるサービスがありました! それがJuicerです! これはめっちゃめちゃカンタンな設定で、訪問者を分析し、見込み客の可視化を自動で行ってくれます。 しかも無料で使えるウェブサービスなんで絶対に登録しておきましょう。 [btn class="simple big"]Juicerを使ってみる[/btn] Juicerって何ができるの? アクセス数などを表示してくれるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く