HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
例えば、カナダで郵便番号と言えば『V6E 1G6』のように、6桁の文字と数字で表現するんですが、電話で『郵便番号を教えてください。』とか言われる場面に遭遇する事はよくある。ましてや英語初心者の内は特に『V』と『B』の区別なんて付かない場合も多いですよね。 その時の話を例に取ってみます。 例えば、『V6G 2V3』を説明する場合、 V as in Victor, Six, G as in Golf, Two, V as in Victor, Three. （V6G 2V3） といった具合ですね。 オフィスで使用頻度が高い表現色々 では、続いて体感的にオフィスで使用頻度が高いなーと思うからご紹介していきます。 メールの返信が遅れた場合はシンプルに最初にこの表現です。”the”を忘れない様に。 メールの返事が遅れてすいませんでした。 Sorry for the late reply. Make
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
井上純一（希有馬屋）『逆資本論』発売中 @KEUMAYA よし！！ コミケのサークルカット終わった！ これで微妙な原稿ラッシュ終了！ 嫁日記三巻の作業に戻れる！！ やったー！！ http://t.co/2uj4fc8P 井上純一（希有馬屋）『逆資本論』発売中 @KEUMAYA 井上純一（希有馬）TRPGデザイナー。漫画家。京都精華大マンガ学部キャラクターデザインコース特任教授。 代表作：スタンダードTRPGシリーズ（SRS）『アルシャードセイヴァー』、『エンゼルギア』、『天羅万象』他。最近は『中国嫁日記』のジンサン。 blog.livedoor.jp/keumaya-china/ リンク p.twipple.jp 希有馬（井上純一or弌）さんの写真をもっとよく見るにはURLをクリック！！ 「希有馬（井上純一or弌）さん@KEUMAYA: よし！！ コミケのサークルカット終わった！ これで微
概要 リファラ（referer）とは、あるWebページのリンクをクリックして別のページに移動したときの、リンク元のページのこと。Webサーバのアクセスログに記録される項目の一つ。 WebブラウザがWebサーバへのHTTPリクエスト送信時にヘッダ項目の一つとして申告する情報で、これをたどっていくと閲覧者がどこのサイトから訪問したのか、また、サイト内でどのような軌跡をたどったのかなどを調べることができる。 検索エンジンからの訪問の場合には、URLのパラメータ部分を調べることによって、どんな言葉で検索した結果のページから来たのかを知ることができる。Web広告の世界では、どのサイト/ページに掲載した広告に効果があったのかを調べることができる重要な項目である。 ノーリファラ (no referer)WebブラウザからWebサーバに送られる要求データの中に、アクセスしようとしているWebページの参照元
2011年のWeb制作トレンドをはてブのホットエントリから振り返ってみました。 2011年でトレンドは、スマートフォン向けサイトやアプリの制作関連、HTML5関連、あとはFacebook対応のためのノウハウといった感じでした。 はてなブックマーク「コンピュータ・IT」カテゴリ内で、1500以上ブクマがついた記事を選出、その中からさらに私の主観も入りつつ、2011年Web制作系のエントリーの中でもベストな31記事をピックアップ、Webデザイン系、SEO系、HTML+CSS系、プログラミング系、スマートフォンサイト制作系、企画、ツール、その他系、素材系にそれぞれ分類しました。 Webデザイン系 1. 色彩センスのいらない配色講座 配色と色についてひじょーに分かりやすく、論理的に解説されたスライド。はてブ数ダントツ。 2. デザインの基礎力をワンランクアップしたい私（Webデザイナー
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
2017年6月30日 便利ツール アイデアのメモも、画像も、音声も、とにかくなんでも保存できちゃうメモツール「Evernote」。有名すぎる便利ツールですね！逆に自由度が高すぎてどうやって使えばいいのかわからない、という方も多いと思います。今回は「Webデザイナー」をキーワードに私のEvernoteの使い方を紹介します。 ↑私が10年以上利用している会計ソフト！ Evernoteってなあに？ Evernoteの機能を簡単に説明します。 画像・音声・PDFファイルなどが保存できる アップロードできる容量は月に無料アカウント：60MB、プレミアムアカウント：1GB プレミアムアカウントは月額5ドルまたは年額45ドル ノートに対して一つだけ設定できるノートブックを大カテゴリとして使用 ノートに対して複数設定できるタグを小カテゴリとして使用 ノートブックもタグも階層化させて整理できる 携帯電話・ス
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック
WordPressを使っていて 「これが有ると無いとで全然違ってくる」 と思う7つ道具（ソフトやツールなど）を ご紹介いたします。既知なモノも 多々あるかと思いますが、少しでも 参考になれば幸いです。 1. BitNami 【30分もあればアナタのPC内にローカルサーバー自動構築】 僕にとっては必須。初心者には敷居の高いローカルサーバー構築を わずか30分程度で自動で構築してくれてWordPressも同時にインストール してくれちゃうフリーソフト。WordPress以外のCMSも幾つかあります。 当然、ＤＢなのでWPだけじゃなく、プログラムの勉強や他CMSのテストにも使えます。 WordPressは英語なので日本語を使うのであれば日本語に変えるか、 新たに日本語のWPをインストールします。接頭語にお気をつけて。 以前、BitNamiの導入手順を書きましたので宜しければ。 ローカルサーバーは
透明感のあるものやグランジ風・イラスト風など最近よく見かけるウェブサイトのデザインを一から丁寧に解説しているPhotoshopのチュートリアルを紹介します。
自分の思いを伝えたいのに伝わらない。 そんな時は、どうしても人間自分が言いたい事を真っ先に言いすぎる傾向にあります。 しかし、きちんと伝えたい事が、きちんと伝わらないというのはとても悲しい事でもあります。 特にWEB屋やブロガーは、画像、テキストを駆使し、相手に自分の伝えたい事を伝える表現を施すわけですが、これがなんと難しい事か。広告屋さんも同様に、スランプに陥る事があったりすると聞きます。 相手に伝える為の最大のコツは、多くを語らない事ですが、インターネットには『信用と信頼』という目に見えないものがあり、それらを包み込むような文章も必要となります。 今回はこの辺りに焦点を絞り、わかり易く相手に伝えるコツをつづって見ます。 １）始まりがわかりやすい 始まった事がわかり易いのかどうか。 何を言ってるんだという人も居るかもしれませんが、これが結構重要です。 第一に、そのページが 『何を説明して
JavaScriptを勉強しているとオブジェクトとはなんぞや？ということがわからなくなってきます。選択肢が増えれば増えるほど。 JavaScriptには、同じように見えて、実は同じではないデータがあります。それらのオブジェクトについて、区別して説明が付けられるように、自分なりに考察してみました。勉強中のアウトプットなので、ここで書いた内容は事実とは大きく外れているものかもしれません。とにかく不明瞭な部分を自分なりに理由づけしたかっただけです。 サンプルコードを試される場合は、FirefoxのFireBugにあるコンソールに貼りつけて実行するか、Safariの開発ツールにあるコンソールに貼りつけて実行してください。それがわからない方は console.log の部分を alert に置き換えて確認してください。 話がややこしくなるので、今回はプロパティしか扱っていません。 名称の定義について
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く