このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
「PHPで、どのようにオブジェクト指向プログラミングをしていくか」を解説する連載です。 PHPの基礎文法が知りたい方は、下記連載がお勧めです。 Web業界で働くためのPHP入門 PHPオブジェクト指向プログラミング入門（終）： PHPにおけるインスタンスの永続化と参照渡し、コピー 「PHPで、どのようにオブジェクト指向プログラミングをしていくか」を解説する連載。最終回は、「永続化インスタンス」の必要性とserialize、unserialize関数、インスタンスと「参照」、「浅い」コピーと「深い」コピー、cloneキーワード、マジックメソッド「__sleep()」「__wakeup()」「__clone」などについて解説。（2015/12/24） PHPオブジェクト指向プログラミング入門（5）： PHPにおけるインターフェースと抽象クラス、多重継承、トレイトの使い方 「PHPで、どのように
オープンソースのWeb開発向けスクリプト言語「PHP」の文法を一から学ぶための入門連載。最新版の5.5に対応しています。 こちらの連載の続きとしては、下記連載がお勧めです。 PHPオブジェクト指向プログラミング入門 Web業界で働くためのPHP入門（終）： PHPの名前空間とクラス名のエイリアス、オートロード オープンソースのWeb開発向けスクリプト言語「PHP」の文法を一から学ぶための入門連載。最終回は、クラスの論理的な入れ物である名前空間とクラスを自動的に読み込むオートロードを解説します。（2018/8/1） Web業界で働くためのPHP入門（19）： クラスを水平方向に拡張できるPHPの「トレイト」 オープンソースのWeb開発向けスクリプト言語「PHP」の文法を一から学ぶための入門連載。今回は、クラスに対して横断的に機能を追加できる「トレイト」について解説します。（2018/6/27
2018/05/07 バージョンアップ間近！ Movable TypeのメリットをWordPressと比較してまとめてみる。久々のバージョンアップを迎えるMovable Type。WordPressの陰に隠れて過小評価されがちなそのメリットをおさらいします。 WEBディレクター虎の巻tech tech 散歩 2018/01/10 フロントエンド開発の品質と効率向上のための私たちの取り組み複雑化・高度化するフロントエンド開発の課題を解決し、品質と効率を同時に向上する仕組みづくりを進めています。 tech tech 散歩 2017/12/19 なぜその文章に説得力がないのか？WEBライティングのここを見なおす。つまらなければ即離脱...のWEBだからこそ必要な、簡潔で説得力のある文章。どのようにすれば書けるのでしょう。 WEBディレクター虎の巻
We have been receiving lots of requests about adding a contact form to our library. Here it is! A minimal and customizable snippet to throw a semantic form into your web projects on the fly. There are some optional features (i.e. floating labels) that can be easily removed in case you want the form to be simpler. We included all common form elements like radio buttons, checkboxes, select, error me
こんにちは、デザイナーの姐さんです。 今回はPhotoshopの機能を使って、シームレスパターンを作成する方法をご紹介します。 ※この記事は2022年3月に編集部が情報を更新しました 芝生 1. 正方形の新規ファイルを作る 今回は300px×300pxの正方形にしました。 2. 写真を配置する カンバスいっぱいになるように写真を配置します。 3. カンバスサイズで写真を切り抜く 全てを選択（ctrl+A）→選択範囲をカット（Ctrl+X）→編集→特殊ペースト→同じ位置にペースト（Ctrl+Shift＋V）で芝生の写真をカンバスサイズで切り抜きます。 この手順をやっておかないと次の手順の「スクロール」がうまくいかないので、必ずやっておいてください。 4. 「スクロール」フィルタで写真を移動する 次に、先ほど切り抜いたレイヤーを選択した状態で、「フィルタ」→「その他」→「スクロール」を選択しま
Pagination A mobile-friendly pagination component, that can be easily customized using CSS or Sass. Pagination links simply allow users to surf through your content. A valid alternative is infinite scrolling, although it has strengths and weaknesses to be aware of. I know frameworks like Bootstrap let you create a pagination in seconds, however 1) not everybody uses frameworks or can use them for
各ツールの使い方や接続手順については割愛しますが、うまくログインできれば /home/vpsuser の場所に接続できると思います。 接続できたら、これからindex.htmlを作ってファイルをアップロードするわけですが、サーバーのどこにファイルをアップロードすれば良いでしょう？ 先ほどは、 http://xxx.xxx.xxx.xxx にブラウザでアクセスした時に「Apache 2 Test Page」が表示されましたが、自作のindex.htmlが代わりに表示されるようにしてみます。 http://xxx.xxx.xxx.xxx にアクセスされたときに対応するディレクトリは、サーバーのドキュメントのトップの位置に相当するので、ドキュメントルートと言います。 これは、デフォルトでは /var/www/html です。 SFTPツールでログインした最初の位置は/home/vpsuserです
Secondary Fixed Navigation A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other. A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. We see this effect a lot these days, a good exa
Points Of Interest Use this resource to highlight the points of interest of your products. Just a click to open a brief description of each point, allowing your user to get a deep and fast understanding of your product features. Let's say you want to showcase the best features of your new app, and you want users to learn what your app is capable of right from the design screens. A possible approac
Vertical Fixed Navigation A side navigation which allows users to easily browse the page, selecting one of its sections and smoothly scrolling to it. It doesn't necessarily replace the main website navigation, but comes in handy for pages packed with content. If your website pages have lots of content, users can have a hard time finding exactly what they are looking for. This vertical navigation p
Smart Fixed Navigation A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution. Web pages with a lot of content require a quick way for the user to get back to the top, where the navigation is (most of the time). Hence the old back-t
Vertical Timeline Today's resource is an easy to customize, responsive timeline. We used some CSS3 tricks and a bit of JavaScript to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal. We all are quite familiar with vertical timelines: all instant messaging applications use them. A current trend in web design is to use a similar structure, b
Secondary Expandable Navigation This simple responsive navigation lets users focus on few important menu items, while the entire navigation is still accessible, just one-click away. Navigations should always be accessible to users. But there are cases in which you don't have enough space in your header to show all your menu items, or you just want to give more relevance to some items rather than o
Back To Top This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages. This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed durin
こんにちは。デザイナーの藤田です。 久しぶりにPhotoshopのtips記事をお届けします。 皆さんは�“水しぶき”などの背景が透けた画像の切り抜きに苦戦したことはありませんか？ ただ背景を切り抜くだけだと、透明感をなかなか表現できませんよね。 そこで今回は、“水しぶき”などの透け感がある画像をみずみずしく切り抜く方法をご紹介いたします。 ※今回の記事で使用している画像は下記サイトのものです。 water splash http://nihongo.istockphoto.com/stock-photo-13225547-water-splash.php Psd Soda Can Mock-Up Template http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template Photoshopで“水し
一番大事な「カタログ」についてLightroomの扱いがちょっと厄介な理由は独自の「カタログ」という概念にあります。他のソフトにはない概念であるため、多くの人がここで躓くのですね。。 Lightroomを扱うにはまず、カタログという概念を理解する必要があります。 先ほど紹介した過去記事（Lightroomで実現する！写真管理を超高速化させる１５のポイント！）でも解説していますが大事なことなのでもう一度取上げてみます。 LRは写真では無くカタログを見る「カタログ」のことを紹介する前にまずは、いままで皆さんの多くが行ってきた写真の”フォルダ管理”についてみてみます。たぶんこんな感じで写真を管理していますよね？ 写真を撮ってきたら日付別のフォルダにその日の写真を保存して、その中で「いるもの」「いらないもの」を分けたり、RAW現像用やプリント用に写真をコピーしたりするあれです。 直感的にわかりやす
VPS(Virtual Private Server)を使ってWebサーバーを構築し、WordPressサイトを運用できるようになるまでの連載の2回目です。 前回(第1回目)は「サーバーってなに？」というテーマで、レンタルサーバーとVPSの違いや、数あるVPSのプランから、どのような基準で自分にあったサーバーを選択すれば良いか？などの基本的知識を説明しました。 今回は、VPSの申し込みから実際にサーバーにログインしてみるところまで説明します。 VPSの利用申し込みをしよう SSHを使うためには？ SSHクライアントソフトのインストール CUIの世界へようこそ OSをアップデートしよう SSHをもっと安全に使うために 一般ユーザーを作ろう sshサーバー設定を変更して、rootで直接アクセス出来ないようにする 1. VPSの利用申し込みをしよう さくらのVPS お申し込みのページ https
サーバーの扱いに慣れていない初心者の方を対象に、VPS(Virtual Private Server)を使ってWebサーバーを構築し、WordPressサイトを運用できるようになるまでの連載を始めます。 サーバーの構築方法については、中・上級者向けの情報は多く見つかりますが、 「初めてVPSに触れる方が、Webサイトを構築して運用できるようになるまでのノウハウ」 を体系的に解説しているサイトはあまり多くありません。 ネット上に存在している情報では断片的だったり、分からない専門用語が出てきたりして、途中であきらめてしまった方も多いのではないでしょうか？ 本連載では、初心者の方でも「これさえ読めばVPSを構築できる！」ように、初歩から丁寧に解説します。 「今までレンタルサーバーを使っていたけど、一歩進んでVPSに挑戦してみたい」という方のお役に立てれば幸いです。 本連載は以下の構成で5回に分け
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
