とあるweb屋の仕事術

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

CSS/SCSS

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

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

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

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

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

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

新聞風のデザインの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; ですね。…

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

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

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

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

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

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

HTML/CSSの文法チェック、バリデーションツールはこれ使っとけばいいよ2選

HTMLとCSSの文法チェック、 バリデーションツールのご紹介。 最近だとエディタにアドオンやパッケージ、 プラグインなどでバリデーション機能が ついていたりするので、コーディング・開発実装時に チェックすることもできますが、やはり 「最終型としてのソ…

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

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

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

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

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

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

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

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

Webサイトのフォント指定。font-family設定の参考サイトまとめ

font-family の指定は奥が深い。 少し古い記事もあるのですが、 どういったロジックで、考え方で指定しているのかなど参考になります。 qiita.com dainamo.jp sole-color-blog.com anyushu.com 11html.com wemo.tech www.webdlab.com shiru-web.com saruwaka…

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

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

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

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

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

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

CSSの疑似要素はあくまで装飾、意味のあるアイコンや文言には使用しない。

CSSの疑似要素、便利ですよね。 疑似要素については下記の記事が参考になります。 まだ知らない方はどうぞ。 saruwakakun.com この疑似要素ですが、 便利ですが、使いどころはしっかりと考えなくてはいけません。 疑似要素はCSSです。 CSSはデザインの「装飾…