未経験・文系アナログ女のプログラミング挑戦記!

未経験・文系アナログ女が、最小限のお金でプログラミングに挑戦します!

大人カワイイ実用アプリ5選!(②monoca)

こんばんわ。花月夜です。

今日は、大人カワイイデザインかつ、実用性

にも優れたアプリ第2弾をご紹介します!

 

 スタイリッシュで可愛いアプリで、

身の回りの物を、ばっちり管理しちゃいましょう! 

 

monocaとは

アプリ「monoca」とは、

身の回りの物すべてのブランド、

個数、消費期限、気に入った点、

購入したお店などを記録して管理

できる優れものアプリのことです。

 

欲しい物を記録する機能もあります!

バーコード検索やネット検索でアイテムを

登録できるから、登録するのも簡単!

登録数100個までは無料で使えます!

 

 このアプリを制作したSola株式会社さんは

「人生を簡単に」するSola管理シリーズの

アプリの1つです。

 他にもメモを管理する「kotoca」、

パスワードを管理する「accoca」というアプリ

があります。すべてスタイリッシュなデザインで

使い方次第で、あなたのライフスタイルを忘れ物や

失くし物とは無縁の快適で便利なものにすることが

できますよ!気になる人は是非チェックを!

 

なぜ「monoca」がお勧めなのか?

 皆さんは家の押し入れにある段ボールやケースに

何が入っているのか正確に把握していますか? 

あれどこだっけ? 私の場合は、必要に迫られても

探し当てるのに、三十分以上かかってしまったり、

諦めて新しいのを購入することが何度もありました……。

ケースに「本」とか「ゲーム」とはラベリングして

あっても、具体的に何が入っているのか把握して

いなかったんですよね……。

 

 でもそのためにExcelでデータベースを作るのは

面倒だし、服とかは画像がないと文字だけではどんな

服だったか思い出せない……何か良いアプリはないものか。

 そして探し当てたのが、このアプリでした!

 

 服だけとか、ゲームだけとかジャンルが限定

されず、アイコンもスタイリッシュ! 登録できる

カテゴリが一杯あって、自分でカスタマイズもできる!

忘れがちな消費期限が来た時にはアラームがあるのも、

安心ですね!

 

 

 私はメモ欄に、そのアイテムの収納場所を登録する

という使い方をしています。カテゴリーは多岐に

渡っていますが、どれにも該当しないことを登録したい

場合は、このメモ欄を活用することで、自分好みに

アイテムを管理することができます!

 

 アイコンがスタイリッシュなだけでなく、背景色を

好みの配色にできるのもありがたいです!全体的に

ごちゃごちゃしていないスッキリとしたデザインなので

飽きにくく、使いやすいと思います。

 

 無料版は登録数100個までですが、お試しできる数

としては十分だと思います。全部無料がいい!という人には

ハードルになるかもしれません。

 

 あえて残念だった部分を挙げるとすると、グループ共有

が無料版できるのかどうかが分かりにくかったです。

公式ページにはプレミアム版限定機能とあったのですが、

無料版の時点でも、何やら操作できそうな感じで困惑。

情報を探してアプリのコメント欄を1つずつチェックして

みると、どうやら初めはグループ共有機能はプレミアム版

限定だったのですが、今では無料版でも使用できるとのこと

でした。(デベロッパ様のユーザーに対する回答より)

 

 なお現在はiOSにしか対応していないところにご注意!

せっかく良いアプリなので、androidの方も使えるように

なって欲しいところですね!

 

「monoca」の機能とは

 アプリの基本情報は以下になります。

 デベロッパSola, K.K.
【基本機能】
①持っている物や欲しい物の登録
②アイテムの一覧表示、ソート表示
APIを使用した商品情報取得で簡単登録
④カテゴリのカスタマイズが可能
⑤保証期限や賞味期限などを知らせるアラーム設定
⑥バックアップ機能
⑦グループ共有機
⑧ボイスオーバー対応

 参照元:monoca

https://kanri.sola-air.com/monoca/

 

 ノートに物の置き場所を書いておくというのは

やっていたのですが、閲覧性を重視すると、大雑把な

カテゴリしか書けなかったんですよね。

細かい内容は……と、書いていると、今度はまた

ゴチャゴチャしてしまって、ノートが足りなくなって

