yuhi– Author –
-
[js基礎⑩]ボタンクリックでSNS投稿をする方法
クリックで、ページをSNSに投稿する方法は？ ボタンをクリックするとそのページのURL付きで、SNSに投稿できるボタンってありますよね。↓こんな感じのボタン。(Amazonの蟹ですいません。) このSNSボタンを最近実装したので、今日はそれについてまとめます！... -
[js基礎⑨]inputが未入力の時に、ボタンが非活性になる。
inputが未入力の時に、ボタンを非活性にしたい。 よく入力フォームとかで、必須項目のインプットが未入力だとボタンがグレー色で動かせないサイトってありますよね。↓こんな感じでグレーアウトされてるボタンです。 今日はjavascriptで、inputが未入力の時... -
[js基礎⑧]モーダルを横からふわっとスライドさせる。
javascriptでモーダルを横からふわっとスライドさせたい。 Webサイトでよくある、ボタンをクリックすると横からふわっとスライドしてくるモーダル。今日はその実装例を紹介します。 【実装例】 さてまずは実装例です。 See the Pen Untitled by 勇飛高松 (... -
[js基礎⑦]スクロールしたらヘッダーの色が変わる実装
スクロールしたらヘッダーの色が変化する実装をしたい。 今日はサイト制作でよく出てくる、画面をスクロールしたらヘッダーの色が変化する実装についてです。 初見だと少し難しく感じますが、意外とシンプルに実装できます。 【実装例】 早速実際のコード... -
[js基礎⑥] textareaに文字数カウントをつける。
textareaに文字数カウントをつけたい。 画像のように入力する度に文字数がカウントされる実装。 初見だと悩んでしまう実装ですが、Javascriptを使えば結構簡単に実装できます。今日は文字数カウント機能についてまとめます。 【実装例】 早速実装例です。R... -
[css]フッター固定してスクロール可能なエリアを作成する！
ヘッダーとフッターは固定にして、コンテンツだけをスクロールさせたい、 この画像のように、コンテンツ部分だけスクロールさせる実装。 今回は、cssを使ってコンテンツ部分をスクロールさせる方法についてまとめます。 【実際のコード】 それでは実際のコ... -
[css]PCとスマホでレイアウトの構造を変える display: contents;
PCの時とスマホの時で、構造を変えることってできるの？ 例えばこんな感じのデザインの時。PCの時は、左と右で2分割。SPの時は、右の青色を挟むようにして並べる。 「村上春樹」と「海辺のカフカ」は親要素があるので、SPで分割できない。どうすれば良いん... -
[css]テキストエリアのリサイズのデザインを変える方法
テキストエリアのリサイズボタンのデザインを変えたい。 テキストエリアを伸ばしたり縮めたりする機能であるリサイズ。下記のように右下のデフォルトのボタンから縮めることは可能です。 See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodeP... -
[js基礎⑤]インプット要素をコピーする方法
今日はjs基礎の5回目です。今回のテーマは「要素をコピーする方法」です。 ボタンを押すとinput要素がそのままコピーされるページってありますよね。今回はその方法について解説します。 【コード実装例】 下記が実装例です。「Result」タブから追加ボタン... -
[js基礎④] JavascriptでFAQをふわっと開きたい。
今回で4回目となったjs基礎シリーズ。今回はFAQをふわっと開閉させる実装です。以前の記事で、単純にボタンクリックで開閉する実装は紹介しました。仕組みとしてはこれで良いのですが、動きがカクカクとしいてなんかダサい。ということで今回は開閉時にふ...
