2018年3月2日金曜日

とてもいいCMビデオだと思いました

なんだか、しっとりしていてシンプルな最近では珍しいCM動画だと思いました。

【Google Driveの共有機能を使って埋め込みました】


【youtubeをそのまま埋め込みました】


【上と同じですが関連動画を抑止してみました】

2018年2月26日月曜日

Cloud9のプロジェクトを削除したい

最近よくお世話になっているCloud9ですが、無料ということもあってかうっかりしていると無意味にプロジェクトが増えてしまうことがあります。
そこで、プロジェクトの削除方法について調べましたので共有したいとv思います。下の動画を御覧ください。



上の動画がユーチューブにアップした動画です。下は直接動画をアップしたものを載せます。



2017年9月22日金曜日

つぶやき

2017年9月14日木曜日

CSS学習ノート(display)

displayプロパティとは?

要素が生成するボックスの表示形式(ブロックレベル要素かインライン要素か)を指定する。

ブロックレベル要素 div,p,h1,h1,h3,h4,h5,h6,ul,ol,li,form,header,footer,sectionなど、並べると下に置かれる要素 新しい行に配置され、ブラウザサイズに応じて左右に引き伸ばされる。
インラインレベル要素 span,strong,i,aなど並べると横に並ぶ要素 中の一部として埋め込み、文章の体裁を崩さない。

このプロパティを使用すれば、spanaタグをブロック要素に変えたり、divplistタグをインライン要素に変更することが出来る。

2017年9月12日火曜日

ClasseurによるBlogger投稿の勘所

ClasseurによるBlogger投稿の勘所

Google BloggerにMarkDown記法で簡単に投稿できる方法がないだろうと悩んでいたところ、Classeur(クラッセと読むフランス語で、「バインダー」の意)を見つけ大いに喜びました。
でもすぐ課題にぶつかりました。

  1. いきなりコードを投稿するとシンタックスハイライトが無効になってしまう。
  2. かと言って、Boogerに投稿した記事をBloggerで編集してしまうと何のためにClasseurを使うのか意味を失う。

改善前はこんな感じ

シンタックスハイライトが無効になってしまうだけでなく、背景が2重になってなにかおかしい。

 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.2/responsivook.css" />
 <script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.7/dist/nehan.min.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.2/responsivook.js"></script>
 <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event){
  Responsivook.start(".nehan-vert", {
    theme:"dangumi", // ページ送りなら"book"にする
    flow:"tb-rl"
  });
});
 </script>

こんな感じに改善できました!

 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.7/css/nehan.css" />
 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.2/responsivook.css" />
 <script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.7/dist/nehan.min.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.2/responsivook.js"></script>
 <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event){
  Responsivook.start(".nehan-vert", {
    theme:"dangumi", // ページ送りなら"book"にする
    flow:"tb-rl"
  });
});
 </script>

【改善方法】

1.シンタックスハイライトを有効にする

上記のようなシンタックスハイライトをBloggerで実現するには、BloggerのテーマHTMLファイルをに次のコードを追記する必要がある。挿入場所は</head>行のすぐ上の行とする。

  <link rel="stylesheet" href="https://app.classeur.io/base-min.css" />
  <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

2.マージンやパディング、背景色をカスタマイズする

enter image description here

 pre{
	 padding:0;
	 }
 code.prism{
	 background-color:#f5f5f5;
	 }

※上の図ではhtml言語だけに対応するコードが書かれています。実際はどんな言語でも適用するように上のコードにするのが良がっぺ。

【残された課題】

残念だげんじょも(けれども)、今回のトライヤルでは行番号の表示はできなかった。もし、良い方法があったら是非教えてくんつぇ(下さい)。

Classeurで文字色を指定する方法

Classeurで文字色を指定する方法

結論


書き方

 <font color="pink">ピンクの文字列</font>

結果
ピンクの文字列


もっと深く理解するために

文字色指定は引用の中に混在できるか、実験してみました。

書き方

> 引用のディフォルト  は<br>こんな具合です。pタグとbrタグおよび
> <font color="orange">fontタグ</font>は引用のなかでも解釈され
> 有効みたいですね。

結果

引用のディフォルト は

こんな具合です。pタグとbrタグおよび
fontタグは引用のなかでも解釈され
有効みたいですね。

ClasseurでSyntaxHilightを使う

シンタックスハイライトを使いたい

var my = "こんにちは";
console.log(my);

上のように書くには

```javascript
var my = “こんにちは”;
console.log(my);
```

のように書きます。