しまうし。アプリだとノートの場所も取らないし、

どんなものか写真で管理できるから、物の場所を確実に

把握できるんですよね。

 

「monoca」のプレミアム機能

 

 課金をしてプレミアム版にアップグレードすると、

以下の機能が使えます! まずは無料版を使って

みて、相性が良ければプレミアム版に移るというのが

お勧めです。

 プレミアム版は期限により価格が異なり、

無期限だと960円、年額だと480円です。

 

・ロック機能(指紋認証とパスコード)

・カメラで文字を自動取り込み

CSV出力機能

・物の登録数の制限なし

・広告表示なし

 

気になる口コミの評価は?

 他の人のアプリレビューも、まとめてみました。

 

【高評価レビュー】

・買い忘れや、無駄買いが減った

・デザインが可愛くて、使いやすい

・バーコード入力できるので、物の登録が楽

・登録情報を共有できるのが便利(有料版)

・自分好みにカスタマイズできるので、

 使いやすい

 

【批判レビュー】

・100個以上登録するなら、課金が必要

・広告が大きいと感じる

・バーコード入力で読み取れない時がある

 

このアプリのデベロッパさんは、ユーザーさんの

ニーズを反映したアップデートを適宜行ってくれて

います。なので、サービスがどう進化し、より使い

安くなっていくのかも楽しみです。

ユーザーからのコメントにも、返事が必要な場合は

答えてくれていますし、アプリ内での使用方法の

説明も丁寧です。

 

monoca
monoca
開発元:Sola, K.K.
無料
posted withアプリーチ

こんな人におすすめ!

・常に探し物をしている人

・同じ物を、また買ってきてしまうことが多い人

・家族や友達と一緒に、物の管理をしたい人

・買おうと思っていた物が、何だったのか忘れがちな人

・電化製品の保証期間や、冷蔵庫の食品の賞味期限を

 忘れがちな人

・持っている物を大事に使いたい人

・趣味の物が多すぎて、管理しきれていない人

 

以上の人にお勧めです!

忘れ物や無駄な買い物を無くしたい人、生活を

きちっと整えたいレディース&ジェントルメンは

入れてみてください!

 

ではでは。

 

大人カワイイ実用アプリ5選!(①魔法の家事ノート)

こんにちわ。花月夜です。

今日は、大人カワイイデザインかつ、実用性

にも優れたアプリをご紹介します!

 

 せっかく使うならカワイイデザインがいい!

でもカワイイだけでは物足りない……という

私のように我儘なあなたに向けて書きたいと思います! 

 

魔法の家事ノートとは

アプリ「魔法の家事ノート」とは、

家事などタスク、買い物リスト作成、在庫管理、

家族との家事分担、それぞれの家事達成率が

できる優れものアプリのことです。

 

家事の予定をお知らせしたり、達成率を

カレンダーで管理したり、メモ機能もあります。

全部の機能を無料で使えるのもGood!

 

 ちなみにこのアプリは「時間が貯まる魔法の

家事ノート」を基に制作しており、著者の

三條凛花さんは「365日のとっておき家事」

という家事ブログを書いている人気ブロガーさん

でもあるので、気になる人は是非チェックを!

 

なぜ「魔法の家事ノート」がお勧めなのか?

  そもそも私がこのアプリを発見したのは、

家事を効率化できるアプリを探していた時でした。

家事カレンダーを作成する、買い物リストを作成する、

家族と家事をシェアして見える化をする、それぞれの

機能をもったアプリはあったのですが、全部が一つに

まとまっているのが、このアプリでした!

 

 他のユーザーに結果を見せ合うこともないのも

Good! 人と競争するほうが燃えるわ!という

性格ではないので、マイペースでできるこの

アプリがいいなと思いました。

 しかも、アイコンがかわいい! ゴテゴテして

いないデザインも好印象です。

 

 ホーム画面で広告が出てしまうのは、無料なので

私的には許容範囲。気になる人は気になるかも知れない

ですが……。誤って広告を押してしまうと、ネットの

ページに飛んでしまうので。

 

「魔法の家事ノート」の機能とは

 アプリの基本情報は以下になります。

 デベロッパ:POCKE, INC
