本日はHTML/CSSで要素の一部分だけを指定する方法について 書きたいと思います！ ■方法 span要素を使用すればOKです。 <h1>私は<span class="apple">りんご</span>です。</h1> 以上です。

本日は背景画像が繰り返し表示されるのを防ぐ方法について 書きたいと思います！ ■内容 background-imageなどで背景に画像を挿入しようとした時に 画像が繰り返し表示される時があるかと思います。 ※図1参照 ＜図1＞ ■対応方法 下記のプロパティを使用すれば…

本日はline-heightプロパティの小ワザについて 書きたいと思います！ ■内容 要素の高さとline-heightプロパティの値を同じにすると 文字が要素の縦方向の中央に配置されます。 ※要素の高さはheightで指定します。 この方法を使用すれば display:flexとaligin…

本日は超小技ですが、 検証ツールを早く開く方法について書きたいと思います！ ■使用するコマンド 「F12」を押す。 閉じる時も「F12」を押すとOKです！ これだけ笑

本日はCSSで行間を設定する方法について書きたいと思います！！ ■実装方法 ① .sample{ transition: .3s; } ② .sample:hover{ transform: translateY(-4px); box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1); } この実装をすると要素…

本日はCSSで行間を設定する方法について書きたいと思います！！ ■実装方法 <img src="sample.jpg" alt="" class="sample" height="120" width="120"> ■解説 img要素の中にheight、widthで値を指定すればOKです！！

本日はCSSで行間を設定する方法について書きたいと思います！！ ■使うプロパティ .sample{ line-height:値; } ■解説 line-heightで指定する値のパターンは下記3つです。 1：「px、em」で数値を指定 2：数値のみで指定 3：%で数値を指定 1：px,emで指定する場…

本日はgithub上で公開したWebページにおいて 使用している画像が表示されない時の対応について 書きたいと思います！！ ■前提 今回の話は、自身で作ったWebページをgithubで公開した際、 ページ上で使用していた画像が表示されない場合の 解決方法について自…

本日はCSSでアンダーラインを文字の下半分だけ引く方法について 書きたいと思います！ ■使うプロパティ .under { background: linear-gradient(transparent 50%, #a8eaff 50%); }

本日はクリックする毎に表示する要素を変更する方法について 書きたいと思います！ ■やりたいこと ・アイコン（≡）をクリックするとWEBページの情報が一覧で表示される ・クリックしたと同時にアイコンの表示を変える（「≡」から「×」に変更する） ・再度「×…

本日はフッターを画面の1番下に表示する方について 書きたいと思います。 今回はあくまで個人的な経験を基にした経験談です！ ■問題点 フッターが一番下に表示される 他の要素と重なって表示される。 ※画面1番下ではなくて画面の真ん中より 少ししたぐらいに…

本日はjQueryの中でマウスを当てた際に処理を実行する 方法について書きたいと思います！ ■使用するイベント .hoverイベンド ■サンプルコード $('.sample').hover( function(){ //マウスを載せた時の処理 }, funvtion(){ //マウスが外れた時の処理 } ); ■解説…

本日はCSSで要素を横並びで均等に配置する方法について 書きたいと思います！ ■使用するメソッド 使うプロパティはwidthです。 widthの値として％を指定すれば、 指定した値の間隔で画面に要素を配置します。 ■サンプルコード .sample{ width: 50%; float: l…

本日はCSSの背景色だけを調整する方法について 書きたいと思います！ ■使用するプロパティ .sample{ background-color: rgba( 84,190,238, 0.5); } ■解説 （）内の1~3に色を指定する値を入力します。 下記のリンクに入力する数値のサンプルが載ってます。 ht…

本日はCSSの要素を中央に寄せる方法について 書きたいと思います！ ■使用するプロパティ .sample{ width:300px; margin:0 auto; } ■解説 ・autoを指定する際は、widthを指定するようにしましょう ・上下のmarginにautoを指定することは出来ないです ■autoとt…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はHTMLのアイコンの使い方について 書きたいと思います！ ■使用するアイコンサイト https://fontawesome.com とても有名なサイトらしいので 説明不要かもしれないで…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はCSSで文字の透明度を調整する方法について 書きたいと思います！ ■使用するプロパティ opacity: 指定の値; //指定の値には数値の0.0(完全透明)~1.0(完全不透明)を…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はjQueryのclickイベントの使い方について 書きたいと思います！ ■clickイベントとは？ 簡単に言うと、要素をクリックした時に 指定の処理を実行するイベントのこと…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はCSSの「padding」と 「margin」の違いについて 書きたいと思います！！ ◆padddingとはとmarginの違いについて paddingがborderの内側に余白を作るプロパティ margi…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日は javascriptにおいて 配列内のすべての要素に処理を実行する メソッドについて書きたいと思います！ ◆使うメソッド 使うメソッドは「filterメソッド」です。 filte…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はHTMLに記述をする際に使える 小技について書きたいと思います！！ ◆使うコマンド 「タグ名 ＋ Tabキー」を入力することで 開始タグから終了タグまで作ってくれます…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はデータベースから新しく保存された順番で 取得する方法について書きたいと思います！ アプリで新しく投稿された情報から 表示したい時などに使うかと思います！ ◆…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はCSSでフォントを指定する方法について 書きたいと思います！ ◆使うオブジェクト font-family:"フォントファミリー名" or 総称フォント ＃フォントファミリーとはAr…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はCSSで行間を設定する方法について 書きたいと思います！！ ◆使うオブジェクト line-height: 値 ＜値として使用できる単位＞ ・px →指定した値だけ行間をあける ・e…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はjavascriptの変数定義で使用する 「let」と「const」について書きたいと思います！ ◆letについて 「let」は変数定義です。 特徴としては一度「let」で 定義した変…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日は要素に影をつける方法について 書きたいと思います！！ ◆使用するプロパティ box-shadow box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; …

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日は文字間隔を設定する方法について 書きたいと思います！ ◆使用するプロパティ letter-spacing: 文字間隔を設定するプロパティで 数値を指定し間隔を設定できます！ …

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日は背景に画像を使用する方法について 書きたいと思います！ ◆使用するプロパティ background-image background-image: url("画像へのパス"); ◆補足 ＜画像サイズを変…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はHTMLで出来るテーブル表の作成について 書きたいと思います！ ◆使用するタグ tableタグを使用すれば実装できます！！ ◆使い方 大きくtableタグは3つの使い方があり…

現在プログラミングスクールに通い ７０日間でWEBエンジニアになれるよう勉強中です！ 本日はREADME上でGIF画像を表示する方法及び 画像サイズを調整する方法について書きたいと思います！ ◆前提 README上にGIF画像を表示する方法はいくつかあります。 しか…