2020/08/07
cssとjsで画面横からブロックが出てくるものを作ってみよう
今回は、cssでよくホームページなどでスクロールした時に横から出てくるものを作ってみようと思います。 目次 画面の横からブロックが出てくるようにするためのhtmlの構造 画面の横からブロックが出てくるようにcssとjsし […]
html
2020/06/16
[css]下へと上下に揺れてる下向き矢印ボタンをどうやって作るのか？
今回は、ホームページ閲覧時に下に移動するための上下に揺れている矢印がありますよね？jqueryなどを使わないとできないのかと言われますとcssのみで実装可能です。では作っていきたいと思いますが、この記事では、位置は下にせ […]
2020/06/15
[css]htmlのaタグをクリックできないようにする方法とは？
ホームページのメニューバーなどで、準備中にしたりすることってないですか？ 少なからずそういった機会ってありますよね。リンクにせず、文字だけ打っておいて後からリンクにしておくことや、飛んだ先のページを準備中にするなど様々な […]
2020/06/13
[jquery]slick.jsを使ってスライダーを作ってみよう
今回は、スライダーを作ってみようと思います。ホームページにはトップページにスライダーがあるホームページがやはり多いですよね。そんな幅広く使えわれているスライダーを作っていきます。作り方は非常にシンプルで、slick.js […]
2020/06/12
[css]背景に画像を入れた際に位置調整を行うにはどうすればいいのか
cssを使って画像を背景に設定することってありますよね。今回は設定した背景画像の位置調整をする方法をご紹介したいと思います。背景画像を左側に寄せたい、背景画像を中央寄せにしたい、背景画像を右寄せにしたいなど様々な要望があ […]
2020/06/10
[html]セレクトボックスを作ってみよう
今回は、htmlでセレクトボックスを作ってみようと思います。セレクトボックスは入力フォームを作る際には、一般的な入力フォームになります。基本的なことなので、ぜひ覚えていってください。一般的なセレクトボックスだけでなく、分 […]
2020/06/09
[html]ラジオボタンを作って、チェック済みにしたり選択できないようにしてみよう
htmlでラジオボタンの作り方をご紹介したいと思います。ラジオボタンは、フォームを作る際に、一つだけ選択肢を選んでほしい時に使われてますね。 今回はそんな入力フォームを作る際に必要なラジオボタンの作り方をサンプルを踏まえ […]
2020/06/08
[css]横並びで高さを合わせたコンテンツを縦方向に中央寄せする方法
cssでdisplay:flexを使用した際に、横並びの高さを合わせられたけど、縦方向に中央寄せできないという方向けの記事となります。 display:flexを使うことで、高さを合わせたコンテンツを横並びにすることはで […]
2020/06/07
[css]横並びにしたコンテンツの高さを合わせる方法
今回は、cssで横並びにしたコンテンツの高さを合わせる方法をご紹介したいと思います。 cssでブロックを横並びにするまではできたけど高さが合わないっていう時ありませんか？横の長さを合わせるのは簡単ですが縦方向のアプローチ […]
2020/06/06
[css]ワークフロー図をcssだけで作ってみよう
ホームページにて、手順を説明する際に、手順１、手順２などを表記する必要が出てくるかと思います。ただワークフロー図をどうやって作っていいかわからないといったお悩みがある方が少なからずいらっしゃるかと思います。 そこで、今回 […]
2020/06/05
[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方
アコーディオンメニューで開閉を行う際に、開閉されてるかわかるように下向きの矢印がついていることがないですか？開いてない状態では下向きの矢印がついていて、開くと上向きの矢印がついている状態です。 矢印をつけることで開閉して […]
2020/06/04
[css]下向き矢印と上向き矢印の作り方
今まで矢印はどうされていましたか？画像で作られていましたか？ 実はcssで作成することができます。作り方は非常にシンプルで四角形を回転させるだけといったものになります。 今回は、下向き矢印と上向き矢印の作り方をご紹介した […]
2020/06/03
[jquery]slideToggleを使ってアコーディオンを作っていよう
今回は、queryのslideToggleを駆使してホームページでよく使われるアコーディオンを作ってみようと思います。 アコーディオンは、Q&Aやメニューバーなどある程度の複数のコンテンツを一覧と表示させ、詳細が […]
2020/06/02
[jquery]切り替えタブを作ってみよう
今回はよく使われるタブを作ってみようと思います。 一々、コンテンツ縦にいっぱい並べて表示させるって大変ですよね。タブを作ってコンテンツを切り替えられたら一番いいですよね。今回はそんなタブを作って見ます。考え方は、押したボ […]
2020/06/01
[jquery]テキストボックスが入力された時にどんな文字が入力されているのかを取得してみる
今回は、jqueryを使って、テキストボックスに入力された文字の取得方法についてご紹介したいと思います。テキスト入力に入力された文字を取得することで、入力された文字がどんなものなのか、入力形式として正しいのかどうかという […]
2020/05/31
[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう
みなさま、placeholderってご存知ですか？入力欄を入力しようとした時に、説明やこうやって入れてくださいねっていうサンプルが書いてあって入力しようとした時に消えるといったものを見たことはないでしょうか。まさにそれの […]
2020/05/30
[css]リストを使ってお知らせ一覧のようなデザインを作ってみよう
今回は、ホームページに重要なお知らせの一覧をリストを使ってデザインしてみようと思います。ホームページは情報を発信するということを目的としておりますので、会社、お店などの新着情報を掲載していくことは、お店を営業していますと […]
2020/05/29
[css]文字の行間を調整する方法について
今回は、文字の行間を調整する方法についてご紹介したいと思います。長文を読んでいるときに、行間が狭い場合もう読むのいいかな？って思う方がいらっしゃるかと思います。せっかく一生懸命作ったコンテンツを読んでいただけないの非常に […]
2020/05/28
[css]文字の間隔を調整する方法
文字の間隔をcssでコントロールする方法をご紹介したいと思います。 文字の間隔が詰まっていると、文字が見にくくてホームページ自体がもう文字を読む気を無くしてしまうっていうことありませんか？ こんな状態にならないように文字 […]
2020/05/27
[html,css]文字の上に打ち消し線を入れる方法
ホームページで、文字の上に線が入ってその文字を打ち消しているものを見たことはないでしょうか？今回はその文字の上に打ち消し線をどうやって入れるのかという方法をご紹介したいと思います。 文字の上の打ち消し線の実装の仕方は、h […]
2020/05/26
[css]文字を太字にしてみよう
今回はフォントの文字を太字にする方法をご紹介したいと思います。 皆様もホームページを作成する際に、強調してみてほしいところってありますよね。そんな時、その文字を太字にして強調してみてもらうことってあると思います。そこで今 […]
2020/05/25
[css]フォントの色を変えてみよう
cssでフォントの色を変える方法をご紹介したいと思います。cssで文字の色を変えるとホームページが華やかになりますね。また、大事な文字は赤文字などで強調したいですね。 文字の色はホームページのイメージを決める大事な要素と […]
2020/05/24
[css]フォントのサイズを変えてみよう
今回は、フォントのサイズを変更する方法をご紹介したいと思います。文字の大きさを変更することで、主張したい文字とそれに対する説明など情報に強弱をつけることができますね。そんな文字サイズをどうやって変更するのかをご紹介したい […]
2020/05/23
[js] jqueryでtoggleClassを使ってクラスの付け替えをやってみた
皆様は、toggleClassをご存知ですか？toggleClassを使用することで、つけたいクラスがあった場合は、そのクラスが消去され、クラスがなかった場合は付与されるといった動作をしてくれます。クリックイベント時に、 […]
2020/05/22
[css]bootstrap4のグリッドシステムを使って横並びのブロックを作ってみた
bootstrap4のグリッドシステムを使って横並びのブロックを作ってみようと思います。bootstrapは col-数字 と記述することで足して１２になるように記述することで横並びのブロックを作成することができます。ま […]
2020/05/22
[js]jqueryで親要素を取得する方法
今回は、jqueryで親要素を取得する方法をご紹介します。親要素取れて何が嬉しいの？って思う方がいらっしゃる方がいると思いますが、例えば、メニューでサブメニューがあるかどうかなどを判別するときに使えたりします。 目次 H […]
2020/05/21
[js]jqueryで特定の要素のクラス名を取得する方法
今回は、jqueryで特定の要素のクラスを取得する方法をご紹介したいと思います。今その特定の要素がどういう状態にあるのかをクラスを決めていることが多いのではないでしょうか？今回はその状態がどんな状態で次どんな状態にしたい […]
2020/05/20
[css]文字にフェードイン、フェードアウトする方法
今回は、フェードイン、フェードアウトをcssを使って実装してみようと思います。簡単なサンプルとして、マウスで特定の要素をhoverしたら文字が徐々に消えていくというようなものと文字が出てくるものを実装してみようと思います […]
2020/05/19
[css]下付きの吹き出しを作ってみよう
今回は、cssで吹き出しを作ってみようと思います。吹き出しを今まで画像で作っていた方は、必見です。cssで記述することでコード側で色やサイズなどの調整がきくため非常に便利です。 目次 吹き出しを作るhtmlの構造 css […]
2020/05/17
[css]画像をcssだけでモノクロにしてみよう
画像をモノクロにするために、今まで画像編集ソフトを使っていませんでしたか？そんなことをしなくてもcssで画像をモノクロにできます。 今回は、その方法についてサンプルを使ってご紹介したいと思います。 目次 画像をモノクロに […]
2020/05/16
[js]jqueryを使って画面サイズを取得する方法
今回は、jqueryを使って画面サイズを取得する方法についてご紹介したいと思います。画面サイズを取得して何が嬉しいの？って思う方もいらっしゃいますよね。例えば画面サイズに応じて、js側からcssを変更したり文章を書き換え […]
2020/05/15
[html]日付入力をする際に期間を設定する方法
htmlを使って日付を入力するフォームを作ることがあるかと思います。その際、全ての日付を選べれてしまっては不都合だという方がいらっしゃるかと思います。そういった方向けに今回は、日付を入力する際に期間を設定する方法をご紹介 […]
2020/05/11
[css]ホームページに埋め込んだ Google Mapをcssだけでモノクロにする方法
皆様のホームページには、大抵場所を案内するためにGoogle Mapが埋め込まれていますね。そんなGoogle Mapですが、デフォルトの状態のデザインを使われているのが一般的ではないでしょうか？今回はそんなGoogle […]
2020/05/10
[js] jqueryでalertを出す方法
ブラウザの上からアラートを出す方法についてご紹介したいと思います。ブラウザの上からアラートを出すためには、javasciptを使用します。 今回は、ボタンをクリックしたらアラートがでるようなサンプルを使っていきたいと思い […]
2020/05/09
[css]文字を縦書きにしてホームページを和風にしてみよう
今回は、ホームページを和風にする手段として、cssで文字を縦書きにする方法をご紹介したいと思います。これであなたのサイトをより和風にすることができるようになるのではないでしょうか。縦書きをする方法は非常に簡単で、cssを […]
2020/05/08
[css]画像を影をつけて浮き出ているように見せるエフェクトの作り方
今回は、画像をHTMLで貼った時に、影をつけて画像が浮き出ているように見えるようなエフェクトのかけ方についてご紹介したいと思います。 作り方は非常に簡単で、あなたのサイトをよりかっこよく、見応えのあるものにしてくれるかと […]
2020/05/05
[css]リストの前にチェックマークを入れてみよう
今回は、リストの前にチェックマークを入れてみようと思います。以前記事で書かせていただいた三角形を入れる方法とほぼ同じと言えます。ただbeforeの要素に実現するものが違うといったものになります。リストの前を三角形にする方 […]
2020/05/04
[css]リストの前に三角系をつけてみよう
今回はリストの前に三角形がつける方法についてご紹介したいと思います。多くのサイトでリストで並んでいる箇条書きのものに三角形がついてたりするものをよく見るかと思います。ではこの三角形は画像なのでしょうか？そうではありません […]
2020/05/03
[css]cssで画像をhover時に拡大するアニメーションを作ってみよう
今回は、cssで画像にマウスポインターを合わせた時に拡大するアニメーションの作り方をご紹介したいと思います。このような画像が拡大する動きはいろんなサイトで使われていますね。今回はその画像をどうやって拡大させているのかとい […]
2020/05/02
[css]olの前の数字のデザインを変えてみよう
今回は数字付きのリストを出してくれるolの前の数字のデザインを変えてみようと思います。数字が出て順序が出てくれるのは嬉しいですが、見た目がシンプルすぎてデザインを変えてみたい方がいらっしゃるかと思います。そういった方向け […]
©狼読