【基本機能】
①家事の整理:家事の頻度と担当が一覧できる
②通知機能:家事の時間を知らせてくれる
③メモ機能:家事ごとにメモをつけ、家族と共有できる
④選択天気:地域ごとの天気を見られる
ウィジェット機能:アプリを開かずにリスト等を確認可
⑥おすすめ家事を提案

 引用元:ポッケのなかみ

https://www.pocke.co.jp/blog/app_mahouno_kajinote

 

 基になっている「魔法の家事ノート」では、家事ノートを

アナログでつけて、家事の予定を立て、その達成度を見える化

して、家事の効率化をはかるというのがコンセプトでした。

……私の理解が正しければ。ただ著者様のようにマメでない

私のような人では、結構実行するのが難しかったんですよね。

1からノートに書くだけで時間が経過してしまう……。

なので、デフォルトでこのアプリのような機能が付いていると、

一度登録しておいた家事内容を使いまわせたり、

おすすめ家事を提案してもらえて楽なんですよね。

 

気になる口コミの評価は?

 とまあ、私だけが褒めていても信頼性はあまりないので、

他の人のアプリレビューをまとめてみます。

 

【高評価レビュー】

・家事を見直すきっかけになった

・家事をするモチベーションが上がった

・家事を家族と分担するのに役立った

・家事が見える化され、効率的に家事のスケジュールが

 組めるようになった

・家事や買い物の忘れ物が減った

 

【批判レビュー】

・家事の見直し機能の改善をしてほしい

・アプリが落ちてしまう時がある

・くりこし家事に反映されないものがある

 

このアプリのデベロッパさんは、とても熱心で

すべてのレビューにコメントを返しています。

批判レビューにも真摯に対応していて、すぐに

対応しているところも、好印象です。

 

魔法の家事ノート
魔法の家事ノート
開発元:pocke, Inc
無料
posted withアプリーチ

こんな人におすすめ!

・家事の効率化を目指している人

・家事に達成感をなかなか感じられない人

・買い物や家事を忘れてしまいがちな人

・家族と家事をシェアしたい人

・アプリ内で誰かと競争したくない人

 

以上の人にお勧めです!

家事を頑張りたい、頑張ろうと思っている

レディース&ジェントルメンは入れてみてください!

 

ではでは。

 

はてなブログの見出しのデフォルトを消す方法!

こんにちわ。花月夜です。

今ご覧になっている方がはてなブロガーさんなら、

はてなブログの見出しをカスタマイズしたい!

だけど面倒だ! と思っている人は多いのでは

ないでしょうか?

 

今回は、私が見出しをカスタマイズしたときに

苦戦したときのことを書きたいと思います! 

 

見出しをカスタマイズする方法

 見出しとは、「内容が一目で分かるようにつける

標題」のことです。はてなブログではデフォルトで

太字になります。このブログでは、「見出しを

カスタマイズする方法」と書いてある文字の部分などが

該当します。

 太字は確かに目立つし、字も大見出し、中見出しに

設定すれば字も大きくできるけれど、もっとオシャレに

したいと思うのは、当然の願望! そこで私も例に

もれず、挑戦したのでした。

 

  1. はてなブログの見出しCSS」のコードを紹介する
    サイトを探す
  2. サイトから自分好みの見出しを探して、そのコードを
    コピーする
  3. 設定⇒デザイン⇒カスタマイズ(スパナのマーク)を
     クリックし、デザインCSSの欄にコピーしたコードを貼り付ける

   

 素敵な「見出し」は、こちらのサイトに一杯あります。

saruwakakun.com引用元:ワルワカ

 

ブログテーマの見出し設定を消す方法!

  

 うんうん。オシャレな見出しを選んで、デザインCSS

貼り付けてっと……思ったより簡単! とプレビューして

みたところ……なんて、見出しの前の部分に、しっかり

お花のデザインが残っておるではありませんか!

 

 ぬう。なんとかこのお花、消せぬものか……。

デフォルトでブログテーマについているから、消せないの?

 

 そこで対応策を検索して試してみました。

  1. 全角スペースが入っているのでは?
    ⇒直したけれど反映されない
  2. コードが間違っているのでは?
    ⇒あっている
  3. F12キーで要素を検証して、該当部分をコピペをして、値を0に修正する
    ⇒修正したけれど、反映されない

 

 F12の該当部分だと思っているところが間違っているのか?

