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