カテゴリー: CSS の記事一覧

Sassとは？ Sassとは、「Syntactically Awesome StyleSheet」の事を言います。 簡単に説明するとスタイルシートを簡略して書く記述の方法の事です。 SassからCss...

Css適用編 前回作成した、「初めてのコーディング実践編」で作成したHTMLデータを元にCSSを適用していきます!! 前回のデザイン内容 下記の画像の内容を元にCssを調整していきます!! サンプル画...

初めてのコーディング 初めて1からコーディングをする時によく使うCssの記述を紹介します。 whidth 「whidth」とは要素の横幅を設定するCss [crayon-5c709fdb3b36455...

aタグでボックス全体を囲いたい時 ボタンをcssで作成した際に、全体を囲いたい!! そんな時に使えるcssを記載します。 cssを記載 下記のソースを追加してください。 [crayon-5c709fd...

Viewport 今までの％ではなく新しい単位があります。 vw viewport width ビューポートの幅に対する割合 vh viewport height ビューポートの高さに対する割合 vm...

フォントの初期設定 フォントサイズをbodyで初期設定10pxに変換。 [crayon-5c709fdb3c4e6232572562/] 100%は通常16pxがデフォルト設定。 フォントの計算を楽に...

ブレイクポイント スマホ:767px以下 タブレット:768px〜991px PC:992px〜1119px PC大画面:1200px以上 クラスの設定 スマホ:.col-xs-1(カラム数) タブレ...

CSSフレームワーク Bootstrapや、Foundation/Pure/など色々な「フレームワーク」が配布されています。 CSSフレームワークは、コーディングの際に、簡略化するという「フレームワー...

CSSでリンクのカラー設定 リンクのカラー設定について記載いたします。 基本的な設定 [crayon-5c709fdb3d13a461134416/] クラスで設定する際の指定 [crayon-5c7...

CSS3のtransformでテキストや画像を動かします!! ベンダープレフィックスは省略しています。 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 tr...

list-style list-styleで数字や、ドットはどれだっけ？てなりますので備忘録として記載いたします。 黒丸 [crayon-5c709fdb3ddd8471949917/] サンプル サ...

CSS (Cascading Style Sheets)とは CSS とは、ホームページの見た目や構造などのスタイルを構築するための言語です。 HTML やXHTMLでWebサイト内の各要素の意味や情...

Flexboxの使い方まとめです レスポンシブのコーディングをする際に参考になるように記事書きます!! 基本の使い方 クラスに、【display: flex;】を追加します。 [crayon-5c70...

CSS3からの変更点 CSS3に変わってから、色々な表現を手軽にcssで実装できるようになりました。 CSS3の前から画像などで実装していた部分もcssのみで実装可能になりました。 またどのような機能...