みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

簡単にコードをテストできるオンラインコードエディタと勉強サイトまとめ

オンライン上でJavaScriptを実行できるエディタと勉強サイトのまとめ

C言語の勉強

C言語獲得の為にプログラミング初心者の主婦が地道に勉強するシリーズ。まずは環境構築とHelloWorldまでのみちのり。

コード横にコピーボタンを設置する方法【コピペでOK!】

最終更新:2021年11月12日 こんにちは。久しぶりにJavaScriptの記事です。 長ったらしいコードを手でコピーするのはなかなか大変だと思って、ずっと実装したかったコピーボタンの設置をしました。 コピペで是非どうぞ!

ココナラではてブロカスタム・修正格安出品中!- PR

この度実績積みのための一環として、はてなブログのカスタマイズ及び不具合修正をココナラにて承ることにしました。 料金は一律4,000円(ココナラカテゴリ内最低料金)です。 見出しデザイン 目次デザイン グローバルメニュー 追従メニュー アコーディオンメ…

Tumblrイラストフォリオ4カスタマイズ【無限スクロール・サムネ表示・LightBox適応方法】

この度知り合いのイラストレーターがTumblrでポートフォリオサイトを作ったので、JavaScriptの勉強がてら、何か追加でほしい機能がないか聞いたところ、 無限スクロールを導入したい(イラストフォリオ3にはあるが、4にはない) 無限スクロールで表示された…

PHPのローカルサーバー構築をApache2でやる方法【初心者向け】

初心者向けに、MacでApache2を使用したローカルサーバーの立て方を紹介しています。バーチャルホスト(複数のローカルサーバー)の立て方も合わせてまとめています。PHPのテスト環境作りのために行ったので、PHPの練習のために環境構築したい方におすすめの…

追従するグローバルメニュー【CSSのみ】

グローバルメニューっていうのは、当ブログにあるようなこれ↓ グローバルメニュー とか、これ↓ グローバルメニュー2 グローバルメニュー3 のようなメニューのこと。 Check! ハンバーガーメニューの作り方はこちら micche-labo.hatenablog.com こんな感じの…

JavaScriptの勉強10【コールバック関数】

前回のJavaScript勉強記事 micche-labo.hatenablog.com 他の記事 その他javascriptに関わる記事はこちら JavaScriptでforEachを使用した際、コールバック関数についてよくわからず相当悩みググりました。 いろんなサイトを巡って最終的になんとな〜〜くわか…

JavaScriptでliに子要素がある時に絞り込みしようとしてうまくいかなかった時の原因

先日WordPressでテーマ制作する際、ナビメニューを子要素なしのシンプルなものにしたんですが(フレームワークの関係上)、子要素があったときにドロップダウンするようにCSSを書こうと思いまして、WordPressでのナビメニューのマークアップを確認。 WordPre…

CSSのみでアコーディオンパネル

javascriptでクラス付け外しする方が楽だとおもいますが、cssだけでもできると聞き、実行。 :chekedという擬似要素を使用します。:focusや:activeでできないっけ?と思ってたら:chekedでした。 MDNのサイトで詳細のってます developer.mozilla.org 当ブログ…

PHPの勉強がてらWordPress-その2テーマ制作

こんにちは。 前回、WordPressのローカル環境を整え、基本的なWordPressの設定まで行いました。 前回の記事 micche-labo.hatenablog.com その後、試行錯誤しながらなんとかWordPressのテーマ(めーーっちゃ簡単版)を制作して、とりあえず形になったので記録…

PHPの勉強がてらWordPress-その1構築

JavaScriptのお勉強もだいぶ進み、MDNのサイトではデータベースのところまできました。 ブログ記事にはまだ繰り返し文までしかまとめられてませんorz 前回のjavascriptブログ記事 micche-labo.hatenablog.com XMLHttpRequest、Fetch APIにWeb Storage API 、…

JavaScriptの勉強09【ループ文for・while・forEach】

javascriptの基礎を学ぶシリーズ第9弾。 繰り返しの方法をまとめてなかったなあと思い記事にしました。 前回の記事 micche-labo.hatenablog.com ちなみにループをはじめに学んだ時、i<1とかi++の意味がわからなかったので、いろいろ自分で変えてテストしよう…

はてなブログでコードブロックを横スクロールできるようにする

コードを書いた切っ掛け デフォルトのコードブロック 横スクロールするための追加コード 完成形 さいごに コードを書いた切っ掛け はてなブログはコードブロックが改行されるようになっていて、コードが変なところで改行されて見辛く、間違えそうだと思い、…

JavaScriptの勉強08【条件文if・switch文・三項演算子】

javascriptの基礎を学ぶシリーズ第8弾。 条件分岐の方法をいろいろと学んでみました。 前回の記事 micche-labo.hatenablog.com 初めて条件分岐を学んだ記事 micche-labo.hatenablog.com はじめに このシリーズはjavascriptを触ったことのない初心者が勉強の…

JavaScriptでDOM生成・挿入してみる

