fieldsetとlegendでややこしいフォームをサクッとまとめた話

はじめに

見積もりフォームが古くなってきたので新しく作り変えています。細かい仕様を入力してもらうのため、ちょっとややこしい感じになっているのですが、その際にfieldsetタグって便利だな〜と思った話です。

fieldsetタグとlegendタグ

<fieldset>
    <legend>好きな野菜</legend>

    <input type="radio" id="tomato" name="yasai">
    <label for="tomato">トマト</label><br/>

    <input type="radio" id="spinach" name="yasai">
    <label for="spinach">ほうれん草</label><br/>

    <input type="radio" id="potato" name="yasai">
    <label for="potato">Mothman</label>
</fieldset>

表示例はこちら f:id:arugatter:20180810224316p:plain

こんな感じで、フォームを項目ごとにまとめられる感じです。

developer.mozilla.org

便利!

こういう本買って、もっかい勉強しなおうそうかな😨

【グルテンフリー】サイゼリヤでいつも食べる小麦抜きメニュー

はじめに

私は、妊娠してからずっと体調が悪く、病院にも行ったりしましたが原因が分からず困っていました(だいたい育児疲れとか言われたりして…)
体調不良に悩まされてから2年半ほど、あるキッカケで食事から小麦を抜いたら劇的に良くなったので、それからはグルテンフリーの食事にしています。

とはいえ、子供もいるのでたまに外食もします。今回は、サイゼリヤで私が食べているメニューを紹介します。(写真ありません😨)

www.saizeriya.co.jp

グルテンフリーサイゼリヤはこれ!

私がいつも頼むのは、この3つです。

  • 地中海風ピラフ

  • ターメリックライス(サイズ:小)

  • ペコリーノチーズ

地中海風ピラフ、ちょっとオリーブオイルが多いのか?ビショビショしているのでターメリックライスを足して混ぜています。人の目は気にしません!
そして、ペコリーノチーズをかけて混ぜて、ハイ出来上がり!

チーズは好き嫌いが分かれるかもしれません。

グルテンフリーで外食だと寿司が多くなると思います。(もちろん、小麦抜き醤油持参で) たまにはサイゼリアも良いですよ〜。(地中海ピラフぐらいしか食べるものありませんが笑)

これ、自宅にストックしてあります

持ち運びに便利なので、外食行くときはいつも持っていきます。念の為、保冷剤と一緒にジップロックに入れて持ち歩いてます。

【Dreamweaver】テンプレート?dwtファイル?ページが編集できなくて焦った話

はじめに

既存サイトを修正していて、編集できないページが有ったので???となりました。どうやらDreamweaverのテンプレートを使ったページだったようです。 

  

何があったのか 

ある既存サイトの中にキャンペーンページのような独立したページが有り、そのページ内にある一部分を修正したかったのですが、コードをDreamweaverで確認するとコメントアウトのようにされており編集ができませんでした。

  

テンプレート機能とは

Dreamweaverに慣れていないので知らなかったのですが、Dreamweaverにはテンプレート機能があるようでヘッダーやフッターといった共通部分を1つのファイルで管理できる機能があるようです。   

dwtファイルとは

その共通部分を管理するのがdwtファイルで、編集可能領域を設置してサイトの雛形(テンプレート)を作成します。dwtファイルを編集してみると、関連したすべてのページが更新されて修正できました。

  

テンプレート機能、なかなか便利そう

SSIやPHPWordPressなどでも同じことはできますが、簡単に共通部分をまとめられるので便利だなと思いました。修正作業でサクッと触っただけなので、時間有るときにちょっと試してみようかな〜

Dreamweaverレッスンブック CC2017対応

Dreamweaverレッスンブック CC2017対応

【Inkdrop】新しいノートアプリを使い始めた話

はじめに

少し前に、久しぶりにEvernoteに課金しようかなと思っているとブログに書きましたが、それからいろいろと調べてInkdropを試用しています。結論から言うと、Evernoteに課金するのはやめて、Inkdropを使おうかと思っています。

aruga.hatenablog.jp

