今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
PHP5.6→7.3移行が完了しました | ランサーズ（Lancers）エンジニアブログ
SREチームの金澤です。 PHP5.6→7.3バージョンアップが完了しました。 PHP5.3→5.6バージョンアップが完了してから約2カ月での移行となりました。 今回、その対応内容と結果を報告したいと思います。 バージョンアップ準備 PHP7化については、有用な記事が数多くありましたので、まずはそれらを参考にさせていただきました。 CakePHP2.10化 PHP5.6化後のライブラリアップデートのタイミングでCakePHP 2.8から2.10にバージョンアップしました。 CakePHP2.9のタイミングでObjectクラスが非推奨になったため、CakeObjectに名前変更しました。 ※PHP7ではObjectが予約語になります。 廃止、非推奨となる関数の対応 対応が必要だったのは主に以下の関数です。 __autoload ereg_* eregi each mysql_* split
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
SEOに最適なキーワード調査ツール16選 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
SEOツールと呼ばれるツールは数多くあり、そのすべてを把握することは非常に難しいでしょう。機能も様々あり、用途に合ったツールを選択したいものです。SEOツールを使用するシーンは複数考えられますが、キーワード調査にツールを使用すると、効率よく進められるはずです。今回は、「キーワード調査」に用途を絞ったSEOツールを解説するSearch Engine Journalの記事を紹介します。 よく使うツールの無料版、「ビッグ3」と呼ばれる有料ツール、さらに、あまり知られていないツールを含め、我々はキーワード調査に最適なツールをレビューした。 SEO担当者であれば、調査ツールを使用しないでキーワード調査を行うことは、非常に困難であると理解しているだろう。また、月間の検索ボリュームのデータも含めた包括的なリストの作成となると、ほぼ不可能と言えるだろう。 キーワード調査はSEOの戦略の中でも重要な部分であ
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
Micro Frontends Architecture Patterns
本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte
ゲーム・WEBの採用情報 | 株式会社ビーワークス
ビーワークスでは意欲ある仲間を待っています！【募集職種】ゲームグラフィッカー、ゲーム制作アシスタント、WEBエンジニア、WEBディレクター、WEB制作アシスタントプロフェッショナルであると自負する方、またプロフェッショナルになる決心をした方、ビーワークスで一緒に成長しましょう。 募集している職種 ゲームプログラマ ゲーム開発のプログラミングをお任せします。プログラミングだけでなく、新しいアイデアをゲームにするチャンスもあります。 配属 ゲーム開発部 待遇 契約社員 この職種の募集詳細＆応募はこちらPC ゲーム制作アシスタント ゲームのグラフィック制作の補助やゲームの紹介をするWEBサイト用の画像作成などスキルに応じた仕事をお任せします。 配属 ゲーム開発部 待遇 アルバイト この職種の募集詳細＆応募はこちらPC WEBマークアップエンジニア マークアップ・コーディングの領域で活躍いただける
Web制作時に助かる、意外と役立つ便利ツール
作成：2016/05/9 更新：2016/06/29 Tool > Web制作する時にあると役に立つオンラインサービス。もっと効率的にするために、今のところ一番使いやすいと思うツールや埋め込み型のサービスをご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 チャイムとクロック スクールや会社でウェストミンスターの鐘を鳴らしたいならこれ。Chromeタブを開いて時間を設定しておくと、学校の「キーンコーンカーンコーン」というチャイムを鳴らせます。 Web制作教室で50分・10分ごと実際にタイマーを鳴らしてますが、学校の気分が出て気が引き締まります。この歳に聴くと切なくなりますね。 timer tab タブで表示できる天気予報付きクロックならこちら。アニメーションが美しい。フォントの色と種類を指定可能。 Floaty Color Clock WordPress
16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか？ 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 外注を活用したホームページデザインの業務切り出しフロー 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な
【PHP】WebサービスのAPIを使ってCSVファイルを作ってみた！ - Web.fla
ラジオボタンによる国コードの設定 今回は、インドとシンガポールとタイの3国のツアーを取得したいのでvalueの値にそれぞれの国コードを設定しておきます。もちろんラジオボタンなので一つしかチェックできません。 フォームの送信先は同じファイルなのでapi_test.phpをactionに指定します。methodはPOSTです。 APIからデータを取得してCSV作成までのPHPの処理 まずはAPIを利用してデータを取得してCSVを作成して書き込むまでの処理を記載します。PHPでプログラムを書く場所はDOCTYPEより上に書きました。作成したCSVを一覧表示するPHPの処理は後述します。 リクエストURLやCSVファイルを変数に入れておく まず変数を見てください。 $base_url='http://webservice.recruit.co.jp/ab-road/tour/v1/?key=自分の
Google Maps APIを使ったページの基本構成 | Google Maps JavaScript API入門
Google Maps APIを使うことでWebページの中に地図を使ったコンテンツを表示することができます。ここではGoogle Maps APIを実際に使ったWebページの簡単な例をご紹介します。 1.Google Maps APIを使ったWebページの構成 2.サンプルコード Google Maps APIを使ったWebページの構成 まず元となるWebページとして次のようなものを使います。HTML5ベースです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Google Maps API サンプル</title> </head> <body> <p>自宅の地図です。</p> </body> </html> 地図を表示したい場所に「map」という名前でdiv要素を記述します。このdiv要素があと
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト
Laravel - The PHP Framework For Web Artisans
The W3C Markup Validation Service
Responsively App - A Web Developer's Browser
メンテナンスページ | Good.Hackerセブ島のWEB屋
GNB