ドットインストール代表のライフハックブログ
![ブログマーケティング勉強会議の締め切りについて - IDEA*IDEA ~ 百式管理人のライフハックブログ ~](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f15985244f2599b686ec8d860b448c4fecc4d0c/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fplugins%2Fwp-ogp%2Fdefault.jpg)
「こういうスタイルがCSSを記述する時に便利だよ! コンセンサス(つづりは知らない)も取れるし!」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。 とりあえずスタイル指定を取っ払う 各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。 フォント・ファミリの指定は別ファイル 見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。 様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こ
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
2006年10月10日06:15 カテゴリLightweight Languages javascript - ある意味究極のソースコード添付法 ころたま。なんでこれを今まで思いつかなかったか! 以下のHTMLをコピペして、 <script type="text/javascript" src="http://blog.livedoor.jp/dankogai/js/sourceviewer.js"></script> <script>//<![CDATA[ var sourceViewer = new SourceViewer(); sourceViewer.boot(sourceViewer, 'sourcecode'); //]]></script> <style> .sourcecode { display: none } </style> あとは <textarea class=
lighttpd (pronounced /lighty/) is a secure, fast, compliant, and very flexible web server that has been optimized for high-performance environments. lighttpd uses memory and CPU efficiently and has lower resource use than other popular web servers. Its advanced feature-set (FastCGI, CGI, Auth, Output-Compression, URL-Rewriting and much more) make lighttpd the perfect web server for all systems, sm
Excelは基本的に表計算ソフトなわけですが、計算の不要な普通の表を作成するソフトとしても優れています。 Webページで表を作成する場合、tableタグ・trタグ・tdタグを使ってHTMLソースを書く必要がありますが、こんなときにも 「Excelで表を作っておいて簡単にHTMLにできないかなー」 と考えたことのある方は少なくないでしょう。 そのため、ExcelからHTMLソースを吐き出すようなツールを作っている方も少ないないようです。 ですが、そんなツールを利用することなくマクロを組むこともなく、相対参照と絶対参照を利用して簡単にテーブルタグを生成する方法を、2ちゃんねるのWeb制作管理板の中で先日みつけました。 ・エクセルでテーブルを組んでますが馬鹿ですか? ↑こんなタイトルのスレッドですが、馬鹿なんてとんでもありません。とても賢い方法だと思います。 ▼操作手順:ExcelでHTMLのテ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
Web app development tutorials and tools
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
C/C++/C#/Visual Basic/Java/JavaScript/SQL/XML/HTML/JSP/ASP/PHPに対応 各種プログラム言語のソースコードをWebページへ掲載するために、予約語やコメントを見やすく色分け表示したHTMLソースを生成できるソフト「SourceConverter」v1.0.0が、7日に公開された。Windows 2000/XPに対応するフリーソフトで、現在作者のホームページからダウンロードできる。動作には、.NET Framework 2.0が必要。 「SourceConverter」は、プログラムのソースコードをWebページ上で見やすく表示させるためのHTMLソースを生成できるソフト。予約語の色分けやインデントなどを、開発環境上での見た目と同じように表示できる。C/C++/C#/Visual Basic/Java/JavaScript/SQL/XML
For Webdesigners - 332 helpful links for webdesigners WEBデザイナーのための超便利リンク集。 Ajax、カラー、CSS、Flash、フォント、無料写真、ジェネレーター、素材、アイコン、インスピレーション、PhotoShopチュートリアル、xhtml に関するサイトが332もまとまっています。 どのカテゴリも厳選されていて、WEBデザイナーの方には便利なものになっています。 フォントや写真、アイコンなどの素材を探す場合にはここから探してもよさそう。 関連エントリ 超クールなブログデザイン集30 プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」 ページ送り部分のデザイン研究
完全に自分用メモ代わりですが、Web サイト制作時に参考にする機会の多いドキュメントをまとめてみました。とりあえずは仕様書関連のみ。 英語で書かれたドキュメントばかりを並べてもなんなので、参考までに日本語訳されたドキュメントも私が知っている範囲内で併記してみました。ただし、日本語訳は完全に原文との整合性を保障するものではありませんので、あくまで参考までにご利用ください。 HTML 関連 HTML 4.01 Specification -W3C Recommendation (日本語訳) ISO/IEC 15445:2000(E) ISO-HTML (日本工業規格 JIS X 4156:2000) ISO-HTML: Entities, element types and attributes (DTD) W3C から勧告されている、HTML 4.01 の仕様書に関しては現状、(X)HTML
Codetch :: Firefox Add-ons Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you...FirefoxにDreamWeaver風のWYSIWYGなHTMLエディタ機能を追加できる拡張「Codetch」。 インストールすると「ツール」メニューにCodetechが追加され、実行すると次のようなDreamWeaver風のWYSIWYGなHTMLエディタが表示されます。 CodeタブでHTMLを修正することもでき、PreviewタブでWYSIWYGな編集も可能です。 DOMインスペクタや CSS/HTML/XMLバリデーターなどの機能も持っています。 素早くHTMLページを作りたいという場合に、便利な拡張ですね。
CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem
ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ
Glossy.js (with IE 6/7 support) Glossy.js 1.3 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). 画像を立体ガラス風にするエフェクト実装JavaScriptライブラリ「Glossy.js」。 プレーンな画像に、次のように画像にガラスのような立体効果を与えることが可能。 必要なライブラリを読み込んで、<img>タグに、class="glossy"を指定するだけでいいお手軽さです。 目立たせたい画像に対してこのエフェクトを指定すると効果的ですね。 IE6,7もサポートしているようです
Design Photoshopで自分の好きな背景画像を作る方法『How to make your own patterns.』 自分の好きな背景画像を作ってみたい。 そんなときにおすすめなのが、『How to make your own patterns.』。Photoshopで自分の好きな背景画像を作る方法です。 以下にご紹介。 例として120x120pxの新規ファイルを作成し、パターンの元となる画像を作成します。 そして、そのレイヤーを複製します。 複製されたレイヤーが選択された状態で、「フィルタ / その他 / スクロール」を選択します。 スクロールダイアログで、カンバスサイズの1/2のピクセル数を入力します。 ここでは120x120pxのファイルを作成したので、60と入力しました。 OKをクリックすると、画像が4分割されて四隅に配置されます。 以上ですね。 以下はオプションです。
以前に「もう、class名やid名で悩まないんだからっ!!」というエントリーを書いたのだけど、自分がよう使うid名とclass名のまとめと、その辺の理由付けをしてみよーかなぁと思った。 後、idとclassの使い分け絡みもちょっと書くかも。 こーいう内容を書くと反応が怖かったりするけど、ソレもまた勉強なり。とか思って自分なりの今の考えを書いてみようと思います。 先に言っておきますが、コレから書く事が正解とかこう付けるべきって解釈はしない感じでお願いします。 コイツはこう考えてるんだ。くらいで読んでいただければ幸いです。えぇ。 全体を囲む際によく使うかなっていう系 #page idでコレをつける事が最近多いです。 wrapperとかwrapを使わないのは、脳内がサランラップに犯されているからっていうやる気の無い理由もありますが、「このサイトのこのページ。」なんだからpageがしっくり来たなぁ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く