まろりかモンスター

パソコンだいすき♡ 雑記ブログです!

Bootstrap 4で要素の表示 ↔ 非表示を切り替える簡単な方法【HTMLだけで実現】

ブログやサイトで、リンクやボタンをクリックすると要素が表示したり非表示したり切り替わる部品を見たことありますよね。 今回はそんなリンクやボタンをクリックすると要素が表示 ↔ 非表示と切り替わる方法をBootstrap 4で簡単に実現する方法を紹介します。…

銀座ルノアール系列の喫茶店チェーンブランドまとめ

根強いファンがいる喫茶店を経営している銀座ルノアール。 そんな銀座ルノアールが展開する喫茶店チェーンブランドを紹介します。 銀座ルノアールとは 銀座ルノアールはカフェの名前というよりも会社で「株式会社銀座ルノアール」が正式名称です。 会社名に"…

街コンに参加するメリット20個

街コンに参加したことありますか? 街コンは昔に比べてとてもポピュラーになりましたよね。私の周りにも行っている人がたくさんいて、中には付き合ったり結婚したりしている人がいます。 私も街コンはたくさん行ったことがありますが、この記事では街コンに…

はてなブログのHTML編集で目次リンクを設定する方法【コピペOK】

目次 はじめに 当記事の目的 当記事の目的は、はてなブログでHTML編集で記事を書いている人に向けて、 見出しタグから自動で目次リンクを作成する方法を紹介することです。 はてなブログで目次を作成する方法 はてなブログには編集モードが複数ありますよね…

見出しタグから入れ子の目次を自動作成するJavaScriptを作りました【コピペOK】

目次 はじめに 当記事の目的 ブログなどの記事で目次があると記事の全体像がわかりやすいですよね。 特に長い記事だと目次があると助かりますよね。 今回はそんな便利な目次を自動作成してくれるJavaScriptを紹介し、 簡単に目次を作れるようになってもらい…

北千住駅周辺にあるファミレスまとめ【徒歩圏内】

最近、北千住周辺は賑わっていますね。 大学もたくさん誘致され若い人も多く治安もほぼ気にならなくなりました。 週末にはファミリーやカップルで北千住に訪れている人をたくさん見かけます。 大学生やファミリーがたくさん訪れるだけあってファミレスがたく…

結婚式のプロフィール動画を無料で自作するオススメの方法【使い慣れたパワーポイントで作ろう】

結婚式の準備でやることの中でもウェディングプロフィールムービーの作成には悩まされる人は多いのではないでしょうか。 どうやってプロフィール動画を作成すればいいかわからなかったり、できるだけお金をかけたくなかったりと悩みのタネの一つでもあります…

Bootstrapのbuttonの使い方をマスターするポイント【Boostrap 4】

WebフレームワークであるBootstrapを使うと簡単にボタンを設置することができます。 Bootstrapでは様々なスタイルのボタンが定義されているので使いこなせるようになればとても便利ですよ。 今回はBootstrapでボタンを設置する際のポイントを紹介します。 Bo…

【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる

Bootsrapをみなさん使いこなしているでしょうか。 今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。 たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。

Bootstrapでモーダルダイアログを超簡単に実装する方法

モーダルダイアログって知ってますか? 百聞は一見に如かずということで以下にモーダルダイアログが表示されるボタンを設置しました。 モーダルダイアログ例 タイトル × 内容・・・ 閉じる ボタン ボタンクリックで出てくる例のようなダイアログウィンドウの…

プロジェクト運営する際にオススメできる超簡単な3つのルール

仕事でプロジェクトを運営するにあたりルールってとても重要ですよね。 一人で仕事をする上では仕事の進め方やアウトプットの質のばらつきは少ないでしょうが、 チームで動くとなると足並みを揃えるためにはルールが必要となります。 チームでプロジェクトを…

雑記ブログ1ヶ月の思い出!やって良かったこと。これからやりたいこと。

ブログを始めてから1ヶ月が経ちました! 3日坊主で続かないかなーとか最初は思ってたけど割りと続けられています\(^o^)/ 1ヶ月しか経ってないですがブログをやっていなかったら知らなかったことや出来なかったことがたくさんありました。 また、今のところ…

Chromeで使えるかなり便利なおすすめショートカットキー5選

パソコンを使っている時間の中でネットサーフィンの割合が大きい人はたくさんいると思います。 今よりも効率よくネットサーフィンできるように、今回はGoogle Chromeで使えるかなり便利なおすすめショートカットキー5選を紹介したいと思います。 ショートカ…

Chromeの新しいタブで履歴サムネイルを非表示にする方法

GoogleのChromeブラウザで新しいタブを開くとデフォルトでは、よく見るページとして履歴のサムネイルが表示されますよね。 このデフォルトの新しいタブページですが、Chromeの拡張機能を利用することで変更できるので、それについて紹介します。 ちなみに今…

クリック一つでクリップボードにコピーする機能(HTMLとJavaScriptのみで実現)

