Code

Code

【CSS】長さの単位はpxだけじゃない|単位の一覧表と換算ツール

CSSでサイズ指定といえばpx単位ですが、実は他にも色々な単位が使えます。 いや、emとか%とかもそうなのですが、今回は相対的な長さを指す単位は置いておいて、絶対的な長さを指す単位について解説したいと思います。 cmやmmもCSSで使えるし...
Code

【CSS】サイズ指定に使う単位はどれが最適か|em・%・px・vwなどなど

CSSでサイズ指定に使う単位といえばpxやem、%などがありますが、なんとなく使ってしまいがちなので、一度整理してみたいと思います。 絶対的な長さの単位と相対的な長さの単位の使い分けや、それぞれの単位の意味を解説します。 CSSにおける主な...
Code

data-vocabulary.orgマークアップをschema.orgに置き換える

Google Search Console から、『サイト で「パンくずリスト」の問題が新たに検出されました』というタイトルのメールが届きました。 警告は、サイトの改善のための推奨項目です。警告によっては、検索結果での表示に影響がある場合が...
Code

【Pug】include, mixin, each, whileの使い方

Pugを使えばhtmlマークアップを高速化でき、メンテナンスもしやすくなります。 include文を使うと、他のpugファイルはもちろん、javascriptやcssといった他の形式のファイルも読み込めます。ファイルを分割管理して、メンテナ...
Code

【Pug】基本の書き方!コメントアウトやコードの挿入も

これさえ分かれば、とりあえずPugが書けます。基本的な書き方をまとめました。
Code

【CSS】object-fitで画像の中央配置もトリミングも自由自在

CSSで画像を枠内に収めたい、ボックス中央に配置したい時に。object-fitプロパティの使い方。object-fitが効かないときのチェックポイントも。
Code

highlight.jsでソースコードのハイライト表示をする

highlight.jsを使ってソースコードを美しく掲載しましょう! ここではポイントを3つに分けてご紹介します。 スタイルを選ぶhighlight.js の使い方フォントを変える スタイルを選ぶ highlight.jsのデモでハイライト...
Code

完全レスポンシブなjQueryスライダーを自作|flexbox活用でresizeイベント不要・超軽量!

jQueryで動く自作の画像スライダー(カルーセル)のコードを解説!resizeイベントを使わないレスポンシブ仕様、フリックも対応。
Code

jQueryとCSSアニメでスライダーを簡単自作|フェードエフェクト編

プラグインを使わずにCSSとjQueryで簡単に自作できるスライダーのコードを解説!