Web制作

JavaScript

JavaScriptのみで作るハンバーガーメニュー【jQueryなし】

jQueryを使わずにJavaScriptだけでハンバーガーメニューを作りたい。 制作会社やクライアントの意向などで、jQueryが使えないことがあると思います。 中には「jQueryを卒業して生のJavaScript(Vanilla JSReadMore...
CSS

CSSのみでハンバーガーメニューを作る方法

JavaScriptやjQueryを使わずに、CSSだけでハンバーガーメニューが作りたい。 やむを得ない事情でJavaScriptやjQueryが使えないことがあると思います。 そこで今回は、CSSのみでハンバーガーメニューを作ってみましょReadMore...
CSS

CSSでマーカー(蛍光ペン)風の下線を引く(複数行・改行もOK)

テキストにマーカー(蛍光ペン)みたいな下線を引きたいな。CSSで出来たっけ? テキスト(文章)に下線を引く際のCSSに「text-decoration: underline」がありますが、これだけだと線が細く目立ちません。 今回お伝えするCReadMore...
jQuery

【jQuery】ホバーでスライドするドロップダウンメニューの作り方

この記事では、jQueryを使って「メニューをホバーしたときにサブメニューがスライド表示されるドロップダウンメニューの作り方」をハンズオン形式で解説します。 jQueryでドロップダウンメニューをスライド表示する 見本はこちらです。 各メニReadMore...
jQuery

【jQuery】要素をひとつだけ開くアコーディオンの実装方法(他は閉じる)

jQueryを使ってクリックした要素をひとつだけ開くアコーディオンメニューの作り方を解説します。 下記サンプルは、例えば「質問1」を開いたまま「質問2」をクリックすると、「質問1」は閉じて「質問2」の一つだけが開きます。 See the PReadMore...
JavaScript

【JavaScript】特定の日付までの残り時間をカウントダウン表示する

この記事では、JavaScriptを使って特定の日付までの残り時間をカウントダウン形式で表示する方法を解説します。 よく目にするのが、サイトやブログに「セール終了までの残り時間」を表示するパターンですね。残り時間を表示することで、より訴求力ReadMore...
JavaScript

【JavaScript】現在時刻をリアルタイムに取得・表示する方法

この記事では、JavaScriptを使って現在時刻をリアルタイムに取得・表示する方法を解説します。 JavaScriptで現在時刻をリアルタイムで取得・表示する方法 JavaScriptで現在時刻をリアルタイムに取得するには、次の手順で進めReadMore...
Web制作

【Adobeフォント】WebサイトやHTMLコーディングでの使い方

Webサイトの制作現場では、Adobe(アドビ)フォントが頻繁に使われます。 しかしいざHTMLでコーディングをしたり、Webサイトにフォントを反映させたいと思っても「あれ?Adobeフォントってどうやって使うんだっけ?」ということも多いとReadMore...
HTML

【HTML】tableのセルを縦または横に結合する方法

HTMLでtable(テーブル)を作る際、セルを縦方向または横方向に結合させたいときがあると思います。 難しそうに感じますが、HTMLに少し記述を加えるだけなので簡単です。 今回は下記のtableを見本に解説していきます。 <table> ReadMore...
CSS

Googleマップを埋め込み、簡単にレスポンシブ化するテクニック

GoogleマップをWebサイトに埋め込んで、レスポンシブ対応したい。 こんにちは。 フリーランスWebコーダーの、たけちです。 Webサイトに地図を表示したいときに便利なのが、「Googleマップの埋め込み機能」です。 コードをコピペするReadMore...