CATEGORY

プログラミング

【プログラミング学習】おすすめのオンラインサービス4選

本記事の対象読者 ・これからプログラミングを勉強したいと考えている方 ・本でプログラミングを勉強したが、合わなかった方 ・動画を利用してプログラミング学習を進めたい方 ・できるだけお金をかけずにプログラミングを学びたいと考えている方 本記事では、プログラミング学習をはじめたいと考えている方に向けて、実際に私が使用したことがあるオンラインサービスを3つ、特徴やメリット・デメリットを紹介していきたいと […]

【jQuery】おすすめの参考書3選

本記事の対象読者 ・手軽にサイトへアニメーションを付け足してみたいと考えている方 ・jQueryを学習しはじめた方 ・HTML CSSの基礎が身についている方 おひさしぶりです〜。 今回は以前のJavaScriptの参考書紹介に引き続き、jQueryのおすすめ参考書を紹介したいと思います。 JavaScriptのおすすめの参考書はこちら↓ 早速紹介に入ります〜。 jQuery最高の教科書 リンク […]

【JavaScript】おすすめの参考書4選

本記事の対象読者 ・JavaScriptを学んでみたいと考えている方 ・オンラインサービス等の解説が難しく、きちんとJavaScriptを理解したいと考えている方 ・HTML CSSをひと通り学習し、サイトにアニメーションを付け足してみたいと考えている方 ・これからフロントエンドエンジニアとして働きたいと考えている方 おひさしぶりです〜。 以前にHTML CSSのおすすめ参考書を紹介したのですが、 […]

js(jQuery)でYouTubeの「自動再生・自動停止・リセット」全てを行う【超簡単】

おひさしぶりです。 今回は、以前Youtubeの動画を埋め込み、自動再生・自動停止・自動リセットの対応をする機会があったので、その際に書いたコード(一部変更しています)を紹介します〜。 それが以下のコードです。 See the Pen gOmXvjL by IshiiAoi (@ishiiaoi) on CodePen. 簡単に解説していきます。 【html, css】 html, cssの詳しい […]

【HTML CSS】おすすめの参考書4選

本記事の対象読者 ・HTML CSSを学んだことがない方 ・自分で1からサイトを制作できるようになりたい方 ・HTML CSSをオンラインサービス等で学んでみたが難しいと感じている方 ・Webデザインをおこなっていて、ページのマークアップまでできるようになりたい方 お久しぶりです。 今回はHTML CSSを学習しようと考えている方に向けて、おすすめの参考書を4つ紹介します。 早速ですがいきましょ〜 […]

【js trim()】 .textContentで取得した文字列内の文字数を修正する

JavaScriptを使用してHTML内の文字列要素を取得する際に使用する .textContent ですが、これを使用した際、「HTML上に記述している文字数よりも多い(スペースが含まれて出力されてしまっている)。」という問題が発生するかと思います。 今回はそれを解決するために使用する .trim() を紹介します。 コード See the Pen Untitled by IshiiAoi (@ […]

CSS/placeholderの文字色を指定する

inputタグやtextareaタグ内で使用する「placeholder」の色のみを変更する方法のメモ。 以下のように、inputに対して「::placeholder」を追加し、記述する。 See the Pen Untitled by ISHIIAoi00 (@ishiiaoi00) on CodePen. 以上、「placeholder」の色のみを変更する方法でした。

aタグの[target=”_blank”] 安全な使い方

webページを作成し、aタグを使用する際、別タブでリンク先を開くために「target=”_blank”」を正しく使用する記載方法のメモ。 そのまま「target=”_blank”」を記載するとセキュリティ面において問題点が存在するため、少し記載することを増やしましょう的なやつです。 コードは以下の通り↓ <a href="url" target […]

CSS/文章が長い時に指定行数以上の文章を隠す

たまにコードを書いていると、 「文章が長すぎて、途中から非表示にできるようにしたい」 と思うことがたまーにあります。 こんな感じの長い文章ですね↓ これを例えば3行目より下の文章は表示させたくない場合、以下のようにCSSを記述することで、対応ができます。 display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -w […]

【Splide】vanilla jsでスライダー実装!カスタム方法も解説

今回はjQueryを使用せず、超簡単にスライダーが実装できる「Splide.js」を紹介します〜 導入方法 土運輸方法ですが、簡単に分けて以下の2つです。 ダウンロード こちらからダウンロードし、フォルダ内のパスを指定して使用します。 CDN 2つ目はCDNで使用する方法です。こっちの方が楽ですね。 以下の文章をコード内に挿入すると使用できるようになります〜 <link rel="style […]