コピーって結構使いますよね? スマホだと、長押しして選択してコピーしてますよね。 パソコンだと、WindowsであればCtrl + C、Macであれば⌘command + Cでショートカットをよく利用していると思います。 ショートカットを使わずに右クリックからコピーする人…

Bootstrapやメディアクエリでレスポンシブデザインが反映されない場合の対処方法

Bootstrapを利用していたりメディアクエリを利用して、端末サイズに応じたレスポンシブなデザインにされている人が多いと思います。 先日、Bootstrapでデバイスのサイズに応じたデザインにしていましたが、想定とは異なるデザインになってしまうことがありま…

松屋のチーズタッカルビ定食は女性にはオススメできないと思った話

先日の1月23日(火)から松屋で新発売となったチーズタッカルビを食べてきました。 松屋フーズのチーズタッカルビのページ この新メニューのチーズタッカルビですが、松屋の女性社員が考案した新商品ということで楽しみにしていました。 もともとチーズタッカ…

ソースマップについてコンソールに警告(DevTools failed to parse SourceMap)【Chromeデベロッパーツール】

自分のはてなブログに何かエラーや警告がないか調べたところ、以下のような警告がGoogleデベロッパーツールのコンソールに出ていました。 DevTools failed to parse SourceMap: {URL} 調べてみた結果、はてなブログのデザインCSSに設定している内容に問題が…

【Chromeデベロッパーツール】SSLサーバー証明書のコンソールの警告について(The SSL certificate will be distrusted)

自分のサイト(このブログ)に何かエラーや警告がないか調べたところ、以下のような警告が出ていました。 The SSL certificate used to load resources from https://pf-api.hatena.com will be distrusted in M66. Once distrusted, users will be prevente…

MacBookで Home / End / PageUp / PageDown の入力方法

MacBookで Home / End / PageUp / PageDown キーの入力の仕方について紹介します。 Home / End / PageUp / PageDown キーを使いこなしている人は少ないかもしれません。 しかし、使えるようになるとドキュメントの入力が早くなったり、インターネットのブラ…

Bootstrap 4が正式リリース(Bootstrap 3との違いは?)

Booststrap 4の安定版がついに正式リリースされました。2018年1月18日、Boostrap 4.0.0としてリリースされています。 Bootstrap 4の開発が始まったのが2015年後半なので、正式リリースまで約2年ほどかかりましたね。 Bootstrap 3よりも使いやすくなっていて…

パニック障害になったきっかけと経緯【体験談】

現在はパニック障害は完治しているのですが、2015年下旬から約1年間ほど、パニック障害と診断されていました。 当時はパニック障害についての知識を得るために関連するブログや本をたくさん読みました。 それにより沢山の人のパニック障害の体験談を知ること…

Googleアナリティクスの「内部トラフィックをフィルタしてください」を解消する方法

自分のサイトやブログを持っている人は、Googleアナリティクスをもちろん導入していますよね。 Googleアナリティクスでは「アナリティクスの通知」で様々な推奨設定をお知らせしてくれます。 数ある通知の中でも、Googleアナリティクスを導入してから早いタ…

Bootstrap 4を導入するための設定方法【2018年最新版】

BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。 また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブ…

【情報処理安全確保支援士】合格した後に資格登録しないで様子を見ることにした

「情報処理安全確保支援士」はセキュリティに関する国家資格です。今まであった「情報セキュリティスペシャリスト試験」の後継の試験で試験内容はほぼ同じですが、 制度上は情報処理技術者試験の中の一つではなくなったようです。 昔と違って登録料と維持費…

【USJ】初めてユニバに行ったけどいろいろ残念でがっかりだった話

先日、初めてユニバーサル・スタジオ・ジャパン(USJ)に行ってきました〜^^ 私はテーマパークとか動物園、遊園地に行くのが好きなので何かと話題に挙がるユニバにはとても期待していました。 しかし、想像以上に期待はずれ(残念)なことがあったので今回は…

パニック障害の症状とは。パニック障害だった私が説明します。

私は2015年下旬から約1年間ほど、パニック障害と診断されていました。現在はパニック障害は完治しているのですが、 パニック障害とはどんな症状なのか? パニック障害と診断されているけど完治するのか? と疑問を抱いている方に向けて記事を書きたいと思い…

東京メトロ線と都営線のカラーコード & RGB値の一覧

東京メトロの各路線の色について、カラーコードとRGB値を一覧にしました。 私は、南北線、三田線、大江戸線の色が好きでいろんなところに利用しています。 みなさんもお気に入りの色を資料などに利用してみてはいかがでしょうか。

無料で使えるWebアイコンサービスのFont Awesomeを使用する方法【2018年最新版】

現時点(2018年1月)最新版の「Font Awesome 5」の設定方法をご紹介します。 また、旧バージョンの「Font Awesome 4」を利用していた方向けに、アップデート方法も紹介します。

はてなブログでアイコンを使う2通りの方法(デフォルト & Font Awesome 5)

はてなブログでアイコンを使いたい場合がありますよね。 よく使われている方法を2通り紹介します。 「はてなブログがデフォルトで読み込んでいるアイコンを使用する方法」と「Font Awesomeを利用する方法」です。