Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ
2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。 そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。 最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文
Facebook・Twitterなどソーシャルボタン設置方法まとめ │ Design Spice
twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。 このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。 備忘録エントリー。 twitter ツイートボタン facebook いいねボタン google+1ボタン evernote サイトメモリーボタン tumblr 共有ボタン はてなブックマーク mixiチェックボタン twitter ツイートボタン 1.コード取得 下記リンク先でツイートボタンのソースコードが取得できます。 Twitter / ツイートボタン ボタン ボタンの種類を選びます。 ツイート内テキスト ツイートに含まれるテキストを選択します。 ボタンが表示されるペ
facebookのいいねボタンを押したときのサムネイル指定 | niwadesign
↓ここの画像を指定した画像にする方法です。 いいねボタンを押した際に指定した画像をfacebookで表示させるには OGP （Open Graph Protocol）といわれるものをhtmlのヘッダーにmetaデータとして付加する必要があります。 そこでfacebookでは下記６つの情報が必須となってきます。 「og:title」 「og:type」 「og:image」 「og:url」 「og:site_name」 「fb:admins or fb:app_id」 書き方 <meta property="og:title" content="その記事のタイトル"> <meta property="og:type" content="blog"> <meta property="og:image" content="指定したい画像のパス"> <meta property
sarusaruMailForm0.95 - 画像アップロード追加 - sarusaruworld lab - Web Lab
色々とご要望を頂き、画像のアップロード機能を追加しました。 formImageFile(項目名,必須フラグ,追加属性); 画像のアップロード機能の追加（※JPG / GIF / PNGのみ） ※添付ファイルとしての送信ではなく、指定ディレクトリへのアップロード ※<form>属性に「enctype="multipart/form-data"」の追加を行ってください 基本的な使い方は以前のままですが、念のため以下に再掲載。 【使い方】 ①入力フォーム用のHTMLファイルを用意する ②ライブラリを読み込む ※ファイル先頭で以下のように読み込みます <?php require './sarusaruMailForm_conf.php'; //設定ファイル require './sarusaruMailForm_lib.php'; //ライブラリ ?> ③<form>タグ直下にcheckStatu
Electronic Genome - 別ドメインの外部スクリプトを実行するブックマークレット
■整形ソース ブックマークレットメーカーで生成されるコードを整形し、コメントをつけて貼っておきます。 javascript:(function(){ //外部ファイルURL var url='http://t-service.no-ip.com/blog/72_ExternalScriptDemo/demo_outerscript_utf8.js'; //キャッシュ使用を回避 if(!url.match(/\?/))url+='?'+(new Date()).getTime(); //scriptエレメント作成 var d=document; var e=d.createElement('script'); //外部ファイルのエンコーディング指定 e.charset='utf-8'; //srcを外部ファイルURLに設定 e.src=url; //エレメント追加 d.getElements
各ブラウザでのフォーム（inputボタン）の位置や大きさを合わせる｜web bibo
フォームは各ブラウザによってボタンの大きさやマージンの取り方など、千差万別です。私としては少しぐらいの差は気にならないタイプですが、デザイン的にフォームの大きさや位置が決まっていて揃えておかないとレイアウトが崩れるといった状況も出てくると思います。そういう時に参考になる書き方があるので紹介します。 CSS form { position: relative; margin: 0; padding: 0; width: 320px; height: 64px; background-color: #CCCCCC; } form p { position: absolute; top: 12px; left: 32px; margin: 0; padding: 0; width: 256px; height: 24px; } p .search { position: absolute;
ウェブデザイナーのための16のFirefoxのアドオン | コリス
Mashableのエントリーから、ウェブ制作に役立つ、16のFirefoxのアドオンを紹介します。 Another 16 Firefox Add-ons For Web Designers Font Finder テキストに指定されているスタイルシートを表示します。 Link Evaluator ページのリンクをチェックします。 LiveHTTPHeaders ヘッダ情報を表示します。 OperaView Operaでのレンダリング確認用に。 Pagediff 別々の2ページの差分をチェックします。 Python Sidebar for Mozilla サイドバーにPythonのリファレンスを表示します。 RankQuest SEO関連の各種情報を表示するツールバー。 SEOforFriefox GoogleやYahoo!の検索結果ページに、SEO関連の情報を表示します。 SEOQuake
CSSフロートコード作成のチュートリアルサイト「Floatutorial」
CSSコードのチュートリアルサイト「Max Design」の9つのフローティングチュートリアルです。細かく手順が書いてありますので、わかりやすいのではないかと思います。 詳細は、以下から。1から9のチュートリアル名とデモ画面の画像です。 右にイメージを置く Floatutorial: Tutorial 1 - all steps combined イメージとキャプション Floatutorial: Tutorial 2 - all steps combined 縦にイメージを並べる Floatutorial: Tutorial 3 - all steps combined サムネイルギャラリー Floatutorial: Tutorial 4 - all steps combined 「next」と「back」を使ったリスト Floatutorial: Tutorial 5 - all s
各種CSSメニューをカスタマイズしてダウンロードできる『CSS MENU MAKER』 | 100SHIKI.COM
このサイトでメニューを作って張ってみたんですが メニューがTOP画像の上に表示されるのです。 どうすればよいでしょうか？ Top Tools Yotube Music Diary これがHTMLで ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url(“http://error911.up.seesaa.net/image/bg.jpg?20090326204938″) repeat-x top left; font-family:”Trebuchet
ブログの右上に貼り付けるリボンが作れる『Website Ribbon』 | 100SHIKI
昨日に引き続き便利なジェネレータのご紹介。 Website Ribbonではサイトの右上に貼り付けられるリボンをつくることができる。 もちろんリボンの色やテキストのフォント、色も選ぶことができる。またリンクも設定することが可能だ。 出来上がったリボンはJavascriptを貼り付けるだけで自分のサイトなりブログに設置できる。実にお手軽だ。 サイトも長く運営しているとちょこちょこ手をいれたくなるものだ。こうした「ちょこっとだけリニューアル」的ツールは需要があるかもしれないですな。
.htaccessでの携帯とPCの振分け - XREA&CORE SUPPORT BOARD
.htaccessを使った、携帯とPCの振分けについてです。 (http://****.s**.xrea.com/)にアクセスした時に RewriteEngine on RewriteCond %{HTTP_USER_AGENT} "DoCoMo" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "J-PHONE" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "KDDI" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "UP.Browser" [NC] RewriteRule ^$ m/ [L] と、ユーザーエージェント判別で（http://****.s**.xrea.com/m/）に飛ばすようにしました。 しかし m/index.html を表示するだけで、
ウェブの作り方。〜HTML入門,CSS入門,携帯電話向けウェブの作り方など〜
ウェブページ(いわゆるホームページ)の作り方を解説します。 特にJavaScriptの使い方と携帯電話向けコンテンツの作り方に力を入れていきます。 また、初めてウェブサイトを作ってみたいと言う方のために、HTML & CSS 入門もご用意しました。 しらぎくのウェブサイト作成入門・最新の更新のご案内。 令和 4年 5月 1日 JavaScript リファレンスを取り敢えず公開出来る範囲で公開しました。 令和元年 8月 7日 CSS の小技に CSS 第三水準で実現するマーキー(marquee)を追加しました。 令和元年 5月18日 CSS の小技掲載の CSS スプライトを更新しました。 平成31年 4月29日 CSS の小技に縦書きにするにはを追加しました。 平成31年 4月 6日 CSS リファレンスに書字モードモジュール(縦書きなどに対応)を追加しました。 平成30年 9月25日 従
初心者のためのホームページ作り-Web for beginner ホームページ作成支援
Lecture for beginner ■ HTML基礎講座 HTML4.01の概略 / HTML制作の準備 WEBとHTML / Webの作法 / HTMLの作成 論理構造 / 要素の親子関係 / ヘッダ情報 見出し / 段落 / リンク / フォント ボックスの概念 / 色の作法 / 画像の扱い リストの作成 / テーブルの作成 / 配置 フレーム / フォーム / 動画コンテンツ イメージマップ / スタイルシートの概念 Webページのタブー ■ HTML応用編 HTML4.01 / ヘッダ情報 / CSS応用 テキスト / アンカー / 文字実体参照 色の基礎知識 / FTPファイル転送 枠線表示の応用 / アクセシビリティ Lecture for senior ■ 初めてのXHTML講座 XHTML基礎講座 / XHTML概要 / XHTML基本 XHTML DTD / HTM
ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん！(Hatena)
こんにちはこんにちは！！ CSS書いてますか！！ ぼくなんか書きすぎて border: 1px solid red; が0.5秒で打ち込めそうな感じなんです＞＜ ところで、CSSいっぱい書いてると、ぱっと見ただけでおよそ何ピクセルか、 わかったりするようになるから人間ってすごいよね！ この余白は 6px だな、こっちのblockは 40px くらいかな？ とか…！ 大きいのは難しいけど！ 最近はエラスチックなんとかレイアウト？っていう em で指定しちゃうのが流行だそうだから pxはあまり使わないのかもしれないけどね！ ところで、そんなぼくがCSSを書くときに必須なツールがあります！ 紹介しちゃいますね！ きっと手放せなくなっちゃうよ！ ひとつが、カラーピッカーだね！ 画面上の好きな色を拾うやつ！ これは色々なものが公開されているから省略しますね！ ぼくはこれつかってるけど！ もうひとつ…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-862.html
Twitter / ツイートボタン
IBM Developer
ブックマークレットから、外部jsを呼び出す。 | とのめも
Phenomena Entertainment
FLASHサイト作成インスピレーションの参考になるflashサイト7つ*ホームページを作る人のネタ帳
