【Adobe】XDで作業する時によく使うショートカットキーを整理しておく 更新日:2021年9月17日 公開日:2020年7月19日 WebデザインWeb開発 Adobe XDで作業をする時、 ショートカットキーを知っているかどうかが作業効率に大きく影響を及ぼします。 なので、出会ったショートカットキーを整理しておきたいと思います。 ※Macでの操作しか分からないので、Comm […] 続きを読む
【HTML / CSS】CSSで使える擬似クラスを整理しておく 更新日:2021年6月3日 公開日:2020年6月20日 WebアニメーションWebデザインコーディング 擬似クラスとは? 簡単に表すと要素の状態を表すことができます。 class_name:hover { } といった書き方ができますね。 まずは、何があるかを整理しておきます。 よく使う擬似クラス hover これはよく使 […] 続きを読む
【HTML / CSS】HTMLのチェックボックスを装飾してみよう 更新日:2021年9月19日 公開日:2020年6月12日 WebデザインWeb開発 チェックボックスをカスタマイズしてみようと思う。 一部、wordpressのテーマでCSSが当たっている部分もあるので、必要であればデベロッパーツールで見ていただければと・・・m(_ _)m チェックボックスを少しずつよ […] 続きを読む
HTMLでテーブルを作って装飾を考えてみる 更新日:2020年6月22日 公開日:2020年6月8日 Webデザインコーディング tableタグで作成したテーブルをカスタマイズしておしゃれにしようと試みようと思う まずは、普通にテーブルを作ってみる 見出し1 見出し2 見出し3 見出し4 データ1-1 データ1-2 データ1-3 データ1-4 デー […] 続きを読む
HTMLで選択できるパネルを表現してみる 更新日:2020年6月12日 公開日:2020年6月6日 Webデザインコーディング 選択できるパネルを作ってみる divタグで作ってみる スタイルシートでパネルを作ります。 そのあと、クリックした時に色を変更するようにjQueryで作ってみました。 選択肢1 選択肢2 選択肢3 html <div […] 続きを読む
【HTML / CSS】HTMLでスライダーを試してみようと思う。。。 更新日:2022年12月13日 公開日:2020年6月5日 Webデザインコーディング HTMLのrangeを使ってスライダーを作ってみようと思います。 まずはinputタグでrangeを使ってみる まずは単純にinputタグのtypeをrangeで作成。 min、max、stepを指定してあげただけのシン […] 続きを読む
CSSアニメーションでアイコンを動かしてみよう 更新日:2022年11月26日 公開日:2020年5月31日 WebアニメーションWebデザインコーディング 今回はCSSでアイコンを動かしてみようと思います。 アイコンを準備 この部分は、今回は特になんでもよかったので、イラストレーターで丸のアイコン(png)を作ってみました。 本当に適当ですみません。。。 作ったあとで気づき […] 続きを読む
CSS、SCSSで変数を使ったり他ファイルを読み込んだり 公開日:2020年5月30日 WebデザインWeb開発コーディング 書き方どうだっけ?って何度も調べてしまうので、まとめておく 変数の書き方 CSSの場合 例は微妙ですが、こんな感じ。 :root { –font-size-main: 14px; } […] 続きを読む
【javascript】Chart.jsでグラフを描画してみる 更新日:2021年11月23日 公開日:2020年5月19日 WebデザインWeb機能 どのグラフも、あくまでサンプルです。 折れ線グラフ まずは、折れ線グラフ。 毎月末に英語のテストがあったと仮定して見てみてください。 HTML <canvas id=”lineGraph”& […] 続きを読む
npmでbootstrapを追加し、angular.jsonで設定する 更新日:2020年7月5日 公開日:2020年5月17日 WebデザインWeb開発 インストール npmコマンドを用いて、bootstrapをインストール ついでにjqueryも npm i bootstrap jquery メモ:nextで最新版というインストール方法もある模様 npm install […] 続きを読む
【HTML】たまに必要になる考慮ポイント(HTML編) 更新日:2021年9月11日 公開日:2020年5月10日 WebデザインWeb開発 labelのwidthを設定したい <label style=”width: 100%;”>abc</label> ってやってもwidthは変わりません。 原因はlabel […] 続きを読む
【HTML / CSS】ゼロから作る時のポイントとテンプレート 更新日:2021年5月31日 公開日:2020年4月2日 WebデザインWeb開発 とりあえずHTMLを作成していこうと思った時のテンプレートを用意しておこうと思う。 また、ゼロから作成する際に注意すべきことなどを整理しておきたい。 テンプレートの用意 HTMLをゼロからはじめる時のためのテンプレート […] 続きを読む
【学習】新しい技術を勉強する時は、Progateが便利 更新日:2021年6月5日 公開日:2020年3月30日 WebデザインWeb機能Web開発コーディング 新しい技術を身につけよう!!! 例えば、PHPでWeb構築できるようになりたい!!!だったり、 Node.jsを使ってWeb構築したいだったり。。。 でも技術力を身に着ける際に何から始めたら分からないってことありますよね […] 続きを読む
【HTML / CSS】よく使う色を整理してみる 更新日:2022年12月12日 公開日:2020年3月28日 Webデザイン 使い勝手が良い色、自分がよく使う色を整理しておきたいと思います!!! 基本色 赤 まずは、赤。 色んな用途で使われることが多い色。 強調する時、エラーを表す時には一番最初にあがる色ではないでしょうか? カラー名 : re […] 続きを読む
【HTML / CSS】CSSで簡単な図形を描いてみる 更新日:2022年11月24日 公開日:2020年3月28日 Webデザイン HTMLとCSSだけで図形を描かなくてはいけない場合のために・・・ そんな機会ってあまりありませんけどね!?ないよね?たまーにあるけど・・・ どっちやねん>< 単純な四角形 単純な円 三角 台形 星 頑張って作ろうと思い […] 続きを読む