サイト制作

javascript

jQueryで要素の数を取得|divやliを数える

jQueryで要素の数を取得|divやリストを数えるリストの数を取得して何かする時や、リストにしていなかった要素の数を調べる時に便利なjQueryの記述のご紹介です。リストの数を取得 <div class="list"> <ul> <li>...
javascript

jQueryの使い方|CDNとダウンロード

jQueryを利用するなら最新版を使っておけば問題ないよjQueryを利用しようとした時に、「jQuery3.4」とか「jQuery2.2」とか「jQuery1.1」とかのリンクがあるけど最初のうちってどれを使ったら、どんな効果があるかわか...
PHP

【初めてのPHP】echoで文字を表示

フロントを作ってるとPHPって聞いたことあるけど、始め方が分かんない状態がずっと続く。覚えたくても、なんだかムズそうで興味だけって期間が1年2年3年。。。。。この状況を打破するため手っ取り早く始めてみよう!そこで今回は、文字を表示してみるだ...
HTML

HTMLだけ(iframe)で別ページを表示させる方法

別ページを、このページ内にHTMLだけで取得する方法のご紹介です。自分は別ページの情報を取得するのは、phpの役目と思っていました。が、「iframe」で取得できることを最近知って驚いたので記事にしました。「iframe」で別ページを表示し...
CSS

CSSやSass、SCSSでコメントアウト(テキスト非表示)方法

CSSを書いててスペースで区切るだけでは、分かりにくいことがあったりします。そんな時便利なのが、コメントアウト。このスタイルは、ヘッダー要素のだよ!とか、共通部分をまとめる時にここから~ここまで。みたいに使い方は色々なコメントアウトの記述方...
HTML

HTMLで非表示要素を追加する方法

HTMLでコメントを入れるときや、この要素は消して表示したいときなどに有効なタグのご紹介です。<!-- これで囲むと非表示にできます --><!-- --><p>これで上の部分は、非表示になります</p>
javascript

jQuery|スクロールして要素が見えたら表示し見えなくなったら非表示にする

スクロールしたら画像やコンテンツが表示するサイトは、凝っているなと思ってしまいます。(スクロールしたら表示されっぱなしを作るセットはこちら)そしてもっと凝っているなっと思うのは、スクロールして見えなくなると、そのコンテンツが消えるサイト。そ...
CSS

PC・スマホで画像保存させない方法【画像保存禁止】

jQueryで画像をDivで囲うCSSとjQueryで画像の手前に透明な要素を追加して、画像を保存しようとしても画像に触れなくする方法。まずは、jQueryで画像(imgタグ)を検知し、その画像をDivで囲います。この時、CSSでスタイルを...
CSS

CSSでスマホの長押し禁止【画像保存禁止方法】

CSSだけでスマホの長押し画像保存を禁止する方法をご紹介します。PCでは少しだけダウンロードされにくくなるだけなので、スマホだけ有効にすべきです。(右クリックで画像をダウンロードすると、画像が保存されるのではなくページで利用されているソース...
javascript

jQueryでドラック&ドロップを禁止する【画像保存禁止方法】

ドラック&ドロップを禁止する方法下のコードは、ページ全ての要素でドラッグ&ドロップを禁止します。もし、画像のみをドラッグ&ドロップ禁止にしたい場合は、ターゲットを「$(document)」から「$("img")」に変更してください。$(do...
javascript

右クリック禁止方法|jQuery【画像保存禁止】

右クリックを禁止にすると画像の保存を出来辛くすることができます。右クリックできなくする範囲を今回は2つ用意しましたが、「div」や特定クラス・IDにも指定可能です。ページ全体で右クリック禁止方法ページ全体を右クリック禁止することで画像の保存...
javascript

【jQuery】選択した場所の「値」取得方法

選択された値を取得してアクションを起こす方法のご紹介です。選択した要素の取得にはjQueryの「.index(this)」を利用します。選択した値を取得【jQuery】var list = $("li").index(this);【DEMO...
HTML

HTML特殊文字列を一括変換するツールの紹介

ブログにHTMLコードを載せる時、嬉しい変換ツール。ひとつひとつ変換してたら、記事なんて完成しやしない。ありがたい諸先輩方のお知恵とサービスをお借りして書かせていただいているので感謝の気持ちも込めて紹介させていただきたいと思います。いつも利...
HTML

HTMLテンプレートで時短サイト制作

自分のサイトを作りたい!そんな方のための学習帳。検査すれば沢山出てくるサイト制作のすすめ。どっとインストールとか、すごい分かりやすいじゃないですか!でもでもでも、学習の前にコピペでパッと作っちゃいましょう!覚えるのはそれからでいいと思います...
CSS

CSSのtransitionについて深く知る

普段使っている「transition」を、自分はあやふやにまとめて定義していました。自分がそうなら、きっとみんなもそうだろうと思い改めて詳しく勉強したいと思います。transitionとは?transitionとは、Google翻訳すると「...