答えはここにありました!

www.okuni.me引用元:オークニズム

 

こちらのブログ様の「CSSのリセット」を試したところ、

サクッとデフォルト見出し設定の青いお花が消えました☆

 

 

見出しデザインの一部が表示されない!

 しかし次なる問題が! 見出しデザインに出したい

上下の線がどちらも出ない! 花が消えて、見出し文字が

青になっただけ……。Why?

その答えは……border: none;にありました。

borderは線を引けと命令するもの。それがnoneなので、

線が引けなかったのです!

改めてデザインCSSのborder: none;を消して

プレビューしてみると、なんと! 花は消えて、

線が引かれました! 

  

結論

CSSリセットのコードを貼って、不要なコードは

消しましょう! コードの意味は、以下の記事を

参考にしてもらえると嬉しいです。

 

hanazukiyo.hatenadiary.jp 

私の場合は、気に入った見出しデザインコードを

デザインCSSに貼った後で、F12で検証したコードを

貼っていたので、反映されなかったのもあります。

順番は間違えないようにしましょう!

 

……ところで、今みている見出しには、青い花

先頭にくっ付いているけれど? と思われた方も

いるかもしれませんが、これは仕様です。

やっぱりお花が付いていたほうが可愛かったので、

付けることにしました!(なんという徒労……)

でも、勉強になったから良しとしましょう!

ではでは!

ネットに画像をアップするときに、知っておくべき5つのポイント!

こんにちわ。

 

もう私がこのブログを開設して3日目。

そろそろ、このブログをおシャンティーにする

段階に来たのではないか?

ということで、画像なんぞを貼り付けてみました。


しかし画像を貼り付けるというこの行為、

私のような超初心者アナログブロガーにとっては、

ドキドキなわけですよ。

 

 そもそもこの画像って大丈夫なのかな?とか、

知らない間に著作権法とか違反していたら怖い……

とか考えてしまうわけです。

 

 

 というわけで、ブログに掲載してもいい画像について

調べてみました!ネットリテラシーを上げるぞー!

 

  

どんな画像を使用していいの?

自分で撮影した写真

 自分の携帯やカメラで撮影した写真は、著作権が自分に

あるので使用できます。ただし他人を撮影した場合、その人の

許可を取らないで掲載すると、肖像権侵害にあたることも

あります。必ず映り込んでいる人たちから掲載許可をとりましょう。

 

 特に「有名人と写真とった! よっしゃ、これを俺の店の

HPで使おう!」と、有名人の許可なく勝手に写真を店のHPに

掲載するとパブリシティー権の侵害になるのでご注意!

 

パブリシティー権とは何か? 初めてパブリシティー権に

ついて認めたキング・クリムゾン事件の判決はこう言って

います。

 

著名人がその氏名,肖像その他の顧客吸引力のある

個人識別情報の有する経済的利益ないし価値を

排他的に支配する権利

キング・クリムゾン事件東京高裁平成10年(ネ)

第673号損害賠償等請求控訴事件判旨より)

 

簡単に言うと、「その有名人の名前とか写真は集客できる

力があるから、ビジネスするなら有名人本人の許可が

ないと(他人は)使用できないよ」ということ。

 

 一般人だろうが有名人だろうがブログに写真を

掲載するときには慎重に!ということですな。

 

 自分で描いたイラスト

自分で作成したイラストは、著作権が自分にあるので

使用できます。オリジナルキャラはもちろんOK!

ただし商標権のあるキャラクターの模写はNG!

他人の描いたイラストの無断コピペは、原則NG!

 

 でも実際に漫画の好きなキャラクターをアイコンに

している人は時々見かけますよね? 

それが許されているのは、キャラクターが認知された

方が著作権者にメリットがあるから訴えられていない

からであって、厳密には違法です。

 

 え……じゃあ、オフブラックな人が某サイトには

一杯……ゲフンゲフン。著作権侵害親告罪なので、

著作権者が訴えないと罪にはならないのです。

でも、その気になったら訴えられてしまうので、

ビビりな当サイトは絶対に手を出しませぬ。

(それ以前に絵が描けない)

 

イラストを購入して、使用する  

  それでは私のような前衛的すぎる絵しか描けない人間は

