-
【コーディング初心者向け】数字の連番CSSリストやスタイルシートで数字の連番を設定する方法 順番に数字を割り振りたい時に、数字を書くのが大変。 それぞれにクラスを与えるのも大変… そんな時に役立つ、連番の設定方法についてご説明しま...
-
よくある質問のテンプレートCSSよくある質問のテンプレートの紹介 サイトを作成する時によくある質問は結構ページとして作成されます。 そんなよくある質問についてテンプレートを紹介させて頂きます。 通常のよくある質問 特に動きもないよく...
-
スマホサイトの際にtableをどの様に表示するCSSスマホの際にtableを横スクロールで表示 PCサイトを作成した際に表を作ったけどスマホの時にでどうすればいいか? 非表示にして同じ内容をSPで作ることないdrすか? そんな時は横スクロールで表示して...
-
【コーディング初心者向け】positionの使い方CSSpositionの使い方 今回は「position」の使い方に関しまして、ご説明致します。 「position」には色々な種類があります。 どのように分けて使用するかを説明致します。 position...
-
【コーディング初心者向け】max-widthとwidthの違いCSSwidthの横幅の設定の違い 今回は「width」の使い方に関しまして、ご説明致します。 「max」がつくのとつかない場合で、用途は大きく違います!! 「max-width」と「width」の違いに関...
-
【コーディング初心者向け】border-radiusの使い方CSSmarginとpaddingの違い 今回は「border-radius」の使い方に関しまして、ご説明致します。 「border-radius」とは角丸設定をするためのcssです!! 「border」が...
-
【コーディング初心者向け】センター寄せの方法CSSCssでのセンター寄せ色々を紹介 Cssで要素をセンターに寄せたい場合、色々なセンターに寄せる方法があります。 センターに寄せる方法で悩んだ時はご覧ください。 1つの要素の場合 中身の要素が1つの要素...
-
【コーディング初心者向け】Animate.cssの使い方CSSAnimate.cssの使い方 Webサイトに動きをつけたい!! そんな時にとても簡単にアニメーションをつける事が可能です!! Animate.cssのサイトにアクセス Animate.cssのサイト...
-
【コーディング初心者向け】marginとpaddingの違いCSSmarginとpaddingの違い マージンとパディングの違いを解説していきます!! 上のスペース設定 margin-top: 20px;とpadding-top: 20px;の違い サンプル マージ...
-
【コーディング初心者向け】フレックスボックスの使い方CSSdisplay:flexの使い方編 コーディングでよく使うフレックスボックス!! そのオプションについてご説明させて頂きます。 「display: flex;」 親要素に設定する事で子要素が横並びに表...
-
Css3セレクタ一覧CSSセレクタを使う セレクタとは、クラスやIDを決める際の名前の部分「.hoge」の部分を指します。 新しいセレクタ一覧 それではスタイルしーとのセレクタの紹介をしていきます!! セレクタ名[href$=...
-
DreamweaverでSassを使う方法CSSSassとは? Sassとは、「Syntactically Awesome StyleSheet」の事を言います。 簡単に説明するとスタイルシートを簡略して書く記述の方法の事です。 SassからCss...
-
WebコーディングCss適用編CSSCss適用編 前回作成した、「初めてのコーディング実践編」で作成したHTMLデータを元にCSSを適用していきます!! 前回のデザイン内容 下記の画像の内容を元にCssを調整していきます!! サンプル画...
-
Webコーディングする時によく使うCss編CSS初めてのコーディング 初めて1からコーディングをする時によく使うCssの記述を紹介します。 whidth 「whidth」とは要素の横幅を設定するCss whidth:100px;/*横幅100px*...
-
リンクタグボックス全体を囲う方法CSSaタグでボックス全体を囲いたい時 ボタンをcssで作成した際に、全体を囲いたい!! そんな時に使えるcssを記載します。 cssを記載 下記のソースを追加してください。 HTMLを記載 下記のソースを...
-
Cssの新しい単位vw, vh, vmin, vmaxCSSViewport 今までの%ではなく新しい単位があります。 vw viewport width ビューポートの幅に対する割合 vh viewport height ビューポートの高さに対する割合 vm...
-
フォントサイズの指定方法CSSフォントの初期設定 フォントサイズをbodyで初期設定10pxに変換。 body { font-size:62.5%; } /* 10px */ 100%は通常16pxがデフォルト設定。 フォントの計...
-
Bootstrapの使い方CSSブレイクポイント スマホ:767px以下 タブレット:768px〜991px PC:992px〜1119px PC大画面:1200px以上 クラスの設定 スマホ:.col-xs-1(カラム数) タブレ...
-
正直しんどいコーディングを快適に〈フレームワーク〉CSSCSSフレームワーク Bootstrapや、Foundation/Pure/など色々な「フレームワーク」が配布されています。 CSSフレームワークは、コーディングの際に、簡略化するという「フレームワー...
-
cssでリンクカラーを変更する方法CSSCSSでリンクのカラー設定 リンクのカラー設定について記載いたします。 基本的な設定 a{/*リンクされた文字*/ color:#000; text-decoration:none; } a:link...
-
CSS3「transform」のまとめCSSCSS3のtransformでテキストや画像を動かします!! ベンダープレフィックスは省略しています。 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 tr...
-
list-style-typeのサンプルCSSlist-style list-styleで数字や、ドットはどれだっけ?てなりますので備忘録として記載いたします。 黒丸 li.hoge{ list-style-type: disc; } サンプル ...
-
CSS3とはCSSCSS (Cascading Style Sheets)とは CSS とは、ホームページの見た目や構造などのスタイルを構築するための言語です。 HTML やXHTMLでWebサイト内の各要素の意味や情...
-
css3 Flexboxの使い方CSSFlexboxの使い方まとめです レスポンシブのコーディングをする際に参考になるように記事書きます!! 基本の使い方 クラスに、【display: flex;】を追加します。 .sample{ dis...
-
CSS3に変わってできるようになった事CSSCSS3からの変更点 CSS3に変わってから、色々な表現を手軽にcssで実装できるようになりました。 CSS3の前から画像などで実装していた部分もcssのみで実装可能になりました。 またどのような機能...