とあるweb屋の仕事術

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

CSS/SCSS

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

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

新聞風のデザインのWebサイト『TEAM 202X 政策実現ドキュメント・メディア』のフォントやレイアウトがイケてる

昨日シフトブレインさんがケースステディとして公開していたWebサイト『TEAM 202X 政策実現ドキュメント・メディア』 ケーススタディ「TEAM 202X 政策実現ドキュメント・メディア」を公開しました https://t.co/ytEjLmMHkp — シフトブレイン/スタンダードデ…

有益で鮮度が高い情報が満載の CSS Nite はベスト・セッションで過去のセミナーの音声やスライド資料が見れる。最&高。

CSS Niteは Web製作に関するセミナーです。 Web製作に関わっている人間であれば 知らないひとはいないんじゃないでしょうか。 (ちなみにアイキャッチの画像はCSS Niteの様子ではありませんあしからず...) 有益なセミナーが全国各地で行われています。 cssn…

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

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

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

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

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

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

これ指定しときゃOK!洗練されたデザインになるグレースケール系のカラーまとめ(ボーダー/テキスト/背景)

Webサイトのデザインをしていて なんか野暮ったいな、 なにか締まりがないなと感じたことありませんか? 余白やコンテンツの配置、レイアウト... さまざまな要因が組み合わさってデザインは洗練されていくもの。 Webサイトのデザイン要素の中で ボーダーカラ…

HTMLメルマガ作成はこれだけ見ておけばOK!参考になる記事まとめ

先日HTMLメルマガを実装する機会が あったので、作成の参考にした良記事を まとめておきたいと思います。 検索するといろいろなメルマガテンプレートが ありますが、各種メールソフトで確認すると、 実用に耐えうるレベルじゃないものが多いなという 印象を…

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

昨今CDNで外部ドメインからCSSやJSを参照することが多いと思います。その際に指定しておきたいのが「integrity属性」です。 Integrity属性とは Subresource Integrity (SRI) とは、CDN などから取得したファイルが意図せず改ざんされていないかをブラウザが…