youtube（iframe）の埋め込み動画をレスポンシブ対応にする
youtube動画をホームページに掲載する機会も増えてきました。動画サイズを固定するので…
小金井にあるWEB制作会社の備忘録
MEMORANDUM数多くのホームページをご依頼いただいている中で、実際に株式会社衆が制作に携わった案件の中で使用している手法や、基礎知識に関しての備忘録を掲載。
自社でホームページの制作やシステム開発を行われる際の参考例として、またはホームページをご依頼される際の予備知識としてお役にたてれば嬉しいです。
-
CSS
-
CSS
CSS「object-fit」を使って画像を表示枠に合わせてトリミング
画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど…
-
CSS
CSSの疑似クラスを使ってｎ番目の要素を取得
HTMLコーディングをしているとｎ番目の要素から間隔を空けたり、交互に彩色したりというこ…
-
CSS
CSS「calc」を使って計算式で実装する
表示する画面幅に合わせて可変するデザインを制作する際に「display:flex」を使っ…
-
CSS
CSS「display:flex」で「clearfix」を使わずに要素を並べる。
創業時（2010年頃）にお世話なっていた「clearfix」。当時は要素を横に並べると言…
-
CSS
CSS「gradient」を使ってグラデーションを実装
CSSでのグラデーション。2色程度の簡単なものは、使っていたけど調べてみると奥が深そうだ…
-
CSS
CSS「position」を使って背景画像にリンクを設置
不動産関連の採用サイトの改修に携わった際に使用した背景画像へのリンクの実装方法をメモ。背…
-
CSS
CSS「transition」を使ってマウスオーバー時にアンダーラインを表示
グローバルメニューにマウスを乗せた際の動きもバリエーションが増え、サイトによって様々。こ…
-
CSS
CSS「keyframes」を使ってアニメーション効果を実装
オンマウス時などにCSSのみで簡易的なアニメーション効果を実装する方法をメモ @k…
-
CSS
文字サイズは「rem」を使って一括管理
webサイトを作る上で、文字の大きさを考慮することは非常に大切。一文字ずつ「px」で設定…
-
CSS
「transform」でマウスオーバー時に画像を反転（3D回転）
以前求人サイトを手掛けた時に使用した、マウスオーバーの時に3D回転（反転）をする方法をメ…
-
CSS
疑似要素と「counter」で自動ナンバリング
ポイント等を表現する時にナンバリングをしていますが、項目増えたり、並び替えた際に番号の振…
-
CSS
Font Awesomeを使ってWebアイコンを実装
ホームページを制作する中でアイキャッチ等のポイントとして使われているアイコン。以前は画像…
-
CSS
Google Web Fontを使って文字を装飾する
コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かっ…