Youtube動画をiframeタグで埋め込めば、WEBページで簡単に動画を見せる事ができます。この動画の再生速度を自動的に変更するには、Youtubeが提供する専用API「IFrame Player API」を使います。IFrame Player APIによりiframe内にJavascriptで様々なコントロール制御をする事が可能になります。
開いているページと同じメニュー部分に違う色やスタイルをつける事で、今どのページを見ているのかがユーザーに認識されやすくなります。基本はjavascriptで対象のタグ部分を配列で格納し、繰り返し処理の中でhref属性とaタグ内のリンクが一致するものを定する仕組みです。class名を追加する際はDOM上の書き換えであり、HTMLソース上に直接入れないため共通メニューとして使い回せます。
ページ内リンクはWEBサイトでよく見かけますが、最近は固定フッターが画面上部にくっついているので、そこにリンク先が隠れる場合があります。リンクを押しても対象位置ジャンプしたのかユーザーがわかりにくいため、改善が必要です。cssならscroll-paddingを:rootに設定したりjavascriptを使う事で、画面上部から任意の数値分だけ下にずらす事ができるので、対象の見出しなどが隠れずに済みます。
サイズの違う文字を並べる場合、基本的には文字の下揃えで並びます。CSSのvertical-align: baseline;がデフォルトのためです。vertical-alignでmiddleを設定すれば、サイズが違う文字を高さの中央に揃える事ができます。これが効くのはインライン要素のみであり、ブロック要素には反映されません。ラインを揃えたい部分がインライン要素になっているかどうかに注意しましょう。
CSSで正円を書く際は、幅と高さを指定してborder-radius: 50%;と設定すればそのサイズの円が描けます。中の文字が2行になるときは絶対配置を掛け、上下は少し上に位置をずらして上下中央寄せするのがコツです。bootstrapのグリッドシステムなど幅が％単位で高さが無い場合は、javascriptで実寸幅を読み取り、その数値を高さとしてstyleで当ててやると正円を描画できます。
ブラウザキャッシュは表示速度を上げて負担を少なくできるので大変便利な機能ですが、更新した状態がすぐに確認できないデメリットがあります。ブラウザキャッシュの影響を受けない様にするには、metaタグをheadに挿入する、.htaccessに記述する、レンタルサーバーの機能を使う方法があります。特にno-cacheの命令は、変更されていない箇所はキャッシュを読込し、変更が合った箇所は新規に読み込むので有能と言えます。
テキスト文章をCSSスタイルで縁取るには、text-shadowプロパティを使います。横方向と縦方向（プラス数値・マイナス数値）の2つは必須で、次がぼかしの長さ（初期値0）最後に色指定ができます。「,」で区切って複数スタイルを適用できるので、8方向から丁寧に影をつければ縁取る事ができます。
パスは要素の場所を示すものであり、CSSやJS・aリンクなど様々な場所で使われます。パスは、ファイル位置で書き方が変わる「相対パス」、ローカル環境では確認できないが統一表記ができる「絶対パス」、URLを省略できるが環境設定が必要な「ルートパス」に分かれます。他にも昔は「./」の表記もあり、基本的には相対パスと同じですが、今でも多少使いみちがあります。
Wordpressサイトでも別ドメインへリダイレクトするなら、.htaccessへ記述をする方が良いと思います。Redirectionプラグインは個別リダイレクトができますが、全URLを転送するには膨大な手間が掛かります。.htaccessならドメイン配下のどの様なURLであっても、同じ位置にリダイレクトする事ができます。ただし記述がある限り元サイトを見る事・ログインする事はできません。
グローバルメニューである横並びメニューはPCモニター向けに設置されたメニューなので、スマホ版でそのままは使えません。画面幅の狭いスマホでもナビゲーションバーを横スクロールさせる事ができれば、スマホ向けボタンなどを準備する必要がありません。width: max-content;で折り返しさせずに全てを表示させ、overflow: auto;で隠れた部分を表示するのがポイントです。
BEMはBlock・Element・Modifierの3つの要素からなるCSSの命名規則で、block__element--modifierで並べたclass名で全体がすぐに把握できます。Blockはその内容を示す名称にし、使い回しできる様に独立させます。Elementの名称は重複して書いてもOKですがどんなに入れ子になっても子孫セレクタでは書きません。ModifierはElementの差分を表現する装飾子ですので、必ずElementのクラスの後に追加で記述されます。
CSSで六角形や六角形ボタンを作る方法を紹介しています。コードはコピペで使えます。正六角形の場合、beforeやafterの長方形を60度傾けて実現します。元の長方形の縦横サイズ計算が必要になります。六角形ボタンの場合、before・afterのborderで左右の三角形を作ってくっつけるのが主流でしょう。
CSSでHTMLテキストや特定の文字を枠線で囲む方法をご紹介します。divはブロック要素なので横幅一杯まで囲んでしまいますが、インライン化すれば文字部分だけを囲むようになります。1文字のみを正円で囲むには、文字の下にCSS疑似要素で作った正円を敷く形にしましょう。
CSSでHTMLテキストや特定の文字を枠線で囲む方法をご紹介します。divはブロック要素なので横幅一杯まで囲んでしまいますが、インライン化すれば文字部分だけを囲むようになります。1文字のみを正円で囲むには、文字の下にCSS疑似要素で作った正円を敷く形にしましょう。
Javascriptのwindow.locationオブジェクトを使って開いているWEBページのURLに関する様々な情報を取得する事ができます。Javascriptで取得するデータは基本的にユーザーには見せないので、コンソールパネルのログ画面で確認します。あえてWEBページに複数のlocationプロパティのログを表示させるなら、insertAdjacentHTML()メソッドを使うのが便利です。
CSSで見出しタグをデザインできれば、それだけ洗練されたWEBページへと近づきます。そのためにはbefore・afterの疑似属性を使いこなせるようになる必要があります。要素をclip-pathでアイコンに切り取ったり、Font Awesomeアイコンを使ったり、data-textをattr関数で呼び出したり、自由な長さの枠線を2本つける事もできます。
Font Awesome 6は無料版と有料版とがあり、無料で使えるアイコンは種類が限られています。KIT登録までは自動ですが、KITを使わずに実物をダウンロード利用する事もできます。css/all.cssとwebfonts/は必須です。デザイン的な装飾や、アニメーション等の様々なカスタマイズコードが用意されています（Pro版限定のものあり）。
お問い合わせフォームはブラウザの自動入力機能を利用するとユーザーの入力短縮になり、ストレス軽減につながります。自動入力機能はinputのname値を参照しているので、オリジナルのname値ではなくなるべく世界共通のname名称をつけるべきです。スマホデバイスではinputmodeを使って、入力する情報の種類に応じて最適な入力設定を用意しましょう。
自分のメールアドレスはWEBページ上に表示せず、お問い合わせフォームを設置するべきです。自動収集ツールなどにアドレスを取得されてしまうと、ウィルスや詐欺メールなどのスパムメールが大量に送られてきます。表示させるなら、暗号化する・文字列を変える・＠文字を変更削除するなど工夫をしましょう。
javascript DOMはブラウザ上のWEBデータ（Documentオブジェクト）に対して様々な変更を加える事ができるものです。WEBページの階層構造や各ノードを軸にして特定個所を検索し、追加や変更・削除などを実行する事が可能です。avascript DOMには様々なメソッドがあり、それを覚える事で様々な変化をさせる事ができます。
CSSのコメントアウトは、/**/で囲った部分をプログラムとして無効にする機能です。スタイルの範囲や特定セレクタとプロパティ部分のみを無効にすることができます。コメントアウトを使って管理者が迷わないようにCSS設定のメモや注意書きを入れるのが一番重要です。
font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。
px、em、rem、%、vwはWEBサイトの各要素のサイズを示す単位ですが、それぞれ意味が違います。pxのみ固定する単位であり、それ以外は他の数値により相対的に変換する単位です。emやremは自身および親要素のfont-sizeがベースで、%は親要素のサイズ、vwはブラウザ幅がベースです。
CSSのcalcは計算式を入れる事ができる利便性の高いプロパティです。固定した数値を設定するのではなく、環境に応じた値を出すのでケースごとに結果が違います。calcはカスタムプロパティなどとも連携できるので、利用用途は非常に豊富です。
CSSのbackground-sizeプロパティは、レスポンシブルに背景画像の表示サイズを調整する事ができます。通常、横長画像であればPC版はcontain、スマホ版はcoverを使うと100％で画像が収まりやすくなります。背景画像を入れるクラス名はbootstrapのグリッドと同列に入れ、幅の操作を任せる様にしましょう。
マウスオーバー時のエフェクト効果を10個紹介しています。基本的にはリンク線や効果を背景色・グラデーションで形成しているものがほとんどです。マウスオーバー時にその表示位置や大きさを移動させる仕組みが中心となります。
HTMLページをPDFに保存する方法についてご紹介します。ブラウザの保存機能を使うと簡単ですが、画像が映らない場合があります。PCページならオンラインツールがバッチリ保存できます。スマホページならiPhone等のプリント機能が便利です。
CSSは外部ファイルで読み込むのがセオリーですが、更新をすぐに反映させるなら直接記述もアリです。CSSは3つの要素でできています。セレクタ・プロパティ・値の3つです。CSSには優先順位があり、変更が反映されない場合はより優先された設定を探しましょう。
正規表現を使えば、一定条件の複数クラス名を全て対象範囲に含めたCSSスタイル設定ができます。正規表現には前方一致（接頭辞）・部分一致・後方一致（接尾辞）のワイルドカードがあります。HTML上では複数クラスを並べるのが主流なので、部分一致と併用した記述が望ましいです。
Flexboxのプロパティを全種類まとめてみました。親要素に設定するものと子要素に設定するものとがあります。bootstrapと比べても配置位置や順番などをコントロールするのにFlexboxは向いています。
サクラエディタのマクロはショートカットキーを割り当てて実行する事ができます。共通設定の「マクロタブ」で登録マクロにマクロ名を設定し、「キー割り当てタブ」でマクロ名にショートカットを割り当てます。ショートカットは複数割り当てる事ができますが、既に割り当て済みのショートカットを選ぶと元の割り当てが解除されます。
Can I useサイトで、CSSプロパティごとのブラウザ対応状況に関する一覧データが確認できます。現在はほとんどのブラウザでプロパティ対応が完了しているので、あまり気にする必要は無いと思います。Can I useサイトをWEBサイトに埋め込んだり、自分のサイトに限定したシェア確認もできます。
.htaccessでリダイレクトさせる際、通常パラメータ値はそのまま維持して転送されます。パラメータ値を維持しない場合は、転送先URLの末尾に「?」を付けましょう。QUERY_STRINGを使えば、特定パラメータ値を条件としたリダイレクトができます。
サブドメインは様々な区画を作る事ができ、それぞれ違うコンテンツを表示させる事ができます。レンタルサーバーによっては、自動でwww付きサブドメインが作られる場合があります。どちらも同じで良いのなら、.htaccessでリダイレクト設定を掛けて統一しましょう。
通信時は文字がそのまま送受信されるのではなく、付与された番号で通信がされます。文字コードごとに付与番号のルールが変わるので、それを揃えないと文字化けします。文字化けが起こるのは日本語部分のみ。htmlソースの半角英数字はASCII文字のため文字化けしません。
ページ内リンクはWEBページに付けられたid属性をめがけて設置されるリンクです。同ページ内・別ページ問わず別ウィンドウでもid属性の位置へとジャンプします。見出しが固定ヘッダーに隠れない様に、idに対しCSSで追記をしておきましょう。
WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。
inputのcheckboxのチェックマークは直接CSSなどで変更する事ができません。デザインを改変するにはinput自体は非表示にし、チェックマークをCSSで自作する事になります。labelタグを隣り合わせて、beforeとafter属性でチェックマークを作ります。
Form mailerはフリーのメールフォームCGIで、postmailとともによく使われるプログラムです。postmailと違って、別途モジュールファイルをダウンロードする手間は掛かります。しかし複数のメールフォームを一つのCGI管理画面で運営できる利点があります。
CSSやJSを使ったポップアップ効果を出すサンプルおよびコードを紹介しています。CSSのみで実現する場合はinputのcheckboxのON・OFFを使ったものがCSSで制御しやすく便利です。JSも使う場合は、closedクラスを付け外しする形が簡単に実現できます。
CSSのgapプロパティは、要素間に適切な余白を作るプロパティです。Gridシステム・Flexbox・columnsレイアウトのいずれでも利用できる様になりました。marginやpaddingと違い、要素間には余白を作りますが外枠との間には作りません。
object-fitプロパティは、画像の元サイズとは違うサイズを指定した場合の表示コントロールに使います。imgタグを囲む親要素に対してではなく、imgタグに対して直接CSSでサイズ指定します。設定により拡大縮小・トリミング・縦横比などの度合いが変わります。
CSSでは様々なグラデーション効果や影・図形要素などを生み出す事ができます。洗練されたデザインにするためには、膨大な手間と専門知識が必要になるのは間違いありません。そこで視覚的な確認と生成が簡単なジェネレーターツールを紹介します。
CSSでパネルの端を奥に折り曲げるギミックを紹介します。before要素で土台と同じ背景を少し外へ伸ばします。after要素で少し暗めの同系色の四角形を適切な位置へ移動させ、三角形に整形します。
placeholderはフォームフィールドへの入力ガイダンスに使われます。CSSで工夫すれば、フォーカス時にplaceholder文字を消さずに見出しとして代用できます。カーソルが外れたら元のplaceholderの位置に戻るので大変便利です。
CSS Paint APIとは、CSSの背景や枠線の描画をjavascriptでプログラム描画する機能です。描画した図形画像をアニメーションさせたり、受け取るパラメータによって変更したりする事もできます。JSで描画するのでプログラム知識が必要になりますが、高度な演出が可能になります。
WEBサイトのスマホ対応をさせる場合、レスポンシブルデザインとスマホ専用ページの他にもう一つあります。ユーザーエージェントを判別し条件分岐でhtmlソースコードを出し分ける方法です。URLは変わらないのですが更新の手間が2倍になり、ソース量が増えるので負荷も掛かります。
CSSでネオンサインの様にテキストを蛍光色で発光させる方法をご紹介します。text-shadowプロパティで複数の数値設定をする事で、深みのあるリアルな蛍光色が出せます。@keyframesを使って蛍光色にちらつきや脈動などのアニメーション効果を付けるとよりリアルになります。
aタグのリンクが効かない場合の対処法をご紹介しています。他に考えられる原因が見つからない場合は、javascriptを疑ってみましょう。共同開発時や他人の作ったテンプレートを改変する場合はjavascriptを修正する事で解決する場合が多いです。
CSSのrotate()やscale()関数を使って画像などの要素を上下左右に反転させる事ができます。常時反転以外にユーザー動作時（マウスオーバー時）に反転させるとお洒落です。rotateや奥行きを出すperspective、滑らかにするtransitionを駆使して様々な回転演出が可能です。
jquery（javascript）により要素へのCSSクラスの追加変更、プロパティ単位での追加変更ができます。プロパティは複数の追加や変更・削除が可能です。CSSファイル自体をjqueryで差替える事もできます。色合いを変えた複数のスタイルを切り替える場合に便利です。
HTMLメールは通常メールと比べてデザイン性が高く、特にスマホ端末で訴求力が高いと言われています。HTMLメールは表示の統制が取れないので一昔前のテーブルレイアウトを中心にコーディングする必要があります。しかしHTMLメールはフィッシング詐欺などのツールになりやすいので、使うべきではないという意見もあります。
チェックボックスやセレクトボックスの選択条件に応じてその先の入力を制限（解放）する方法をご紹介します。タグ上のdisabledを把握し、javascriptで有効にしたり無効にしたりします。id属性なら固定の1か所、class属性なら複数個所のフィールドに制限を掛ける事ができます。
無料のお問い合わせフォームCGIなら「Post Mail」がおすすめです。設置が簡単でオーソドックスな構成です、必要な設定はinitファイルにまとめられています。エラー画面・内容確認画面・完了画面、メール文面、控えメール文面すべてカスタマイズできます。
:disabledはCSS疑似セレクタであり、ユーザーインターフェース欄を規制している場合に適用できるスタイルです。ユーザー操作をコントロールするため、一定条件を満たせば付け外しできる様にするのが一般的です。ユーザーに操作ができない事を視覚的に示せるデザインが用いられます。
CSSのdisplayプロパティには主に、block、inline、inline-blockの値があります。blockは余白やサイズの指定ができ、縦に並びます。inlineは余白やサイズ指定はできませんが横並びします。サイズや余白の指定が自由でありつつ横並びするのがinline-blockです。
srcset属性で画面幅ごとに表示する画像を選択でき、sizes属性で画面幅ごとに表示する画像のサイズを選択できます。記述子を「w」指定する場合、解像度は「1x」で計算されるので、Retinaディスプレイ向けの2x時の画像指定をするべきです。割合指定は全て画像の幅に対してではなく画面の幅を100％とした場合の割合である事に注意しましょう。
背景画像の枠部分をCSSでぼかすデザインの作り方をご紹介。ポイントは土台画像の下にbefore画像を敷いて、それぞれのbackgound-clipを土台はpadding-boxに、before画像はborder-boxにする事。土台画像のborderを透過させれば、下のぼかし画像が領域差分だけ見えるのでぼかし枠になります。
画像がぼやけるのは作成サイズより表示サイズが大きくなっているためです。レスポンシブルデザインやリキッドレイアウトが主流のため、作成サイズ通りに画像を表示しにくいです。画像を使い回すなら大き目の画像を作りPCで等倍縮小させ、でなければ端末ごとに画像を準備しましょう。
cssのbox-sizingでborder-boxが設定されているとテキスト系の画像がぼやける場合がある。content-boxの場合、要素のpaddingやborderはwidth・heightに含まれないので、画像はサイズ通り映る。border-boxの場合、要素のpaddingやborderはwidth・heightに含まれるので、その分画像サイズが小さくなりぼやける。
モーダルウィンドウ（modal window）を実装する方法をご紹介しています。javascriptによるモーダルウィンドウはオリジナルjsやJqueryを使ったものがあります。CSSのみで実装する場合はウィンドウボックスにid属性を付け、指定された属性の:targetのスタイルでコントロールします。
transparentは要素を透明にするプロパティです。部分的に透明にする事で下の要素を表示させる事ができます。非表示ではないため、marginやpaddingなどの余白も含めて常に存在します。<背景色を透明にしたりテキストやborderを透明にする事で、様々なデザインを作る事ができます。
clip-pathプロパティはベースとなる要素を切り取る事ができ、切り取り範囲に沿ってテキストの回り込みが発生します。外周や円形、楕円形、多角形以外にもSVG画像を使えば複雑な形に切り取る事ができます。基本的にリンク範囲も切り取りされた箇所に変化します。
tableデータの量が多い場合、th見出しタグを固定すればスクロール時にデータを把握しやすくなります。thタグは縦方向・横方向・複数見出しの固定が可能です。一般的にはposition: sticly;が使われますが、flexboxを使った固定方法もあります。
BASIC認証を掛けたディレクトリ内にあるファイルは外からSSIで読み込む事ができずにエラーとなります。この場合SSI対象の読込ファイルをBASIC認証の外に出してやれば読み込みできます。認証エリアから外のファイル、或いは同じエリア内のファイルを読み込む事はできます。
テキストを1文字ずつ表示したり特殊なアニメーション演出で表示（消去・ループ）させるとカッコいいですよね。ページ上部のタイトルテキストなどに適用すればデザイン性が上がります。タイプライター的な演出や、消去する文字の操作、HTMLソースの挿入などができます。
サクラエディタで背景を黒、文字を白に反転させる方法をご紹介します。こうしておくと、通常の状態より目が疲れにくくなるのでお勧めです。色を反転できる箇所とできない箇所とありますので注意しましょう。
タグの各属性や属性値に対して、idやclass属性を付けずにCSSでスタイル設定をする事ができます。属性値の条件指定や複数属性スタックの機能もあり、コード量の節約・管理のしやすさにつながります。様々な属性に適用でき、HTML上のインラインスタイルを上書きする事もできます。サイトの検証にも利用できます。
affix、sticky、flexboxで固定サイドバーを実装したサンプルをご紹介しています。基本的にはposition:stickyを使うのが無難でしょう。bootstrap4には固定を指定できるユーティリティが用意されています。いずれもPC版専用であり、スマホ版では機能を解除していますので固定はされません。
CSSのattr関数を使うと、本来CSSのcontent:で記述する文字情報をHTMLの中から読み込む事ができます。attr関数を使う事でCSSの本文であるデザインと構造の分離が守れます。HTMLソースを計量化でき、修正などもHTML側だけで済み、CSS管理もしやすくなるメリットがあります。
画像を使わずにCSSのみで背景パターンを構成する方法を7つのサンプルを使って紹介しています。ポイントはrepeating-linear-gradient()やlinear-gradient()を複数重ねる事です。その際重ねる位置をずらしたりtransparentで背景を透明にする事で、様々な模様が構成できます。
CSSとjavascriptを使ってインタラクティブなラジアルトグルメニューを作ります。scale(0)とscale(3)を行き来して円形メニューを拡大・縮小し、rotate(45deg)とrotate(0)を行き来してプラスマークを回転させます。メニューとなるアイコンや画像はscale(3)の時に原寸になる様、元設定では3分の1でサイズ設定をしましょう。
CSSのみで作るレスポンシブル固定ヘッダーメニューの作り方をご紹介しています。基本はスマホ版から作り、min-width: 680pxでPC版・タブレット版の設定を後から掛けています。メニューのスライドは画面端から真正面へ移動する動きをCSSで滑らかにしているだけ、PCやタブレット版のメニュー配置はgrid-areaを利用しています。
javascriptでレスポンシブルデザイン対応のナビゲーションメニューを作る方法を紹介します。メニューが上下に展開される動作は、CSSのtranslateY();、easing、opacityプロパティが担当しています。javascriptは、ボタンを押した時にtranslateY();などの数値を変更したactiveクラスを付け外しするために使われています。
XMLhttpRequestオブジェクトは、ページを再読み込みせずにデータの送受信をおこなえる便利な機能です。対象データはtxt形式・XML形式・json形式と様々なデータをやり取りする事が可能です。取得したデータを抽出したり加工したりする事でパフォーマンスを維持しつつ自在にデータを操作する事ができます。
本記事ではhtmlとCSSのみで作る帯グラフ（棒グラフ）、javasciptライブラリを使った棒グラフの実装方法を紹介します。HTMLとCSSでの手作りも良いのですが、ライブラリが豊富にあるのでそちらを使った方が簡単に実装できます。最近のライブラリであれば、レスポンシブルデザインに対応している事もメリットです。
CSScontainmentは動的コンテンツの内容変更による再レンダリングの負担を軽くする機能です。開発者がCSSを使って封じ込めする要素をブラウザに指示する事で、再描画パフォーマンスを向上させる効果があります。封じ込めには通常以外に、描画させない封じ込め、サイズ的な封じ込め、スタイル的な封じ込めなどがあります。
CSSのセンタリングに関する記述方法をまとめています。水平方向のインライン要素・ブロック要素、垂直方向のインライン要素・ブロック要素、さらに水平垂直方向のインライン要素・ブロック要素という流れです。それぞれ単一要素・複数要素のバリエーションまで紹介しています。
javascriptによるリダイレクトはブラウザで実行される機能です。サーバー側HTTPリダイレクトが使えない場合の対応です。301リダイレクトではないので、ページ価値を100％転送先へ継承できません。リダイレクトコード生成ツールを使えば、アクセス解析のリダイレクト元記録を外したりリファラーURLを継承したりできます。
今回はSF映画で出てくる様な光沢のあるアニメーションパネルの紹介カードをHTMLおよびCSSで設計します。本記事を通してFlexboxの基本やネストされたFlexbox、CSSアニメーション、境界線、シャドウ、その他使用されるCSSプロパティについておさらいしましょう。
tableのデータやリストデータを昇順・降順に並べ替えるJS・HTML・CSSファイルによるソート機能をご紹介。実装はとても簡単で、複数のテーブルやリストのデータを各項目ごとに並べ替える事が可能。ただし漢字は意図する様には並ばないので、初期設定で自然な並びにしておく必要があります。
マークダウン（Markdown）とはオンライン文書の文書構造を下書きの段階から明示できる記述法です。簡単な記号をつけるだけで、HTMLタグを打たなくても見出しや文章・箇条書きなどの構造を明示できます。ほぼ共通の記述ルールなので共有しやすく、HTMLへもすぐに変換できるアプリが数多くあります。
シンボリックリンクはコマンドプロンプトで作成するソフトリンクの1種であり、本体ファイルに対し別名パスでアクセスできるリンクです。ハードリンクと違いファイル（窓口）自体を増やす訳ではなく、実物が消えるとリンク切れします。他のネットワークPC上にも作れます。
javascriptとCSSを組み合わせた標準WEBカレンダーを実装する方法をご紹介しています。カレンダーを構成する全ての箇所を自由にカスタマイズしてみる事がマスターへの近道だと思います。javascriptを導入する際コピペしただけでは動かないサンプルもありますので、注意が必要です。
パララックスWEBサイトとはパララックス効果による視覚的PRを目的としたWEBサイトの事。WEBページ上に奥行の概念を持たせ、各要素の奥行きの視差により立体的な演出効果がある。htmlとCSSのみで実現したparallax例を通してその仕組みについて解説します。
CSSのmargin設定において思う様に間が空かないのは、マージンの縮小（折りたたみ）が発生しているからです。マージンの折りたたみが発生するケースはおおよそ決まっており、CSSの仕様なのでそれ自体を解消する事はできません。上記の様な様々な解決法があるので解決ルールを決めて情報共有して下さい。
完全にオフラインで保存できる、htmlとjavascriptを使ったtodoリストアプリケーションです。IndexedDBメインで主要ブラウザで稼働し、PC版Safariでも稼働するようポリフィル経由のWebSQLも導入。ネット回線を切っても稼働する様manifestファイルの読込も紹介しています。
z-indexは要素の重なり具合を調整するcssプロパティです。z-indexを効かせるには要素にposition: static以外の値を入れておく必要があります。重なり順はz-indexの数値の大小ではなく、親要素などが持つスタッキングコンテキスト次第です。
Scssを初めて使う人がゼロから開発環境を整えるまでの流れをご紹介します。Ruby・SassをインストールしコンパイルソフトはKoalaを使っています。開発環境のScssと出力環境のcssは分けて、Scssファイル自体もジャンル別に分割し、style.scssにimportする形で管理しています。
Basic認証はディレクトリ単位・ファイル単位・ユーザー単位で.htaccessファイルによるアクセス制限を掛ける機能です。パスワードはハッシュ値に変換して暗号化する必要があるので、ご自身で別途管理する必要があります。セキュリティ的には決して高いものではないので、多用は禁物です。通信自体を暗号化するためSSLを利用しましょう。
cssの円グラフはbefore疑似要素を半円グラデーション付きの親要素の上に重ねています。50％までは回転させてズレた分を利用し、51％以降はズレに加えてbefore疑似要素自体の色を変えてパーセンテージに利用。svgの円グラフはstrokeの間隔を円周程度までに広げてstrokeの幅でパーセンテージを表現。開始位置は-90度する必要あり
CSSのみで作る様々なデザインの吹き出しの作り方をご紹介しています。三角形部分は縦横0pxのdiv要素の枠線（border）で作られており、div要素のbefore疑似属性とafter疑似属性で表示しています。枠線付き・角丸・影付き、正円形、三角形を曲げたもの、画像付き、ギザギザなどいろいろできます。
WEBサイトのページに動画を埋め込むのはYoutube等の別サイトの動画をiframeでリンク表示する方法とvideoタグを読み込む方法があります。Youtubeは特に問題はありませんが、videoタグは動画ファイルの種類の影響で再生できない場合の準備が必要です。動画を埋め込む時はファイルの重さ、そして初期設定で音が鳴らない様に注意をしましょう。
ホームページは更新作業をしてもすぐには反映されない場合があります。これはブラウザのキャッシュが保存されているからです。F5を押す・スーパーリロード・キャッシュクリアなどすれば、新しい情報に更新されますが手間が掛かります。CSSや画像・JSファイル名の後ろにクエリ値を入れれば新しく読込してくれます。しかし毎回新規読込は避けましょう。
画像の解像度とは画像サイズ1インチあたりのドット数で決まり、dpi単位で表します。WEB上で使う画像は72dpiです。印刷物はフルカラー印刷で350dpi位の解像度が必要です。高解像度モニターには画像サイズで対応するのでWEB画像の作成に解像度を考慮する必要はありません。Windowsの場合はjpg出力時に96dpiになる事は知っておきましょう。
CSSとhtmlだけで作るアコーディオンと、JS（jQuery）を読み込んで実現する方法とをそれぞれご紹介します。アコーディオンメニューはスマホのような狭い画面範囲で情報を任意で表示でき、レスポンシブデザインのユーザビリティの観点から見ても重要な技術です。
Scss（Sass）はCSSを効率よくコントロールするためにRubyで作られたメタ言語です。Scssでは変数や入れ子などを駆使できるため、一括管理・一括変更が簡単でコーディングの手間が簡略できます。コードを書くにはRubyとSassそしてCSSに出力するコンパイルソフトが必要です。
mixhostで独自ドメインを設定する場合、「独自ドメイン.基本ドメイン」のURLも追加で生まれてしまう仕様があります。SEO対策のためには独自ドメインURLの正規化が必要になりますが、mixhostの場合は2セット分の設定が必要。cPanelで設定するよりも、.htaccessに2つのURLをまとめてリダイレクト設定してURLの正規化をしましょう
.htaccessの設定時にエラーが出て動かない場合、それを解決できる可能性のあるポイントをまとめてみました。ファイル名や記述ミス、Basic認証時のhtpasswdファイルの絶対パス、改行コード、パーミッションなど様々な原因が考えられます。落ち着いて一つずつチェックをしていくよう心掛けて下さい。
.htaccessはアドレスバーのURLをそのまま変更することなく、違うページやディレクトリを表示させる事が可能です。[R=301,L]や[L]のフラグ表示で、外部転送や内部転送などリダイレクトの種類を変更できます。設定されているフラグや条件記号をおさらいしましょう。
.htaccessのAddTypeやAddhandler構文を使えば、htmlのURLのままphpやcgiプログラムを実行する事ができます。MIMEタイプでファイルの種類と関連付ける内容を設定すればhtmlファイル上でも問題なく動きます。AddTypeやAddhandlerはセキュリティ上問題があるので部分的に利用するようにしましょう。
更新頻度が低く量量が大きいファイルはhtaccessにブラウザキャッシュを設定して高速化しましょう。逆に更新頻度が高いファイルはユーザーのためキャッシュをさせないでおくべきです。キャッシュ以外にgzip圧縮やmod_paegspeedが併用できれば、より表示速度UPにつながります。
.htaccessファイルによるgzip圧縮は画像以外の構成ファイルを圧縮する事でWEBサイトの表示速度をアップさせる手法です。表示速度が劇的に上がる場合があり、表示速度が向上すればSEO対策も有利に働きます。mod_deflateが使えるサーバーであればサーバー側が圧縮をしてくれるが、使えない場合は自前で圧縮ファイルを用意する必要があります。
.htacessファイルを使えばBasic認証などのアクセス制限を掛ける事ができます。Wordpressサイトのように物理ファイル・ディレクトリが存在しなくてもSetEnvIf構文を使って実現できます。ページ単位やファイル単位での制限・IPアドレス（国内・海外）の制限・クローラー巡回やキャッシュの制限など様々な事が可能です。
.htaccessのリダイレクトは非常に便利な機能です。様々なケースにおいてサーバー動作を操作する事ができます。301リダイレクトで転送元の価値をそのまま転送先へ継承する事ができますのでSEO・url正規化によく利用されます。一度目を通しておくべき正規化の表現記号をまとめていますので、コードをコピペで済ますだけでなくきちんと理解しておきましょう。
クライアントのWEBサイト更新の際にFFFTPの操作（アップロード・更新）が一切できない事があります。このようにルート権限が解放されていないデータへの操作の場合、FTPアクセスよりSSH接続をした方が更新できる場合あり。SSHとは何かSSH接続の方法やお手軽なターミナルソフト「RLogin」をご紹介。
HTMLサイトテンプレートをWordpressテーマ化する時の基本編。様々なデザインのHTMLサイトをWordpressサイトへ導入する事ができると同時に、Wordpressサイトの構成・仕組みを理解する事ができます。新規でWordpressサイトを制作するだけでなくWordpressへリニューアルする場合も活用できます。
Theme Forestからテンプレートを選ぶ10個のコツを紹介。まずは自分のFavoritesやCollectionsでオリジナルリストを作る事。掲載されているジャンルだけではマンネリしますので、全く別角度からアプローチするのもアリです。Wordpressテーマを選ぶときは、HTMLテンプレートからテーマ構築する方が良いと思います。
Theme Forest WEBサイトのユーザーアカウント作成の手順およびWordpressテーマやHTMLテンプレートの購入手順を紹介しています。海外サイトのテンプレート購入で不安があるかもしれませんが、Theme Forestでのテンプレート購入・利用には何の問題もありません。安心して購入・利用ができます。
Theme Forestは世界中のHTMLテンプレート・Wordpressテーマを販売している海外のWEBサイトです。高品質で非常に豊富な種類のテンプレートの中からイメージに合うものを購入・カスタマイズする事ができます。おすすめで安全安心、あなたのサイト制作バリエーションを一気に広げてくれます。
Wordpressがウィルスに感染した場合の対処法です。リダイレクトされてサイトが表示されず、ログインもできない場合はDBテーブル内にURLコードが書き込まれている可能性があります。リダイレクト元のURL（今回はdl.gotosecond2.com）を調べて削除し復活させる方法をご紹介します。
WEBイメージを作る場合に必要なPhotoshopメニュー項目をまとめてみました。内容はもちろん、すぐに呼び出せるようにキーボードショートカットを覚えておくと格段に作業効率が上がりますよね。
Photoshopのツールメニューはよく使う機能がまとめられています。その中でもWEBイメージを作成する際に良く使う機能は限られていますので安心して下さい。
WEBページのイメージ画像を出力するのはPhotoshopでは非常に簡単です。出力時は作業ファイルであるpsdファイルと出力用ファイルとを同時に作っていく事になります。
サクラエディタの正規表現を使った置換機能は大変便利です。さらに定例作業をマクロ登録しておけばいつでも読込・ショートカット実行ができます。
HTML WEBページの改行コードについては任意に改行をしたい時のみにbrタグを単発で使い、それ以外の基本はpタグなど段落単位で表現をするべきです。後はCSSを使って調整しましょう。
セキュリティの脆弱性やタッチパネルに対応していない等の理由で2020年末にFlashはサポートが終了。chrome等の各主要ブラウザは初期仕様ではFlashを無効のため、後は自己責任での表示になります。
すぐ使えるCGIのライセンス編をご紹介します。ユーザー登録をすればライセンスの即時発行・月額継続利用・デモツールの貸出・オンラインによるライセンスの移動などが可能になります。
すぐ使えるCMSのカスタマイズ編をご紹介します。記事詳細ページ（article.html）記事一覧ページ（article_list.html）短い記事一覧ページ（short_list.html）の順に、デザイン部分だけを変更します。
すぐ使えるCMSの初期導入手順をご紹介します。導入ができたら管理画面へログインして記事を投稿する事ですぐに使えるようになります。記事の追加・編集・削除・画像アップ・テンプレート再構築・htmlタグの挿入などが可能です。
WEBサイトTOPページの新着情報やニュースコラムの更新に私がよく使っていた大変便利なツール「すぐ使えるCMS」をご紹介したいと思います。今でも現役で使えて、構成がシンプルでカスタマイズしやすくSEO対策が自由に設定できます。
bootstrapのグリッドシステムでレスポンシブルデザインを実現するために考案されたのがprefix（プレフィックス）とブレークポイントです。各画面幅ごとの横並びレイアウトの実行・解除ルールを構成した基本的な仕組みです。
bootstrapの最大の特徴はPCスマホ一体型レイアウトが可能となるレスポンシブデザインです。表示している画面の幅（PCモニターやiPad、スマートフォン）に応じて、メディアクエリによりホームページの横幅レイアウトが自動可変する、SEO対策上も重要なシステムです。
bootstrap（ブートストラップ）は既に構築済みのテンプレートCSSで、グリッドシステムを利用した簡単に横並びレイアウトを構成できる優れものです。あらかじめよく使われるスタイルが定義してあるので、そのまま利用するだけできれいなデザインページが作成できます。
「SSI」Server Side IncludingはHTMLホームページの更新管理の際に大変便利な機能です。全ページに共通の記述部分を別ファイルにまとめる事で、一括更新が可能になります。SSIの準備や設定の仕方および注意などをご紹介します。
基本CSSファイル（ここではbootstrap.cssなど）の読込
個別のデザインスタイルを構成するCSSファイル（stlye.cssなど）の読込
レスポンシブデザイン向けの構成ファイル（responsive.cssなど）の読込
の順に記述するのが一般的です。
このカスケードというのは直訳しますと「階段状に連続する滝」となりますが、CSSの頭につくカス―ディングとはインターネット用語で「あらかじめ決められた優先ルールによって一番高い優先度指定が1つだけ有効になる仕組み」を意味しています。
今回はホームページの文字コードについてのお話です。ホームページには主に3種類の文字コードがあります。 Shift_JIS・euc-jp・utf-8この３つです。ホームページの上部にあるのタグ内に文字コードの設定箇所があり、それがそのページのベースとなる文字コードになります。
ホームページに必要なツール、意外にそんなに数は必要ありません。あれもこれもと用意するのは、自分のスタイルがある程度固まってからでOK！まずは最低限度必要なものがあれば、ホームページは作れますのでそのソフトをご紹介します。