メインカテゴリーを選択しなおす
PHPとHTMLは、ウェブ開発において密接に関連しています。以下にその関係性を説明します： 1. **PHPとHTMLの統合**: - PHPは、HTML内に埋め込んで使用されることが一般的です。PHPコードは、HTMLファイルの中に直接挿入され、サーバーで処理された後にHTMLとしてクライアントに送信されます。 - 例えば、PHPを使用して動的なコンテンツを生成する場合、HTML内にPHPコードを埋め込んでそのコンテンツを表示します。 …
自分用に作成したツールだがせっかくなので公開。買い物している時に複数の洗剤でどれが一番安いのかをぱっと比較出来ればなぁと思った事がきっかけ。検索したらツールなんかも出てくるのだろうけども、勉強がてら作ってみた。marusho-1266.github.ioといっても自分でコードはほとんど書いておらず、とりあえずclaudeに以下のような仕様で投げ込んだ。 洗剤の値段を比較するwebサイトを作成したい ・入力仕様 値段 内容量(g) ・出力仕様 1gあたりの値段 ・その他仕様 入力列は3列（初期値） 入力列は追加できるようにする 入出力は同行に表形式で表示 htmlで作成（css）は利用可能 最も…
【超重要】<head>〜</head>の中にコードを書く(コピペ)する理由！
こんにちは、HTML初心者すぐこです。HTMLノータッチのブロガーさんやHTML初学者さん、&lt;head&gt;タグになぜ色々な情報を入れるのか、疑問に思いませんか？ ブログの効率化や改造をしたくてネットをさまよっていたら、「このコードを&lt;head...
テキスト整形ツール紹介 こんにちは！ 今回は、テキストを簡単に整形することができる「テキスト整形ツール」を公開しました。被リンクの増加やSEO対策に、便利なツールを作成して公開すればいいという記事を見つけたので普段記事作成の際に使っている、文字カウントやテキストの整形のツールを公開すればいいのではということで勉強がてら作ってみました。 プログラミングは初心者のため絶対にバグがあると思いますが お許しください(´・ω・｀) このツールを使えば、入力したテキストをさまざまな形式に変換できます。 以下の機能を備えています。 主な機能 大文字・小文字変換: テキストを大文字または小文字に変換できます。…
このツールは、テキストを簡単に整形できる「テキスト整形ツール」を紹介します。ユーザーが入力したテキストを、大文字や小文字に変換したり、全角と半角を切り替えたり、ひらがなとカタカナに変換することができます。また、空白を削除する機能や、リアルタイムで文字数をカウントする機能も搭載しています。 使い方は非常にシンプルで、必要なオプションを選んで「実行」ボタンを押すだけ。整形された結果はすぐに表示され、コピーも簡単です。このツールを利用して、テキストの整形を手軽に行いましょう！
こんにちは、すぐこです。HTMLなどのWeb制作について学習していると、「セマンティックなんちゃら〜」「セマンティックWebがどうのこうの〜」という言葉を聞いたことがあるかと思います。なんだか難しそうな単語ですっ飛ばしたくなっちゃいませんか...
【初心者向け】CSSのブロックレベル要素とインラインレベル要素の違いは？
こんにちは、ただいまHTML＆CSSを学習中のすぐこです。HTML＆CSSのCSSを学習していると出てくる、ブロックレベル要素とインラインレベル要素。何が違うの？むしろ何か違うの？って思いませんか？私も最初は全然見分けがつきませんでした。で...
これ1冊でOK！HTML＆CSS学習ガチ初心者さんへおすすめの教材【書籍編】
こんにちは、プログラミングガチ初心者のすぐこです。ガチめの初心者だと、プログラミング学習ってどこから始めればいいのか不安ですよね。とりあえず、初心者におすすめ！と名高いProgateのHTML＆CSSレッスンから始めてみた人も多いのではない...
![[感性古すぎ！？]インタラクティブ？な「ホームページ」を創ってみた](https://img.blogmura.com/sites/1287037/post-images/68090446.webp/crop/435x435)
[感性古すぎ！？]インタラクティブ？な「ホームページ」を創ってみた
初めに 以前こちらの記事にて、当ブログのトップレベルドメインにページが存在せず、403エラーが出ていたことをお伝えした。問題が判明して以来、長い時間を掛けて素材画像やページの制作に着手していたのだが、なにぶん俺の知識が乏しいばっかりに、作
【WP】画像だけのメディアページが自動生成される原因と対処法
画像だけのメディアページが自動生成される原因と対処法についてご紹介しています。これからサイトやブログをWorPressで運営される方や既に運用されていて、原因や対処法が知りたい方のご参考になれば
【デイトラ初級編】jQuery実践課題②モーダルで画像の拡大表示
デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題②「モーダルで画面の拡大表示」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを載せています。
【デイトラ初級編】jQuery実践課題①ページトップへ戻るボタンを付ける
デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題①「ページトップへ戻るボタンを付ける」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを載せています。
【デイトラ初級編】調べながら実装しようjQuery実践課題①
2024年8月から、デイトラでWeb制作コースを学んでいます。 今回は初級編DAY21「調べながら実装しよう」で、jQueryを使って自分でサイトの動きを実装する課題です。 初級編で構築したスイーツサイトに動きをつける課題が2つ出ました。
【AdobeXD】要素の繰り返しの配置が簡単にできるリピートグリッドの使い方
AdobeXDで要素を繰り返して配置するリピートグリッドの使い方について解説をしています。リピートグリッドでは要素をドラッグで左右上下にリピートが簡単にできますので、是非ご興味のある方はお試し下さい！
以前HTMLの話をしたがその続き。↓前回の記事 HTMLについて - 備忘録のようなもの HTMLはwebページのタイトルやヘッダーなどの内容を記述するもの。 これにプラスするような形でCSSと言うものがある。CSSとは「Cascading Style Sheets」といい、以下のような記述の言語の事を言う。 ※スタイルシート言語と呼ばれるらしい。 h1{ color: red; } CSSはwebページのデザインに関わる言語で、上記の例はh1(ヘッダー)と定義されているタグの文字色を赤にする、という意味になる。 ちなみにこれを前回のHTMLに適用させると以下のようになる。 では、CSSをHT…
XDでボタンをマウスオーバーした時にアニメーションをつける方法
AdobeXDではデザインにアニメーションを設定する事も可能です。例えばリンクボタンがマウスオーバーした時にアニメーションをつけてブラウザで確認ができます。この記事ではAdobeXDでリンクボタンにマウスオーバーアニメーションをつける方法をご紹介しています。
ブログリニューアル進捗状況【4】：WordPress用phpファイル、9割移行終了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その4」をご報告します。今回はphpのテンプレートがほぼ完成したお話になります！
ブログリニューアル進捗状況【3】：全テンプレートのhtml/css/jsのコーディングが完了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その3」をご報告します。今回はコーディング完了記念にデモサイトを一時公開。リニューアル後は消えてしまうので、今だけ特別に！
ブログリニューアル進捗状況【2】：汎用ページhtml/cssのコーディングが8割完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その2」をご報告します。
ブログリニューアル進捗状況1：Web設計と画像の書き出し完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その1」をご報告します。
この記事ではサーバーに移管作業に関する手順をご紹介しています。新しくサーバーを変えたい方で、サーバーの移管作業を考えている方の参考になれば幸いです。
URLコピーボタンを各記事のシェアボタン内に配置させるカスタマイズ
WordPressブログに ｢URLコピー｣ のボタンを自作で作るのに、デザインは既に設置してあるシェアボタンに溶け込ませ、記事一覧からでもきちんと動作するようにしたい……ということで、｢URLコピー｣ ボタンを独自カスタマイズしてみた。今回はその内容をご紹介する。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Untitled by あっちのそらら (@acchinosoraranocode) on CodePen. 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランス…
当ブログのテンプレート（背景、デザインなど）を変更しました。以前の設定がまだ反映されいないので少々読みづらかもしれませんが、今後どうぞよろしくお願いします。
画像をふわっと。初心者でも簡単に実装できるシンプルなテクニック。具体的なコード例を交えて紹介。デザインスキルを次のレベルに引き上げるための必読ガイドです。
ウェブサイト制作の教科書はネット、知りたいことはネット上にたくさん転がっている。ウェブサイトを制作していくこと自体は、実は簡単なことだ。しかし、その前にHTML文書を構成するためのタグ、そしてHTML文書とウェブサイトの構造について知っておかなければならない。
わざわざプロに頼まなくてもウェブサイト（ホームページ）は自分で制作できる
筆者は、自分で自社のウェブサイトを制作し、その補完としてブログも作り、それで本業の集客は十分できている。筆者はプログラマーでもウェブクリエイターでもない、本業は旅行屋だ。その旅行屋が、なぜウェブサイトを自作し、それで集客できているのか？それは、ウェブサイト制作は難しいものではなく、ド素人にもできる簡単なものだからだ。
Contact Form 7の送信ボタンを中央寄せにする方法
Contact Form 7を使っていると色々と細かい調整が必要になるときがあります。 使用しているWordpressのテーマによってレイアウトが崩れる場合もありますので。 今回...
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【WordPressなどで使えます】スライムが現れたけど、触ったら逃げ出すソースコード！
WordPressのブログや、ホームページなどに、スライムを登場させるソースコードです。HTML,CSS,JavaScript、遊びで書いた簡単なコードですが、興味が沸いたらコピペして使ってみて下さい。
【WordPress】CocconでYouTube動画がサイズ変更できない？ときの追加コード設定！
YouTube埋め込み動画のサイズ変更が出来ねー！解説ブログと同じにやってるのに上手くいかない！と困り果てた末に、やっと辿り着いた解決方法です。
https化ってなんじゃい？？？常時SSL化ってなんじゃい？？？これってどっちも同じ意味なんですね。httpはセキュリティに良くないらしく、みんなhttpsになっていってるんだってさ。って事でライブドアの無料ブログもhttps化してみました。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました（下記参照）。 正円1のアニメーションを開始 正円1の開始から0.3秒…
CSS（スタイルシート）を更新したときにキャッシュを自動で読み直すために対応した話
今回はCSSファイルを更新したときにだけ、最新のCSSを読み直させるための対策をご紹介したいと思います。
Googleカレンダーをサイトに表示させる方法。-その1-デフォルトタイプ
今回はGoogleカレンダーをサイトに表示させたいというご要望を頂きましたので、マニュアル代わりに記事として公開させて頂きたいと思います。
備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法
CSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能（@keyframes）で、下記の処理を順に実行させています。 雪うさぎを画面外に配置（スタート位置） 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動＋角度を変更し、転がり…
はてなブログで、カスタムしたHTMLやデザインCSSを間違って消してしまい、バックアップも取っていなかった…というミスをしたことはありませんか？ はてなブログにはこれらのソースコードを復元できる機能がないため、バックアップがなければ一からコードを書き直す必要があります。そんなときには、Google検索の「キャッシュ」を使うと復元できる可能性があります。
初心者のためのHTML入門ガイド：HTMLの基礎をホームページを作成しながら勉強しよう
初心者向けHTMLガイドで自作ホームページの作成やホームページのカスタマイズに挑戦しませんか？HTMLの基本的な作法やタグの説明から公開方法まで、手順を追ってご紹介します。一緒にデジタルスキルアップを目指しましょう。
WordPress上のリンクをクリック中に現れる黒枠を消すCSS設定
WordPress ブログ内の テキストリンク をクリックしている最中、 黒い枠 が現れるようになりました。ブラウザに依らず発生するこの黒枠を、どのブラウザでも消えるような CSS 設定を調べてみます
![[VSCode] 自動補完機能が効かなくなった](https://img.blogmura.com/sites/1282896/post-images/67463299.webp/crop/435x435)
![[CSS] レスポンシブなfont-size指定](https://img.blogmura.com/sites/1282896/post-images/66837594.webp/crop/435x435)
