• 本サイトについて
  • 鍵ページ

お仕事で使うHTMLテクニック備忘録

コピペしちゃいなよ

  • 本サイトについて
  • 鍵ページ

CSSのClassとIDを完全理解！違いと使い分けを解説

2025/2/27    HTML初心者講座

CSSのClassとIDを理解しよう！デザインの自由度を広げる基本テクニック CSSを使い始めると、よく目にする「Class」と「ID」という言葉。どちらもHTML要素にスタイルを適用するための方法で ...

CSS HTML

タグが閉じれてないが箇所がわからない! Atomを使って簡単に探そう

2025/2/27    その他, ホームぺージ関連

HTMLのコードを打ち込んでいて、表示がバグることがあると思います。 大抵閉じタグを入れ忘れているのですが、クラシックエディタでは目視ですぐにはわからないですよね。 探し当てるのに何十分、最悪頭がパン ...

HTML 作業効率

初心者でもすぐできる！簡単CSS入門

2025/2/28    HTML初心者講座

次のステップは「CSS」！Webページをもっと魅力的に HTMLでWebページの基本を作れるようになったら、次は「CSS」の出番です！ CSSは、Webページのデザインやスタイルを担当する魔法のような ...

CSS HTML

初心者でも簡単！HTML基本構文

2025/2/28    HTML初心者講座

この記事では、HTMLの基本的な構造やタグの役割を丁寧に説明しています。 初心者がつまずきやすいポイントもクリアにしながら、一歩ずつ自分のWebページを作れるようになるサポートをします。 例えば、以下 ...

HTML

アフィンガー6でファビコンを入れる方法

2025/2/28    ホームぺージ関連

アフィンガー6でファビコンを入れる方法です。 なにかアフィンガー側で設定する箇所があるのかと思いましたがなさそうなので普通に入れます。 「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン ...

AFFINGER HTML

CSSで作るコンテンツを縦に展開・収納できるアコーディオンメニュー

2025/2/28    ホームぺージ関連

コンテンツを縦に展開・収納できるアコーディオンメニューは、動きのあるUIの定番です。 Section 1 DX（デジタルトランスフォーメーション）の実現 「デジタルトランスフォーメーション（DX）は、 ...

CSS HTML

CSSで作るタブ切り替えメニュー

2025/2/28    ホームぺージ関連

CSSで実現させるタブ切り替えメニューになります。 デザイン性も高くおしゃれなサイト作りにはもってこいなメニューと思います。 Tab 1 Tab 2 タブ1: クラウドサービスの活用 「クラウドサービ ...

CSS HTML

【カメラ・写真】タイトル：遠すぎる・・・

2025/1/18    カメラ・写真関連

カメラ写真投稿となります。 タイトル：タイトル：遠すぎる・・・ 撮影場所：富田林市 鴨？　っぽいのがいる場所を仕事帰りに見つけたので休日の昼から赴くもいつもの場所にいない。 最大望遠で撮ったが遠すぎて ...

カメラ 写真

初心者大歓迎！HTMLを使ってWebページを作ってみよう

2025/2/28    HTML初心者講座

HTMLの世界へようこそ！これから一緒に学んでいきましょう。 インターネットの裏側にある「言葉」を知っていますか？それが HTML です!普段何気なく見ているWebページも、実はHTMLで作られていま ...

HTML

【失敗談】自動投稿プラグインを買ってアダルトアフィリエイトをしたが誰も来なかった件

2025/2/28    失敗と経験