どうしたらいいのか? 1つの方法がイラストを購入

するという方法です。

 

 

coconala.com

  スキルの販売サイト「coconala」では、イラストが得意な

方にアイコン画像などを発注することができます。

 

skima.jp

同じくスキル販売サイトの「スキマ(skima)」でもイラスト

作成をお願いすることができます。こちらはアニメっぽい

絵が得意な販売者が多い印象です。

 

 coconalaでもskimaでも、購入する際に、イラストの用途を

明確に販売者に伝えましょう。販売者=著作権者にどのような

権利があり、購入者にどんな権利を譲渡してくれたのかも

確認が必要です。(イラストの使用のみOKとか)

 

イラスト販売サイトを使う

 販売されているイラストから、好きなものを購入して使用

できるというサービスです。

 

 ロイヤリティー・フリーのイラストや写真を無償提供して

くれる神サービスもあるので、低予算のこのブログは

お世話になりまくっています!

無料なのに、驚くほどクオリティの高い作品がありますよ!

 

 ただしロイヤリティー・フリーといっても著作権を放棄して

いないことが普通なので、「かわいいイラストだから自分が

描いたことにして誰かに売りとばそう」なんてことはできません。

クレジットの記載、商用利用が可能かなど、利用規約は必ず

確認をしましょう! 

 

 最後に「Stock Material」さんをご紹介。商用利用OKかつ

クレジット表示不要、登録不要のイラスト素材サイトです。

このブログでもお世話になっています。

 

stockmaterial.net

クリエイティブ・コモンズのアイコンをチェック

 クリエイティブ・コモンズってなんぞや? という人のために

クリエイティブ・コモンズJAPAN公式サイトにおける説明を

引用します。

 

クリエイティブ・コモンズは、クリエイティブ・

コモンズ・ライセンス(CCライセンス)を提供して

いる国際的非営利組織とそのプロジェクトの総称です。

CCライセンスとはインターネット時代のための新しい

著作権ルールで、作品を公開する作者が「この条件を

守れば私の作品を自由に使って構いません。」という

意思表示をするためのツールです。

CCライセンスを利用することで、作者は著作権

保持したまま作品を自由に流通させることができ、

受け手はライセンス条件の範囲内で再配布や

リミックスなどをすることができます。

 

引用元:クリエイティブ・コモンズJAPANサイト

https://creativecommons.jp/licenses/

  

 実際にCCライセンス(クリエイティブ・コモンズ

ライセンス)の条件ってどうやって確認するのかというと、

以下の4つのマークで確認します。

知っておくと利用規約を確認するよりも、便利ですよね!

 

f:id:hanazukiyo:20190826113317p:plain

引用元:クリエイティブ・コモンズJAPANサイト

    https://creativecommons.jp/licenses/

 

 ふいい。今日も頑張った! しかしびっくりするほど

増えないアクセス。

もしかして人類は死に絶えてしまったのだろうか…。 

はてなブログをカスタマイズする際に、覚えておくべきタグ5選!(見出し編)

こんにちわ。花月夜です。

ドットインストールで「はじめてのHTML」

「はじめてのCSS」を終えたので、

今日はブログをカスタマイズする際に、

覚えておくべきHTMLタグをご紹介します!

 

調子に乗ってドットインストールで

習ったことを細かく書いてしまうと

著作権違反になりそうで怖いので、

ブロガーさんに役立ちそうな内容にしてみました。

 

ブログに見出しを付けるときには、以下のように

進み、好きな見出しデザインのCSSをコピペすれば

OKです。

「管理画面」→「デザイン」

      →「カスタマイズ」

      →「デザインCSS

 

素敵なデザインが多いのですが、せっかくなら、

色や線の太さ、デザインなどを変えてみたいですよね。

そんなときに役に立つHTMLタグをご紹介します! 

 

h1~h4:見出し

 hタグは、HTMLでheadingの略で「見出し」を意味します。

はてなブログでは、以下のようになっています。

h3:大見出し
h4:中見出し
h5:小見出し
hの後の文字が小さいほど、文字が大きくなっていきます。
h1、h2も使えますが、その場合は、HTML画面で自分で設定する必要があります。

border-bottom / border-top:下線と上線

border(=境界線)の色や太さについて指定するタグです。

