CSS│株式会社シーポイントラボ

【CSS】私的なdisplay: gridでデザインを柔軟に変えられる書き方の紹介

　グリッドデザインは縦横を整えたデザインを作るのに便利です。縦横がそろっていると見た目的に整った印象があり、見やすくなります。同じ構成の要素を繰り返し描く時、同じ形のグリッドを繰り […]

　display: gridは便利であり様々な使い方ができます。これを表のように使いたくなるときがあります。例えば次のようなコードで表のようなレイアウトを実現できます。　こんな感 […]

　動画を視聴中にvideo要素をダブルクリックするとブラウザの機能によって動画が全画面再生されます。便利な機能ではありますが動画を見ながら他の作業をする前提のwebサービスでは不意 […]

　webページをユーザーが印刷する際、印刷対象となる要素を絞り込みたくなる場合があります。例えばメニュー、ヘッダー、フッター、サイドバーなどのwebページを便利にするためのパーツを […]

　次図のようなレイアウトで、スクロールが発生するほど大きな要素を内部に持っていてもヘッダーとフッターを画面内に置き、コンテンツだけをスクロールできるようにする方法を紹介します。　 […]

　HTMLメールはメールクライアントがHTMLやCSSを用いてメールの見た目を構築するリッチな機能であり良いデザインを作る手助けをしてくれます。しかし全てのメールクライアントが同じ […]

　画面のサイズは無限ではありません。このため表示したいものや操作したいものが増えてきて、それを一画面に押し込めようとするとどうしてもごちゃごちゃしてしまいます。この記事ではごちゃご […]

　CSS の三角関数が主要ブラウザで実装されきる日が近づいてきたので、これの使用例として任意の2要素を直線で結ぶ方法を紹介します。 2023年はCSSで三角関数「sin(), co […]

　時折、画面の余っている部分いっぱいに要素を広げたいという要望があります。そういった時の解決方法は様々ありますが、なるべく設定が壊れにくい方がいいです。グリッドデザインならばこれを […]

タイトル通り、Table要素のセルに斜線を引く方法についてです。なお、私は <td> 要素に引きたかったので、そのように記述しました。参考に…というかまるっとコード […]

　例えば次の様な木構造のデータがあります。これは PHP のフレームワークである Laravel 内の一部分のファイルとディレクトリです。 Mail ├── Attachment. […]

CSS で印刷時のレイアウトを指定できる @media print を使った時に、印刷時のレイアウトを簡単に確認する方法についてです。使用頻度はそこまで高くなさそうですが、今後も […]