タグ別アーカイブ: HTML

速習テンプレートSlim(HTML作成編)

テンプレートエンジンSlimを使ってスマートにHTMLを作成する

昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。

このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。

Slim とは?

  • 拡張子は .slim
  • view の構文を本質的な部品まで減らすことを目指したテンプレート言語
  • Ruby製のテンプレートエンジン
  • 高速, 軽量
  • インデント重要

用途

  • Railsプロジェクトのテンプレート
  • Sinatra(Padorino)のテンプレート
  • HTMLの代替(個人的には)

SlimでHTMLを作成するメリット

  • タイプ数が減る
  • HTML に比べ見通しが良い
  • 実はそんなに難しくない

続きを読む

テキストエディタを選ぶ

プログラミングはもちろんのこと、簡単なPC作業の中でもテキスト・エディタは使い易いものを用意しておく必要があると思います。

Win環境だとメモ帳が挙げられますが、機能が限定的で使い辛いです。
そこで、テキスト・エディタをインストールして使う必要が出てきます。

最も一般的なテキスト・エディターは秀丸エディタのようです。同僚がこぞってこのエディタを使用していました。

一方、私はTeraPadを愛用していました。
当時、テキスト・エディタに求めた機能にシンタックス・ハイライトが挙げられます。HTMLを色分け無しにタグ打ちするのは非常に大変だったので使い始めたんだと思います。今でも時々使います。

他には、NoEditorを使用する場合もありました。TeraPadではPHPの色分けができなかったので、一時期使用していました。
続きを読む

CSSのidとclassの違い

HTMLは何の気なしに書けるんだけれど、未だにCSSだと調べないと分からない(汗)

ちょうど昨日、このblogのCSSをプリント・アウトして読んでいたら、大きく3つの書き方があることに今更気づきました。

  1. HTML(XHTML)の標準のタグに対して直接設定する場合。

    例えば、この部分は<blockquote>に対して、背景色やボックスについて指定している。

  2. <div id=★>の場合→CSSでは:#hogehoge
  3. <div class=★>の場合→CSSでは:.hogehoge

で、2と3で何が違うんだろう?と思っていたら、読ませていただいているblogで紹介されていた。ラッキー!!

ギークにあこがれて:


CSS再入門
続きを読む

プログラムに目覚めたきっかけ

最初に手にしたのは、Excel VBA。いわゆるマクロです。

なぜ、VBAに手を出したのか???
失礼な答えかもしれないけど、

暇だった@就職活動の真っただ中
(就職先きまってないのにw)

やる気も起きないけど、何もやらないのもちょと…汗
な気分で手近にあるExcelに手を出しました。

学習時間は1ヵ月程度だったと思います。分厚い基本書を一冊読んで、プログラムで遊んでいました。
続きを読む