前回、JavaScriptでDOM操作してみるという記事を書いたのですが、今回はDOM生成を行っていきたいと思います。 前回の記事 micche-labo.hatenablog.com DOM生成とは JavaScriptでHTMLタグを作ること。 HTMLをJavaScript内に挿入するコードとセットで使う。

JavaScriptでDOM操作してみる

JavaScript勉強番外編。 本編(の前回の記事)はこっち micche-labo.hatenablog.com アコーディオンメニューでよくある、クリックしたら開いて、クリックしたら閉じる、のような動きをJavaScriptで実装したらどうなるのか、ということを調べてみました。 ま…

メニュー横並びのいろいろ【float、table、flex】

横並びの方法はいろいろありますが、わたしはいつもdisplay:flex;を使用しています。 まあ手軽だし使い慣れてきたし…と思ってたんですが、そろそろ他のやり方も研究しようと思って、floatとtableパターンを作ってみました。

JavaScriptの勉強07【分割代入って何なん?】

前回の記事 micche-labo.hatenablog.com 配列まで学んだJavaScript。 そろそろ何か作りたいがもう少し基礎の勉強を。 ということで出てきた「分割代入」。 またしてもなんじゃそりゃ?ってなったんで記録。 はじめに このシリーズはjavascriptを触ったことの…

chrome更新したら、デベロッパーツールが日本語に

先ほどGoogle chromeを更新したら、デベロッパーツールが日本語になってました! 一応アプデで何が更新されたかかるく紹介。 続きを読むからどうぞ。

jQueryでアコーディオンメニューの挙動が思うようにいかなかった時の初歩的ミス

忘れないうちにメモ。 単にjQueryの練習で、slidUp()とslideDown()を使用して、アコーディオンメニューのような挙動にしたかっただけ。 マウスが乗った時にメニューが出てきて、外れた時にしまう。 ただそれだけなのに、liにのせて、いざ子要素のulにマウス…

JavaScriptの勉強06【配列と配列メソッド】

前回までで文字列について学びました。 前回の記事 micche-labo.hatenablog.com 今回は配列について勉強していきます。 はじめに このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう!というシリーズです。…

JavaScriptの勉強05-3【文字列メソッド】

前回、テンプレートリテラルを用いて便利にソースコードを書くことを学びました。 今回は、文字列メソッドについて学んでいきます。 前回の記事 micche-labo.hatenablog.com はじめに このシリーズはjavascriptを触ったことのない初心者が勉強のために記事に…

JavaScriptの勉強05-2【テンプレートリテラル】

JavaScriptの基礎を学ぼうのコーナー。 当方、HTML、CSSしか経験ない(しかもどっちも独学)主婦です。 JavaScriptを学べば他の言語も覚えやすいと巷で見かけ、いろいろ手を出しかけたものの、きちんとJavaScriptを学んでから戻ってこようと思い、一から勉強…

プログラミング初心者がChromeをおすすめする理由【デベロッパーツール・拡張機能】

こんにちは。 今回は、独学でHTML、CSS(SCSS)、そして今現在JavaScriptを勉強中の主婦が、愛用中のブラウザ・Chromeについての記事になります。 Chromeってなに? Chromeだとなにが便利? デベロッパーツールの使用方法 おすすめ拡張機能の紹介 などをご紹…

JavaScriptの勉強05【文字列】

勉強シリーズ。 前回は数値についていろいろと学びました。 過去記事 micche-labo.hatenablog.com micche-labo.hatenablog.com 代入・比較演算子と結構頭がこんがらがってきたのですが、次は文字列について学んでいきます。 「数学は苦手だから理解しづらか…

JavaScriptの勉強04-2【代入演算子・比較演算子】

文系・プログラミング未経験(html、cssは経験ある)の主婦が送る、JavaScriptのお勉強コーナー。 前回は【数値と演算子】について学びました。 前回の記事 micche-labo.hatenablog.com 今回の記事はその続きです。 代入演算子なるものを学んでいこうと思いま…

ラベルつきボックスを作る【記事でも使用中】

プログラミングの勉強用記事ばかりあげてたので、ここいらでWebデザインの記事を投稿させていただきます。 よく巷で見かけるラベル付きボックス。 サンプルは1種類 × 4色。 とりあえず形だけ作って、あとはなんぼでもいじってデザイン整えていきましょ!の気…

JavaScriptの勉強04【数値と演算子】

勉強シリーズ。 基礎の基礎を知る。 前回の記事 micche-labo.hatenablog.com 初めに宣言しておきます。 わたしは算数が大の苦手です。 特に繰り上がり・繰り下がりの計算がまるでできません。 胸を張っていうようなことではないんですが、算数できない私でも…

JavaScriptの勉強-変数テスト編【MDN Web Docsのスキルテスト使用】

今回はJavaScriptの練習でお世話になっているMDN Web Docsのサイトでテストができるので、使い方を記事にまとめてみました。 英語のページですが翻訳すると微妙に日本語の順序がおかしくて理解しづらい…と感じたので、同じようにJavaScriptの勉強をしていて…