雑記Links&Contactサイトマップ過去よりも未来よりも「現在」を幸せに生きるために。今ここにある日常を輝かせるための“魔法”をお届け。5分45秒どうも、ブログカスタマイズを繰り返すうちに真面目にHTMLとCSSの勉強してみようかなと思い始めた怜香@Ray_mnzkです。今までブログカスタマイズはひたすらネット上でシェアされているコードをお借りして少し弄るだけ、という形でやってきていました。言って何もわからずにやっているも同然。それでも色々と調べながらああだこうだと弄っていると、素人なりにも少しずつは理解ができてくるものです。「ここはこういうことだったのか!」とわかるとちょっと嬉しい。そこから「ちゃんと勉強しようかな」と思えてくるのです。Sandbox」というWebツールをご紹介します。ブラウザ上で手軽にCSSを試せる!まずは画面をご紹介。今日のあとがきブラウザ上で手軽にCSSを試せる!まずは画面をご紹介。Sandbox」ですが、よくあるWebツールのような登録やログインの類は一切必要ありません。アクセスしたらすぐに使うことができます。アクセス直後のデフォルトの画面はこんな感じ。これでは見づらいので拡大してみますね。左側:HTML・CSS入力欄まずは左側。上がHTML入力欄、下がCSS入力欄となっています。どちらもデフォルトで入力見本が表示されています。ここにそれぞれHTML・CSSを入力していきます。ここは左側で入力したHTMLとCSSが反映されるプレビュー画面です。デフォルトでは見本として入力されているHTMLとCSSを反映した結果が表示されています。左側で入力したものが実際どう見えるのかを確認できるというわけです。右上:メニューさて、先程の右側画面、上のほうに何やら文字がありますね。それぞれ、HTMLとCSSをデフォルトの状態に戻す。他のブラウザでも今編集しているHTML・CSSを扱えるように、固有のURLを発行。入力したHTML・CSSで出来上がった(右側に表示されている)ものをひとつのWebページとして保存となっています。このうち、(2)の背景色変更ですが、以下のようにいくつか種類があります。淡い色を使っているなら青や黒、濃い色を使っているなら白やベージュなど、見やすくなるような色を選択できますね。(3)に関しては、これで発行したURLにアクセスすると、すぐに作業の続きが可能になる、という感じです。(4)については、ダウンロードしたファイルを開くと、編集時に右側に表示されていたものがそのまま画面全体に表示される形になります。入力したHTMLやCSSが保存されるわけではない(と思われる)のでご注意下さい。desk、何が便利なのかというと、左側で編集した内容がリアルタイムで右側に反映されることです。ボタンをクリックしたり、再読み込みしたりする必要はありません。1行記述することに右側に反映されていきす。CSSのほうは、きちんと閉じタグまで入力していなくても、その時点までで入力されている内容を反映してくれます。入力するごとに内容に応じて随時右側の表示が変わっていくので、「今自分が入力した記述はどの部分に反映されるのか」といったことが一目瞭然です。これ、何気にとても便利なんですよ。CSSのお試しに!細かいカスタマイズもお手の物!例えば、ネット上で共有されていたコードを借りるとします。Deskの該当欄に貼り付けると、そのコードによって出来上がるものが右側に表示されます。このようにコードを借りてきた場合、実際に使う際はそっくりそのまま使うのではなく、色などをカスタマイズして使うことが多いかと思います。Desk上で色などのカスタマイズを済ませてしまいます。その場で色味などを確認し納得いく形に仕上げておくことができるので、「本番として採用してみたらデザインが合わなかった」という事態に陥りにくくなるはずです。CSSの勉強に!CSSの解説書では、説明しているコードの具体例として、実際にHTMLとCSSのコードが記載されていることが多いです。「実際にどのように見えるか」の例示も。Deskに入力してみましょう。入力できていれば、解説に例示されているのと同じものが出来上がるはずです。これ、やっていることは単純極まりないのですが......ただ解説を読みコードを眺めるだけではなく、実際に手を動かしてみることで、より理解しやすく、頭に入りやすくなります。Deskは、今学んでいることをその場で実践できる「CSSの学びの場」ともなり得るのです。Desk、Wordpressテーマのテンプレートファイルを丸々作ってみるといったような大規模な作業には向きませんが、一部分のカスタマイズなど、ちょっとしたCSS編集には非常に向いているといえるでしょう。私はブログカスタマイズをしていく中で、「本番用のファイルを書き換える前に、どんな仕上がりになるか確認したいなぁ」と思うことがよくありました。本番用のファイルにコピペして書き換えという手順を踏めるようになり、「いざカスタマイズ確定させてみたらデザインが思っていたのと違った!」といった失敗がかなり減りました。CSSをよく使う人は是非活用してみて下さい!登録不要なので必要な時にすぐ使うことができますよ。Deskのお話でした。ある程度カスタマイズが仕上がってきた感があるので、そろそろ「具体的にどこをどうカスタマイズしたか」なんて記事も書けたらなぁ......と思っていまして。いった記事を書く気でいるなら、このツールは是非先に紹介しておきたいなと思ったのです。私自身まだまだCSSとかは知らないことばかりなので、説明が不適切な部分があるかもしれません。その時はこっそり指摘していただけますと幸いです。肝心のカスタマイズにまつわる記事はいったいいつ書けるのか。自分でもわかりません。そのうち......書けたらいいな!(笑)それでは、今回はこのあたりで。Linkお読みくださり有難うございます。記事がお気に召しましたらシェアして頂けますと幸いです。1RSSfeedly無料メルマガ配信しております。-思考のカケラ-」の配信を始めました。このメルマガでは、ブログではお話しすることのない近況報告や日常の気づき、ふと浮かんだ言葉や思考の断片、ちょっとした物語の断章、そしてブログを中心とした各種執筆の進捗ログを気ままに綴っていきます。読んでくださる皆様の心に、少しでも何かを残せるような言葉を紡いでいきたい所存です。ご登録は以下のボタンから。フォームにお名前とメールアドレスを入力して「登録」ボタンを押すと仮登録メールが届きますので、お手数ですがそちらに記載されているURLより本登録をお願いいたします。メルマガ登録フォーム関連記事Scrapboxで我流バレットジャーナル・カスタマイズ編。12分59秒Scrapboxで我流バレットジャーナル連載、第2弾。今回はScrapboxでバレットジャーナルを行っていくにあたり、どのようなカスタマイズを施していったのかを紹介する。11分36秒PCでもスマホでも使えるクラウドアウトライナーといえばWorkflowyが有名だが、今はもうひとつ、Dynalistというものも存在している。見た目はWorkflowyによく似ているが高機能が謳われているDynalistを筆者が使い始めた経緯を、Dynalistの簡単な紹介を添えつつ語ってみる。18分16秒Workflowyで記事の構成を決めて、するぷろXで書く。モブログのひとつの形であるが、ふたつのアプリ間を行き来することなく、スムーズに連携することができれば、もっとモブログは捗るのではないだろうか?そんな思いを叶えるブックマークレットに出会うことができたので、ご紹介しつつ語ってみる。15分42秒クラウドアウトライナー「Workflowy」は、使い始めのままの状態でもかなり便利に使えるアウトライナーである。使い込めば使い込むほど、そのままでは痒いところに手が届かない状態に陥ってしまうことが多い。それを回避し、さらに自分に合った使いやすいWorkflowyにカスタマイズする手段として、「Workflowy専用ブラウザを作る」方法があるのでご紹介する。9分19秒クラウドアウトライナー「Workflowy」は、PCでは非常に使いやすいツールである。スマホでの使用となると、途端に極めて操作性が悪くなる。中でも、複数トピックまとめての階層化や移動、コピーが行えないのはかなり厳しい点だ。今回は、そんなスマホ版Workflowyの難点を少しでも改善させるような方法をご紹介する。Proには、通常の共有機能のほかに、特定の相手を指定してトピックを共有する機能が備わっている。この機能を使って自分のサブアカウントにトピックを共有することで、スマホからもWorkflowyを快適に使うことができるようになる。今回はその方法について解説する。現在、私はタスク管理に3つのツールを併用している。それらを用いてどうタスク管理を行っているかを、これから全3回にわたって解説していくことにする。今回はその第1回、クラウドアウトライナーを活用したタスク管理についてお話しする。14分29秒Workflowyと似た見た目と機能性を持ちながら、初めから数々の便利機能が備わっているクラウドアウトライナー「Dynalist」。今回はこのDynalistがもつ様々な特徴や機能について、Workflowyとの比較も交えつつ解説していく。8分18秒クラウドアウトライナーであるWorkflowyは、APIが公開されていないために、他のアプリなどから直接書き込みを行うといったことは出来ないという制約がある。そんな制約を打ち破るChromeアドオンが存在していた。Clipper」というアドオンをご紹介する。iOS9にしたiPadではブラウザ版Workflowyが使いにくい。先日、iPhone6sの発売に先駆け、iOS9がインストールできるようになった。このiOS9では、ブラウザからWorkflowyにアクセスした際に少々問題ある挙動をしてしまうようになっている。View」機能を使ったWorkflowy活用法も提案することにする。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。宝塚歌劇と天然石が大好き。観劇とスポーツ観戦が趣味。考察・思索など思い浮かぶままに。