web100プロジェクトNo.4

web100プロジェクトNo.4web100プロジェクト4つめはちょっとだけCSSをいじって簡単な1ページのサイトを作ってみました。

3

今回やったこと

レイアウトとコンテンツを分離しようと思い、今回はサイト構築補助ツールのJekyllを利用しました。とりあえず、簡単なサイト構築をするのには便利かな。コンテンツはMarkdownで記述できるし、LiquidというERBみたいなやつで、if文などの簡単なプログラムも書けます(まだちゃんと調べてないですが)。サーバの環境構築もせず、ちょっとした構造のサイトがサクッと作れてしまうので良いのではないかな。

Bootstrapはまだまだ使いこなしていないですが、どんどん簡単なサイトを作りながら使いこなせるようになっていきたいです。

あと、今回は書き方にもこだわってみました。

Write

これからどんどん変わっていくとは思いますが、ポイントとしてはSublimeTextを上下に分けて、上はCompassやmdなどのCSSなどを生成するファイル、下は生成されたリアルタイムで書き出されたファイルが表示されます。

真ん中はiTermです。とりあえずリアルタイムで生成出来る状態にするために3つのコマンドが動いています。ただ、実際作業しているときはこのビューは見ずに、別のタブでファイル作成などの作業をします。

一番右にChromeでプレビューしています。幅の変更などもこれでやります。

課題

プロジェクトごとにGithubにリポジトリを作っているけど、これ、Githubがちょっと汚く見えるのかも。ただまぁGithubはファイル置き場と思い切ってしまえば問題ないかな。

Heading要素を画面の横幅に応じてサイズ変更したいけど出来なかった。

画像に関しても扱ってみよう。JavaScriptやjQueryはもうちょっと後かな。あと、ホントはRailsなどもやってみたいのですが、ある程度静的なサイトがサクサク作れるようになってからかな。

GithubのREADMEとブログの記事がかぶるので無駄を感じる。どうしよう。

web100プロジェクト

簡単なwebサイトを100個作ることで、少しでもweb側の知識を身につけようという個人的なプロジェクトです。数をこなすことのみを目的としています。

リンク

Pocket
LINEで送る

You may also like...