とあるweb屋の仕事術

とあるweb屋の仕事術

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

CSS/SCSS

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

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

2019年5月17日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月17日号です。 気になる動向・ニュース 【速報】新しく出てきた「Google Travel」がヤバい件。旅行代理店が消える未来? ついにLINEにも「ストーリー」機能実装!タイムライン…

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

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

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

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

2019年5月12日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月12日号です。 気になる動向・ニュース キャッシュレス推進の鍵となる「個人間送金」。Pay系サービスの対応に違い 今回は記事少なめですが、まとめです。どうぞー。 jp.techcru…

2019年5月9日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月9日号です。 気になる動向・ニュース Instagram、アカウント停止に関するガイドラインを改定へ LINEアプリ「画像内の文字起こし」機能を追加!画像内のテキスト翻訳も対応 勉…

2019年5月8日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月8日号です。 気になる動向・ニュース セブン&アイHDがレジ袋全廃へ 紙袋などに変更、2030年目標 GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ …

2019年5月7日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 火曜日の2019年5月7日号です。 いろいろ動きがありました。要チェックですね。 気になる動向・ニュース Twitter、画像・動画付きでリツイートできるように iOSが独自にスワイプ入力方式…

2019年5月5日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 日曜日の2019年5月5日号です。 それでは学びの多い良記事まとめです。どうぞー。 www.negireon.com www.fnn.jp グーグル検索結果にファビコンが表示されるようになったのね!これはいい…

2019年5月2日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 木曜日の2019年5月2日号です。 気になる動向・ニュース Google、ロケーションや検索履歴データの自動削除機能 3カ月か18カ月から選択可能に facebook 新サービス発表 f8まとめ (及川さ…

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はデザインの「装飾…