令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Raspberry Pi NGINXのPHP実行環境（php-fpm）
はじめに NGINXを使用したPHP実行環境を作成する方法について記載します。 apacheでは、モジュール版のPHPが使用されることがほとんどだと思いますが、nginxでは、CGI版の「php-fpm」を使用します。 PHP-FPM(FastCGI Process Manager)は、PHPのFastCGI 実装のひとつです。 本文章では、NGINXおよびPHPは、インストールされているものとします。 環境 ボード Raspberry Pi 4 Model B OS Raspberry Pi OS (32-bit) Lite Minimal image based on Debian Buster Version: August 2020 Release date: 2020-08-20 Kernel version: 5.4 パッケージのインストール nginxとphp及びphp-fp
職業別！ATOM便利パッケージ27選【アニメーション付紹介】 | 侍エンジニアブログ
1つずつインストールする パッケージを1つずつインストールする操作を説明しましょう。ここでは、例として「web-search」をインストールしてみましょう。 （1）「ファイル」をクリックし、「環境設定」をクリックします。 （2）「インストール」をクリックし、「web-search」と入力して、「パッケージ」をクリックします。 （3）「web-search」の「Install」をクリックします。 インストールが完了すると、以下のように表示されます。 一括インストールする 次は、複数のパッケージを一括インストールする方法を説明します。この手順のとおりに操作すると、この記事で紹介されているパッケージをまとめてインストールできますよ。まずは、インストールするパッケージ名を記載したテキストファイルを作成します。 （1）「ファイル」をクリックし、「新規ファイル」をクリックします。 （2）以下の内容を入
サービス終了のお知らせ
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
JenkinsとSeleniumを使ってWebコンテンツの自動UIテスト環境を作ろう！ - ICS MEDIA
先日公開した「UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築」では、手動で行っていたWebアプリのUIテストをSeleniumを使って自動化する手法についてご説明しました。 SeleniumでUIテストを自動化することにより、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が簡単にでき、バグの早期発見に繋げることができますが、実際にはこのテストを運用でしっかりと行っていかないとプロジェクトとしての品質向上にはつながりません。また、コマンドラインの扱いに慣れていない方は、コマンドラインからのテストの実行に抵抗があり、テスト結果もコンソールに出力されるため見づらいと思う方も多いと思います。 そこで今回はCI（継続的インテグレーション）ツールであるJenkinsとSeleniumを連携することで、定期的にテストを実行し、テスト
Slackがカップル専用アプリだった件 - くまのからあげ
エンジニアの彼氏がある日「LINEで連絡するのをやめよう」と言ってきました。 理由を訊いてみたところ、「LINEは親や他の友人との連絡にも使っているので、その人たちに間違って『うにゃーん』とか、柄にもないテキストを送る危険性があるのはよくない」とのことでした。 なるほど一理あるなと思った私は、「では、いわゆるカップル専用アプリを使いましょう。そういう誤送信のリスクはかなり下げることができるはずです」と提案してみました。すると彼は難色を示しました。「俺はそんなキャラではない……」と。 うん、まぁそれもわかるよ。 でもカップル専用アプリにはなかなか便利な機能があるんですよ、例えばカップル専用アプリの中では老舗どころであるBetweenの場合。 ◆デートの予定調整も「カレンダー」機能でスムーズに ◆思い出をずっと残せる「フォトアルバム」機能 ◆ふたりだけの「チャットルーム」 ◆恋人と離れていても
郵便番号を入力すると住所をリアルタイムで補完してくれるjQueryプラグイン「jquery.jpostal.js」 | 9ineBB
郵便番号と住所の入力を分割しているケース $(window).ready( function() { $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#address1' : '%3', '#address2' : '%4', '#address3' : '%5' } }); }); 入力項目と表示項目が分割している場合には postcodeとaddressの配列にinput要素を追加していけばOKです フォームのHTMLの例 <form action=""> <label for="postcode">郵便番号</label>: <input type="text" name="postcode" id="postcode" placeholder="123-1234">
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
日本インターネット エイプリル・フール協会(JIAFA)
情報提供お待ちしています ニュースサイト「ガジェット通信」ではエイプリルフールネタのタレコミをお待ちしております。 特に企業の方で「公開までは秘密にしたいけどエイプリルフールのまとめをしているメディアには連絡したい！」という方は、こちらの窓口までお知らせください。４月１日までネタの秘密は守ります。 →エイプリルフールネタのタレコミはこちらの情報提供フォームからどうぞ！ https://getnews.jp/archives/3395874 「インターネットエイプリルフール」5つのお願い (1)すべての人が笑顔になるようなふるまいをお願いします。 (2)ネタばらしはすぐにおこないましょう。本当かどうか見分けのつかないままにするのはやめましょう。 (3)Twitter等で発言の際にはエイプリルフールとわかるハッシュタグをつけてください。#AprilFools #エイプリルフール などが一般的に
Twitterでフォローを外されたり、mixiでマイミクを拒否られるタイプ8種類、あなたは大丈夫？
Twitterやmixiなどは人間が社会的動物である側面をうまく利用しており、コミュニケーションを活性化させることでうまい具合にさまざまなメリットを引き出しているわけですが、当然ながら誰もがみんなと仲良く友達になれるわけではありません。中には嫌われてしまい、Twitterならフォローを外されて「アンフォロー」されたり、mixiなら友達から外されてマイミクを拒否られたりるするケースもあります。 一体何が原因なのでしょうか？詳細は以下から。 The Eight Types of People to Unfollow on Twitter or Defriend on Facebook - Facebook - Gawker ◆タイプその1「コミュニケーション中毒者」 英語だと「Overuser」、濫用者という意味になります。要するにオンラインゲームで言うところの「あいつずっとログインしていつで
寄稿・福井健策弁護士：歌詞つぶやいても大丈夫？ RTは？ Twitterと著作権を考える - ITmedia News
歌詞つぶやいても大丈夫？ RTは？ Twitterと著作権を考える：寄稿・福井健策弁護士（1/2 ページ） 140字で世界を席巻するソーシャルメディア「Twitter」と著作権をめぐる話題を見かけることが増えている。先日は、日本音楽著作権協会（JASRAC）の菅原瑞夫常務理事が「歌詞をつぶやけば使用料が発生する」と発言した、というつぶやきが爆発的な反響を呼んだのは記憶に新しい。 著作権などというカタクルシイものと、140字コミュニティーの自由さは対局に位置していると感じる人もいるだろう。とはいえ、筆者自身もTwitterを使ってみて、「これは著作権的に面白いな」と思う機会が一度ならずあったのも事実。今回はQ＆A形式で、Twitterと著作権の関係を考えてみよう。 Q1：歌詞をつぶやくと使用料がかかるのか？ そもそもつぶやく行為とは何か。これは情報をTwitterのサーバーなどに複製し、そこ
HTML5なら好きなスピードでYoutubeを再生できる | ライフハッカー・ジャパン
HTML5に対応しているブラウザのユーザーで、せっかくだから俺はYouTube HTML5 動画プレーヤーを試してみたぜ、という方もいるかと思います。このYouTube HTML5 動画プレーヤーでは、よりスムーズな動画の再生だけでなく（さらばFlash...）、再生速度の加速、減速ができるということ、ご存知でしたか？ 動画を任意の速度で再生できるスピードコントロール機能は、スローモーションを見たい時に最適です。DIYのチュートリアル動画などを見ていて、時たま動きが速くてついていけないこと、ありませんか？同じ箇所を繰り返し見直すよりも、スローモーションで見たほうが、何が起きているかとらえやすいはずです。長い動画の中で特定の場面を見たいときには、逆に再生速度を上げて早送りしましょう。色々な箇所を当てずっぽうにクリックするよりも、カンタンに目的のシーンにたどり着けるかと思います。 HTML5の
ラジオ放送のネット配信がスタート アクセス殺到でつながりにくい状態も
AM・FMラジオを放送と同時にCM含めて丸ごとPC向けに配信する「IPサイマルラジオ」の試験サービスが3月15日にスタートした。配信開始の午前0時から専用サイト「radiko.jp」にはアクセスが殺到し、夕方ごろまでつながりにくい状態が続いたという。 「都市部を中心に悪化するラジオの聴取環境を整え、新しいラジオの楽しみ方を提案する」目的でスタート。関東・関西のAM・FM局計13局の放送を、聴取エリア内のPC向けに配信する。無料で利用でき、ユーザー登録も不要だ。 サイトにつながりにくい状態が続いたことについて、IPサイマルラジオ協議会事務局は「アクセス数はまだ分かっていないが、真摯（しんし）に対応していきたい」と話す。本格運用の開始は、今年9月が目標。iPhoneアプリの提供など、今後は「デバイスの種類を増やすことも検討している」という。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ajaxzip3/ajaxzip3.github.io
http://www.hp-stylelink.com/news/2015/02/20150217.php
NHKラジオがネット配信、Androidアプリから順次展開
Welcome to nginx!
パスワード認証