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

WordPressのウィジウィグでbrが反映されない WordPressのウィジウィグで「テキスト」表示に切り替えて、 「br」を入力しても、公開後消えてしまう。 そんな時の　記述を紹介します。 jQ...

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

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

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

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

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

jQueryでページ移動の際のフェードイン 「jquery」で中ページに移動する際にフェードインで表示される方法のご紹介です!! 「jquery.js」をダウンロード致します。 ダウンロード先 「fu...

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

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

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

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

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

jQueryで各コンテンツをフルスクリーンで表示させる方法をご紹介します 「jquery」でスクロールするとコンテンツ事にスクロールされるスクリプトの紹介です!! スマホの時に縦幅の影響で表示おかしく...

jQueryで画像をフワット表示させる方法をご紹介します 「jquery」でを使ってスクロールした際に画像を下からフワッと表示させます!! 「jquery.js」をダウンロード致します。 ダウンロード...

jQueryでtoggleメニュー作成 「jquery」でクリックした時に表示する方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 jRumble をダウンロード ダ...

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

コーディングとは？ コーディングとは、デザインされたデータを「HTML」や「css」「Javascript」や「PHP」などを使ってブラウザ上でボタンを押せたり、 動きをつけたりする事をコーディングと...

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

初めてのコーディング実践編 初めて1からコーディングをする時の手順を公開します!! 今回のコーディング内容 下記の画像の内容をコーディングしていきます。 サンプル画像 samole02 HTMLを作成...

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

jQueryでローディングアニメーションの設定 「jquery」でローディングアニメーションの設定方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 HTMLを記載 下...

jQueryでグラフを設定 「jquery」で画像が震える方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 jRumble をダウンロード ダウンロード先 HTMLを...

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

jQueryでグラフを設定 「jquery」でグラフを作成する方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してください。 ※読み...

jQueryでページトップを設定 「jquery」でページトップを設定する方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してくださ...

jQueryで画像を綺麗に配置 「jquery」でランダムな画像を綺麗に配置する方法をのご紹介!! 「Masonry.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加し...

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

jQueryでカレンダー作成 「jquery」でカスタマイズしやすいカレンダーのご紹介!! 「Calendar.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してくだ...

jQueryで画像を動かす 「jquery」でおしゃれな画像の見せ方にしたい!! 寒川神社を目標にまずは簡単にできる部分から設定していきます。 「jquery.min.js」をダウンロード致します。 ...