とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

コーディング

YouTube埋め込み動画をPC、スマホで音声なしで自動再生する方法。レスポンシブで背景全面、背景動画にも。

サイトにYouTubeを掲載するときに 背景全面に動画を表示してデザインの 一部として利用するケースがあります。 背景でなくてもYouTubeをサイトに 設置して自動再生しておきたい。 ググったところ、 PCでは自動再生できても、 スマホではブラウザの制約上、 …

モーダルウィンドウ実装の決定版。実装が超簡単、カスタマイズ性も高いモーダルウィンドウjQueryプラグイン「Modaal」

いまやほとんどのWebサイトやアプリで 導入されているUI「モーダルウィンドウ」 今回は超簡単に実装できてカスタマイズ性も高い、 jQueryプラグイン「Modaal」を紹介します。 最近では jQueryオワコンだなどという声も ありますが、適材適所。 jQueryはなん…

スマホの実機がないときに動作確認する方法まとめ。おすすめスマホシミュレーター

Webサイトの実装では、 実機でしか発生しない不具合や 実機で動作の検証を必要とする場面も多いです。 確認作業はなかなか骨の折れる作業です。 各デバイス、OSのバージョンを考えると、 実機がない場合もあります。 そんなときに役立つのがシミューレーター…

クライアントワークでFAQのリッチリザルトを実装してみた。実装にあたってノウハウをご紹介

さて、先日こんな記事を書いたのですが、 www.toaru.jp さっそくクライアントに提案したところ、 発注いただけて、実装することになりました。 実装にあたっては、 デベロッパーサイトにある仕様のとおりなのですが、 https://developers.google.com/search/…

overflow-x:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法

スマホサイトでは スワイプして横スクロールで コンテンツを見せたり、 ナビゲーション操作させたりと 横スクロールは省スペースで コンテンツを展開するUIとして 優秀なUIです。 横スクロールの実装は、 CSSで簡単にできます。 overflow-x:scroll; ですね。…

常時SSLのwebサイトではブラウザの警告がでないように注意しよう。src、href、contentで参照するファイルのパスに要注意。

昨今のwebサイトは 常時SSL化の動きが進んでいます。 GoogleがSSLを推奨しているからです。 常時SSLとは? 常時SSL(Always On SSL)は、ウェブサイト内のログインページやフォームなど特定のページだけでなく、その他すべてのページをSSL化することです。常…

tableコーディングするのめんどくさい。ジェネレーターでサクッとHTML化してしまおう

tableのコーディング・実装に役立つツール のご紹介。 tableのコーディングは面倒なので、 ジェネレーターでサクッと HTML化してしまいましょう。 表のレイアウトをwebサイトに 掲載する際にtableをコーディング する場面はそこそこ多いです。 簡単な表をtab…

超軽量。ライティング・文章執筆作業にはMac OS専用テキストエディタ CotEditor がおすすめ

僕はコーディング用のエディタと ライティングや文章執筆時のエディタを 分けて使用しています。 コーディング用のエディタは Codaを使用しています。 https://panic.com/jp/coda/ それとは別にテキストエディタ として CotEditor を使用しています。 macOS…

ファイル名をキーワードで区切る場合に使用するのはハイフンではなくアンダーバーがいい理由

webサイトの実装で取り扱うファイルは 多岐に渡りますが、主なものとしては HTML、CSS、画像(jpg/png/svg/gif)、JavaScript、PHPあたりでしょうか。 資料作成など含めるとPDFやWord、Excel、PowerPointあたりもよく使われるファイルだと思います。 これら…

webページ(HTML)をPDF化するなら mPDF が便利。ただし使えるCSSが限定されるから注意。

「webページ(HTML)をPDF化したい。」 クライアントからそんな相談をされたら mPDF を使いましょう。 受託でweb製作をやっていると このニーズはそこそこ多くて 何回か要望いただいたことがあります。 とはいえPDF化するのも簡単ではありません。 要望を詳…

webサイトにIEでアクセスしてきたユーザには別のブラウザを推奨しよう

いまだにはびこるIEユーザ。 webサイトの進化をさまたげる害悪ブラウザは、 使わないようにユーザに別のブラウザを案内しましょう。 ie-buster.qranoko.jp IE Busterは上記のとおり、ユーザにChromeを 促すJSです。導入はめちゃくちゃ簡単。 HTML内にCDNのJS…

黒丸●になるパスワードを可視化するべきかの考察。フォーム最適化(EFO)

ログインや新規登録でのパスワード入力。 日常でさまざまなwebサービス、サイト、アプリを 利用しているユーザにとっては一番よく使うフォーム ではないでしょうか。 といってもログインが保持されていれば初回の入力 以降はめったに入力する機会がないかも…

ローマ字のヘボン式と訓令式の違いとファイル名やクラス名の命名規則の参考サイトまとめ

web製作にたずさわっているひとであれば ローマ字、よく使いますよね。 ローマ字にはヘボン式と訓令式という 方式があるのはご存知でしょうか。 先日自分はどっちも使ってるなぁと思ったので、 どういう違いなのか改めて整理と、 ついでにファイル名やID、cl…

多言語サイトでの言語切り替え実装方法。PHPでブラウザの言語情報を判定して切り替える

多言語で展開するサイトでは、 デフォルトはアクセスしたユーザの言語で 表示したい。 日本語対応している海外のwebサイトに アクセスしたら英語だったら切り替えるの面倒ですよね。 できれば自分のわかる言語ページがあるなら最初から その言語で表示してほ…

絶対に役に立つ。Webデザイナーが知ってるとはかどるPHP「URLを判定して分岐」

絶対に役に立つWebデザイナーが 知ってるとはかどるPHPシリーズ。 本日は「URLを判定して分岐」です。 これは知っているとなかなか捗るんですよね。 WordPressだとトップページだけ表示するというのは すでに用意されている書き方がありますよね。 ここにト…

Webサイトでの特殊文字や記号は実体参照でHTMLに記述しよう

実体参照とは、 ある文字を別の書き方で書き表す方法です。 uhyohyo.sakura.tv 文字化けするような環境依存文字や特殊文字などを 表記する際に用いられる方法で、 HTMLコーディングする際には知っておきたい知識です。 よく使われるものとしては以下のような…