メインカテゴリーを選択しなおす
【JavaScript】パスワードを入力してページ遷移をさせる方法
この記事ではJavasscriptでパスワードを入力してページ遷移をさせる方法についてご紹介しています。特定のユーザーのみに表示を許可したい場合に、ベーシック認証等を設定する事が多いですが、サイト規模や場合によってはJavasscriptで簡単に実装できる事もありますので、是非一度試してみてください！
今回も『WebARでシューティングゲーム』で使っているやり方ですが 自分用覚書きです ARに必要不可欠 背面カメラの映像を取得する方法です <html> <head> <style> .v-case { left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 100%; } .v-cover { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(img/video.jpg) no-repeat center cent…
ブログをはじめて もうすぐ3年。 ブロックエディタの使い方を改めて知る
ブログをはじめたころは、ブログを開設することと記事数を増やすことで手一杯でした。ネット上で得た情報で設定を済ませて書き始めたものの、細かいところまで気を配れませんでした。 HTML いつの頃からか、楽
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する（JavaScript・HTML・CSS対応）
スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています（以下リンク）。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。
![はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連]](https://img.blogmura.com/sites/1251975/post-images/62402677.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは8回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する（JavaScript・HTML・CSS対応）
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています（以下リンク）。 今回はそれをスマホ対応したような内容です。miya-moto-blog.hatenablog.com上記の対応（PCサイズ）だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応（スマホサイズ）だとサイドバーがないため、別の方法で目次を表示するようにしています。今回はその辺りに関して詳しく書いていきます。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました（下記参照）。 正円1のアニメーションを開始 正円1の開始から0.3秒…
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更（HTML・CSS変更）
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しています。 以下の記事で詳しく書いています。miya-moto-blog.hatenablog.com変更前はアイコンだけだったのですが、それぞれのボタンに名称を付け足してみました。他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。それでは本題へ。
JavaScriptさわってみる12回目(((´・ω・｀))) 多重ループと多次元配列、表作成
こんにちは。 ひっさしぶりの”JavaScriptさわってみる企画"です。 前回、アイテムの組み合わせを考える記事を書いて、それをリスト化するってことでEXCELのVBAコードを急に載せたのですが折角だからEXCELを持ってない人でも使えるようにJavaScriptで作ってみようかと思いました(ページは作成中)。 前回の記事↓ JavaScriptさわってみる企画では前回の記事のVBAでやっているような多重ループを用いたことがなかったと思うので先にメモ書きを作っておこうと思います。 それに加えてJavaScriptでは表を作成する必要があるので値を管理しやすくするために多次元配列についても書い…
![はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連]](https://img.blogmura.com/sites/1251975/post-images/61390015.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは7回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
全部にピンクのマーカー 上半分薄くなったピンクのマーカー 文字半分にピンクのマーカー 文字の下にピンクのマーカー 赤のマーカー 紫のマー...
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
見出し線や枠を入れるだけでページがぐっと読みやすくなりますよね。 ここではCSSは使わずにHTMLに貼り付けるだけで簡単に作れるシンプルで使いやすい【見出しデザイン】をご紹介します。
普段こうやってブログの更新をするときは､Markdownを使っています｡ 一時期ははてな記法とやらも使っていたのですが､Markdownの方が汎用性が高く､簡潔で分かりやすいためこっちのほうが良いと思います｡ 見た目の整形を執筆と同時進行で行えるというのも魅力的ですし､全体で統一した記述をすれば､あとから記事を修正したり更新したりするときに非常に楽になります｡ 「見たまま」設定は便利といえば便利ですが､正直言って見た目の調整はより正確なプレビューを使いますし､「見たまま」設定でHTMLコードを貼り付けても､HTMLとして認識してくれないので､これが地味に不便なのです｡ しかし､Markdown…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを大幅に変更してみる（CSS変更）
数日前から適用していますが、グローバルナビゲーションのデザインを大幅に変更してみました。自分のブログに適用しているのは「Silence」というデザインテーマです。 このデザインテーマ「Silence」の追加カスタマイズとして、グローバルナビの設置が可能です。Silenceで用意されているカスタマイズなので、手順に従うだけでお手軽にグローバルナビが設置できます。 当初はこれで満足していたのですが、徐々に自分なりのカスタマイズをしていくうちに全部イチからグローバルナビを作成したくなりました。ということで、イチから作成した内容が今回の記事となります。それではサクッと本題へ。
【はてなブログ-カスタマイズ】スマホ版グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、スマホ版のグローバルナビゲーションのデザインを少し変更してみました。 直近のブログカスタマイズはアイコン関連のものが多く、今回の記事もその流れです（直近のアイコン関連の対応は以下リンクにて）。 直近のブログカスタマイズ グローバルナビゲーションのデザインを変更してみる グローバルナビゲーションのアイコンを変更してみる（Font Awesome） サイドバーのアイコンを変更してみる（Font Awesome） せっかくFont Awesomeのアイコンが使えるというのと、スマホ版にもアイコンを使える余地があったなということで、変更してみた次第です。 それではサクッと本…
【はてなブログ-カスタマイズ】サイドバーのアイコンを変更してみる（Font Awesome）
数日前から適用していますが、サイドバーのアイコンを変更してみました。 今回の変更は、2日前のグローバルナビゲーションのアイコン変更と同じような感じです。miya-moto-blog.hatenablog.comせっかくFont Awesomeのアイコンが使えるので、サイドバーのアイコンも変更してみようと思った次第です。それではサクッと本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションのアイコンを変更してみる（Font Awesome）
数日前から適用していますが、グローバルナビゲーションのアイコンを変更してみました。 グローバルナビゲーションは何日か前にもデザインを変更しています。 miya-moto-blog.hatenablog.com 上記記事の対応は概ね満足しているのですが、それっぽいアイコンがなかなか見つからなかったのが心残りでした。 今回はその心残りに対応した内容となります。 それではサクッと本題へ。
こんにちは。 ”プログラミング”のカテゴリー名を”プログラミングとか”にしました。 これでなんでも当てはめることができます(・∀・)よっしゃ。 今回はその”とか”をやります。 タイトルの通りですが、レンタルサーバーを使ってみるハナシ。 サーバーっていう言葉を使いだすとなんだかインターネット中級者っぽいですよね。 (´ω｀) o○(初心者の発想) ※この記事は初心者の日記です。だいたい間違っていると思ってください。すべての責任は負いかねます。 サーバーっていうのはデータを保管しておく場所で、ネットワークに繋がって他の端末からデータを置いたり取り出したりできるっていうもの。 世にはいろんなwebペ…
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能（@keyframes）で、下記の処理を順に実行させています。 雪うさぎを画面外に配置（スタート位置） 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動＋角度を変更し、転がり…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。変更した理由は、なんとなくの気分です。グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。それではサクッと本題へ。
この記事はブログ初心者がネットを検索して、自分のブログで試行錯誤したことをまとめたものです。 正しくない情報が含まれている可能性もありますのでご了承ください。 ここで紹介する方法はアメブロを利用し、パソコンでブログを書いていることを前提にしています。 Step1、並べたい画像を記事本文に貼る Step2、HTML表示の画面に移動 Step3、htmlの画面での作業 1、画像のコードの下に画像を並べるコードをコピーして貼り付ける。 2、画像を並べるコードに画像urlを貼り付ける Step4、画像サイズを調整 Step5、並べた画像を真ん中にしたい おまけ 画像を3個、4個並べた場合の見え方 画像…
『画像やバナーを中央に寄せたい』ご自身のWEBサイトの希望場所に下記のコードを用意し、〜ここにHTML〜に中央に寄せたい画像やバナーのHTMLを挿入すれば中央に配置されると思います。 </> <div style="tex
初心者のためのHTML入門ガイド：HTMLの基礎をホームページを作成しながら勉強しよう
初心者向けHTMLガイドで自作ホームページの作成やホームページのカスタマイズに挑戦しませんか？HTMLの基本的な作法やタグの説明から公開方法まで、手順を追ってご紹介します。一緒にデジタルスキルアップを目指しましょう。
ポップアップ作成のHTML/JavaScript/コピペ可能
HTMLとJavaScriptを使用してポップアップを作成する手順を紹介する記事。コピペ可能なコードと、WordPressでの導入方法も詳しく解説しています。ポップアップの外観やメッセージを簡単にカスタマイズでき、効果的なウェブサイト通知を実現できます。
ページ内リンクの最も簡単な方法/wordpress/html
WordPressやHTMLでページ内リンクを設定する最も簡単な方法について詳しく解説した記事です。リンクの設定手順と具体的なコード例を含み、わかりやすい画像も掲載しています。
【HTML】webページ/ブログに動画を埋め込む(・∀・) 【GitHub】
こんにちは。 本日のネタは前からやってみたかったけどどうやるのかなーって思ってたこと。動画をwebページに埋め込む方法です。 ※カテゴリーをプログラミングとしていますが内容はHTMLのみです。 ※初心者がやってみた、というだけの内容で単純な1方法です。 はてなブログだと編集画面の右側にある「+」のボタンからyoutube動画を簡単に貼り付けることができますが、画像のように直接アップロードっていうのはできないですね。 じゃあブログに自前の動画を貼り付けたかったら必ずyoutubeに投稿しなけらばならないのか？ってことになります。 別にそれでも大きな問題はありませんが動画投稿サイトにアップすると視…
【WordPress】初心者でも簡単！Twitterの埋め込みのカスタマイズ
今回は、WordPressの投稿で「Twitterを埋め込む方法」について紹介していきたいと思います。やり方をマスターして、投稿に活用してみてください。 他の記事でもWordPressテーマのCocoonのカスタマイズ方法を紹介しています。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画してみました。描いたのは、うちの子「ナムナムくん」。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen namunamu by あっちのそらら (@acchinosoraranocode) on CodePen. 単調なデザインと甘く見ていましたが、どっこい。パーツの多さもあり、頭が痛くなるコード量に。特に髪は、地味に複雑な形のため、なかなか思ったとおりにならず悩みました。髪と口は、複数の円を組み合わせ、一部分を消すことで、一つの線に見えるようにしま…
あ、お知らせするの遅くなりましたが、Ameba Pick、審査通りました！Pickていうところを押すだけで、商品のところにつながるそうです。簡単ですね。でも、…
アメブロやるついでに、アフィリエイトのAmeba Pickに申請してみました。特別本格的にやるつもりはないんですけど。あと、にほんブログ村にも登録してきました…
ホームページって言うのかな、企業とかでは無くて個人レベルだと、 ブログが中心で、自作でHTML、CSS、javascriptとか駆使して作ってとかって、 少なくてなった感じもする・・・・・・ でも、今はネットで沢山のアイデアとか、不都合での
これは、「浜崎あゆみ」さんの楽曲ランキングを作成改造して、 その関連で、現在作ってみてるヤツです。 英語での表現方法が「違うじゃね？」ってのも有るかもです・・・笑 あと、誤字脱字があるかもです。
浜崎あゆみ（ayumi hamasaki）さんが作詞（Lyrics）した楽曲を英語にしてみました。
サムネイル画像有りきで考えて画像は、webpにしてみたけど、 サムネイル画像が多い分どうなのか？ って問題も有るけど・・・・・まぁ、良いかぁ・・・笑 ヘッダーとフッターどちらか、固定した方が良いのかも？ カクカクした動きになる時も有るから・
![はてなブログカスタマイズの記事まとめ（その5）[HTML、CSS、はてなブログ関連]](https://img.blogmura.com/sites/1251975/post-images/57017456.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その5）[HTML、CSS、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみに、ブログカスタマイズの記事まとめは5回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連] ということで、投稿した記事を…
【はてなブログ-カスタマイズ】HOMEボタンをページに固定表示する
数日前から適用していますが、HOMEボタンを配置してみました。 ページの右下に常に表示されているボタンです。以前も「トップへ戻る」ボタンを配置しており、そこに縦に並ぶ形で「HOME」ボタンも配置してみました。関連記事【はてなブログ-カスタマイズ】「トップへ戻る」ボタンをページに固定表示する「HOME」のページに戻りたい時が多いので、せっかくなら右下に固定表示してしまおうと思った次第です。今回の対応で「トップへ戻る」ボタンも微調整しているので、その件も含めて書いていきます。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、夏にピッタリなひまわりの花を作ってみました。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen Sunflower by あっちのそらら (@acchinosoraranocode) on CodePen. 今年、CSSで三角関数がサポートされたので、試しに花びらの部分に取り入れました。三角関数の表現のひとつとして、要素を円周上に並べることができます。以下、今回の三角関数の工程をざっくり解説します。まずHTMLで、花びらの数に応じた番号を付与します。今回は10個なの…
ブログにコメントが書けない、表示されないのは？HTMLがわからない私のために
先日のブログでコメントが書けないと指摘がありました！ コメント見れない、表示されてない などと言う指摘もあり・・・ 何がどうなってるのって思ったわけです。こういう時は検索すると解決方法がみつかるんだよ。 どのサイトを見たのかは忘れちゃったけど 私でも、あっさり解決できた。 問題のブログはこちら （すでに修正済み） ⇩ fatbottomgirl.hatenablog.com 何かが変 修正 誤りを見つけるには スマホのスクショでごめん さいごに 何かが変 ブログのコメントが 書けない 見れない 表示されてない などの指摘があった。指摘されては無いけど サイドバーが白紙状態で あるはずのプロフィ…
ブログカスタマイズの記事などで適用手順を書くことが多いため、ステップバーを導入してみました。ステップバーを導入する前は①、②、③・・・といった書き方でした。 それがステップバーの導入により、CSSでデザインされた見た目に変わりました。今回の対応により、手順を書いている感じがパッと見で表現できるのが良いなと思っています。使い方がちょっと独特なので、その辺も含めて書いていきます。
![はてなブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連]](https://img.blogmura.com/sites/1251975/post-images/55364187.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは4回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] 直近のブログカスタマイズはCSS、HTML、JavaScriptと、多岐にわたる感じになりました。 ということで、投稿した記事をまと…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションを変更してみる
数日前から、スマホ版のグローバルナビゲーションを変更しています。 前はヘッダーに配置していたのですが、フッターに移動しました。これはCSS、HTML、JavaScriptを追加適用することで実現しています。なんとなく、スマホを手で持った時の親指の位置的に、フッターにメニューがあった方が操作しやすいなと思っています。なのでネットで調べて、自分のブログにも適用してみました。今回はその適用内容や手順について、アレコレ書いていきます。
2022年秋の課題「自転車サイト」をHTML=テキストで表わすと・・・長い文でしかありません？！
2022年秋の課題「自転車サイト」をテストUPは失敗!？⇒画像🚲で再現します。サイト（HP）もブラウザ＝chrome や インターネットエクスプローラー や …
【初心者向け】CSSのbackgroundプロパティの基本backgroundは、CSSのプロパティであり、要素の背景に関連する設定を行います。Webデザインにおいて、背景の設定は非常に重要な役割を担っています。その中でもCSSプロパティの
display:flex; フレックスボックスを使ったWebデザインの基本
フレックスボックス(display: flex;)は、Webデザインにおいて広く用いられているレイアウト方式です。極めて自由度が高く、様々なレイアウトを実現できるため、多くのデザイナーにとってなくてはならない技術の一つと言えます。しかし、初
「DOM」という言葉を聞いたことのあるWEBエンジニアの方も多いはずです。それは、DOMがウェブの動的なコンテンツを生成する上で非常に重要な役割を担っているからです。しかし、初心者の方にとっては、「DOM」という言葉だけでも、かなり意味不明
合格発表 今日は先日受験した学校の合格発表。受験前からかなり否定的というか難しいと言われていた。能力的なところもあると思うが一番は年齢だった。ハローワークからは年齢的に合格する可能性は極めて低いから受けても無駄、どうしてもというなら出願書類