下線、上線以外にも、右線、左線も指定できます。

二重線にもできます。

border-bottom:下線
border-top:上線
border-bottom / border-top 一重線か二重線か 太さ 色
下線か上線かを指定したあとに、一重線か二重線か、太さ、
色を指定していきます。
一重線はsolid、二重線はdoubleと指定します。太さと色は
後述します。
応用として、右線はborder-right、左線はborder-left、
角を丸くするときにはborder-radiusと指定します。

 

color:色

 色を指定するときには、以下のように指定します。

color:色指定(カラー名かRGB値);
background-color:背景色
border-bottom-color:下線の色

カラー名とは青(blue)や黒(black)など色の名前を直接入力

する方法です。

RGB値とは、赤(red))緑(green)青(blue)の各色の光の強さを

数値化することで色を表現する方式です。

CSSでは16進法0~9の数値+A~Fのアルファベットで

記述します。16進法であることをしめすために先頭に

#をつけます。

例:#000000(黒)→赤、緑、青すべてが0

細かい色合いを指定したいときは、16進法で指定すると

いいと思います。16進法で色を指定するのは難しいので、

以下のサイトなどを参照にしてください。

www.colordic.org

px:線の太さ

 線の太さはpx(pixelの略)という単位で表します。ほかにも

HTMLやCSSではよく使われる単位で「モニターの画素

ピクセル)の長さを1とする単位」です。

その他にも以下のような、Web制作で使用される

単位があります。

px:モニターの画素の長さを1とする単位
%:表示可能な領域に対するパーセントで割合を指定
em:大文字Mの高さを1とする単位

 文字の太さに関しては、font-weightプロパティで

太字はbold、通常の太さをnormalと指定することができます。

 

margin / padding:余白

 border(境界線)の内と外の余白の大きさを指定することが

できます。borderとpaddingの違いは以下のようになります。

margin:境界線の外側の(他のボックスや親要素と境界線の間の)余白
padding:境界線の内側で(内容から境界線までの)余白

 margin-top、padding-bottomと指定することで、前後左右の

余白を指定することができます。見出しの文字を線や背景色で

囲むときに使用します。

 

「見出し」「デザイン」で検索すると、素敵なデザインの

見出しのCSSを見つけることができます。

色や線の太さ、文字を囲むデザインを、上記の知識で

好みのものにカスタマイズしてしまいましょう!

HTMLファイルをブラウザでプレビューする方法!

こんにちわ。

 今日はテキストエディタで作成したHTMLファイルを

ブラウザに表示させるまでの流れを説明します。

 

私がHTMLを勉強して始めの段階で不思議に思ったのが、

「HTMLファイルをブラウザにアップロードして……」

とか「HTMLファイルをブラウザでプレビューして……」

という言葉でした。

 

はてなブログなら、「写真をアップロードする」場合、

写真を投稿するボタンとかありますよね?

ブログの文章も「プレビュー」タグがありますよね?

 

ブラウザの場合、どこを押すの?とかなり混乱しました。

ネットで探しても、当たり前すぎて、説明が省略してある

ことが多かった……。

 

なので、ちょっと細かめに説明してみました。

同じ状態の人の助けになると嬉しい!

 

  

HTMLファイルを作成・保存

テキストエディタを起動する。

文字コード方式をUTF-8に設定する。

 Atomの場合、下の赤丸のところに表示されています。

 UTF-8になっていなければ、クリックして選択しましょう。

f:id:hanazukiyo:20190817203944p:plain

 

文字コードは、各文字に割り振られた番号。

  UTF-8は、文字コードの中でも、現在最もポピュラーなもの。

 

③ HTMLコードを書く(書き方は今回は省略)


④「(半角英数の文字列).html」と名前を付けて保存。

  index.htmlという名前を使うと、ホームページの

 トップページになります。(テキストでも多く使われる)

  

HTMLファイルをブラウザでプレビューする

①ブラウザを開く。

②保存したHTMLファイルをブラウザにドラッグ+ドロップする

③ちゃんとブラウザに表示されているかチェックする。

 

※ HTMLで作成したWebページをネットで公開するには、

  Webサーバーに、FTPソフトを使って、htmlファイルを

  アップする必要がある。

 