お金が欲しい! そうだアダルトアフィリエイトをしよう! こう思ってここに来た人は読んでみてください。世の中簡単ではないということを・・・ 「それゆけメンズエステ動画」ってサイトを運用してました。(20 ...

WordPress プラグイン 雑談

【カメラ・写真】タイトル：結局こうやって開けるやつ

2025/1/18    カメラ・写真関連

カメラ写真初投稿となります。 タイトル：結局こうやってあけるやつ 撮影場所：自宅 Wタブになっても結局片方しか開けないやつを撮りました 初めは斜めから撮ってましたが、真上からじゃないと意味が分からない ...

カメラ 写真

サーチライトエフェクトで文字を強調するインタラクティブなデザイン

2025/2/28    ホームぺージ関連

マウスやタッチ操作に応じてサーチライトが動き、指定された文字が強調されるインタラクティブなエフェクトを実装しています。 マウスを動かすことでサーチライトが追従し、その部分だけが明るく照らされ、他の部分 ...

CSS HTML JavaScript

ドラクエ風に歪んだ画像をスクロールで画像を元に戻す処理

2025/2/28    ホームぺージ関連

複数のキャンバス（canvas要素）に対してアニメーション効果を適用し、画面内に表示されているときは画像が歪んだ状態を維持し、表示されていないときは元に戻す処理を行います。 一応ドラクエを意識しました ...

CSS HTML JavaScript

スクロールでぼけた画像が元に戻る！スムーズなぼかしアニメーションの実装方法

2025/2/28    ホームぺージ関連

画像がページ読み込み時にぼかされ、スクロールしてその要素が画面に入ると自然にぼかしが解除されるアニメーションを実装してみましょう。 本記事では、CSSのfilterとtransition、そしてJav ...

CSS HTML JavaScript

ブラウザー操作で最低限覚えておきたいショートカットキー一覧

2025/2/28    その他

使えそうなブラウザショートカットキーになります あんまり多くのショートカットキー使ってないですが、これだけでも作業効率が格段に上がるので覚えておいて損はありません Macだと[Ctrl]の部分が[co ...

Windows 作業効率

クラシックエディタ用のプラグインを作ってみた

2025/2/24    ホームぺージ関連

制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...

HTML WordPress プラグイン

2025年現在において、Sassって必要か否か？

2025/2/24    ホームぺージ関連

Sassって必要ですか？ Web開発をする上で「Sass」というCSSプリプロセッサを相当の確率で目にするはずです。しかし、このツールが本当に必要なのかという質問は、意外と議論されていないように感じま ...

HTML

細かいけど効果抜群！ラインやスペーシングで魅せるデザインテク

2025/1/10    ホームぺージ関連

ウェブデザインを魅力的にするために、「ライン（線）」と「スペーシング（間隔）」は非常に重要な役割を果たします。 この記事では、CSSだけで簡単に実現できる細かいけど効果抜群のデザインテクニックを紹介し ...

CSS HTML

JavaScript不要！CSSだけで作るインタラクティブなUI

2025/1/7    ホームぺージ関連

近年、WebサイトのUIデザインはますますインタラクティブで魅力的なものになっています。 しかし、インタラクティブな動作を実現するにはJavaScriptが必須だと思っていませんか？ 実は、CSSだけ ...

CSS HTML

楽天アフィリエイトをPCとスマホで綺麗に表示させる方法

2025/1/6    ホームぺージ関連

wordpressで楽天アフィリエイトを設置したはいいが特にスマホ表示だと要素をはみ出てしまって困っている方向けのテクニックとなります 楽天アフィリエイトでは「生成されたHTMLソースの中にタグを追加 ...

CSS HTML

« Prev 1 2 3 4 5 6 7 Next »
  • Post
  • Share
  • Pocket
  • Hatena
  • LINE
  • URLコピー

管理人の声

PHPの記事を増やします(*'ω'*)
初級試験受けるつもりです。C言語基礎できるので余裕と思ってますがどうなんですかね(*'ω'*)
本も買いましたがまだ届いてない(4/20)

クラシックエディタ用のプラグインを作ってみた(ver1.4.1) 公開中

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた(ver1.0) 公開中

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた

サイト内検索

最近の投稿

  • 矢印付きスケジュールをタイムライン形式で作る方法
  • 【第8回】PHPで「関数」を作ってコードをスッキリさせよう！
  • 【第7回】入力はちゃんとチェックしよう！フォームのバリデーションと複数項目の処理
  • 【第6回】ユーザーの入力を受け取ろう！はじめての「フォーム連携」
  • 【第5回】たくさんのデータをまとめて扱う！PHPの「配列」入門

ランキング

  • 本日
  • 週間
  • 月間

  1. 【リボンコピペ】リボンの文字が入った可愛い文字列をご紹介

  1. レスポンシブデザインに挑戦！画面サイズに応じてカラム数を変化させる方法

  2. no image

    鍵ページ

  3. Animate It!を使って動的なアニメーション再生をしよう

  1. レスポンシブデザインに挑戦！画面サイズに応じてカラム数を変化させる方法

  2. no image

    鍵ページ

  3. Animate It!を使って動的なアニメーション再生をしよう

最近のコメント

    アーカイブ

    • 2025年6月
    • 2025年4月
    • 2025年3月
    • 2025年2月
    • 2025年1月
    • 2024年12月

    カテゴリー

    • AFFINGER
    • CSS
    • HTML
    • JavaScript
    • PHP
    • Windows
    • WordPress
    • アプリ
    • カメラ
    • プラグイン
    • ライブラリ
    • 作業効率
    • 写真
    • 雑談

    タグ

    HTML中級者講座 HTML初心者講座 JavaScript入門 PHP初心者講座 その他 カメラ・写真関連 ホームぺージ関連 失敗と経験

    おすすめ記事

    1
    クラシックエディタ用のプラグインを作ってみた
    制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
    2
    クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
    制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
    3
    Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
    アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

    アフィリエイト

    お仕事で使うHTMLテクニック備忘録

    コピペしちゃいなよ

    © 2025 コピペしちゃいなよ