Know-how 日頃クライアントワークを行っているディレクターが、自社コーポレートサイトリニューアルを担当して学んだこと
![WebNAUT by Beeworks | デザイン制作会社ビーワークスの情報メディア](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b324dffad3420a154654e7e9052f517f0af1487/height=288;version=1;width=512/https%3A%2F%2Fwebnaut.jp%2Fimg%2Fogp_image.png)
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど>< さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
illustratorのaiデータから画像を綺麗にスライスする方法 2011-01-08 illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。 関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。 紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。 スライスの準備 単位 [ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。 ここを変更すると、定規などの値も全てピクセルになるはずです。 カラーモード [ファイル]→[ドキュメントのカラーモード]がRGBカラーにな
みなさんも仕事の効率化、時間短縮のためにしていることってありますよね? 私ももちろんいろんな工夫をしているのですが、もっと効率よく仕事がしたいって思っています。 とりあえず、今、時間短縮の為に私がしていることをまとめてみました。 私は毎日 Webサイトを作るために、Photoshop を使ったり、コーディングしたり、調べものをしたり … とにかくいろんな作業をしています。そんな中、もっと時間短縮できないかなー、これって時間の無駄だなーと思うこともたくさんあります。1日は 24時間しかないし、決められた 24時間の中で自分の時間を作るためには、仕事の時間を圧縮するしかありません … X( できるだけ無駄をなくして、早く仕事が終われるように、時間短縮術をマスターしたいと思ってます。コーディングを早くできるようにしたりするものはもちろん、欲しい情報に素早くアクセスできるような工夫など、今私が時間
コーディングスピードはまだ上がる!! Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍!10倍!上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
最近ちょっと興味があったZen-Codingがvimでも出来るというプラグインがあったので試してみた。 Zen-Codingってのはプログラマが使うエディタについてるスニペット入力みたいな感じでHTMLがサクサク書けるようになるライブラリ。スニペットのHTML特化版。 CSSセレクタのような記法なので普段からWebの開発に関わってる人なら簡単に体得できると思う。 単体のエディタではなくプラグイン形式になっていて色々なエディタやIDEで使えるというのもいいところ。詳しくは下記サイトを参照。 zen-coding - Set of plugins for HTML and CSS hi-speed coding http://code.google.com/p/zen-coding/ vimプラグインはこっち。 Sparkup http://github.com/rstacruz/sparku
「フライング・ハイ・ワークス」はWeb制作・ホームページ制作会社【東京都 渋谷区】です。企業サイトやスマホサイト、ポータルサイトなど様々なホームページの制作、デザイン制作を行っており、「売上」に繋がる質の高いサービス提供を心がけています。
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
このプラグインは今後更新されることはありません。代わりにWP Emmetを使用すると皆幸せ。 WordPressの管理画面でZen codingを使えるようにするプラグインを書きました。良かったら使ってみて下さい。 ダウンロード WP Zen-Coding - v0.3.1 ライセンス MIT License Zen Codingの設定 設定は【設定】メニューの【Zen Coding】より行えます。 既知の不具合 Zen Coding for textareaのバグなのか仕様なのか、textareaに縦スクロールバーが出ている場合、タグの展開などを行うと最上部にスクロールされます。 カーソルは元の位置にあるので、文字を入力すれば元の位置にスクロールされます。 おすすめ Zen Coding for textarea を Movable Type で簡単に使うプラグイン - かたつむりくんの
Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding(本家) HTMLコーディングが3倍速くなる?「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何?使い方は?という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
ちょっと前に書いたZen-CodingネタをH2O Spaceのたにぐちさんに取り上げていただいてからというもの、関連するエントリーへのアクセスがにぎやかです(謎)。そんなこともあり、数日前の夜中に遊び半分で「Zen-Codingってこんな感じ」ってのをお見せしようと、Twitterで告知しながらUStreamでダラダラとやってました。 終わってから何名かの方に「見たかった!」というレスをいただいたのですが、ただやみくもにというか、適当に思いつくままキーボードをカチャカチャやってると、やってる本人も「何がいいかな?どうしようかな?」みたいな脳みそになっちゃいます。もちろん、見ている側も何してるか想像できないですからね…(笑)。 ということで…。 ならば、簡単なサンプルを作ってそれをやってみようじゃないか簡単ですがサンプルを用意してみました。ただブロックが組み合わさっただけだと面白くもないの
先日超速コーディング?としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします(どちらかと言えば、こっちが本当のZen-Codingなんでしょう)。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…(はず 笑)。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く