(注:2017/04/10、いただいたフィードバックを元に翻訳を修正いたしました。) はじめに 私はLinuxが大好きです。コンピュータとのやりとりが楽しくなるし学ぶことも多くなります。OSとハードウェアの基盤となる基本原則を学びたい人にとって、Linuxはとてもいい出発点と言えるでしょう。 ご存じのとおりLinuxとは大抵の場合プログラム(コマンド)を通してやりとりします。Linuxと他のUNIX系システムが持っている特徴は、コマンドラインと、パイプのコンセプトです。プログラムの提供する入力と出力を統合すれば、データを操作するのに非常にパワフルなプラットフォームになります。 Linuxのコマンド、プログラム、バイナリ(何と呼んでもいいのですが)の大部分は、/usr/bin、/usr/sbin/、/binそして/usr/local/binに存在しています。これらのディレクトリを見れば、プロ
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお,JavaScript初級〜中級をクイズ形式で網羅的に学習するためには,下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては,こちらを参照。 ピュアJSを極める: JavaScriptで,クラスを継承する方法 (複数のサブクラスから共通クラスのプロトタイプを参照する) JavaScriptでの例外設計 (throw,try-catch-finally構文のイメージと利用パターン) JavaScriptで,動的に追加されたイベントリスナの実行順序を保
Vimの最低限の操作 ファイルを開く $ vim path/to/file bashでTabを押すと補完が効く。 補完が効かないときは大抵タイプミスしている。 上書き保存して終了 Escを押してから:wq 保存しないで終了 Escを押してから:q! Vimのチュートリアルで勉強 $ vimtutor 画面移動 Ctrl+F/Ctrl+BでForward/Backに1画面分移動できる。 少しだけ応用編 文字の検索 /searchwordで検索、nで次へ、Nで前へ 文字の置換 :%s/from/to/gでfromに一致する文字をtoに全部置換。 色々オプションがあるらしいけどまだ全部覚えていないのと、エスケープが必要な文字が良くわかっていない。 行の挿入系 Oでカーソル行に新しい行を挿入して編集開始、oだとカーソル行の1つ下に挿入して編集開始。 単語を消して編集開始 ciw 会社で教えてもらっ
Gospin123 : Situs Resmi Infini Berlisensi Resmi Oleh PAGCOR GOSPIN123 merupakan situs resmi yang sudah berlisensi oleh Pagcor maka dari itu sering kali banyak para pemain merekomendasikan untuk bertaruh di situs yang aman dan gampang menang. Tempat bermain yang terpercaya tentu saja sudah di lengkapi dengan fitur canggih seperti RTP dan Akun VIP akan membuka peluang banyak untuk member meraih keme
前回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」では、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行った。 今回はWordPressの内部構造の話に触れながら、Dreamweaverを使ってWordPressを少しカスタマイズしてみる。 また、WordPressの作業を爆発的にはかどらせる「ショートコード」の作り方についても解説しよう。 WordPressのテンプレート(テーマ)の構造を知る WordPressではテンプレート一式を「テーマ」と呼んでいる。WordPressに限らずCMSであればテンプレートの大まかな考え方は似ている。というのも、できるだけ使い回して作業負担を下げ、作業をはかどらせようという工夫がされているからだ。 例えば、共通部品としては
ども、大瀧です。みなさん、EC2をバリバリ使ってますか?使いたいときにすぐ使える仮想マシンとして、開発・検証から本番まで幅広く活用されていると思います。 日頃EC2を業務で運用する中で、EC2インスタンスをコピーすると意図しない環境設定に変わってしまうというトラブルが度々あり、cloud-initというツールに拠ることがわかってきました。 「EC2インスタンスのコピーなんて、一旦インスタンスを作成したあとはあまりやらないのでは?」と思われがちですが、EC2独特の制限などもあり、実際の運用では思ったよりも頻繁にインスタンスのコピーが必要になります。インスタンスのバックアップ&リストアなどはイメージしやすいと思いますが、それ以外にも意外なケースとして以下があります *1。インスタンスのコピーは、AMI(Amazon Machine Image:インスタンスのバックアップ)を取得し、新規インスタ
RubyにはGemと呼ばれるサードパーティのライブラリが豊富に存在します。 Gemは大変便利なもので、こういう機能ほしいなと思った際に The Ruby Toolbox や RubyGems.org や Google で検索すると大抵誰かがその機能を持ったGemを作っていたりします。 gemを利用するのも、RubyGems.orgに登録されているものならば と入力することで利用可能となります。 Gemはだれでも簡単に開発でき、審査無しですぐに公開できるため、日々大量のGemたちがRubyGems.orgに登録されています。反面、長年保守されていないGemや品質の低いGemも大量にRubyGems.orgに登録されているのが現状です。 同じ機能を持ったGemも大量に登録されていたりして、どのライブラリを利用してよいのか迷う事も多々あります。 今回は弊社プロジェクトで実際に利用している、便利な
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック!基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト! テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
ガチのAWSド素人が年末に調べまくった、AWS関連のリンク集です。 まだまだ調査中なので随時追加する予定ですが、広深くてキリがないのと、年始一発目の目覚ましエントリということでいってしまいます! はじめた目的 多数のスタートアップにおいて、インフラ専門のエンジニアが付かなくても、小~中規模程度まではそのチームでインフラ面を完結できるようにしたい。 …ということで、今の時代に合わせて簡単・安価・拡張性・耐障害性…を満たす環境を考えるべく、ひたすら知識をかき集めることにしました。考えた構成などについては別途書きたいと思います。 また、遡って調べるほどに出来と進化速度に感心するとともに、情報消費期限がせいぜい2年だと感じ、ほぼ2年以内の情報をもってこのような臭ぇタイトルにしています。 目次 ドキュメント アーキテクチャ クラウド全般比較 クラウド性能比較 費用/スペック ネットワーク 基本インス
こんにちはPITEです。 今回は久々に本気を出して記事を書こうと思います。めったにないことです(おい 僕のブログ、Number333を読んでくださっている人には社会人、学生、ブロガー、ニートなどたくさんの職業の方がいらっしゃると思います。 その読者のうちきっと半分以上の方々は1度は「プレゼン」をしたことがある、またはこれから経験することになるのではないでしょうか?(ニートは知らん 「プレゼン」をする上ではもちろん「話の上手さ」や「身振り手振り」も大事ですが、それと同じくらい「資料(スライド)」も大事になってきます。話はその場限りですが資料はずっと残りますからね。 というわけで今回は「誰でも」見やすく綺麗なスライドを作る方法を8つのステップに分けて紹介していきます。 これであなたもプレゼンマスターや! 今回この記事ではデフォルトやネット上で入手できるテーマではなくオリジナルのテーマを作ってい
淡々と文字だけが続くプレゼン資料にうんざりした経験はありませんか?プレゼン資料は視覚にうったえてこそのもの。とはいえ、うったえ方にもやはりコツがあるのは事実です。決して高度な技術は必要ありません。ほんの少しのテクニックをおさえるだけでも、プレゼン資料の表現力はぐっと変わってきます。 文字組み 「文字組み」とは、字間やサイズを調整して、テキストが美しく、読みやすくなるように整えることを言います。普段なかなか意識しませんが、新聞・雑誌のタイトルや見出し、商品パッケージ裏の注意書きなど、あらゆるものに文字組みが施されており、人目を引いたり、内容を伝わりやくするうえで役立っています。プレゼン資料にもほどよく文字組みを取り入れることで、よりきめ細やかな表現ができるようになります。 記号や単位は小さな文字サイズにする 記号や単位は、数字部分に対して小さなフォントサイズを使用するとバランスが良くなります
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
作成:2013/10/15 更新:2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML5を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ 1.勉強になるテクニック/サンプルまとめ 基本知識 2.セレクタ 3.メディア クエリ 4.コーディング規約 5.フォント 6.CSSスプライト 7.アニメーション 8.正確なHTML使用方法 9.CSSハック 10.書き方/読み方 定番まとめ
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ! 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く