無料提供している素材パーツを駆使すれば、簡単にランキングサイトが完成! また、スニペット機能で、ランキングに最適なタグを用意。 マイスニペットを駆使すれば、オリジナルのスニペット一覧も簡単に作成可能です。
何処かで聞いたことのあるタイトルですか? 気のせいです。Web 制作業3年目のぼくが2014年に取り入れてよかったあれこれリストアップしてみます。残念ながら2014年の最新はこれだ! という感じにはならず以前からあるものが殆どになりましたが、2014年と共に水に流して頂きますようお願いします。 BEM https://bem.info/ 最初の拒絶反応から一転、もう BEM 無しに CSS 設計はできなくなりました。BEM の思想に対して記述の方式は色々ありますが、ぼくは block__element--modifier と接続する MindBEMding の書き方をしています。 Template engine (Jade) https://jade-lang.com/ 静的サイトや CMS サイトのプロトタイプモデルとして html を 生成する際に重宝しています。ぼくは Jade を使
ここ数年のあいだに、オンラインで複数のメンバーとコラボレーションできるツールが増えていますよね。 ホワイトボードであったり、マインドマップであったり、用途によって様々なタイプがあります。これらのツールのメリットは、離れていてもリアルタイムに議論することができるところ。議論の時間と場所を選ばずにすみますし、リマインドのための議事録も同時にとれてしまいます。 その中でも今回ご紹介するのは、付箋を使ってマトリクスのボードで複数のメンバーと議論することができるアプリです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 付箋を使ってマトリクスで議論できる「Symphonical」 「Symphonical」は、複数のメンバーとリアルタイムにコラボレーションできるオンライン付箋ノートアプリ。 GTDや週間ス
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん
MacのAndroid エミュレータでサイト制作 Mac OS X へのAndroid エミュレータのインストール方法です。Windowsはこちらを参照(Android エミュレータでサイト制作)。 Android エミュレータのダウンロードサイトよりMac OS X (intel)の「android-sdk_r10-mac_x86.zip」をダウンロード。 ダウンロードしたファイルを解凍してアプリケーションフォルダに移動、「/tools/android」をクリックしてAndroid SDK and AVD Managerを開きます。 左メニューの「Available packages」を選択し、「Android Repository」をクリック。ダウンロードできるAPIが表示されます。 必要なAPIを選択して「Install Selected」ボタンを押します。 Choose Packe
サイトのユーザビリティ調査をおこなうために、業者さんに依頼するとなると、結構な金額がかかってしまうものですよね。少し前まで、ユーザビリティテストをおこなうのは資金的に余裕のある大企業だけ、というのが主流でしたが、いまでは中小企業でも必要性がでてきています。 そこで世の中に出てきたのが、安価にテストをおこなうことができるユーザビリティ テストツール。 そのツールのひとつである、WEBサイトのユーザビリティ 調査ツールGhostRecを、当サイトでも過去にご紹介しましたが、このツールの日本語版がリリースされていました。日本語版も100PVまで無料で使うことができるので、早速試してみました。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! WEBサイトのユーザビリティテストをおこなえる「GhostRec
日曜日ですが、良さ気なツールを 見かけたので備忘録的にご紹介。 色覚障害の方、俗に言う色弱の 人にとってWebサイトがどう見えて いるかを教えてくれる、という Webサービスです。 「色覚障害の方は~色が~に見える」と言った記事はたまに見かけますが実際はケースバイケースです。一応自分も国家医療資格の保有者なので、医学に関する事を軽々しくブログ等で書かく訳には行きません。なので、教科書に載ってる程度の事にだけ触れるようにしておきます。 人が刺激として錐体と呼ばれる器官で受けられる色は青、赤、緑の3色です。これらが全て正常に揃っているのがC型、赤の錐体に異常があるのがProtanope(P型)、緑の錐体に異常があるのがDeuteranope(D型)で、この2つのタイプが最も多く存在します。稀に青の錐体に異常がある場合もあります。これはTritanope(T型)と呼ばれます。 これらの3つのタイ
2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか?」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います! ↑私が10年以上利用している会計ソフト! 準備:分析&実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLやCSSが確
Unitag QR Generator- Create fancy QR Codes for free - Check out Premium access - Unitag - Connect to the world ロゴ入りのクールなQRコードが作れる「Unitag」。 WEBブラウザ上でサイトのロゴが入ったQRコードなどを簡単に作れるツールです サンプル例。なんかかっこいい。 ロゴ入り。こんなのでも読めるんですね ちょっとデザインされた感じのもの デザイナーの方はこういうところもデザインしたいということで、1つのツールとして試してみてもよさそう 関連エントリ Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
小さな画像を拡大したい時、どうしても起こってしまう画像の劣化。そんなときに便利な、画像を美しく拡大するフリーソフト「SmillaEnlarger」をご紹介します。上の画像は拡大例ですが、かなり滑らかに拡大出来てます。 ダウンロード こちらから「SmillaEnlarger」をダウンロードします。 Download ソフトを起動させます。 使い方 まずは、拡大したい画像をドラック&ドロップします。 Output Dimensions …サイズ変更 Specify zoom facter: 倍率 Specify width of result: 横幅指定 Specify height of result: 縦幅指定 Fit inside boundary: 縦横幅の最大値指定 Stretch to fit: 縦横幅の指定 Crop to fit: 切り取り指定 Fit inside, add
パソコンを使っていると、ちょっとしたことで動作がもたつき、イラつきを感じたことはないだろうか。とくにデスクトップパソコンがメインマシンの人は、ネットブックを持って外出したときに、もたつきを感じることだろう。 そうしたもたつきを感じたら、ここで紹介する高速化アプリを使ってみてはいかがだろうか。一度使ってみれば、その快適さに驚かされることだろう。 ■ 使っているパソコンの動作を速くしたいと、誰もが感じたことがあるだろう。パソコンのシステムを高速化、メモリは最適化して、さらにはインターネットのアクセスも高速にしたい。単に動作を速くしたいと言っても、対応すべきものはいろいろあり、それぞれ個別に対応するのは面倒だ。実は、こんな望みを解決してくれるソフトがある。それが「X-TUNE」だ。「X-TUNE」なら、簡単な操作でこれらの問題を一気に解決することができる。 ■ 作成したファイルが増えると、見つけ
+ or arrow up to zoom in - or arrow down to zoom out space to cycle through sizes f to toggle fluff If you like Testsize.com, please also check out Time.is, for the exact time, time in London, time in Paris, time in New York, time in Sydney, or the time anywhere in the world! There is also a JavaScript clock widget which you can put on your own website, a meeting plan
makeuseof.comで、TwitterとWordPressを連携するツールが紹介されています。 ざっといくつかご紹介。 Twitter Avatars in Comments メールアドレスからTwitterのアイコンを調べてアバターとして表示してくれる Twitip ID コメント投稿者の項目にTwitterアカウントを追加するプラグイン Autolink to Username WordPressで@usernameという風に書くと、自動でTwitterのユーザーページへのリンクを付けてくれるプラグイン WordPressユーザーの方は一度見てみてください♪ 7 Tools To Integrate Twitter With Your WordPress Blog よぅし挽回終了。作業再開しようかな。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く