ドットインストール代表のライフハックブログ
2022年10月1日付で社名を「Nota株式会社(英文表記 Nota, Inc.)」から変更いたしました。
はじめに 第5回は携帯サイトのデザイン性を高めるための主流となっているXHTMLの出力方法を解説します。最近の携帯端末ではほとんど対応になっているXHTMLですが、一部の非対応端末との切り替え方法などについて触れてみます。 対象読者 Perlを実行できる環境にて携帯サイト構築を考えている方 必要な環境 Apache 1.3系または2系 Perl 5.6以上 端末のXTHML対応/非対応の判別を行う DoCoMo,AUはWAP2.0ブラウザ搭載端末、SoftBankはW型および3GC型端末で対応となります。 それらを第1回で紹介したHTTP::MobileAgentを使って判別すると次のようになります。 use HTTP::MobileAgent; my $agent = HTTP::MobileAgent->new; if ($agent->is_docomo){
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
~10程度っすよ ~50程度かな ~100くらい ~300程度です ~500はこなす ~1000はやってます これ以上 ( ! )
フォントの設定 通常、WEBページ内のテキストに対して表示フォントの設定を行っても、そのページを見ている側のパソコンに設定したフォントがインストールされていなければ、テキストは設定したフォントでは表示されません。このため、フォントの設定をする場合はユーザーの多い Windows や Macintosh の両OSで標準にインストールされているフォントを指定するのが普通です。 Dreamweaver では [プロパティ] インスペクタを使用してフォントの設定を行います。 詳しくは、「フォント属性の設定」参照。 [プロパティ] インスペクタの [フォントリスト] ポップアップメニューをクリックして表示されるリスト内のフォントは Win と Mac の両OSで標準にインストールされているものばかりなので、ここからフォントを選んでいる分には安心です。 メニュー項目以外のフォントを適用したい場合は、
いいね! 0 ツイート B! はてブ 447 Pocket 2 データベースの設計時にER図をかくことが多いと思いますが、SQL-designerというウェブベースのツールが非常に使いやすいく、デザイン的にも綺麗で便利。 MSproject等のデータベース設計を行う専用ソフトは非常に多くあるが、どれもインストールが必要だったり、設定ファイルが必要だったり、ソフトが重かったり、環境依存が激しかったりして、使いにくい。 使いかたは簡単で、 1.ウェブページにいって 2.テーブルやフィールドを追加する 3.プリントアウトorXMLエクスポート だけ。 データの型なども選択できて、設計が終わったら、SQL文をそのまま発行したり、作ったEQ図をXMLでエクスポートやインポートすることも可能。Javascriptベースなので、めんどくさいインストールや環境依存もなし。 ウェブ上でやるのは、セキュリティ
「ドリームラインジェネレーター」で誰でも簡単に目を引くクールな画像を作る方法。 以前紹介した、「ドリームラインジェネレーター」によって目を引くクールな画像を軽く作成してみます。 完成イメージは次のような感じ。 要した時間はたったの5分ですが、パンフレットとかに使われそうなクールなイメージが出来てます。 作り方は次の流れでかなり簡単に行えます。 1. 「ドリームラインジェネレーター」にアクセスし、フォームに適当な文字列を入れましょう。 2. 文字列を入れるとランダムに画像が生成されるため、クールな感じの画像が生成されるまでタイミングを待って、うまいところでスクリーンキャプチャ。 ここで取る画像がセンスを問われる部分ですが、なんとなく適当にとってもなかなかカッコいい画像ができるため、難しくはないはず。 3. PhotoShop等の画像編集ツールにて、この画像の上に文字を書き、ドロップシャドウ効
A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (FireFoxのみ) example two (FireFoxのみ) example three (FireFoxのみ) example four (FireFoxのみ) Example five (FireFoxのみ) Example six (IEも動きます) Example seven (IEも動きます) アイデア次第でこういった技もできてしまいますね。 通常なら画像をPhotoShopなんかで
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor)の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for PodcastersページのRSSは以下になります。こちらのRSSではenclosureタグなどでlength値などがしっかり入っているのでこれを購読しておくとよいかと思います。 https://anchor.fm/s/66ff2830/podcast/rss ここで聴く!という人は以下のプレイヤーからどうぞ。 んで、これまではGoogle Drive上に保存したmp3ファイルを聞きたい方は以下のリンクをクリックしてください。ブラウザ内で聞けます。 https://drive.google.com/f
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです(「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・)。 さて、ではポイントをば。 ■ グレーの次はグリーンだ! 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命! Rounded Cornersは新しい標準す。 ■ 「無料!」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は?素材集す
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも(狭すぎると困るが)はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
RSSリーダーやソーシャルブックマークを情報収集のツールとして使用していると、自分はタイトルを見て記事を読むかどうかを判断している場合が多いことに気付く。 溢れる情報の中でパッと目につくタイトルがあるととりあえず見てしまう。こういう人って意外と多いんじゃないかな。 こちらの記事では、そんな重要なタイトル作りのノウハウをいくつか紹介しています。 http://www.modernlifeisrubbish.co.uk/article/how-to-write-great-headlines 話題のキーワードやトレンドを記載する みんなの関心を引くには、みんなが今関心を持っている事柄をタイトルに入れよう。 基本といえば基本ですが、ちょっとした工夫でより人の目を引くタイトルになるかも。 悪い例:カタールのTV局が新しい機器を入手 (Qatar TV Channel aquires new har
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ(というか影を先に書くのか)。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips
Firefox2.0テーマと壁紙で、お気に入りテーマや拡張機能などを紹介したんですが、みなさんがどんなカスタマイズをしているのか興味ありませんか? そこで、Firefox 2.0のリリースを記念してTB企画を行いたいと思います。(バージョンは問いません) わたしはもちろん、現在Firefox2.0をお使いの方やバージョンアップを迷っている方、そしてまだ使ったことがない方にもきっと参考になると思いますのでお気軽に応募してください。 特にルールはありませんが、下記の要項を参考にエントリーしてトラックバックしてください。 Firefoxの画面キャプチャ バージョン ホーム(例:Google) テーマ 入れている拡張機能(エクステンション) 他にもFirefoxが好きな理由など何でもOK こちらがわたしの Firefox2.0 の画面(クリックで拡大) テーマ:Azerty II ホームは abo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く