ページの共通部分を別ファイルにして読み込む はじめに Webサイトだけに限りませんが、メンテナンスがしやすいような構成にしておく方が良いです。 自分だけが使うならまだよいかもしれませんが、他の人もメンテナンスする場合は考慮しておいた方が良いです。 でないといつまで経っても自分がメンテナンスする羽目になり、自分がメンテナンスできなくなるとせっかく作ったもの自体使われなくなることになります。。それでは悲しい。 ページの共通する部分を決める 前回、ページをどう分割するかは決めました。そのうち、今回は次のふたつを共通部分にすることにしました。 「header」　　→　サイトのタイトル、メインメニューのボタン 「contents1」 →　サブメニュー（メインメニューを押した後にサブメニューを表示する） 共通部分を作る 共通する部分のページを作ります。常に表示されるサイトのタイトルだけ作ってみます。

なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ

初心者のためのjQuery 第1回 jQueryでできること 普段HTMLやCSSを中心にソースコードを書いていて、JavaScriptなどのプログラムには触れたことのない人を主な対象に、jQueryを解説します。まずは、jQueryでなにができるのか概観してみましょう。 jQueryでできること このシリーズでは、普段HTMLやCSSを中心にソースコードを書いていて、JavaScriptなどのプログラムには触れたことのない人を主な対象にしています。 まずはjQueryがどんなことができるのか、簡単なサンプルでみてみましょう。 特定の要素にいろいろできる ボタンをクリックするとidがhogeの要素に、赤い枠が付いたり、テキストが変わったり、要素が隠れたり、現れたりします。 <div id="hoge">sample</div> $('#hoge').css('border','3px so

a-blog cmsでは、Facebook、Twitterに加えて、新しくGoogleのAPIを使用してログインするログイン機能があります。Google、Facebook、Twitterの各サービス、a-blog cms のブログ、a-blog cmsのユーザーに必要な設定を行うことでこの機能が利用できます。 ハンズオン内容 Google API Consoleから「Client ID」と「Secret Key」を取得する facebook for developersから「Application ID」と「Application Secret」を取得する Twitter Application Managementから「Consumer Key」と「Consumer Secret」を取得する SNSログイン機能の有効化し、ユーザー毎に認証を行う 作業場所 Google API Conso

canonicalタグの重要性を正しく理解していますか？ canonicalタグは、「重複ページ」、つまり中身の同じページが２つ以上存在してしまっているときに、SEOへの悪影響を最大限回避できる機能を持っています。 canonicalタグを使わない、あるいは意味を正確に理解せず使用して結局重複ページをそのまま放置してしまうと、サイトに悪影響が生じます。悪影響の例としてはGoogleに「コピーコンテンツ」とみなされる事や、ユーザーがせっかく貼ってくれるリンク（被リンク）が分散してしまっている事などが考えられます。 本記事では重複ページの悪影響をcanonicalタグで上手に回避し、SEO対策に役立てる方法を説明します。 canonicalタグとは canonicalタグの役目を端的に言うと、重複ページが複数存在するときに「どのページ（URL）が最も大切か（代表的なページか）をGoogleに伝

あなたのサイトにはファビコン（favicon）を設定しているだろうか。 ご存知の方も多いと思うが、ファビコンとはブラウザのタイトル部分やお気に入り（ブックマーク）のリストに表示される小さなアイコンのことだ。 設置することで他のサイトと区別しやすくなるため、個性をアピールしたい場合は必ず設置したほうが良いだろう。 さて、この記事ではそのファビコンを簡単に作成する方法や設置方法をご紹介する。 表示されない場合の対処方法も書いたのでぜひ参考にしてみてほしい。 ＜目次＞ １：作成する上での注意点 ２：ファビコンの作成手順 ３：ファビコンの設置方法 ４：表示されない場合の対処法 １：作成する上での注意点 ファビコンを作成する上でいくつか注意することがある。 ・シンプルなデザインにする 表示されるファビコンはとても小さいため、あまり細かい画像は向いていない。 複雑なデザインにしてしまうとよく分

WEBデザイナーの弓削です。 WINDOWS10にてIE9やIE8を使ってホームページのデザインチェックを行おうと思った際に、 めちゃくちゃ困ったのでメモしておきます。 過去、その癖の多さから、 WEB制作者に数多ものトラウマを植え付けてきた（現在進行形） インターネットエクスプローラー。 その中でもIE9以下は、特に癖が強く、 他のブラウザでは問題なく表示しているのにも関わらず、 IEでは全く異なる表示をしてしまう・・なんてことが多々ありました。 多々ありました。 その上、IE利用者の割合は日本ではダントツTOPだったため、多くの場合においてユーザーに見えている画面は「IE」だと想定して制作する必要がありました。 それも最近ではスマホの普及のお陰もあってか、この縮図が大きく変わってきていますが、 依然としてPCユーザーにとってはIEもしくはWINDOWS10標準のEDGEの割合は少なくな

MISSION 多様な世界を活かす新しい仕組みをつくる 私たちは人種や国境を越えて新しい価値を共創し、 多様な世界を活かす新しい仕組みをつくることで、より豊かな社会を目指していきます。

サンプルページ position: absolute; は、基本的にページの最も端から数えて要素を配置するスタイルですが、親要素にposition: relative; を指定することで、その要素が基準点となります。 今回の例ですと、親要素であるsampleBoxにposition: relativeが指定されているため、sampleBoxの端がその基準点となります。また、そのポジションの指定にright: 0; とbottom: 0; が指定されているので、「右端から数えて0px」と「下から数えて0px」の位置に要素を配置する、という解釈になります。 要素内の文字数や画像のサイズが一定でない場合にバナーなどを配置する場合、このテクニックを使ってみてはいかがでしょうか。

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr

■HTML5とは？ コンピュータをよく使う人なら一度は耳にしたことがある「HTML」。HTMLとは、Hyper Text Markup Languageの頭文字を取ったもので、直訳すると「ハイパーテキストのための、（文章に）目印を付ける文法（言語）」という意味です。つまり、私たちが普段読み書きする文章の、見出し・段落・箇条書きなどの要素をコンピュータに捉えさせるための文法ですね。初期のHTML1.0が開発されたのが1993年、それからバージョンアップを重ね、1999年12月にバージョンアップされたHTML4.01が昨今までホームページを作る言語としてWebを支えてきました。 そして、2014年10月28日にHTML5が勧告されました。特に「HTML5」は今多くの注目を集めています。今回はHTML5を使って出来ること、従来のHTML4との違いをまとめました。 ■目次 1. どんなデバイスでも

しばらく、FAQ表示にはFAQ managerというプラグインを利用していたのですが、更新がストップしていたこともあり、代替プラグインをさがしていました。 使い勝手の良さそうなプラグインがあったのでシェアします。 この記事公開時点では日本語の紹介記事は初かなと思います。 FAQにプラグインを導入するメリットというのは FAQの並び替えがドラッグで出来る FAQのカテゴリ分け表示が可能 ショートコードで簡単表示 デザインを変更できる といったものがあると思います。これらにマッチしたFAQプラグインをご紹介します。 Flexible FAQ のダウンロードプラグイン名Flexible FAQ 0.2プラグインサイト[browser-shot width=”600″ url=”https://wordpress.org/plugins/flexible-faq/”]プラグイン ＞ 新規追加 ＞

カスタム投稿タイプとは 自分で投稿タイプをカスタマイズできる機能です。 例えば、通常の投稿はブログとして使い、それ以外にも「商品の紹介」や「ポートフォリオ」、「更新情報」などテンプレートとしてカスタム投稿タイプを利用できます。 つまり、通常の投稿記事とは形式や目的の違う記事を書きたい場合に効果的な機能です。 カスタム投稿タイプを作るには、主に下記の2つの方法がありますので、順番にご紹介します。 テーマ（functions.php）を編集する プラグインを利用する テーマ（functions.php）を編集する まず、ダッシュボード＞外観＞テーマエディターを開いてください。 次に、functions.phpを開きます。 ここで、下記のコードを入力し、更新します。 場所はどこでも構いませんが、筆者はあとで追加が分かりやすいように上の方に入れています。 なお、「//」以下はコメントアウト（メモ書

公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├