devsakaso

2021年4月10日

CSSのボックスモデルを理解することで、とても自由にレイアウトが組めるようになります。

この記事を読むことで、

widthとheightを理解する
borderを理解する
paddin ...

2021年4月10日

displayプロパティは使っていないWebサイトはほぼ存在しないほど、多用されています。
そのわりに、イメージがわきにくいプロパティです。
displayプロパティの仕組みを図表を使って直感的にわ ...

2021年4月10日

positonプロパティをマスターすることで、好きな要素を好きな場所に配置したり、スクロールしても同じ位置に配置するような表示ができるようになります。

positionプロパティの使い方と具体例
要素の ...

2021年4月10日

レスポンシブ対応にするときや、HSLで色を指定するときなどで、計算が煩雑になる場合があります。
それは往々にして、計算する際に単位が異なっていることがあるからです。(％とpx）など。

calcは ...

2021年4月10日

CSSでテキストやボタンに影をつける方法をみていきましょう。

まずは、基本的なことから勉強しましょう。

CSSで影をつけるためのプロパティ

box-shadowプロパティとtext-shado ...

2021年4月10日

背景は面積が大きいため、WebサイトやWebアプリに与える印象はとても大きいです。

そんな背景を整えることができるCSSをみていきましょう。

背景のスタイリングするためのCSS

backgro ...

2021年4月10日

floatプロパティを使うと、要素を右に表示したりすることができます。

サイドバーや細かい部品に使うことも多く、理解しておく必要があります。

CSSのfloatの使い方

floatプロパティを ...

2021年4月10日

HTMLとCSSを紐付けるために使うのが、セレクターです。

CSSのセレクターの知識は自由にHTMLを装飾する上で基本的な土台となるので、しっかりと学んでいきましょう。

CSSの基本セレクターの種 ...

2021年4月10日

CSSには、複数の組み合わせ方法があり、それらを使いこなすことで、より短く記述したり、自由に装飾することができます。

その組み合わせの際に使う記号のことを、結合子といいます。

どんな組み合わ ...

2021年4月10日

擬似クラスは、セレクターに付加するキーワードのことで、選択された要素に対して特定の状態を指定します。
例えば、クリックしたとき、とかマウスでホバーしたとき、といった特定の状態のときに、CSSでスタイリングで ...

2021年4月10日

擬似要素を使いこなせると、よりおもしろい表現が可能になるので、ぜひ使いこなせるようになりましょう。

擬似要素について

擬似要素は、要素の特定の部分をスタイリングするときに使います。
疑似要素には、 ...

2021年4月10日

属性セレクターには、便利は指定方法があるので、みていきましょう。

 

属性セレクターの便利な指定方法完全一致 → で、【属性】が【値】の要素
前方一致 → で、【属性】が【値】で始 ...

2021年4月10日

CSSにはレイアウトを自由に操ることができるフレックスボックスがあります。
フレックスボックスを利用すると、文章、画像、動画といったアイテムをレスポンシブに対応した自由に配置にできるようになるので、さっそく ...

2021年4月10日

CSSのアニメーションを使えるようになることで、目を引くデザインや、より洗練された動きのあるWebサイトを作成できるようになります。

CSSアニメーションの基礎の知識をまとめたので、確認しておきましょう ...

2021年4月10日

スマートフォンやタブレットやデスクトップといったPCのどの画面からでも快適に最適な表示ができることをレスポンシブウェブデザインといいます。
いろんな媒体で閲覧される近年では必須の知識なので、そのためのCSS ...

2021年4月10日

CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。
管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。

CSS変数ってどう便利なの？

ま ...

2021年4月10日

グリッドレイアウトは、CSSの比較的新しい技術です。
グリッドレイアウトが使えるようになると、とてもおしゃれに写真やカードを配置することができるようになります。

ではグリッドレイアウトは具体的に ...

2021年4月7日

JavaScriptのObject.keys()メソッドとObject.values()メソッドとObject.entries()メソッドについてまとめました。

Objectのメソッド

Object.ke ...

Vue.js v2でaxiosを使ってAPIデータを取得してグリッド表示とリスト表示を切り替える方法を紹介します。
Vue 3でも考え方は使えます。

表示を切り替える方法

今回はボタンを押すと、グ ...

Vuex + axiosを使って、追加・削除・更新・フィルターといった基本的なAPI操作方法(CRUD)を紹介します。

Vuexについてと、Vue.js v2におけるVuexの基本的な使い方をまとめました。

Vuexとは

Vuexはライブラリ・ステイトマネジメントパターンです。
ステイトというのは状態と言われますが ...

Vue.jsの$emitを使って子コンポーネントから親コンポーネントへの値の受け渡し方法をまとめました。

$emitとイベント修飾子の使い方例1

Todoアプリで子のclickイベントを親に渡したいとしま ...

Vue.jsのpropsの使い方です。
簡単な例から見てみましょう。

props

todoアプリの場合をみてみます。
App.vueとTask.vue、TaskItem.vueという2つの ...

2021年4月6日

JavaScriptで文字列を操作のまとめです。

JavaScriptで文字列の基本操作文字を一文字ずつ取得する{//文字を一文字ずつ取得するconst plane = 'D456';console.log( ...

Vue.jsでライブラリを使わずに進捗バーの表示するシンプルな方法です。
基本はJavaScriptのため、考え方は他のフレームワークでも生のJavaScriptでも同じです。

Vue jsの:classと:styleについて簡単に違いをまとめました。

データのひと塊のみを表示して次へボタンで次のデータを表示する方法を紹介します。
Vue 2の書き方ですがVue 3でも考え方は同じです。

v-forで選択されたアイテムを取得して表示する方法です。
Vue2のコード例ですが、考え方はVue 3でも同じです。

JavaScriptの例外処理とエラーの書き方についてまとめました。

例外処理とエラーの書き方

例外処理(Exception Handling)とは、エラーが発生したときに飛ぶ特別な処理のことです。

JavaScriptのXMLHttpRequestとPromiseの違いについてまとめました。
Promiseの書き方は次の記事を参考にしてみてください。
JavaScriptのPromiseの使い ...