CSSテンプレート

【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。

まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。

ページを見ても、あんまり意味が無いっすね。えぇ。

いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。

んでは、続きにて中身の説明なんぞをしていきます。

textarea のリサイズ機能を止めてみる

Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。

なので、止める方法を。

CSS3にそれっぽいプロパティが有るので、1行書くだけです。

textarea {
    resize: none;
}

こんな感じですね。
これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。

これだけだと、寂しいのでエントリーっぽくするために。

【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。

前回の更新日が見たくない程に時が流れている今日この頃・・・。
ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。

こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。

なので、これからはちょろっとでもネタが有れば更新していきたいなーと。
何をモチベーションに更新するかはまだ見つかってないけど><

さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。

WebKit系のブラウザならそのまま確認できます。その際、ウィンドウサイズを変更して横幅を小さくするとポートレート用の表示になります。
スマートフォンから見たい場合は、

http://bit.ly/new_sp_v1

からでも見れます。
ついでにQRも用意しました。

QR:【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。

ちょうどCSS Nite LP16 も有りますし。LP聞いて、テンションが上がったところでコレを使ってもらおうと言う算段ですね。分かります。

では、中身のご説明などを続きにて。

スマートフォン向けサイトのラジオボタンを良さ気な感じに。

昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。

なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。

HTML5で組まれたブログのベースに使えそうな一式

MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。

MT underHat テーマ 002 のキャプチャ
MT underHat テーマ 002 - カンバス | MT underHat

今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。

何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。
入門用というか。
実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。
なので、触れやすい感じを目指してみました。

【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

HTML5版の新規でサイトを作るのに使えそうな一式です。
今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。

今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。

社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。
コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・

それはさておき、中身のご説明などを続きにて。

各プロパティの値を初期値にする、initial_value.css

前回のエントリー「とっても使えるoverflowプロパティ。その使い方色々。」の補足で、Dreamweaver使ってコーディングする場合、デザインビューを使ってるとその部分が選択できない問題が有ったと思います。(確認しているのはVer8)
一時的に、宣言を取れば普通に選択できます。

さて、ちょっと必要になったんで、各プロパティを初期値にするCSSを書いておきました。
使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。
他に、ブログサービスとか使ってると、良く分かんない場合が有るのでそんな時にも活用できるかもしれません。

とっても使えるoverflowプロパティ。その使い方色々。

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。
まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。

さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。

あんまoverflowプロパティを使った事が無い方は、ビックリですよ!
これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど

サンプルとかは以下よりどうぞ。

ページ送りのサンプル4種+2

ページ送りず、随分間が空いてしまった・・・何て言う現実。
気付けば冬間近ですね。

久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。
ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。

地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。

ちょっとした組み方の違い

DQ9ではじめてマルチプレイやりました!
新しい楽しみ方だと思うなー。

ちなみにやったのは、この人たち。

collamoの中の人。
CSS Sprites作成ツール「Tonttu」を作ったみたいで、試しに使ってみましたがPSとかでチマチマ作るより全然使いやすかったっす。
興味ある方どうぞ。
これからゆっくり考Lの中の人。
ブログの内容はよく分かりませんが、「JavaScript超初心者によるJavaScript入門講座」ってサイトではてブ50目指して頑張ってるみたいです。
音声解説やってるのでお姉さまが優しく語りかけてくれます。

確認せず晒したんで本人に怒られたら困っちゃう。
さてさて、本題の組み方の違いです。

このページの上部へ

↑上に行くよ