【Boostrap入門】オシャレでレスポンシブなポートフォリオサイトの作り方
どうも初めまして、Webエンジニアのイソップ（@yuhiisk）です。 レスポンシブサイト制作では、ノウハウが必要だったり、確認や検証に時間がかかったりと、簡単そうに見えて実は大変です。 しかし、そんなにノウハウがなくても、Bootstrapを使えば効率的にサイトが作れてしまいます！ 今回は、Bootstrapを使って実際にポートフォリオサイトを作ってみましょう。 Bootstrapとは？ そもそもBootstrapは、CSSフレームワークと呼ばれるCSS、JavaScriptのパーツ集です。 Bootstrapの中にはボタンやナビゲーション、ドロップダウンメニューなどがはじめから用意されていて、それらを組み合わせることで、「簡単に」「早く」「効率的に」Webサイトを作ることができます。 また、モバイルデバイスを含めたマルチデバイス対応を考慮されているため、レスポンシブデザインのサイトを作
HTML - link要素の使い方 - linkとサーチエンジン
HTML のhead要素の中で使われる要素の一つにlinkがありますが、きちんと実装しているブラウザが少なく、入門用の解説書でもほとんど触れられていないので、存在もあまり知られていません（最近ではスタイルシートのために少しずつ使われ始めているような）。ここでは、その基本的な役割と使い方を紹介します。 link要素タイプ リンクタイプ linkとサーチエンジン 順方向リンクと逆方向リンク link要素タイプ アンカー（a）要素は、文書の本文であるbody要素の中で、文書の特定箇所にハイパーリンクの始点や終点を設定し、利用者がそのリンクをたどれるようにする役割を持ちます。これに対し、link要素は文書全体についての情報を記述するhead要素の中に置かれ、HTML文書を前後の文書、スタイルシート、スクリプト、代替文書などの様々なリソースと結びつける働きをします。ブラウザなどのユーザーエージェント
要するに DI って何なのという話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
友人から「しんぺいさん DI について書いてほしい」みたいな話をだいぶ前からされてたんだけど書く気力ずっとなかった。でも仕事の気分転換にちょっとずつ書いたやつがいい量まとまったので公開するです。たいしたことは書いてないっていうか知ってるひとにはあたりまえのことしか書いてない。サンプルコードはわたしの趣味で Scala で書いてあるが、Java が読めればなんとなく読めると思います。 DI ってなに Dependency Injection、日本語で言えば依存性の注入です。おしまい。 で記事を終えてもいいんだけど、そもそも依存性とはなんなのか、それを注入するとはどういうことなのか、なぜ DI が必要となるのかみたいな話をこれからします。 そもそも依存性ってなあに 例を出します。入力された文字列をもとにおみくじをひいて、その結果を twitter に投稿するプログラムにしましょう。 まずは普通
ログ集計システムを自前で作る - Y's note
Index ログ集計システムの要件 DB設計 データ保存方針 table設計 サーバ構成 Fluentd fluentd,fluent-plugin-mysql-bulk install td-agent.conf mysqlにデータが格納される事を確認する 集計用のバッチ その他 Table肥大化防止 可視化 ログ集計システムの要件 爆弾ログ処理班の@yutakikuchi_です。 ログ集計システムというものを作る時に皆さんはどのように対応していますか？ 以下の候補から要件のレベルで使い分けをしている人が多いと予想しています。ざっくりの評価ですが、導入難易度、正確性、可視化、リアルタイム、長期集計、スケール、運用費用という点で評価を書いています。 ツール 導入難易度 正確性 可視化 リアルタイム 長期集計 スケール 運用費用 リンク GA(スタンダード) ○ × ○ ○ ○ ○ ○ Go
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
BUZZ Blog-LABO
ワードプレスで記事を書いているとき、なぜかタイピングの文字が遅れて表示されることが起こった。 文章を打ち込んでも、表示さ ...
[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 –
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3
Rubyソースコード完全解説 / 青木峰郎
$Id: index.html,v 1.6 2004/07/20 23:08:12 aamine Exp $ この文書は書籍『Rubyソースコード完全解説』のHTML版です。 ただし初校段階の原稿をベースにしているため、 書籍では修正されている間違いが残っている場合があります。 予め御了承ください。 2004-02-16 に全章を公開しました。 目次 まえがき 序章 第 1 部「オブジェクト」 第 1 章「Ruby言語ミニマム」 第 2 章「オブジェクト」 第 3 章「名前と名前表」 第 4 章「クラス」 第 5 章「ガーベージコレクション」 第 6 章「変数と定数」 第 7 章「セキュリティ」 第 2 部「構文解析」 第 8 章「Ruby言語の詳細」 第 9 章「速習yacc」 第 10 章「パーサ」 第 11 章「状態付きスキャナ」 第 12 章「構文木の構築」 第 3 部「評価」 第
セキュリティ対策まとめ（2013年秋）
JOJOのアニメ第三部が正式に決まったそうですね！ 楽しみ～な、にわかファン Latin です。 最近のWordPress界隈ではAmazon Web Serviceが俄然盛り上がっておりますが、大好きなWordPressを守るため、セキュリティ対策をまとめてみました。 初期セットアップ・設定系の対策 データベースのプレフィクス（接頭辞）を変更する wp-config.php 内の「wp_」の接頭辞を任意のものへ変更します。 その場合、追加で以下の作業が発生します。 phpMyAdmin などを使い、データベースのテーブルネームを変更したカスタムプレフィクスに変更する。 options や usermeta テーブルなどの他のフィールドでも「wp_」プレフィクスが使われている可能性がある為、以下のクエリーを走らせてプレフィックスを変更する。 SELECT * FROM `myprefix_
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
nginxでステータスコード404,500,503時に特定の静的なファイルを表示する - taiyoh's memorandum
というメモ。 server { listen 80; server_name example.com; root /path/to/docroot; access_log logs/example.access.log main; location ~ ^/(js/|img/|css/|swf/) { index index.html index.htm; } error_page 404 /404.html; error_page 500 /500.html; error_page 503 /503.html; location ~ /(404|503|500).html { } location / { proxy_intercept_errors on; proxy_set_header Host $host; proxy_pass http://127.0.0.1:5000; }
Twitterブログ: 日本の皆さんにも「全ツイート履歴」が使えるようになりました
ご自分の過去のツイートを見たいと思われたことはありませんか？過去にどんなツイートを書いていたかがわかる「全ツイート履歴」機能が日本の皆さんにもご利用いただけるようになりました。 この機能はウェブのTwitterをご利用の方のみ利用いただけます。画面上部の黒いタブ部分にある歯車型のアイコンをクリックし、プルダウンメニューを表示します。メニューに有る「設定」をクリックし、「ユーザー情報」ページを表示します。そのページの一番下の方に「全ツイート履歴」があります。 この「全ツイート履歴をリクエストする」というボタンをクリックすると、Twitterに登録された時のメールアドレスに「ツイート履歴ダウンロードの準備ができました」というメールが送られてきます。このメールにあるリンクから飛んだページより、全ツイート履歴をダウンロードすることができます。登録しているメールアドレスが携帯メールの方は、パソコンの
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
atpages.jp - このウェブサイトは販売用です！ - atpages リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
インパクトファクターをつくったあの男が選ぶ世界の名著ベスト５０
ユージン・ガーフィールドと聞いて心当たりがなくとも、"Current Contents"（主要学術雑誌の目次総覧）、"Citation Index"（論文の引用・被引用の相互関係を示す索引誌）、そして"Impact Factor"(学術雑誌の影響度の指標のはずなのに、大学，学会や研究機関において業績評価への転用による誤用・悪用されている)をつくった男といえば、お分かりだろう。 学術文献の引用関係という、文献の内容が〈主〉とすれば〈従〉にすぎなかったものに光をあて（“The citation becomes the subject!”）、それを大量に収集・蓄積して再編集する、という実に単純な方法論は、やがて複雑に込み入り誰も見渡せなくなった知の世界の有り様を、たとえばその分野の研究の中心（最前線）とそのキーマンを、明晰に描き出すことになるのだが、最初から広く受け入れられた訳ではなかった。 そ
Webアプリケーションを高速化する50のトリック
MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時
開発スピードアクセル全開ぶっちぎり！日本よ、これがMySQL 5.6だッ！！
米国で行われているMySQL Connectというイベントで、ついにMySQL 5.6 RC（リリース候補版）が発表された。リリース候補版ということは、これが次の正式版になるということだ。MySQL 5.5は5.1から凄まじい進化を遂げたバージョンであった。だが、MySQL 5.6はさらにそれを上回る進化を遂げている！正直ここまでの進化を誰が予想しただろうか、いや誰も出来なかったであろう。これまで、α版が出たときから何度か新機能について紹介してきたが、今回改めてMySQL 5.6の新機能を振り返ってみようと思う。すべてまとめるともの凄い内容だ。興奮して夜も眠れなくなること請け合いだ。MySQLの進化が止まるのでは？などという心配は吹き飛び、もはやもうちょっと小出しにしなくて良かったのか？と心配してしまうレベルである。 それではMySQL 5.6の新機能について紹介していこう。 InnoDB
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mojoliciousドキュメント 日本語訳 - Github