[Web]Sass（Scss）+ Compassのテンプレートファイルを作成したので晒してみる
CSSを記述するために開発されたメタ言語、Sass（Scss）+ Compassを覚えてからかなりコーディングが楽になってきた今日この頃。 「Sublime Text」にCompassとSassを導入して以来それはそれはその恩恵をありがたく享受しているわけなんですが、ここいらでそろそろ新しいサイト作成用のテンプレートを作っておこう！と思い立ち、Sass + Compass（とそれに付属するファイル）のテンプレファイルを作成いたしました。 テンプレートファイルの構成 テンプレートファイルは↑こんな感じです。（以下「Sass（Scss）」と毎回書くのも面倒なのでScssで統一します。） ファイルは _vars.scss _common.scss _util.scss _layout.scss _main.scss style.scss で構成されています。 この構成は主にhail2u.netさ
![[Web]Sass（Scss）+ Compassのテンプレートファイルを作成したので晒してみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bff8a3529a2aad8042452490c6f368062c5bb83/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F130523_sass_top.jpg)
WordPress テーマ作成時には必ず指定しておきたいネイティブCSS | hijiriworld Web
※連続改行したいという人がよくいますが、brタグによる連続改行はHTML5の規則的にはダメダメです。セマンティック的にもなんの意味もないのでやめましょう。マージンが欲しければスタイルシートで定義してください。 さて、上記のように入力した値は以下のような構造で出力されます。 <p>あああ</p> <p> いいい <br /> ううう </p> ビジュアルエディタ上での見た目と出力された見た目を同じにするため、すなわち、段落としてのスタイルを定義するならば、pタグのスタイルは以下のようになるでしょう。 > テーマ/style.css p { display: block; margin: 1em 0; } TinyMCE ビジュアルエディタのTinyMCEも考慮するべきでしょう。 それぞれのボタンで挿入されるタグのスタイルも指定しておきましょう。 最初にリセットCSSをしない場合は不要です。
Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い | Cappee Design
東京でも桜が開花しましたね、@cappeeです。 色々と検証した結果、私も「Normalize.css」を本格導入することにしました。 勘違いしがちなのは、「Normalize.css と リセットCSS どっちがいいの？」ということではなく、この２つはまったく別物なので比較しようがないのです。 Normalize.css を実際使ってみての注意点や、リセットCSSのデメリットなどメモしておきたいと思います。 デフォルトスタイルシート まず、Normalize.css と リセットCSSを説明する前に知っておきたいのが、ブラウザごとに定義されている「デフォルトスタイルシート」です。 CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。 だたしデフォルトスタイルシートはブラウザによっ
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？ 私が
CSS3で出来ること | HTML5+CSS3でサイトを作ってみる。
--[ html ]----------------------- <div id="radius">Radius Border</div> <div id="radius_img">Radius Image</div> --[ CSS ]------------------------ #radius { background: #69c; border: solid 1px #036; padding: 10px 30px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } #radius_img { width:100px; background:url("../img/button.png") no-repeat; -webkit-border-radius: 5px; -mo
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
「htmlすら知らなかった私が2週間でWordPressの新テーマを作成するまでにやったこと」と参考にした記事まとめ
どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML / CSS / javascript対応の次世代エディタ「Brackets」 | Web’Notes
IDEA * IDEA