求めている機能は?

主に仕事関係の技術メモやプロジェクト管理的なことで使用することを想定しています。

このあたりは重要でした。 また、もともとEvernoteのプレミアムにしようかと考えていたので、有料でも無料でもOKです。

個人的にはEvernoteも好きなアプリで、ずっと使っていますが、ちょっと心機一転したい気も有り。さらに課金予定なので、せっかくなら他の選択肢も検討したいなと思い、いろいろと調べた結果、Inkdropがマッチしました。

そもそもInkdropとは?

f:id:arugatter:20180720191654p:plain

Markdown Lovers向けのノートアプリです。 私自身ははそれほどMarkdown Loverではありませんが笑 Markdown Loversって素敵な表現ですよね。一般的なフレーズなのでしょうか?

www.inkdrop.info

最初は海外のアプリなのかと思っていましたが、どうやら日本人の方が1人で制作しているようです。

blog.craftz.dog

ちなみに、$49.9/年です。 f:id:arugatter:20180720205754p:plain

私は残り21日、8月半ばまで試用できるようです。 f:id:arugatter:20180720190349p:plain

Inkdropは60日間試用出来るのですが、それがとても良いです。 2週間や30日間という試用期間はよくありますが、もし試用期間が30日間だったら私はInkdropを課金してまで使おうとは思えなかったかもしれません。

あ、こうやって使うと良いじゃん!という感覚になったのが今週初めあたりです。それは試用を始めてから30日を経過したあとでした。そして、週末の今日にはブログを書こうという程にもなるのです笑

今後はプライベート関係はEvernoteに、仕事関係はInkdropにしていこうかなと考えています。 Evernoteも良いアプリですよね。

【RTM】ひさしぶりにRemember The Milkを使おうかと思っている話

はじめに

会社のプロジェクト管理的なことにBacklogのフリープランを使っていたのですが、他のメンバーには馴染まず活用できませんでした。とはいえ、なにか使えないかと調べていたら、Remember The Milkを使っている人が結構いるなと気が付きました。これを使えないかと思った話です。

そもそも必要なのか?

新しく入った会社(非IT企業)では、主にwebサイト制作・管理(だいたい自社分)をしています。少人数の会社で、細かいことも社長が統括しているので、とくに社長には進捗状況を確認してもらいたいと思っています。

出産前(4年ほど前)にも製造卸の企業でwebサイト制作やDTP業務をしていたのですが、終わりがけに社長にひっくり返されるということも多々有り。もっと細かく進捗報告すれば良かったのですが、社長は普段営業などで出社も少なく、比較的アナログな会社だったので(私が入社するまでHPもなく電話・FAX・紙台帳で仕事してた。もちろん給料は茶封筒に現金支給。逆にすごい。)、タスク管理的なwebサービスなどを提案することもできず。*1

と、こういう背景からも、メンバーはともかく社長はひっくり返す権限をもっているので、細かく進捗状況を確認してもらいたいのです。

Remember The Milkはタスクを依頼したりリストを共有できる

とりあえず、Remember The Milkを使ってみようと久しぶりにログイン。奇跡的に残っていたタスクが10年前でした…。おそらく登録したときのやつ。

f:id:arugatter:20180707121308p:plain

調べてみると、どうやらコンタクトからタスクを依頼する人を指名できたり、タスクリストの共有もできるらしい。 まだ、調べただけなのでなんとも言えないけれど、とにかく社長はRTMに課金して使ってるくらい愛用しているので、他のサービスを使うよりもRTMを使ってみようかなと思います。

熱く語っている人も!

liginc.co.jp

*1:但し、社長以外は意外と柔軟で、チャットワークやGoogleAppsを紹介したらすぐ導入してくれました。GoogleAppsは当時無料だったので本当に今思うと良かったなと思います。

【Mac】MacBook Pro 2017 13inch Touch Bar有りを買いました

はじめに

先月、ひさしぶりにノートパソコンを買いました。(ノートパソコンって死語じゃないよね…)

