シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
[Twilio] SMS が国内対応したので使ってみた | DevelopersIO
アプリケーションから電話にテキストを送る 6月27日に Twilio の国内向けに SMS 機能が提供されました！ これにより au や docomo 、softbank などの国内キャリアの電話番号に SMS を送ることができるようになります。例えば以下のようなサービスや機能が作れます。 アカウント認証(アカウントに携帯電話番号を紐付けて重複を防ぐ) ワンタイムパスワード プッシュ通知 グループメッセージング ということで早速使ってみましょう！ SMS を送る TwiML を作成してみる Twilio 番号にかけると特定の電話番号に SMS が送信されるサンプルを作ってみます。 まずは Twilio 番号を購入しましょう。送信元の Twilio 番号はアメリカの番号でなければならない制約があるのでアメリカの電話番号を購入します。 今回はサクッと Twimlets を使って TwiML を
![[Twilio] SMS が国内対応したので使ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c2cac13787a7951c0d01d96ab1fd8ff8fe51eb4/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F05%2Ftwilio_eyecatch.png)
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
GoogleモバイルサイトやDisney.comのオフキャンバスっぽいメニュー
Googleのスマートフォンサイトがリニューアルされたというので見てみたら、メインメニューの表示方法が面白い感じになっていたので自分でも作ってみました。 ちなみに、先日レスポンシブウェブデザインに変更したDisney.comも、表示幅が1024px以下だと似たようなメニューの表示方法になります。 作ったものは以下。 オフキャンバスメニュー サンプルなのでHTMLは適当に。 実際にはもっと複雑になるでしょうが、動きを試すためのものなのでこんな感じで。 <div id="nav" class="globalnav"> <a href="#">Navigation</a> </div> <div id="main" class="content"> <div class="switcher"> <button id="toggleMenu">☰</button> </div> Mai
サンプルコードによるRuby入門
配列の宣言 array = [1,2,3,4,5] 配列の要素の参照 配列の要素を参照するには、以下のようにします 配列[添字] 先頭の要素と2番目の要素を出力するサンプルです puts array[0]; puts array[1]; 配列の要素の代入 配列[添字] = 値 とします 先頭の要素に20を代入するサンプルです。 array[0] = 20 配列の要素の個数 次のようにします array.size 配列の要素を順番に処理する eachというのを使います。 配列.each do |配列の要素| # ここに配列の要素に対する処理を書きます end たとえば配列の要素すべての値を表示する例です array.each do |element| puts element end 重複を取り除く uniqというのを使います 配列.uniq たとえば[1,1,2,3]という配列に.uniq
HTML5で使えるスマートフォンの機能 | DevelopersIO
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F
設定画面を作る(1/6):Google androidプログラミング入門 - libro
Androidアプリを作成するとき、さまざまな初期設定などの情報を保存しておきたいことがあります。ファイルやデータベースなどに保存して読み込んでもいいのですが、正直、面倒ですね。またデータの保存だけならまだしも、設定などを行うためのレイアウトまで作るとなると一仕事になります。もっと簡単に設定などの情報を保管する方法が必要です。 この種の設定情報を管理するために、Androidには「PreferenceActivity」というクラスが用意されています。これは文字通り、アクティビティのクラスです。つまり、通常のアプリのアクティビティなどと同様に、あらかじめレイアウトを用意しておいてそれを画面に表示し、操作する働きを持ちます。 このPreferenceActivityは、通常のアクティビティと異なり、設定を管理するための機能をいろいろと持っています。ざっと整理するとこのようなものです。 １．設定
CSS3のtransition-timing-functionの動きをサンプルで理解しよう
<div id="transition">マウスを乗せてみてください <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out">ease-out</div> <div id="ease-in-out">ease-in-out</div> </div> transitionはまとめて指定しています。transition-propertyとtransition-delayは省略しています。省略した場合、transition-propertyは「all」、transition-delayは「0s」になります。 #transition{ width:510px; padding:10px 20px; background:#f1f6fc; bo
ペアプログラミング合コン行ってきたよ | メサイア・ワークス
雨で息が白くなる寒い日ですが、頑張って行ってきました！ 第一回目という事で、色々とスムーズに行かない所もありましたが、おおむね問題なし。と言った所 それにしても、男性14人・女性17人と、男性側のフィルタリングが強すぎだwww 男性側は10年選手が多かったのに対して、女性側は1年未満の人が多かった。 男性側のみ、締め切りの厳しい課題があったりと、ペアの女性に教えたら「そこまでして参加したかったんですか？」とか言われた。 最初から、この条件なら参加しなかったよ(苦笑) ペアプログラミング課題も、成果物とかを求めずにRoR(Ruby on Rails)で何か作って下さいと、わりと丸投げな感じでした。 男性も女性も、どちらもRubyに詳しくなくて開発環境を構築しているだけで終わっちゃったペアもあったみたい(^_^;) Mac率かなり高し！半分を超えていたんじゃないか？という位。 一時間で作れる物
テキストをランダム表示してから整列していくjQueryプラグインを作ってみました | bl6.jp
テキストをランダムでフェード表示させて、アニメーションで整列させていくっていうのをjQueryで作りたく色々と試しながらなんとかできたのでプラグイン（jquery.random.text.return.js）にしてみました。ぶっちゃけほぼ使い道がなさそうなプラグインですけど。。ということで以下使い方です。 使い方 とりあえずサンプルみた方が早いので以下のページから見れます。 サンプル 使い方はめっちゃ簡単です。以下のページからファイルをダウンロードします。 ダウンロードページ head内にjQuery本体とダウンロードしたプラグインを読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <
メニューを固定したWEBデザインのサンプル２１:phpspot開発日誌
21 Examples of Fixed Position Menus in Web Design | Inspiration メニューを固定したWEBデザインのサンプル２１ Facebookがそうですが、メニュー固定でユーザはいつでも移動したい情報に移動しやすくなりますね。 パララックスを取り込んだデザインや、一定位置まで移動すると固定されるような方法があります。 サイトによって合う合わないはあるかもしれませんが、色々なデザイン手法を見ておくといざ実装する際に、この場合はこうだというアイデアが沸いてきそうな気がします 地味ですが数年前にはあまり見られなかった手法。今後どんどん増えていきそうですね 関連エントリ スライダーを上手く使ってデザインされたWEBサイト集３０
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
いつかきっと使う事になる。転職の天才が転職に役立つ11サイト全力でまとめてみた | 転職エージェントで働いてたけど何か質問ある？
転職活動の答えは基本的に個々人の中にある。 そう考えるスタンスは変わらないが、それらをアウトプットする上で使えるサイトやサービスは活用した方がいい。 今日はガラにもなく流行りのまとめ記事でもやってみるか。 転職エージェントでも使う転職に役立つWebサイト11選 このWebサイトまとめは転職活動における下記5シーンでの利用を想定する。 1.履歴書・職務経歴書作成 2.業界研究 3.求人検索 4.面接テクニック 5.口コミ調査 1.履歴書・職務経歴書作成 リクルートエージェント｜職務経歴書の書き方 応用編 職務経歴書の書き方 応用編｜転職成功ガイド｜｜転職のリクルートエージェント「転職に人間力を。」 結構深いところにあるから見つけにくいかも。 ここに行けばおよそあらゆる職種の完成度の高い職務経歴書サンプルが手に入る。 俺が以前公開した職務経歴書の具体例もベースはこのリクエーの職務経歴書だ。 職
【大学生のモテる趣味ランキング】大学時代に始めたい人気趣味「趣味がない人、必見！」
【大学生のモテる趣味ランキング】大学時代に始めたい人気趣味「趣味がない人へ」 どうせ趣味を始めるなら、異性にモテる趣味を始めたいものですよね。 また、大学生のうちから始めておくとメリットの多い趣味もあるので必見です。 【大学生のモテる趣味ランキング】大学時代に始めたい人気趣味「趣味がない人、必見！」 ①旅行や旅 大学生の男女に人気な趣味ランキング１位は「旅行」です。 社会人になると長期休暇が取れないので、大学時代にしか長期の旅行には行くことが出来ないからでもあります。 賢い人ほど、「大学時代の今しか出来ないことを！」と、夏休みや、春休みを利用して海外旅行に行ってみたり、日本一周や世界一周をしています。 特に大学生男子には「旅」がおすすめです。 貧乏なバックパッカー的な「旅」でも良いので、海外含め、広い世界を見に行くことで｛人間としてのたくましさ｝や｛コミュニケーション能力｝、｛問題解決能力
Pythonで学ぶ「詳解 UNIXプログラミング」(その17) おしまい - atsuoishimoto's diary
以上でPythonで学ぶ「詳解 UNIXプログラミング」シリーズを終える。軽いネタのつもりで書き始めたが、サンプル一つ一つにきちんと目を通すのはなかなか楽しく、思ったよりも時間がかかってしまった。短期間にこんなにたくさんのos.fork()を書いたのは初めてだ。 このシリーズを通じて、Pythonのシステム管理ツールとしての優秀さを再確認することができた。ほとんどのサンプルはPythonの標準モジュールだけで実装することができたし、C言語版に比べて非常にシンプルになった。また、対話環境で手軽に実行し、その場で結果を確認できるので、より幅広い実験を行うことができる。Pythonだけでなく、他のスクリプト言語でも同様だろう。id:syohex さんが Perlで学ぶ「詳解 UNIXプログラミング」(その0) - syohex’s diary を書かれているので、Perlプログラマは参照されたい
ブラウザ上で動くnode.jsベースのTwitterクライアントOSS「Streamie」:phpspot開発日誌
Streamie ブラウザ上で動くnode.jsベースのTwitterクライアントOSS「Streamie」。 node.jsベースのオープンソースなので、Twitterクライアントのよい見本となりそうです。（githubにてソース公開) ちょっと作ってみました的なものではなくてTwitterの機能をフルで使えるのも特徴 単に利用するだけでも便利そう。新しいツイートもリロードなしに見ることができます UIもCSS3等を使ってデザインされていてリッチかつ、それなりに洗練されています ＵＩやnode.jsの教材として、あるいは単にTwitterクライアントとして活用することができます。 関連エントリ Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 Twitterで使わ
【レビュー】grep(1)の正規表現をもっと使えるようになる7つのサンプル | エンタープライズ | マイコミジャーナル
Guides, HowTos and Tips for Technology Geeks - The Geek Stuff LinuxやFreeBSDなどのUnix系OSを使う場合に必須になるコマンドのひとつにgrep(1)がある。grep(1)は指定した文字列をファイルや標準入力から抜き出したり、またその逆の処理を行うなどの目的で利用されるコマンド。特定のキーワードを指定してファイルを特定するために利用されるほか、コマンド出力を加工したり、データを加工したりといった用途で使われている。 grep(1)はキーワードの指定に正規表現を指定できる。正規表現はgrep(1)の活用範囲をきわめて広くする重要な機能であり、grep(1)の基本的な使い方をマスターした後にぜひ習得しておきたい機能といえる。The Geek StuffのAdvanced Regular Expressions in Gr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
http://designaholic.cc/2012/12/webpage-layers.html
deconcepter.jp