プログラミングHTML&CSS

プログラミングHTML&CSSプログラミングHTML&CSS

このサイトは”WordPress”にテーマ”Cocoon”で作っています。ブログを書いて投稿・更新していくだけなら、このままで問題は無いのですが、運営していくうちにデザインの変更や機能の向上など、やりたい事が増えてきます。

そのために便利に使える”プラグイン”が用意されているのですが、もっと自由にカスタマイズしようとすると、サイトを形成しているプログラム(主にHTMLとCSS)を書き替えたり追記したりしなければなりません。

このサイトも、様々なサイトを参考にしながら”HTML”と”CSS”を使いカスタマイズしているのですが、プログラムの基本が理解できていないと難しい部分があり、カスタマイズを断念したこともあります。

このような事から”HTML”と”CSS”の基礎を記事にしていきます。

私自身の備忘のための記事になりますが、初心者の方の参考になれば幸いです。

プログラミングHTML&CSS

HTML&CSS|無料のWebフォントサービスを使う方法

「Webフォント」はデバイスにインストールされていないフォントでも簡単に実装できます。 テキスト部分を画像で制作するより、無料で使える “Google Fonts” は種類が豊富なので大変便利です。
プログラミングHTML&CSS

HTML|ファビコンを設置する方法と、さまざまなデバイスに対応してくれる”RealFaviconGenerator”

サイトを開くとパソコンの上に表示されるタブ。その右端にはサイトのブランドをイメージできるアイコンがあります。これを「サイトアイコン」または「ファビコン」と呼び、Webサイトのシンボルです。 Favicon(ファビコン)とは、Favorit...
プログラミングHTML&CSS

HTML&CSS|デフォルトCSSをリセットする

ブラウザには、それぞれ独自のデフォルトCSSが指定されている。 リセットしない場合、デフォルトCSSに上書きされるのでブラウザによって表示に違いがでる。 CSSをリセットする"ress.css" と "destyle.css"
プログラミングHTML&CSS

HTML&CSS|リストの作り方

HTML の<ul> <ol> <li> タグでリストを作る方法と CSS でリストマーカーの装飾およびリストのインテント、行間の調整をする方法。
プログラミングHTML&CSS

CSS|CSSグリッドレイアウトを使いこなす

グリッドの線番号や名前を使い自由にアイテムの位置を指定する方法と、簡単に聖杯レイアウトを作る方法。
プログラミングHTML&CSS

CSS|CSSグリッドレイアウトの基本

CSSグリッドレイアウト(CSS Grid Layout)はグリッド(格子状のマス目)にアイテムを好きな順番に配置したり結合したりするレイアウト方法です。 CSSグリッドを使うには flexox と同じようにグリッドコンテナと呼ばれる親要...
プログラミングHTML&CSS

CSS|アイテムの幅を調整する「frexプロパティ」

flexプロパティはショートハンド。flex-growプロパティは伸び率を指定し、frex-shrinkプロパティは縮み率を指定する。 frex-basisプロパティは基本幅を指定するが、主軸を縦に変更すると高さ指定になる。
プログラミングHTML&CSS

CSS|レイアウトを組む「Flexbox」

Flexbox(フレックスボックス)とは、「Flexible Box Layout Module」の略で、Webコンテンツを適切に配置できる機能で、CSSでレイアウトを組む上での基本になります。 (adsbygoogle...
プログラミングHTML&CSS

CSS|枠線を作る「borderプロパティ」

要素のまわりに線を引くことで、見出しの優先順序をわかりやすくすることや、グループ毎に線で区切ることが出来ます。線の種類・太さ・色などを自由にカスタマイズできるので、サイトを思い通りにデザインすることができます。 線の種類は「border-...
プログラミングHTML&CSS

CSS|余白を調整する「marginプロパティ」と「paddingプロパティ」

余白には画面を見やすくし、文章を読みやすくする大事なデザイン要素です。 要素から外側に余白を加える「margin(マージン)プロパティ」 要素の内側に余白を加える「padding(パディング)プロパティ」
タイトルとURLをコピーしました