SSIでHTMLファイルをインクルードする | Recooord | Web制作で扱うコーディングスニペットを紹介
SSIとは「 Server Side Include 」の略になります。 HTMLのヘッダーやフッターを外部ファイルとして読み込みたいときに使います。 SSIを使用するには契約しているサーバーのSSIが許可されている必要があります。 もし使用できない場合はサーバーがSSIに対応しているのか確認をしてください。 .htaccessファイルにSSIを有効にするコードを記述する Options +Includes AddHandler server-parsed html .htaccessファイルに上記コードを記述して、サーバーにアップロードしてください。 1行目の「 Options +Includes 」はSSIを使えるようにする記述で、2行目の「 AddHandler server-parsed html 」はHTMLファイルに対してSSIを有効にするという記述になります。 HTMLファイ
日本のブラウザシェア率
Sorry, JavaScript is required to view Global Stats charts.
CSSで文章を複数の列に分ける方法 | 自動化する会社 オートプロジェクト
今回は例として、2カラムになるよう指定します。 2カラムにするには、column-countプロパティに2を指定すればOKです。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen. HTML <div class="inner"> <div class="column-list__title"> PC用ページとモバイル用ページのファイル共通化</div> <div class="column-main__detail"> <p> WordPressやBootstrapを使ったウェブサイトであれば、レスポンシブデザインのため、「PC用のページとスマートフォン用のページ」のように個別のページを作成する必要はありません。 しかし、レスポンシブデザインではないウェブサイトの場合、「スマートフォンからのアクセスはスマートフォン用のページにリダ
【CSS】gridでできるこんなレイアウト10選（grid関連プロパティ総ざらい）
IEがいなくなり安心して使えるようになった CSS Grid Layout (display: grid;)。 みなさん、使っていますか？ これまでに面倒だった記述が楽に書けるようになるのはもちろん、 要素数が増えたり減ったりしてもイイ感じに配置できたり、 ウィンドウ幅が変わってもイイ感じに配置できたりと、 Gridは レイアウトの対応力を高める強力な武器 となります。 Gridの便利さをお伝えするため、Gridの活用例をこれでもかと詰め込んだCodePenのサンプルを作成しました。 （ウィンドウ幅によって変わる仕組みもありますので、ぜひ別タブで開いてご確認ください） この記事では、ここで使用している個別の活用例10個を紹介します。 それぞれの項目の中では、どのようなプロパティで機能を実現しているか説明していきます。 （この記事にはほぼすべてのgrid関連プロパティが登場します！） 1.
CSSで三角形を作る2つの方法(clip-path、border使用)
ホームページやLPでは『次の項目へ』という意味で三角形が使われることが良くあります。 今回はclip-pathを使う方法とborderを使う方法の2種類で解説していきます。
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください） 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html
Gitリポジトリ内をgrepする git grep はシンプルで超便利 | DevelopersIO
Gitリポジトリ内を検索する機会はよくあると思います。git grepコマンドを使えば、git管理下のファイルのみを対象としてgrepができます。シンプルなコマンドですが、利便性はとても高いと思います。 「このメソッドって、どこで使われてるんだっけ？」 「その定数の定義って、値は何だっけ？ どこにあるんだっけ？」 「あのURLって、何箇所で使われているんだろう？」 Gitリポジトリ内を検索する機会はよくあると思います。 このメソッドって、どこで使われてるんだっけ？ その定数の定義って、値は何だっけ？ どこにあるんだっけ？ あのURLって、何箇所で使われているんだろう？ git grepコマンドを使えば、Git管理下のファイルのみを対象としてgrepができます。 シンプルなコマンドですが、利便性はとても高いと思います。 なお、grep対象はカレントブランチのみです。 目次 シンプルな例 特定
【CSS設計】今さら聞けないBEMの基本【初心者・入門】 – N.Y.C. Tech Library
今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。 「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。 その時は自分流のルールでいいかもしれませんが、後で編集するときやチームメンバーに読んでもらう時にわかりにくくなってしまうこともしばしば・・・。 だから、命名規則には広く普及しているCSS設計思想を流用するのがいいんです。 制作会社ではBEMや他の設計思想をベースにしたコーディング規約が設定されていることも珍しくないでしょう。 今回は初心者向けにBEMという命名規則の基本をご紹介します。 BEMとは CSS設計思想にはOOCSS、BEM、SMACSS、MCSS、FLOCSS、FLOUなどいくつかありますが、その中でもBEMはクラス命名規則として後続のCSS設計思想に取り込まれている有名なものです。
【CSS】flexで横並びの高さを揃える方法【divやliも可】
<style> .example{ /*コレ*/display: flex; /*コレ*/align-items: stretch; } .example>div{ border: 1px solid #999; width: 50%; padding: 10px; background: #cbe6ed; } </style> <div class="example"> <div>左<br>左<br>左<br>左<br>左</div> <div>右</div> </div> 「display:flex」は要素を横並べなどできるCSSです。 「align-items」はdisplay:flexとセットで使えるCSSで縦方向の位置を調節できます。 「align-items:stretch」を指定すると要素を縦方向に最大まで広げます。 これにより横並びの高さを揃えることができます。 なお「al
slickの矢印ナビをカスタマイズ方法を紹介しようと思う | Weblasts
slickは便利だけれども、進む・戻るの矢印ナビは初めて使う人にはわかりにくいハマリポイントだと思います。 そのまま使うとスライダー外部に出てくるので横にはみ出たり大変。 slickには独自の矢印ナビを作りやすくするオプションが用意されているので、そちらを使った方法と、デフォルトのまま操作する方法を紹介していきます。 CDNを使わない状態での対策例ですが、CDNを使っていてもだいたい同じ方法で行けると思います
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。 「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。
SlideShareとは〜使い方を徹底解説〜
展示会や社内勉強会に使ったプレゼン資料をネット上に公開しようとした時「PDFファイルで公開しても見づらくなるだけかも」と悩んだ事はありませんか。 PowerPointで作成した資料であれば、実際のプレゼン同様、スライドショートとして公開したいところでしょう。 今回は、資料をスライドショー形式で公開できる無料サービス*「SlideShare」*の使い方を紹介します。 SlideShareとは、世界最大規模のビジネス向けSNS「LinkedIn」が提供しているサービスであり、アカウント登録を行えば誰でも無料で利用できるようになります。 社内に眠っている資料がある方、社内勉強会の成果をネット上でアウトプットしたい方は参考にしてみてください。 SlideShareとは www.slideshare.net 「SlideShare」とは、スライドショー形式で資料を公開できる無料サービスであり、世界最
副業・フリーランスにおすすめのDiffツール8つを比較！無料で使えるものも紹介
この記事の要点Diffツールは2つ以上のファイルを比較し異なる部分を素早く見つけられるツールDiffツールによってそれぞれ比較できるファイルの数や種類、抽出できるファイルに違いがあるMacユーザーにはFileMerge 、WindowユーザーにはWinMergeがおすすめ 「修正前と修正後のファイルを比較したい」「バックアップ元とバックアップ先で異なるファイルを探したい」「差分ファイルを簡単に作成したい」などの悩みを解決できるのがDiffツールです。 Diffツールにもさまざまな種類や特性がありますので、その中からMacとWindowのOS別に、おすすめのDiffツールを紹介します。 無料で使えるものもありますので、Diff選びの参考にしてください。 Diffツール（差分ツール）とは？修正後のファイルを見て、どこを修正したのかわからなくなったことはありませんか？ 修正された箇所を見つけるに
macOSで2つのファイルの差分を確認するには？便利なdiffツールを紹介 | プログラミング入門ナビ by Proglus（プログラス）
You are here: Home / ツールの使い方 / macOSで2つのファイルの差分を確認するには？便利なdiffツールを紹介 はじめに ファイルの内容が更新されたとき、どこが変わったのかを確認したいと思うことはありませんか？ 日々の業務でテキストファイルやデータ列、ソースコードなどを取り扱っていればそのような機会も多いでしょう。 この記事では、macOSで2つのファイル間の差分を確認するための方法を紹介します。 ファイルの差分とは ファイルの更新前と更新後ではファイルの内容が異なりますが、変更が加えられていない部分は同じままです。このような場合に、更新前と更新後で異なる部分をそれらのファイルの「差分」と呼びます。 ファイル更新のたびにファイル全体を見直していては効率が悪いですね。そのため、変更があった部分だけに注目して内容を確認したいというケースがよくあります。 ファイルの差分
【Mac】WinMergeに1番近いMac用高性能Diff（差分表示）アプリ「CompareMerge」（日本語対応） - Web関連あれこれ
日本語対応で、サブフォルダごと比較、差分修正、書き込み編集ができて、データ抽出もできる！ 今回ご紹介する「CompareMerge」は「WinMerge」のMac版と言えると思います。 ちなみに、以前「FileMerge」をご紹介しましたが、日本語設定が不要、インライン編集ができるなどの点でこちらの方がオススメです。 今回ご紹介する機能は下記3点。 ・基本的なdiff機能 ・差分結果をhtml形式でレポート作成（修正した所を報告するのに便利） ・差分ファイルの抽出方法（納品ファイル作成に便利） 1年ぐらい前から使ってますが、納品ファイル作成、日付違いの原稿のチェック、他の人との共有データチェックなど大変重宝しております。 ▼ダウンロード http://sourceforge.net/projects/comparemergenosandbox/ ↓App store (こちらだと有料になり
Nunjucks (JSテンプレートエンジン) とGulpでHTML開発環境を効率化
こんにちは、Quidamです。 前回の記事「「JSテンプレートエンジンとは？」まとめると大変だった基礎知識」から考察が進み、JSテンプレートエンジン「Nunjucks」を社内標準として使用していくことになりました。ちなみにNunjucksの読み方は「ナンジャックス」です。日本人には何とも言いにくい…。「ナンジャックス」と真ん中にアクセントを置きそうですが、おそらくアクセントは先頭の「ナ」で「ナンジャックス」のよう。…どうでもいいですね。 改めて、今回はNunjucksとGulpでHTML開発環境を効率化する具体的な設定例をご紹介します。 ゴールと前提情報 この記事では、GulpとNunjucksで次のような環境を作る事をゴールとします。 Nunjucksを使って、ヘッダー／フッター／モーダルコンテンツなどの共通HTMLパーツを外部ファイル化し、各ページに合わせてアレンジできるようにする。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCode 連番の入力
SlideShare（スライドシェア）の使い方（2）：活用編
SlideShare（スライドシェア）の使い方（1）：登録編
