正しいHTMLでブログ執筆 | 吉田哲也ブログ
色んな方のブログを拝見していると、更新頻度も高く、内容も良いのにHTML的には惜しい方を時々見かけます。 ブログサービスやWordPressのテンプレート自体が間違ったHTMLを記載している場合もあるので、ブロガー本人では避けられない問題もありますが、色んな幅、高さのデバイスや仕様の異なるブラウザがある中でも読まれやすくするには、正しいHTMLを使う必要があります。 HTMLとは HTMLとはHyper Text Markup Languageの略で、簡単に言うと、ブラウザにwebサイトの文章構造を伝える言語です。 ここが見出しで、ここが段落、ナビゲーションはここ、という感じで、ページ内の構造を書いています。 昔はHTMLの中に見た目を整えるタグも記載していましたが、今では、CSSで見た目は整えることが推奨されています。 正しいHTMLとは？ HTMLも一つの言語なので、正しい文法というも
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
CSSで回転アニメーションを実現する方法を現役デザイナーが解説【初心者向け】
様々な回転方法と設定 アニメーションでよく見かける回転の動きについていくつか紹介します。 円上に動かす 一番よく見かける回転アニメーションです。ローディング画面などでよく使われています。 @keyframes rotation{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } 要素を平面で360度回転させます。 X軸で回転させる 鉄棒でくるくる回る動きのような感じです。 @keyframes rotation{ 0%{ transform:rotateX(0);} 100%{ transform:rotateX(360deg); } } X軸を基準に360度回転させます。 Y軸で回転させる X軸で回転させるのY軸バージョンです。 ご想像通り、XをYに変えるだけです。 @keyframes rotation{ 0%{
CSSで画像や文字を回転させる方法！transformプロパティ [ホームページ作成] All About
CSSで画像や文字を回転させる方法！transformプロパティCSSで画像や文字を回転させる方法を解説。CSSのtransformプロパティを使うと、HTMLに書いた要素を45度でも90度でも自由な角度で回転できます。transformの値にrotateを使えば2D(平面)で傾けられ、rotateXなどを使えばX軸・Y軸・Z軸を基準に3D(立体)で回転できます。Y軸で中心から180度反転させれば鏡文字も簡単に作れます。何かを回転させるCSSの書き方をご紹介。 CSSのtransformプロパティなら、画像や文字を丸ごと回転できる ウェブ上の文字や画像を90度回転させたければ、全体を画像化して加工するくらいしか方法がないと思われるかもしれません。また、文字や画像を45度だけ回転させたり上下や左右をひっくり返したりしたければ、やはり画像として加工するしか方法がないと思われるかもしれません。し
![CSSで画像や文字を回転させる方法！transformプロパティ [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/7534921d1d9b8306f639a9f1099886b63a9a5973/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F6%2F3%2F1%2F0%2Ftopimg_original.png)
HTMLによるファビコンの設定方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLによるファビコンの設定方法について解説しています。これはサイトを開いたときにタブに表示されたり、ブックマークを行ったときにタイトルの頭につけられるものです。ファビコンの作り方と設定方法を見ていきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
【画像で解説】Googleフォームの自動返信メールはなぜ来ない？設定する3つの方法 | formLab
イベント受付フォームやアンケート作成に便利な「Googleフォーム」。 無料で使うことができ、フォーム作成に必要な機能が多数備わっていますが、自動返信メールを送信する機能は標準では搭載されていません。 今回の記事では、Googleフォームに自動返信メールを簡単に設定する方法を、画像付きで詳しく紹介します。無料でできる方法なので、Googleフォームを使用している方はぜひ試してみてください。 自由度が高い自動返信メールを簡単に設定したいなら、formrunもおすすめです。 formrun（フォームラン）は、弊社が提供しているフォーム作成ツールです。 formrunの有料プランでは、送信数が無制限の自動返信メールを設定できます。自動返信メールの内容は自由にカスタマイズでき、企業のロゴやバナー、テキストリンクなどを設置可能です。変数も設定できるため、フォーム上で送信された情報をメール本文に挿入で
コーディング不要！Googleフォームのデザインをカスタマイズする方法 | formLab
Googleフォームは無料で簡単にフォームを作成できることから、企業のアンケートや問い合わせフォームなどに多く使用されています。 しかし、シンプルさが特徴のツールであるため、デザイン性や機能面に物足りなさを感じていませんか？企業の窓口として使用するフォームだからこそ、自社のイメージに合わせてカスタマイズが必要です。 Googleフォームは、コーディングの知識がなくても、一部デザインのカスタマイズや機能の追加ができます。 本記事では、コーディングの知識がなくてもできる、Googleフォームのカスタマイズ方法を解説します。 手軽にカスタマイズできるフォームを作成したいなら、フォーム作成ツール「formrun（フォームラン）」がおすすめです。formrunなら、専門知識がなくてもデザイン性の高いフォームを作成できます。 Googleフォームをカスタマイズする方法①プログラミングなしプログラミング
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する ｜ Tips Note by TAM
下記のような絞込み検索を jQueryで実装する機会があったのでご紹介します。 検索ボックスに文字を入力するたびにページ内の検索対象から部分一致するワードを絞り込んで検索結果エリアに表示します。 部分一致ですので、検索ボックスに“2”と入力すると“2”を含む『りんご120円』と『いちご220円』が検索結果に表示されます。 設定したスクリプトはこちらです。 searchWord = function(){ var searchResult, searchText = $(this).val(), // 検索ボックスに入力された値 targetText, hitNum; // 検索結果を格納するための配列を用意 searchResult = []; // 検索結果エリアの表示を空にする $('#search-result__list').empty(); $('.search-result__
CSSのflexで中央揃えにする方法【初心者向け】
初心者向けにCSSのflexで中央揃えにする方法について解説しています。flexboxはCSS3から追加されたレイアウト用のモジュールで、要素を簡単に揃えたりすることが出来ます。今回はflexを使って中央揃えにする書き方を見てみましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 CSSのflexで中央揃えにする方法について解説します。flexboxはCSS3から追加されたレイアウト用のモジュールです。 そもそもCSSについてよく分か
CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
![CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fd81d279134a62bc4badc391345ceb7051e7ee5/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466995529664s.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2/3 文字列を扇形にカーブさせたり円形に配置させる方法 [ホームページ作成] All About![2/3 文字列を扇形にカーブさせたり円形に配置させる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/edb7595cd3e4da1dbd2f5ebaa184a2f9926dfd9e/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F3%2F8%2F4%2F1%2F8%2Ftopimg_large.jpg)