リストやスタイルシートで数字の連番を設定する方法 順番に数字を割り振りたい時に、数字を書くのが大変。 それぞれにクラスを与えるのも大変… そんな時に役立つ、連番の設定方法についてご説明しま...

よくある質問のテンプレートの紹介 サイトを作成する時によくある質問は結構ページとして作成されます。 そんなよくある質問についてテンプレートを紹介させて頂きます。 通常のよくある質問 特に動きもないよく...

スマホの際にtableを横スクロールで表示 PCサイトを作成した際に表を作ったけどスマホの時にでどうすればいいか？ 非表示にして同じ内容をSPで作ることないdrすか？ そんな時は横スクロールで表示して...

positionの使い方 今回は「position」の使い方に関しまして、ご説明致します。 「position」には色々な種類があります。 どのように分けて使用するかを説明致します。 position...

widthの横幅の設定の違い 今回は「width」の使い方に関しまして、ご説明致します。 「max」がつくのとつかない場合で、用途は大きく違います!! 「max-width」と「width」の違いに関...

marginとpaddingの違い 今回は「border-radius」の使い方に関しまして、ご説明致します。 「border-radius」とは角丸設定をするためのcssです!! 「border」が...

Cssでのセンター寄せ色々を紹介 Cssで要素をセンターに寄せたい場合、色々なセンターに寄せる方法があります。 センターに寄せる方法で悩んだ時はご覧ください。 1つの要素の場合 中身の要素が1つの要素...

Animate.cssの使い方 Webサイトに動きをつけたい!! そんな時にとても簡単にアニメーションをつける事が可能です!! Animate.cssのサイトにアクセス Animate.cssのサイト...

marginとpaddingの違い マージンとパディングの違いを解説していきます!! 上のスペース設定 margin-top: 20px;とpadding-top: 20px;の違い サンプル マージ...

display:flexの使い方編 コーディングでよく使うフレックスボックス!! そのオプションについてご説明させて頂きます。 「display: flex;」 親要素に設定する事で子要素が横並びに表...

セレクタを使う セレクタとは、クラスやIDを決める際の名前の部分「.hoge」の部分を指します。 新しいセレクタ一覧 それではスタイルしーとのセレクタの紹介をしていきます!! セレクタ名[href$=...

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

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

初めてのコーディング 初めて1からコーディングをする時によく使うCssの記述を紹介します。 whidth 「whidth」とは要素の横幅を設定するCss whidth:100px;/*横幅100px*...

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

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

フォントの初期設定 フォントサイズをbodyで初期設定10pxに変換。 body { font-size:62.5%; } /* 10px */ 100%は通常16pxがデフォルト設定。 フォントの計...

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

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

CSSでリンクのカラー設定 リンクのカラー設定について記載いたします。 基本的な設定 a{/*リンクされた文字*/ color:#000; text-decoration:none; } a:link...

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

list-style list-styleで数字や、ドットはどれだっけ？てなりますので備忘録として記載いたします。 黒丸 li.hoge{ list-style-type: disc; } サンプル ...

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

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

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