とあるweb屋の仕事術

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

コーディング

メルカリPCサイトに学ぶ。複数行のテキストを省略して末尾...の3点リーダーに代わるホワイトアウト省略方法

一覧表示のUIでよくある、 テキスト省略のTipsです。 CSSでは、指定した領域をはみ出したときに、 テキストを三点リーダー「...」で省略する プロパティがありますよね。 developer.mozilla.org ただこちら、1行のテキストにしか対応できません。 複数行でい…

【良記事紹介】meta descriptionのベストプラクティス。指定しない(Googleの自動抽出にまかせる)という考え方

サイトの meta description を指定せずに Googleの自動抽出にまかせる方針のほうが よいのでは、という良記事の紹介です。 www.waca.associates 一部引用します。 実務的に考えると、meta descriptionを1ページずつしっかりと考えるのは、かなりの手間です。…

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

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

超簡単。Webサイトのページ内でのPDF埋め込み、インライン表示、疑似サムネイル化表示の実装は「Google Docs Viewer」がおすすめ。むずかしい実装は不要!

WebページへのPDF埋め込みの要望は意外に多い Webサイト、Webページで PDFを掲載したいと クライアントから要望を もらうことがよくあります。 PDFをインラインで表示したい PDFをサムネイルのように表示したい PDFを埋め込みたい 別ページに飛ばしたくない…

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

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

まだtableで消耗してるの?スマホサイト、レスポンシブサイトでのtableのUIどうする問題

スマホサイトやレスポンシブの Webサイトで厄介なのが 表組み(table)です。 表が2列3列程度であれば 問題ありませんが、列が多いtableや、 セルの項目のテキスト量が多いtable組みの ような横に長いレイアウトは 幅の制約があるスマホサイトや レスポン…

管理画面にWYSIWYG(ウィジウィグ)を採用してしんどかった話

WebサイトやWebシステム、 Webサービスには 管理画面と公開画面があります。 WordPressにもありますよね。 僕の勤めている会社では 受託でWeb製作しているのですが、 いわゆるCMSは、 独自開発したCMSを使っています。 クライアントごとにオーダーメイドに …

アドビからコーディングやプログラミング用途に最適化されたフォントがまたリリース。Source Han Mono(源ノ等幅)

先日、プログラミングやコーディングに おすすめなフォントを紹介しましたが、続報です。 www.toaru.jp 先日アドビがまた新たにフォントを リリースしました。 「Source Han Mono(源ノ等幅)」です。 https://forest.watch.impress.co.jp/docs/news/1186980…

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

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

レスポンシブWebデザインのブレイクポイントの設定2019年度版

レスポンシブWebデザインでの ブレイクポイントの設定の目安に なるのがマテリアルデザインの ブレイクポイントの数値です。 Responsive layout grid - Material Design マテリアルデザインのブレイクポイントシステム ブレイクポイントは細かく設定しすぎる…

クライアントワークで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…

Bootstrapの無料のテーマギャラリーサイト Bootswatch が便利&参考になる

Bootstrapとは ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレ…

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

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

webサイトの画像を簡単には保存できないようにするCSS「pointer-events」が便利

クライアントワークの webサイトの受託案件で たまにくる要望。 「画像保存できないようにしてほしい」 web製作あるあるだと思います。 結論から言うとwebサイトの画像を 保存できなくする方法はありません。 webにあがっている以上、それは どうしようもな…

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

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

日本語も見やすくてコーディング、プログラミングに最適化されたフォント「Source Han Code JP」がオススメ

コーディング、マークアップ、プログラミングをする際の エディタソフトではどのようなフォントを使用していますか? 僕は「Source Han Code JP」を使用しています。 Source Han Code JPとは 日本語表示も考慮されたコーディング向けのフォント「Source Han …

webサイトにSVGを表示する方法。SVGタグコードはIllustratorからコピペでOK

webサイトにSVGを掲載する方法は、 svgファイルとして掲載 svgタグとして掲載 の2パターンがあります。 SVGの取り扱いに参考になるサイト HTML5でのSVGファイル操作のおさらい - Qiita SVGを使うときに知っておくといいことをまとめました - Qiita 今回は「s…

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…

特定のブラウザだけCSSを調整したいときはハックを使おう

大手のナショナルクライアントの webサイトではいまだにIEが捨てきれずに 動作保証範囲としているwebサイトも多いと思います。 Microsoftが、企業にIE11の使用をやめるように 推奨はしているものの、ユーザの使用率によっては 捨てられないwebサイト、サービ…

クライアントからもらう資料のテキストをそのままコピペするとスペースやゴミデータがはいることあるので注意

クライアントから資料をもらって、 webサイトにテキストを掲載するとき。 クライアントは、パワポやWordファイル、 エクセル、CSV、PDF...などなどいろいろな ファイル形式で送ってきますよね。 実装あるあるなんですが、 それらのファイルからテキストをコ…

リセットCSSの種類をざっくりおさらい。リセットCSSはどれを使うか問題。

リセットCSSについての すばらしい良記事がありました。 becolomochi.hatenablog.com 昨今、リセットCSSにもいろいろ種類があります。 記事で紹介されているCSSは以下の4つ。 Eric Meyer’s “Reset CSS” 2.0Normalize.cssress.csssanitize.css それぞれざっく…

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

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

【Twitter/Facebook/Instagram】の各SNSウィジェット生成、URLのまとめ

TwitterやFacebook、Instagramは webサイトでウィジェットとして タイムラインを表示してあるサイト よくありますよね。 お知らせのようにCMSのかわりとして フェイスブックのタイムラインを表示 させたり、 デザインのにぎやかしやライブ感を出す ために In…

webサイトにメールアドレスを掲載するときの迷惑メール・スパム対策

webサイトにメールアドレスを 掲載するときに、そのまま メールアドレスをHTMLのソースに 記述してしまうと、スパム業者の標的に されます。 スパム業者は自動収集プログラムで webサイトのソースコードを解析し、 メールアドレスを収集します。 収集したメ…

絶対に役に立つ。Webデザイナーが知ってるとはかどるPHP「strip_tags」HTMLタグを削除して出力

Webデザイナーが知ってるとはかどるPHPシリーズ、 知っていると得をする・役に立つ! 今回は「strip_tags」です。 動的なコンテンツを取り扱うwebサイトでは いろいろな箇所にコンテンツを出力しますが、 ある場所に表示するときには、brタグ抜きで 素のプレ…

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

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