私はこれまでこのサイトのWordPressのテーマを作るときや、他のサイトをつくったりするときには基本イチからまっさらな状態から作っていました。
しかし、それでは効率も悪いですし、私は本を見ながらじゃないと作れないので時間もかかります。
そんなときに便利なのがBootstrapやFoundationといったCSSフレームワーク。
あらかじめ各パーツやレイアウトなど設定してくれているので、クラス名を書くだけで簡単に形ができあがる便利なものとなっています。
ですが、すでに装飾されているので、自分で新たにデザインするときに上書きしたりしないといけないのが面倒です。
それに使わない機能もセットしてくれているので、ボリューミーになっています。
それなら軽量のフレームワークを使えば良いじゃんという話になるのですが、それはそれでまた新たに記述の仕方を覚えるのが大変…
やっぱり自分で書いたコードが一番自分が分かりやすい。
ということで、最初は面倒で時間もかかるかもしれないですが、自分で各パーツを作っておいて、サイトを作ろうとなったときにそのパーツを組み合わせてサイトを作ってみようと考えました。
作ろうと思ったきっかけになったのは、「これからの「標準」を身につける HTML+CSSデザインレシピ」という本からですね。
これからの「標準」を身につける HTML+CSSデザインレシピ
この本には各パーツをコンポーネント化しているのを掲載しているのですが、サイトを作るときに毎回この本を読むのもアレだし、より自分好みのものにしたいと思ったので、自分オリジナルのモノを作ってみようかなとなりました。
途中で面倒くさくなってあきらめちゃうかもしれませんが、とりあえず作っていったものをこのサイトに書いていこうと思います。
自分で見返すときにも便利でしょうしね。
これはあくまで自分用なので、記述の仕方など適当なところもあるかと思いますが、もし使いたいと思った方がいたらコピペして使ってみてください。
まずはじめに、今回はベースとなるhtmlの部分から作ってみることにします。
ベースとなるHTMLの設定
6ステップでマスターする 「最新標準」HTML+CSSデザインに書いてある基本となる記述と全く一緒なのですが、ここはこれでいいでしょう。
これで新たに作るときもコピペするだけで簡単に作れますね。
こんな感じで貼っていくのが主になっていくので、コードの説明などはあまりしないかもしれませんがご了承ください。
次はベースとなるCSSの設定をします。
ベースとなるCSSの設定
CSSについては、完全に自分オリジナルの設定になってますね。
私はフォントサイズはrem
での指定が好きなので、このように書いています。
font-familyは人それぞれ好みがあるかと思いますが、私が使っているWindows7のパソコンに最近、游ゴシックのフォントをダウンロードして使ってみたのですが、ちまたでの評判よりも意外と良いじゃんと思ったので、最近は積極的に使っています。
box-sizingは、これを事前に設定しておくことで、おかしくなったときのイライラ防止目的ですね(笑)
これから時間が空いたときに、徐々に作っていこうと思います。
自分だけのマイCSSフレームワークをつくる(ヘッダー編)
自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ヘッダーのパーツをつくろうと思います。
オリジナルのフレームワークというよりは、各パーツをそれぞれリストアップしていって、サイトを作るときにそこから拾い上げるといった感じになるかも?と思っています。
最初からそれぞれ用意しておくのは、クラス名の指定などいろいろ考えておかないといけないのが面倒ですし、無駄にもつながりそうですから。
表示のデモを一緒に載せておくと分かりやすいと思うのですが、デモ用のページとかつくってないので載せられないんですよね…
やっぱりこれもつくったほうがいいかな?
サイト名とナビゲーションを横並びにしたヘッダー
フォントサイズやカラーなどの装飾はどうしようか迷ったのですが、サイトをつくる際に設定すると思うので、ここではあえて指定しませんでした。
新たにクラスをつくり、指定して上書きするのは無駄なような気がしますからね。
サイト名とナビゲーションを横並びにせず、縦に並べたヘッダー
こちらはメディアクエリの中のサイト名とナビゲーションを横並びにするという設定を外すだけでOKですね。
スマホのときナビゲーションを横スクロールさせる
overflow-x: auto;
を設定することで横スクロールできるようにしています。
ハンバーガーメニューのボタン
あとはjQueryを使って、ナビゲーションを開閉させる設定を追加すればOKかな。
自分だけのマイCSSフレームワークをつくる(テキスト編)
自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、テキスト部分のパーツをつくろうと思います。
未だにテキスト部分のマージンやline-heightの自分なりの良い設定方法を見つけられていないです…
適度に余白があったほうが読みやすいような気がするので、結構空けているのですがこういう感じで問題ないんでしょうかね?
あくまで目安として設定しているので、サイトをつくるたびにそこはいじるかもしれません。
テキスト部分のHTML
テキスト部分のCSSの設定
自分だけのマイCSSフレームワークをつくる(テーブル編)
自分だけのマイCSSフレームワーク(フレームワークというより、Webサイトをつくる際のベースとなる部品のようなもの)をつくることを目指してやっていきます。
今日は、テーブル部分のパーツをつくります。
テーブル部分のHTML
テーブル部分のCSSの設定
2種類のテーブルのスタイルを用意しました。
枠線で囲んだテーブルのスタイル
横線のみのシンプルなテーブルのスタイル
white-space: nowrap;
で文字を折り返さないようにさせ、overflow-x: auto;
で画面の幅より大きくなったときに横スクロールするようにしています。
スマホでサイトを見るときでも、テーブルのレイアウトを崩さずに表示することができます。
ですが、スクロールバーが見えていないと、横スクロールできることに気づかない恐れもありますね…
自分だけのマイCSSフレームワークをつくる(ボタン編)
自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、ボタンのパーツをつくります。
最近のサイトはボタンのデザインや動作に凝っていて、つい押してしまいたくなるものが多いですよね。
今回は、シンプルなボタンを4種類用意してみました。
基本となるボタンパーツのHTML
ボタンパーツのCSSの設定
4種類のボタンのスタイルを用意しました。
シンプルなフラットのボタン
背景にグラデーションをかけたボタン
立体的にみえるボタン
横長の丸みを帯びたボタン
もっとホバーしたときなどにアニメーションなど効果を追加して、ボタンを押すのが楽しくなるようにデザインするのも良さそうですね。
自分だけのマイCSSフレームワークをつくる(ラベル編)
自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ラベルとバッジのパーツをつくります。
まずはラベルをつくります。
ラベルパーツの作成
ラベルパーツは、記事のタグの装飾に使うときなどに用いる予定です。
ラベルパーツのHTMLの設定
ラベルパーツのCSSの設定の設定
次にバッジの部分を作成します。
バッジパーツの作成
バッジは、コメントやお知らせの件数などを表示するときに使えそうです。
バッジパーツのHTMLの設定
バッジパーツのCSSの設定
ラベルとバッジを組み合わせることもできます。
ラベルとバッジを組み合わせたパーツ
ラベルとバッジを組み合わせたパーツのHTMLの設定
ラベルとバッジを組み合わせたパーツのCSSの設定
私の場合、あまり使うことはないかもしれませんが、何かあったときにパッと確認するときのために載せておきます。
自分だけのマイCSSフレームワークをつくる(フォーム編)
自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、フォーム部分をつくりたいと思います。
あまりフォーム部分を作成する機会が少ないので、未だにフォームのHTMLやCSSの記述に関しては疎いんですよね…
ですので、最初からこのように設定しておくと、作る際にコピペするだけでOKになるので、今後は楽になるかも?
基本となるフォームのHTML
基本となるフォームのCSS
シンプルでベーシックなスタイルになっているので、さらに装飾を加えていくときの土台用としても活用できるかもしれません。
もっとおしゃれにもしたいんですけど、まだまだフォーム部分のCSSの設定は慣れていないもので…
自分だけのマイCSSフレームワークをつくる(パンくずリスト・ページネーション編)
自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、パンくずリストとページネーション部分のパーツをつくりたいと思います。
どちらも私の中で、いざやろうとすると面倒くさいベスト3に入るモノですが、ここであらかじめつくっておくことでこれからは開放されて楽チンですね。
まずはパンくずリストから作成します。
パンくずリストの作成
パンくずリストのHTML
パンくずリストのCSS
a[href]だとかは、あまり使う機会がないのでどう書くんだったか?とか忘れちゃうんですよねぇ。
次はページネーションを作成します。
ページネーションの作成
ページネーションのHTML
ページネーションのCSS
flexboxを使えば、簡単に横並びして中央寄せできるぜ!チクショーッ!!
今回は、ボーダーを下部にのみ装飾していますが、好みに合わせてアレンジするのもいいですね。