HTMLのリダイレクト設定のコード
ページをリダイレクトさせたいときに書くコードをメモ。 headタグ内に下記の一文を書くのみ。 「content=」の最初の「0」 は、リダイレクトページから指定のページに遷移するまでの時間を指定しています。 少し間を開け・・・
コーディング
CSSのflexboxで最後の行を左揃えにする方法
先日、flexboxで上記のようなレイアウトを組みたいのに、最後の行が左揃えにならずに困りました。 justify-contentで左揃えにする値はあるのですが、どうも上手くいかないんですよね。 この記事では、上の画像の・・・
CSSで使用する単位remとem、そして%、pxの違いを解説
今回はCSSで使用できる単位について記事にしたいと思います。CSSで使用できる単位はいくつかありますが、それぞれがどのように違うかご存じですか。 正しく理解していないと意図した通りのデザインで表示されません。この記事では、HTMLやCSSを記述する上で、最初に覚えておきたい単位について説明します。
Atomで選択した範囲をHTMLタグで囲むショートカットキー
AtomでHTMLのコーディングをする際、タグを囲むショートカットキーがあると便利ですよね。 この記事ではタグを囲むショートカットキーの実装方法と使い方をご紹介します。OSはウィンドウズです。 Atomには、オープンソー・・・
WordPressで固定ページごとに違うページデザインやレイアウトを適用させる方法
ワードプレスで固定ページごとに違うページデザインにしたい時ってありませんか。 それぞれ異なるページデザインやレイアウトをテンプレート化して、固定ページに適用させることができます。 プラグインなど使わずとも簡単にできるんで・・・
HTMLコーディングで覚えておきたい特殊文字・機種依存文字
HTMLのタグって<html> こんな風に書きますが、タグとして認識させずにそのまま表示させたい時ってありますよね。 そんな時は、文字コードを使います。 この記事では、HTMLのコーディングをするなら覚えてお・・・
WordPressのページ内に外部HTMLファイルを読み込ませて表示させる方法
HTMLで言うiframeのように、ワードプレスのページ内にHTMLファイルを読み込ませて表示させる方法です。 ワードプレスの各パーツはPHPファイルでできていますので、PHPファイルにHTMLファイルを読み込ませて表示・・・
Emmetで選択した範囲をタグで囲むショートカットキー他
最近AtomにEmmetを入れてHTMLのコーディングをしています。 選択した範囲を簡単にタグで囲めるショートカットキーがあったので、自分のメモとして記事にします。 その他にも便利なショートカットキーを、少しご紹介します・・・
Atom超初心者：AtomでEmmetが効かない時に確認すること
会社ではDreamweaverを使っているのですが、自宅用にフリーの高機能なテキストエディターがないかと思い、いろいろ調べ、Atomを使ってみることにしました。 Atomの使用用途は、HTMLとCSSのコーディングがメイ・・・
CSSでtableをデザインする方法。border-collapse:collapse;でおしゃれな表を作る！
tableをちょっとおしゃれにデザインする方法です。 border-collapseと簡単なCSSで、上の画像のような表を簡単に作れます。 border-collapseプロパティは、隣接するセルを重ねて表示するか否かを・・・
aタグやspanタグなどインライン要素にmarginの上下が効かない！効かせる方法
aタグやspanタグなどのインライン要素に、marginの上下は効きません。 インライン要素をCSSでブロック要素に変えることで、marginが効くようになります。 この記事では、インライン要素にmarginを効かせる方・・・
CSSのmargin-topやmargin-bottomが効かない！marginの相殺とは
margin-topやmargin-bottomが効かず、意図した余白ができなくて困ったことってありませんか。 それは、もしかしたら「marginの相殺」が起こっているのかもしれません。 私はコーディングを始めたばかりの・・・
はじめてのgit(4). コミットしたファイルをリモートリポジトリにプッシュする方法(for Windows)
はじめてgitを使う方を対象に、gitの使い方について4回に亘って解説しています。 今回は連載4回目、最後の回になりまして、コミットしたファイルをリモートリポジトリにプッシュする方法について解説します。 前回、githu・・・
はじめてのgit(3). githubを使って新規リモートリポジトリを作成する
はじめてgitを使う方を対象に、gitの使い方について4回に亘って解説しています。 今回は、3.リモートリポジトリ（github）に、新規リポジトリを作成するところまでを解説します。 前回まではローカル、つまり自分のパソ・・・
はじめてのgit(2). ローカルリポジトリにコミット(commit)する方法(for windows)
最近、gitを使い始めました。 一つのWEBサイトを制作するのに複数人で作業することになり、ファイルの履歴管理をgitで行うことになったのです。 gitは便利なものであるはずなのに、使いこなすにはちゃんとした理解と慣れが・・・
はじめてのgit(1). gitをインストールして初期設定をするまで(for Windows)
WEB制作を複数人で行うことになったため、ファイルの履歴管理をgitで行うことになりました。 フロントエンドエンジニアは、CSSやjavascriptを学ぶと同時に、gitも必須学習と言われているくらいメジャーなツールで・・・
CSSで複雑なグラデーションを作る方法
CSSでこちらの画像のような、複雑なグラデーションの作り方をご紹介します。 作り方は、「描画モードと透明度を変えた複数のグラデーションを重ねる」だけです。 まるでイラレやフォトショでの作業のようですが、CSSで出来るんで・・・
CSSアニメーションでバウンドしたり回転したりいろいろ
CSSanimationとtransformプロパティを組み合わせた、面白い動きをご紹介します。 ちょっと変わった動きがあるだけで、リッチ感が増すと思うのでサイト作成の参考にしてみてください。 各コードをコピペで実装可能・・・
CSSのposition:absoluteとrelativeの使い方を理解する！要素を重ねる方法
要素を重ねて表示する際に、よく使用するのがpositionプロパティ。 topやleftなどとともに使って、自由自在な位置に要素を配置できる便利なCSSですが、 このpositionプロパティ、効かない、変な動きをするっ・・・
jQueryで滑らかにスーッと動く「上へ戻るボタン」を実装してみよう！
ページの途中や最下部で、ボタンをクリックするとページの一番上へ戻る「上へ戻るボタン」。 あれって、aタグでページ内リンクを記述すれば実装できます。 ですがこれだと一瞬で上へ戻ってしまって、ちょっとつまらないんですよね。 ・・・
