• ホーム
• CSS

カテゴリー：CSS

1. 02.05

   【CSS】「TailwindCSS」の再利用について(@apply)、レスポンシブ対応(@responsive、@screenなど）

   @apply tailwindはどうしても長くなるので可読性が落ちます。そういう場合は似たようなcssをまとめて再利用することも可能です。（通常のcssのように使うことができるみたいなイメージですね。） 記述方法 CSS [cray…

   • CSS
   • コメントを書く

2. 02.05

   【CSS】「TailwindCSS」の文字装飾、ブロック装飾

   文字装飾 フォントファミリー font-sans tailwindのデフォルトのフォントファミリーになります。 font-serif フォーマルな印象を与えます。 font-mono 等幅フォントです。 オリジナルフォント …

   • CSS
   • コメントを書く

3. 01.15

   【CSS】「TailwindCSS」について

   TailwindCSSとは？ Utility Firstという概念で設計されたCSSフレームワークです。また、モバイルファーストで作ることが推奨されています。（スマホサイトを作ってから、タブレットやPCのコーディングをしていくコーデ…

   • CSS
   • コメントを書く

4. 12.17

   【CSS】セレクタの優先度、保守性向上(BEM、OOCSS、SMACSS、FLOCSS、MCSS）

   セレクタの優先度 !important 基本的には避けたい。複雑なシステムの場合はこれを使いがちになってしまいます。 インライン記述（style属性) 外部のCSSファイルで一元管理されることが望ましい。 I…

   • CSS
   • コメントを書く

5. 01.05

   【BootStrap】「ナビゲーションバー」、「ドロップダウンメニュー」解説

   ナビゲーションバー サイトの上部に配置されてメインメニューとして使われる利用頻度が高いコンポーネントです。 サンプル PC ドロップダウンメニュー スマホ ソース [crayon-68b349ee42ccb3485…

   • CSS
   • コメントを書く

6. 01.01

   【BootStrap】コンポーネントまとめ

   アラートコンポーネント alert alert-色 適切なアラートを表示できます。 alert-link アラートにリンクのような装飾を施すことが可能です。背景色によってリンク文字列が見にくくなるのを防ぐことが可能です。 aler…

   • CSS
   • コメントを書く

7. 01.01

   【Bootstrap】「レイアウト」の基本、「スペーシング（余白）」、「ディスプレイユーティリティ」、「サイジングユーティリティ」について

   レイアウトの基本 BootStrapにおいてレイアウトをする際に押さえておいた方が知識をまとめます。主に下記3つの概念が重要になります。 コンテナ グリッドシステム ブレイクポイント コンテナ BootStr…

   • CSS
   • コメントを書く

8. 12.10

   【BootStrap】概要的な知識、基本的なクラス

   BootStrapの特徴 レスポンシブWebデザインでマルチデバイスに対応 フォームやボタン、ナビゲーション等をパーツとしてコンポーネントと呼んでいます。 デフォルトでjQueryライブラリを使うようになっています。 …

   • CSS
   • コメントを書く

9. 07.08

   【CSS】「Flexbox」の「flexコンテナー」、「子要素」について

   Flexboxとは？ 複雑化したWebアプリのレイアウトを組みやすくすることを目的としてCSS3から導入されました。 Flexboxの構成要素 Flexboxコンテナ CSSにて、「display:flex」と指定…

   • CSS
   • コメントを書く

10. 07.08

    【CSS】「Bulma」、「Buefy」

    Bulmaとは？ CSS3標準である「Flexbox」をベースにしたCSSのフレームワークのことで、BootStrap等のjQueryゴリゴリなフレームワーク等に比べると、軽量なフレームワークで、学習コストも低く導入しやすいです。 …

    • CSS
    • コメントを書く