2019-10-01から1日間の記事一覧
divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく比較的自…
<style> .container { position:relative; } .box { position:absolute; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body>
定義型リスト 定義型リストとは「ul」、「ol」リストと少し違い、 「dt」= 用語の指定 「dd」= dtで指定した用語の定義 「dl」= 「dt」「dd」を挟む例 <dl> <dt>レモン<dt><dd>酸っぱい黄色い果物</dd> <dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd> </dl> 以下の文を定義型リストを使ってマー…
https://codepen.io/ CODEPENとは？ 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブロ…
remを使ったフォントサイズ まずはremを使ったフォントサイズの指定を覚えましょう。 「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相…
レスポンシブWebデザイン（RWD）の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…
レスポンシブデザインとは？ レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…
ここの多くはwordpressのテキストで既に出て来た物がほとんどですが、よく使うwordpressテンプレートタグをまとめたので使ってみましょう。 ページファイルをカスタムテンプレート化する テンプレート化したheader.phpを呼び出す サイトのURLを表示 使用…
アイキャッチ画像をサムネイルをして表示させる場合 上記のテンプレートタグを使うと、imgタグごと出力されます。 投稿記事内の最初に使われている画像をサムネイル画像として表示させる場合 functions.php function first_post_image(){ global $post, $po…
自分で作った「page-about.php」をカスタムテンプレート機能を使って固定ページのaboutページと紐付けします。 カスタムテンプレート機能 カスタムテンプレート機能を使うには「page-about.php」の冒頭に必要な記述をします。 特定カテゴリーの投稿記事を呼…