以前買ったのはMacBook Air 11inch、たしか2011年とかそれくらいだったと思います。普段はMac miniにやっすいモニターつなげて使っていたのですが、やっぱりノートPCが欲しいなということでMacBook Pro 2017 13inchを買いました!

スペックはこんな感じです

f:id:arugatter:20180706151915p:plain

 

なぜMacBook Pro 2017 13inch Touch Bar有りにしたか

15inchじゃなくても良いのか?

まず、15inchにしなかった理由は、小さい方くて軽い方が好きだからです。

もちろん性能は15inchのほうが良いしクアッドコアだしギリギリまで迷ったのですが、やっぱりちょっと大きく感じてしまう。そして気持ち重たい。

仕事では写真や動画を扱うこともありますが、自宅ではほとんどありません。(プライベート写真をガツガツ修正したりとかそんなこともしないので…)なので、今回は大丈夫だろうと信じて13inchを購入しました。

 

Touch Barってどうなの?

Touch Barなしでよかったんですが、スペックの問題からTouch Bar有りの選択になりました。

Touch Barってどうなのかということですが、まず、悪いところは、Mission Controlボタンが右側にあること。私は結構Mission Controlボタンが好きで頻繁に使っていたのだけど、会社のiMacだとF3ボタンなのです。なので、主に左手で押します。しかし、Touch Barでは右側にあります。展開すれば左側に寄りますし、設定すれば左側に置けるのかもしれませんが、わざわざ展開したり設定し直すのが面倒…。

f:id:arugatter:20180706154216j:plain

 

しかし、このMission Controlボタンに関してはトラックパッドを3本指か4本指で上にスワイプすればよいだけなので、そんなに問題ではありません。

 

次に、良かった点ですが、Touch IDは便利です。

しかし他の良いところは、実はあんまり見つけられていません。写真appで写真がズラッと並んだときにスゲーってなったことくらいかな。

f:id:arugatter:20180706155706j:plain

 

USB-Cってどうなの?

今回購入したMacBook ProにはUSB-Cしかありません。USB-CというかThunderbolt3ですね。

f:id:arugatter:20180706160536p:plain

裏表がないのは便利です。MagSafeは磁石でカチッとくっついていたので、ちょっと押さないといけないのが気になりますが、まあ、これは慣れのようなものですね。

拡張性が無いのは仕方がないのでハブを買いました。

 

おわりに

とりあえず、写真データの管理とかはMac miniにまかせて、このMBPはweb制作とかプログラミング的なことに使おうと思ってます。

開発環境とかはゼロから構築していったのですが、3月に会社のiMacでやったばかりなので、案外スムースにできました。

 

 

【Dreamweaver】デバイスでプレビューではレスポンシブなのに、実際にアップロードするとレスポンシブにならないとき

はじめに

入社して2ヶ月ほどたちました。別の方が5年ほど前に作った自社サイトをスマホでも見やすくしてほしいということで、デザインはそのままに簡単にレスポンシブ化してみました。

Dreamweaverで編集してQRコードを読み取りデバイスでプレビューを使って検証していました。よし、OKということでプッシュしたのですが、実際にスマホでアクセスしてみてもPCビューのまま・・・。

どのように対応したのか?

簡単なことだったのですが、viewportの設定を確認してみました。そしたら、案の定そもそも記述がない…!

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

で、これを追記したらちゃんとスマホでもちゃんとレスポンシブになりました。

なんで気が付かなかったのか?

会社ではDreamweaverを使って作られたサイトが多いので、既存サイトはなんとなくDreamweaverで編集していました。デバイスプレビュー機能は結構便利だなと思って使っていたのですが、viewportを設定していなくてもメディアクエリがちゃんと効いてしまうようで、それで気がつくのが実際にアップロードしたあとになってしまいました。

おわりに

今回学んだことは、2つ。

1つ目は、PCではちゃんとメディアクエリ効いて画面幅が狭くなってもレスポンシブ表示されるのに、スマホではうまく表示されないときには、veiwportを確認すると良い。

そしてもう一つは、Dreamweaverのデバイスでプレビューは便利だけどveiwportに注意!