kokusyo

コーダー歴3年の37歳 キャンプとWEB制作をの融合を推し進めています。現在フロントエンドエンジニアへキャリアアップ中

ページ内リンクが反応しない!全原因とその対処法

【完全版】ページ内リンクが反応しない!原因と解決策の総まとめ

ウェブサイトのナビゲーションにおいて、ページ内リンクはユーザビリティの向上に不可欠です。しかし、これらのリンクがうまく機能しないことがあり、サイト訪問者にとっては大きな不便をもたらします。本記事では、 ...

htmlとjavascriptを使用して画像拡大機能を実装する

HTMLとJavaScriptで実現する画像クリック拡大機能【コピペ可】

ウェブサイトやブログで、コンテンツをより魅力的に見せる方法の一つに、クリックによる画像や動画の拡大表示があります。この記事では、HTML、CSS、およびJavaScriptを使用して、画像と動画の両方 ...

textareaの初期値と改行を考える

textareaにおける初期値と改行の取り扱い

textareaの初期値の設定 通常テキストボックスに初期値を設定する場合は、value属性を使用すれば簡単に初期値が設定できます。 <input type="text" v ...

書支社でも簡単に多言語サイトを実装する方法

初心者でも簡単な多言語サイトの作り方を解説 【html】

多言語サイトとは、複数の言語でコンテンツを提供するウェブサイトのことを指します。グローバルに展開する企業や、多言語を話すユーザーを対象としたサービス、観光や国際交流を促進する公的機関などが主に利用して ...

hoverスタイルをスマホで実装する方法

hoverのスタイルをスマホで実装する方法完全版【html】

hoverクラスのスタイルはスマホに反映されない スマホなどのタッチデバイスでhoverスタイルがうまく反映されない主な理由は、タッチデバイスには「マウスオーバー」の概念がないためです。chromeな ...

ページトップへ戻るボタンはcssのみで実装できるという話

CSSのみで「ページトップへ戻るボタン」を作る完全ガイド

2024/3/12    ,

サンプルとソース See the Pen Untitled by kokusyo (@kokusyo) on CodePen. ポイントはただ2つです。 aタグのhref属性にページ先頭のidを指定す ...

完全無料オンラインプうろグラミン具サービスTech Sapuri

【完全無料】ブラウザ上で学ぶ実践的プログラミング「Tech Sapuri(テックサプリ)」

「Tech Sapuri(テックサプリ)」は、オンラインプログラミング学習サービスで、ブラウザ上で実践的な学習ができる特徴を持っています。煩雑な環境構築は不要で、初心者でも手軽にアクセスできるため、学 ...

display:blockでテキスト位置を揃える方法

【css】カードレイアウトのテキストをgridで揃えよう

2024/4/29  

カード型レイアウトのテキスト位置が揃わない 今回テキスト位置を揃えたいのは以下のような、よくあるカード型レイアウトです。赤線で分かりやすく示しましたが、タイトルの文字数が異なるため、その下のテキストの ...

JQueryをvue.jsに置き換えてみよう

JQueryをVue3に置き換えてみよう【サンプルあり】

2024/2/25    ,

Vue.jsをCDNで読み込む Vue.jsを使用する時は、プロジェクトを作成~と思ったかもしれませんが、Vu.jsはCDNで読み込むことができます。CDNは以下の通りです。 <script s ...

jqueryだけでページネーションを実装しよう

【jQueryのみ】htmlでページネーションを実装してみよう!【コピペOK】

2024/2/13    ,

静的なHTMLにページネーションを実装 ページネーションは、項目の数が多い時などに便利です。下記のように、ただズラズラと並んでいても、ページネーションを実装すればすっきりするし、視認性も良いです。しか ...