今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。 はじめる あなたのプロジェクトに Bootstrap を素早く追加したいですか？無料のオープンソース CDN である jsDelivr をご利用ください。パッケージマネージャを使用していたり、ソースファイルをダウンロードする必要がありますか？ダウンロードページへをご覧ください。 CSS スタイルシート <link> をコピーして、他のスタイルシートの前にある <head> に貼り付けて、CSS を読み込みます。 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384
あの全能感はどこへいったんだ
大学時代、これといってやることもないからウェブサイトを作って遊んでいた。 当時はHTML,CSS, JSを書いてレンタルサーバーにおいて表示させて楽しむところから始まった。スポーツのニュースサイトのRSSを読み込んで表示するだけのサイトを作ったりした。しばらくすると、Rubyというプログラミング言語を学びながら、ウェブフレームワークを使って動的なウェブサイトを作ってみた。赤の他人がウェブサイトに書き込みをした時はとても嬉しかった。 バイトをしておらず、金がなく友だちもいなかった。没頭できる唯一の趣味がウェブサイト制作、その周辺のプログラミング作業だった。ネットを検索すれば以下のような「ウェブサイトをつくって大成功」みたいな記事がたくさん見つかる。自分も、バイト代くらいはウェブサイトで稼げないものかと淡い期待を持っていたのだろう。 http://www.itmedia.co.jp/bizid
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
