【HTML+CSS】ゼロから学ぶ!Web制作入門 #02 | 基本のタグ
「基本のタグ」とは、ページをつくるときによく使うタグのこと。本や新聞をイメージしてください。大きな見出しでタイトルが書かれ、小見出し、段落、写真が掲載されています。 Webサイトも同じように「見出し」「段落」「写真(画像...
「基本のタグ」とは、ページをつくるときによく使うタグのこと。本や新聞をイメージしてください。大きな見出しでタイトルが書かれ、小見出し、段落、写真が掲載されています。 Webサイトも同じように「見出し」「段落」「写真(画像...
このブログのようにインターネットに表示されているページは全て「特殊な言語」で構成されています。これが冒頭に出てきた「HTML」と「CSS」という言語です。 作成されたデータは「コード」と呼ばれ、通常「ページの裏側」を見る...
コーディングのときにクラス名に迷うことはありませんか?命名規則がないまま構成が複雑になると、管理ができず、いずれ破綻してしまいます。 コードの再利用やメンテナンスを考えるなら「BEM」と呼ばれる設計方法がおすすめです。理...
CMSサイトの構築には「動的生成」と「静的生成」の2つのタイプがあります。「Movable Type」は主に後者の特徴により、HTMLファイルを作成できる点で評価されています。 サーバーで読み込む必要がないため、サーバー...
Webフォントといえばモリサワフォントが定番ですよね。例えば、明朝体の「リュウミン」は名刺でよく使われています。MORISAWA PASSPORTを契約する方法もありますが、年間契約49,800円なので、ひと月あたり4,...
外部からログイン画面にアクセスされないよう制限をかけていますか?Wordpressで作られたサイトは専用のURLを入力すると管理者用のログイン画面が開いてしまいます。 情報の漏洩や改ざんを防ぐ第一歩として、ログイン画面へ...
画像加工と聞くとPhotoshopなどのソフトをイメージするかもしれません。実はCSSのfilterを使えば、「ぼかし」や「セピア」といったアレンジが値ひとつでできてしまいます! IEを除くブラウザの対応になるため、仕様...
画像にフィルタをかけるときは、CSSのスタイル指定がラクですよ。Photoshopなどのペイントソフトは元画像を加工することになるため、あまりおすすめできません。 画像の上に文字を置きたいときやサイトカラーに合わせたいと...
メディアクエリを書くときは、HTMLのheadもしくはCSSに記述する方法が一般的ですね。WordpressでHTMLの方法を使う場合は「header.php」もしくは「functions.php」のいずれかで設定する必...
スタイルシートやスクリプトファイルを読み込むときは、functions.phpに書くとheader.phpのコードがすっきりするのでおすすめです。 方法としては、 CSSは「wp_enqueue_style」、JavaS...
WordPressのテーマを使うとき、既存のテーマ名のままではオリジナリティに欠けます。実際にはクライアントさまの会社名などをテーマ名として登録することが一般的です。 今回は任意のテーマを元に子テーマを作成し、さらに新し...
WordPressのテーマを使うと開発時間が短縮されますが、オリジナリティを出すにはその分時間がかかるものです。「自作のテーマ」では自分に扱いやすい、デザインや機能も自由に決められるメリットがあります。既存のテーマに左右...
IR資料や申込書などをサイトで表示、ダウンロードする際に採用されるPDF形式の文書。画像の投稿とは違い、専用のプラグインか個別のリンクを設定することで表示できるようになります。 今回はプラグインあり、なし両方の対応をご紹...
自作のテーマを作成するときは、テンプレートタグを使う機会が増えますよね。特にWordpressはブログを運営するためのソフトなので、投稿日時の表示は欠かせません。 the_dateは投稿日時、the_timeは投稿時間と...
ヘッダーメニューやサイドバーを固定するときのプロパティといえば「position : fixed」ですが、「position : sticky」を使うと、同じ動作ができるのを知っていますか。こちらは指定した位置に到達する...
ブラウザで検索してページを開くと、タブの左にアイコンが表示されます。これはファビコンと呼ばれ、訪れたサイトのシンボルやイメージを設置しています。 例えば、任天堂公式ホームページではマリオのドット絵になっていました。ページ...