どうも、白夜霧（@KiRi_Byakuya）です。 今回はWindowsの環境に「XAMPP」をインストールする方法と最低限の設定内容の覚書。 完全無料のウェブアプリケーションパッケージ「XAMPP（ザンプ）」とは？ XAMPP（ザンプ）は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。 引用：wiki ApacheやPHP、MySQLなどウェブアプリを作る上で必須となるフリーソフトをパッケージ化したソフト。完全に無料で誰でも使え、初心者はまずお世話になる感じ。 XAMPPをダウンロードしてインストールXAMPPを公式ページからダウンロードをして、exeファイルを起動する。※私の場合はバージョン

「XAMPP」をインストールした後の必要最低限のセキュリティ設定について解説します。XAMPPを起動する前に、データーベースのパスワードを設定してみましょう。XAMPPのインストール方法については、関連記事をご参考下さい。 関連記事：XAMPPをインストールしてみよう！ 関連リンク：XAMPP公式サイト[https://www.apachefriends.org/jp/index.html] 1. XAMPPを使う前に 前回のコラム「XAMPPをインストールしてみよう！」では、Windows 10(64bit OS)に「XAMPP 7.1.9 (PHP 7.1.9)」をインストールしました。今までの「XAMPP」と比較して大きく異なる点があります。2015年7月23日のアップデート(v5.6.11)で、データーベースが「Mysql」から「MariaDB」に変更された事と「XAMPP」セキュ

開発/検証環境を手軽に構築するためにはXamppの導入は有効ですが、Xamppに含まれるDBが本番サーバーのDBと異なる場合、同じものにあわせて検証をおこなう必要があります。 今回は本番サーバーのDBがMySQLと仮定して、Xamppに含まれているMariaDBをMySQLに置き換える方法をシェアしたいと思います。 本記事は前回の「XamppのMariaDBをMySQLに置き換える方法(1)」の続きです。 まずはXAMPP Control PanelからMySQLの停止をおこないます。 つぎに C:\xampp7422\mysql を C:\xampp7422\mariadb にリネームします。 前回ダウンロードした mysql-8.0.26-winx64.zip の解凍をおこない、以下に設置します。 C:\xampp7422\mysql つぎに C:\xampp7422\mariadb\

XAMPP(ザンプ)のインストール方法は過去記事「WindowsでPHPを動かすための環境構築手順【XAMPP（ザンプ）】」でご紹介しました。 XAMPPインストール後のControl PanelにはMySQLと表示されてるのですが実はXAMPPデフォルトのDBはMariaDBです。 XAMPPの標準DBがMariaDBであることに気付いたとき、多くの開発者が驚かれます。XAMPPはPHP開発者にとって非常に便利なローカル開発環境ですが、MariaDBとMySQLの違いやその使い方について混乱することがあります。そこで、今回はXAMPPのデフォルトデータベースであるMariaDBをMySQLに変更する方法について詳しく解説します。 （以下、Windows11のPC環境で行った内容になります） はじめに XAMPPを使用すると、簡単にWindowsでPHPの環境を構築することができます。しか

表を検索したい！簡単に！都道府県別にある情報を簡単に絞り込みたい。というご要望。 セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。 というかたちで実装を考えました。 テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。 jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。 参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。 動作デモ・ソースコード

Result table内のすべてのテキストから検索し、該当箇所のある列を表示する、みたいなやつ ある程度の量を持つデータテーブルだけど超大量でもないから、重いスクリプトは使いたくない、みたいな中途半端な状況の時は少ないコードで済ませたいところですね vanillaなコードで動作します JavaScript (function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; function _onInputEvent(e) { _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, func

雑記ブログ：Safariリーダーで表示されないOpenfirst published: 2019/02/01last updated: 2019/03/03 ふと、iPhoneのSafariで雑記ブログをリーダー表示してみたところ、ボディが何も表示されないことに気がついた。なんじゃこりゃ。 同じような環境を使っている竜さんのrnoteは表示されているため、Gatsby・Airtable・Netlify・日本語環境のせいではない。 まいのこマートで制作中のカスタム投稿も同じような結果。雑記ブログと構造は似ているが article 下部のリンクだけ一部表示されている謎。雑記ブログにしか使っていない rehype-react は関係ないよう。 Safariのリーダー表示はデベロッパーツールの編集を反映しないっぽいので、ブランチ切ってNetlifyにデプロイして確認する。 iOS: Safari

こんにちは、MIO webデザインです。 先日「イメージマップは実際の画像サイズじゃないと使えないのですか？」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。 しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。 そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います。 イメージマップの作り方のおさらい まずはイメージマップを準備しないといけませんね。 イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。 作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください！ 今回はこのようなイメージマップを用意しま

Site will be available soon. Thank you for your patience!

2019/1/11 記事内容を大幅に加筆・修正しました。 こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 youtubeの埋め込み動画をサイトに設置したいときありますよね。 そんな時は簡単です。見たい動画のページから埋め込みコードを取得してソースに張り付けるだけ。 簡単ですね、ではさようなら。 と、そうは問屋が卸しません。 youtubeの埋め込みはたとえ一つでもサイトに大きな悪影響を及ぼすことがある？ そうなんです。ざっくりと箇条書きにすると 埋め込みyoutubeの読込中はサイトの動きが止まるor瞬断される サイトのレイアウトが一瞬狂うことがある そもそも読込処理が重い たまにコンソールでエラーが出る サイト評価がすんごい下がる ※上記はいずれもブラウザ未キャッシュ時の挙動、そして可能性の話です。あしからず。 ブログなどの投稿ページだったらもうどんどん貼っちゃって

head内限定だったstyle要素の記載がHTML5.2からはbody内にも書けるようになりました ということで私のその件を記事にしております。 ところがW3C validatorでbody内style要素が再びエラー対象に。その理由と解決策など。 html5.2ではstyle要素をbody内に書けるようになりました 意味わからへーん！な方とそうでない方といらっしゃると思いますけれども、結構重要だと思いますので記しておきます。 html5.2が既に正式勧告を済ませてますが、追加要素や廃止要素などに加え style要素をbody内に書くことがinvalidではなくなりました * invalid (インヴァリッド) = 無効, 正しくない の意... CSSの記載の仕方は複数あります FC2ブログの特徴などを絡め、style要素の扱いの歴史をざっと説明します。 まず style要素 が何なのか

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ //ここに書いた処理はスマホ閲覧時は無効となる }

マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook レスポンシブサイトでブラウザ環境に応じて画像を切り替えるには、サイトによって様々な方法で対処されていました。 これまでの方法が抱えていたデメリットと現在（これから）の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。 これまでのレスポンシブイメージの問題点 レスポンシブサイトの画像切り替えは、CSSで表示・非表示を切り替えたり、JavaScriptでブラウザ環境を判別して画像を出し分けると言った手法が一般的でした。 たしかに、これらの方法でも意図したように画像を表示することはできるのですが、理想的な解決策ではありません。 具体的には次のような問

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p