WEB

html code

span要素でtext-alignが効かない!の解決方法

特定の部分を span 要素で指定して右寄せやセンタリングしたいと思ったのに、text-align が効かない! と困っている方へ。 原因と解決方法を説明します。 span要素でtext-alignが効かない原因 text-alignはテキストの水平方向の配置(右寄せ・左寄せ・中央揃え)を指定するプ【...続きを読む】
html code

fontawesome:基本的な使い方とヒント~大きさ・色を変える・その他もろもろ

Font Awesome ウェブアイコンの基本的な使い方をまとめました。 基本的な使い方~Font Awesome ウェブアイコンを使う準備 Font Awesome ウェブアイコンを使う方法は、CDN (Contents Delivery Network) を利用する方法とsvg (Scalabl【...続きを読む】
html code

HTML & CSS:著作権記号や円記号など特殊文字まとめ

ウェブサイト制作で使う頻度が高いと思う特殊文字をまとめました。 使う可能性が高い特殊文字 記号 読み方 特殊文字 (実態参照) 特殊文字 (数値参照) 説明 & アンパサンド & & ampersand © 著作権記号 © © copyright ® 登録商標記号【...続きを読む】
html code

リダイレクト:301(恒久的なURL変更)

301リダイレクト 恒久的にURLを変更になる場合は、301リダイレクト設定をして旧URLへのアクセスを新URLに誘導できます。 「このURLへのアクセスは、これからずっと永遠に次のURLに飛ばしてね」という転送設定なので、次のような場合には301リダイレクトを設定しましょう。 サイトのドメインを変【...続きを読む】
html code

fontawesome:WordPressサイトにプラグイン無しで導入する手順

Font Awesome をプラグイン無しで WordPressサイトに導入する手順を解説します。 WordPress 以外のサイトにも使えますよ。 Font Awesome アカウントを登録する Font Awesome のサイトを開いて をクリックしましょう。 最初からプロ版を登録するなら、 を【...続きを読む】
SNS & web services

Twitter:ナビゲーションがなぜか英語表記に!原因の心当たり無し… 日本語表記に戻したい!!

このサイトの twitter アカウントを今まで持っていなかったので、開設してみました! 初めてのことなのでちょっと右往左往していたら、さっきまで日本語で表示されていたナビゲーションが英語表記になっていてびっくり。 というわけで、twitterの表示言語設定変更手順についてまとめます。 表示言語を変【...続きを読む】
html code

HTML & CSS:ul、ol、liタグ~htmlで箇条書き~余白・インデントの調整【初心者向け】

html の箇条書き ul (unordered list) と ol (ordered list) の基本の使い方を別記事で説明しました。 マーカーから箇条書き項目までの幅や行間など余白を調整したいという方のために、その設定方法をまとめますね。 余白の調整については、ul (unordered l【...続きを読む】
html code

HTML & CSS:ul、ol、liタグ基本の使い方~htmlで箇条書き【初心者向け】

htmlで箇条書きを表示する ul、ol、li タグの基本の使い方を説明します。 箇条書きを入れ子に(階層化)する方法や、リスト項目行頭のマーカーを変更したり消したりする方法、ol の順番を降順に変更する方法が理解できると思います。 htmlで箇条書きを表示する方法 ~ ulとol htmlで箇条書【...続きを読む】
html code

HTML & CSS:サクラエディタのダウンロードとインストール手順

サクラエディタとは サクラエディタは日本製のWindows用テキストエディタで、フリーウェアとして配布されています。 フリーウェア(無料)なのに機能性が高く、htmlやcssはもちろんのこと、プログラミングにも使える優れモノ。 Webデザイナー志望者向けスクールとかでも高機能テキストエディタのひとつ【...続きを読む】
WEB

HTML & CSS:htmlタグまとめ

htmlにコードをそのまま表示したい! タグ 意味 説明 pre preformatted text(整形済みテキスト) preタグで囲んだ記述は、スペース・インデント・改行などをそのまま等幅フォントで表示 code code(ソースコード) codeタグで囲んだ記述は、ソースコードであることを示す【...続きを読む】
WEB

HTML & CSS:underline に不満足!下線にpaddingを設定したい!text-decoration

テキストに下線を付ける場合、css の text-decoration: underline を使うと文字と下線がくっついてしまって不満。 例えば、こんな感じ。 文字と下線の距離を調整するために、border-bottom を使おう! 仕上がりは、こんな感じ。 cssコードは以下の通り。 クラスを「【...続きを読む】
WEB

HTML & CSS:cssだけできれいな見出しを作る!シンプル編~

画像無しでcssだけでキレイな見出しを作る! 注)このページのサンプルcssには、異なるデザインをサンプルとして表示するため、サイト全体のcssを消すための記述を入れています。 サンプル1:見出しの両端にシングルラインを配置する 見出しの両端に1本線を入れる。見出し文が長くなると、両端の線は見出し文【...続きを読む】
SNS & web services

Instagram:パソコンからインスタに投稿したい? できるよ♪【2021年11月以降】

2021年11月より、WEB版Instagramに投稿機能が追加されました。 このアプデ前は、PCからインスタ投稿をするためにブラウザをデベロッパーツールでモバイル表示に切り替えなければならず、しかも、1度にアップできる投稿は画像1枚だけでした。 けれど、今は、ブラウザ設定変更不要。 複数枚の写真や【...続きを読む】
SNS & web services

Instagram:パソコンからインスタに投稿したい? できるよ♪

InstagramのWeb版は、メッセージ送信、検索、いいね、アカウントの変更などができますが、そのままでは、肝心の投稿はできません(><) パソコンで加工した動画をインスタにアップしたい… ブラウザのデベロッパーツール機能を使えば、パソコンからでも画像投稿できますよ♪ では、その手順などを説明しま【...続きを読む】