とあるweb屋の仕事術

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

修正が反映されない!?webサイトの修正、更新でハマりがちな「キャッシュ」

HTMLやJavaScript、CSSを確かに 修正・更新したはずなのに、 webサイトに内容が反映されない。 そんな現象にでくわしたらキャッシュを 疑いましょう。 キャッシュを知らない新人webデザイナーがハマっている ケースを何度か見てきました。 新人でなくても、w…

CDNから参照するcss、JavaScriptには Integrity 属性を入れよう

さて昨今CDNで外部ドメインから CSSやJSを参照することが多いと思います。 その際に指定しておきたいのが「integrity属性」です。 「integrity属性」とはなんぞや、ということなんですが、 下記のブログが参考になります。 3jigen.net 上記ページでも引用さ…