ATOMでは、HTMLをリアルタイムでプレビューできる

 パッケージがあります。

 → ①HTMLファイルを記述 

   ②右クリックでHTML Preview

 → 右側のウインドウにプレビューが出ます。

  

 はてなブログを使っている時点で、HTMLには

 知識のある人が多そうですが念のため。

 ではでは。

   

HTMLの学習環境を整える②(Windowsの場合)

こんにちわ。花月夜です。

今日はHTMLの学習環境を整える方法の続き

について書いていきたいと思います。
 

前回のブラウザとテキストエディタはHTMLに

必須なものですが、今日は「設定した方が便利」な

ものをご紹介します。

 

 

HTMLの学習のための推奨設定

  • プログラミング用フォントの設定
  • 拡張子が表示されるように設定

 

プログラミング用フォントの設定

プログラミング用フォントとは、プログラミングをする上で

全角・半角の区別、見間違えしやすい文字を判別しやすくした

文字のことです。(Lの小文字lのとiの大文字のIの違いとか)

ドットインストールは、Ricty Deminishedを推奨しています。

 

設定の仕方は、

①好きなフォントの配布サイトからダウンロードする

②ダウンロードしたファイルをインストールする

テキストエディタのフォントを変更する

の順で、設定します。

 

ちなみにAtomの場合は、以下の手順で設定します。

ファイル(file) 

→ 環境設定(setting) 

→ エディタ設定(editor) 

→ フォント(font family)に好きなフォントを入力

  (ex. Ricty Deminished)

 

人気のプログラミング用フォント

Ricty Deminished

特徴:①ラテン文字には Raph Levien 氏の Inconsolataを適用

   ②それ以外の文字には Circle M+ 1m を適用

    視認性の高い日本語文字 (半濁音など) が使用できる

   ③半角文字と全角文字の横幅の比が 1:2 に調整

   ④全角スペースが可視化されます。

   ⑤いくつかの全角グリフが対応する半角グリフと差別化

   ⑥en ダッシュ、em ダッシュが破断線のようになります

    (LaTeX での入力ミス防止のため)。

 

引用元:Github Inc,  プログラミング用フォントRicty Diminished

https://www.rs.tus.ac.jp/yyusa/ricty_diminished.html

 

Myrica

特徴:①ASCII文字は「Inconsolata」が適用されます。

   ②それ以外の文字には「源真ゴシック」または

    「Mgen+」が適用されます。

   ③半角文字と全角文字の横幅の比が 1:2 に

    調整されています。

   ④視認性の高い日本語文字 (半濁音など) が

    使用できます。

 

引用元:プログラミング用フォントMyrica / Estable

https://myrica.estable.jp

 

拡張子が表示されるように設定

Windows 8 / 8.1、Windows10の場合

エクスプローラーを起動

②「表示」タブをクリック

③ウインドウ上部に表示される「ファイル名拡張子」の

 横のチェックボックスに印を入れる。

 (ボックスをクリックして、☑と表示されればOK)

 

Windows 7 の場合

エクスプローラーを起動

②「ツール」タブをクリック

④「フォルダーオプション」をクリック

⑤「表示」タブをクリック

⑥「詳細設定」のリストの中から、

 「登録されている拡張子は表示しない」のチェックを

   外す(☐にしたらOK)

 

※もう1つの表示方法は、

 「スタート」 →「コントロールパネル」

        →「デスクトップのカスタマイズ」

        → ④~⑥は同じ

まとめ

HTMLの学習環境を整えるには、

①ブラウザと②テキストエディタが必須で、

可能ならプログラミング用フォントを設定し、

拡張子を表示させる設定をしておきましょう。

 

あとがき

プログラミング用フォントで人気の2つのフォントを

紹介しましたが、全角スペースがあることが□と表示されて

分かりやすいので、Ricty Deminishedの方がお勧め。

プログラミングをしていると、全角スペースの有無で

エラーになってしまうこともあるので。

 

あと拡張子は、絶対に表示させた方がいいですよ。

初心者あるあるで、拡張子を表示させなかった時に、

「これはウサギの画像だから、分かりやすいように

『usagi.png』と名前をつけよう!」

とファイル名をつけたら、

「usagi.png.png」が正式な拡張子なのに、混乱してしまった

なんてこともありますよ!(今日私がやったことです……)