はてなブックマーク

サイトにアクセスした最初の時点から、スクロールをするとサイズが小さくなるヘッダーってよくありますよね。最初は大きく見せたいけど、スクロールしてコンテンツを見始めたら小さくしたい、というものです。 使う機会の多い技術ですので、簡単な方法をまとめてみます。 HTML / CSS / JS で作っていきます。 仕様を決める 今回は、下記の仕様を想定して作っていきます。 ヘッダーの中にはロゴとナビゲーションの2つの要素がある。スクロール量が、ヘッダーの高さを超えると、小さくなる。スクロール量が、ヘッダーの高さを下回ると、元に戻る。 これを実現するために、ヘッダーの高さを基準に、スクロール量によって、それぞれの要素にclassを付けたり取ったりするスクリプトを書いていきます。 要素をJSで取得 JSで取得して操作したい要素は下記のものになります。 ヘッダー要素　<header id=”header”

サイト構築をしていると様々な場面で条件分岐が必要になることがありますよね。特にレスポンシブデザインになってからはウィンドウ幅による条件分岐をよく使います。 CSSであればメディアクエリーでやればいいのですが、JavaScriptの場合にはどうしていますか？普通にウィンドウ幅を取得して分岐ということが多いかと思いますが、今回は私なりの方法をご紹介します。 まず正確なウィンドウ幅を取得します。 ウィンドウ幅を取得するにもスクロールバーを含めたり含めなかったりと色々な方法がありますが、今回はCSSのメディアクエリーの反応と同じにするため、スクロールバーを含めた値を取得することにします。ここが間違っているとその先が全部狂ってしまうので、以下の記述で正確な値を取得しましょう。 $windowWidth = window.innerWidth; javascriptでのwindow.innerWidt

主に使用するCSSプロパティは、transform: skew();です。 CSSで平行四辺形を作る。 まずはtransform: skew();を使って平行四辺形を作ってみます。 ただ図形を作るだけなら非常に簡単にできます。 <style> div.test1{ transform: skewX(-45deg); width: 100px; height: 50px; margin:0 auto; background-color:#00FBFF; } </style> <div class="test1"> </div> しかし、この書き方だとdivの中の要素まで変形してしまいます。 文字を入れると以下のようになります。 <style> div.test2{ position: relative; z-index: 1; text-align: center; margin: 0 au

WEBデザインやプログラムなど、技術系のブログ記事を書いていると、“ソースコード”をどのような見た目で書くか悩むことがあると思います。 普通の文章と同じようにソースコードを書いてしまったら読みづらくてしょうがないです。 ソースコードを色分けすることを“シンタックスハイライト”と言いますが、これを実現してくれるWordPressのプラグインがいくつかあります。 しかし、WordPressが5.0(Gutenberg)にバージョンアップしたときに「Crayon Syntax Highlighter」というプラグインが使えなくなってしまったことをきっかけに、プラグインに頼るのが不安になりました。 そこで、プラグインを使わずに、「highlight.js」というJavaScriptライブラリを使って“シンタックスハイライト”をすることにしました。 highlight.js の使い方 まずはWord

お名前.comで取得したドメインを、メールはGsuiteに、WEBサイトはサクラインターネットに向ける方法。 1つのドメインを、メールはGsuiteに向けて、WEBサイトのサーバはサクラインターネットに向ける、という作業をしましたので、その記録をしていきます。 もう少し具体的に申しますと、 GoogleのGsuiteというサービスを使うと、独自ドメインでGmailを使うことができます。この設定と、レンタルサーバ(サクラ)と独自ドメインを紐づける設定を同時に行います。 お名前ドットコム内でのDNSレコード設定 結論から申し上げますと、難しい設定はお名前ドッドコムの中の「DNSレコード設定」になります。 そして、結果的には下記画像のような設定になります。 手順としては、 ①Gsuiteへの連携　②サクラサーバへの接続　③サブドメインの取得 で行いました。 Gsuiteへの連携は手順通りにやれば

WEB制作のCSS設計において、marginのルールを上か下かどちらに統一すべきかという議論は色々なところで行われてきました。 私もWEBサイトの制作を仕事にしてから10年ほどになりますが、この問題を日常的に考えてきました。 世の中のデザイナーさんやコーダーさんの記事を読んでいると、いくつかの結論がありました。 ・下marginで統一派 ・上marginで統一派 ・状況によって上も下も使い分ける ・サイトごとにルールが決まってればいい これだと全パターンありますよね。数としては下margin派が一番多いと思います。 ある意味、ちゃんと設計してあれば良いっていう感じもします。 今回は私なりにベストだと思うルールを紹介してみたいと思います。 一文で表すなら、 「基本的に下marginだけど場合によって上marginも使う。上に配置される要素が変わる要素には上marginも使う。」 これを分解し